[html, css, js] Waar dummies nog meer iniatief gaan tonen! ;) #24

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_109636682
quote:
14s.gif Op donderdag 29 maart 2012 00:01 schreef BBQSausage het volgende:
updateGridSize(); staat in een onclick?

Maak van die onclick eens:
[ code verwijderd ]

En vang hem af in javascript;
[ code verwijderd ]

Vervolgens je parentId zo definieren:
[ code verwijderd ]

nee geen onclicks :P alles is met jquery.
upgradeGridSize wordt 1 keer aangeroepen per pagina refresh.


quote:
14s.gif Op donderdag 29 maart 2012 00:03 schreef KomtTijd... het volgende:

[..]

Ehm. Je bent een noob in jQuery maar bouwt er wel even een complete website mee zonder maar een regel HTML?
Ik ben 2 dagen geleden hiermee begonnen. Ik noem mezelf een noob ja ;)

Edit2 of 3: hier een screenshot van wat ik heb (voor de duidelijkheid).
Je kunt dus een wegen netwerk maken door drag&drop.

Dit is het menu wat ik bedoel:


[ Bericht 16% gewijzigd door #ANONIEM op 29-03-2012 00:10:50 ]
  donderdag 29 maart 2012 @ 00:11:30 #127
284294 BBQSausage
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
pi_109636981
Als je het online kan zetten, graag.
pi_109637069
quote:
7s.gif Op donderdag 29 maart 2012 00:11 schreef BBQSausage het volgende:
Als je het online kan zetten, graag.
Heb je een idee voor een gratis host? Er zijn namelijk wat custom dingen nodig qua JS.
Edit: Linkje hier
http://totalvamp.woelmuis.nl/gridedit.html

Edit2:
Ik heb het gefixt op de volgende manier:
1
2
3
4
5
6
7
8		$("<div></div>").attr('id',x+','+y)
                        .css({float: 'left',border: '1px solid black',width:(xSize)+'px', height:(ySize)+'px'}).appendTo('#wrapper')
                        .droppable({
                            drop: function(event, ui) {
                                $(this).append($(ui.draggable)
                                .clone()
//////////////////////////////////////////// deze regel erbij gezet
                                .attr('id', Math.floor((Math.random()*10000)+1))


[ Bericht 34% gewijzigd door #ANONIEM op 29-03-2012 01:10:15 ]
  donderdag 29 maart 2012 @ 01:20:14 #129
284294 BBQSausage
ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ
pi_109638753
quote:
0s.gif Op donderdag 29 maart 2012 00:14 schreef totalvamp het volgende:

[..]

Heb je een idee voor een gratis host? Er zijn namelijk wat custom dingen nodig qua JS.
Edit: Linkje hier
http://totalvamp.woelmuis.nl/gridedit.html

Edit2:
Ik heb het gefixt op de volgende manier:
[ code verwijderd ]

Ik heb het inmiddels ook opgelost, ik weet alleen niet of de rest dan nog werkt. id's met komma's erin zijn niet betrouwbaar, vandaar dat ik die er uit heb gehaald;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96		            var xSize = 100;
            var ySize = 100;
            var roadTypes = {corner : 'corner', left: '<---', right: '--->', up : '^<br />|', down:'|<br />v'};

            $(document).ready(function(){
                // How large the grid is
                var xGridSize = 10;
                var yGridSize = 10;

                $("<div></div>").attr('id','wrapper').appendTo('body');
                updateGridSize(xGridSize, yGridSize);

                $(function(){
                    $("#toolbar").draggable().tabs({width: "150px"}).resizable().css({float: 'right'});
                    //get roads
                    var roads = {"Traffic\\Roads\\Sides\\BottomSide":"http:\/\/totalvamp.woelmuis.nl\/Traffic\/assets\/img\/BottomSide.png","Traffic\\Roads\\Sides\\LeftSide":"http:\/\/totalvamp.woelmuis.nl\/Traffic\/assets\/img\/LeftSide.png","Traffic\\Roads\\Sides\\RightSide":"http:\/\/totalvamp.woelmuis.nl\/Traffic\/assets\/img\/RightSide.png","Traffic\\Roads\\Sides\\TopSide":"http:\/\/totalvamp.woelmuis.nl\/Traffic\/assets\/img\/TopSide.png","Traffic\\Roads\\Middle\\LeftClosed":"http:\/\/totalvamp.woelmuis.nl\/Traffic\/assets\/img\/LeftClosed.png","Traffic\\Roads\\Middle\\Plain":"http:\/\/totalvamp.woelmuis.nl\/Traffic\/assets\/img\/plain.png","Traffic\\Roads\\Middle\\RightClosed":"http:\/\/totalvamp.woelmuis.nl\/Traffic\/assets\/img\/RightClosed.png","Traffic\\Roads\\Middle\\xSingle":"http:\/\/totalvamp.woelmuis.nl\/Traffic\/assets\/img\/xSingle.png","Traffic\\Roads\\Middle\\ySingle":"http:\/\/totalvamp.woelmuis.nl\/Traffic\/assets\/img\/ySingle.png","Traffic\\Roads\\Corner\\BottomLeft":"http:\/\/totalvamp.woelmuis.nl\/Traffic\/assets\/img\/BottomLeft.png","Traffic\\Roads\\Corner\\BottomRight":"http:\/\/totalvamp.woelmuis.nl\/Traffic\/assets\/img\/BottomRight.png","Traffic\\Roads\\Corner\\TopLeft":"http:\/\/totalvamp.woelmuis.nl\/Traffic\/assets\/img\/TopLeft.png","Traffic\\Roads\\Corner\\TopRight":"http:\/\/totalvamp.woelmuis.nl\/Traffic\/assets\/img\/TopRight.png"};
                    $.each(roads, function(name, img){
                        $("<div></div>").
                        addClass(name)
                        .attr('id', Math.floor((Math.random()*10000)+1))
                        .css({margin: '4px',height:ySize+'px', width: xSize+'px',background: "url('"+img+"')", float: 'left'})
                        .appendTo('#roads')
                        .draggable({
                            helper: 'clone'
                        });
                    })
                    var scenery = {"Traffic\\Scenery\\Grass":"http:\/\/totalvamp.woelmuis.nl\/Traffic\/assets\/img\/grass.png"};
                    $.each(scenery, function(name, img){
                        $("<div></div>").
                        addClass(name)
                        .attr('id', Math.floor((Math.random()*10000)+1))
                        .css({margin: '4px',height:ySize+'px', width: xSize+'px',background: "url('"+img+"')", float: 'left'})
                        .appendTo('#scenery')
                        .append("<img src="+img+" />")
                        .draggable({
                            helper: 'clone'
                        });
                    })
                });  
                $("#changeGridSize").click(function(){
                    var newX = $("#xGridSize").val();    
                    var newY = $("#yGridSize").val();  
                    updateGridSize(newX, newY);
                })

            });

            function updateGridSize(xGridSize, yGridSize) {
                // Size of grid fields 

                var wrapperX = xGridSize * xSize;
                var wrapperY = yGridSize * ySize;
                $('#xGridSize').attr('value', xGridSize);
                $('#yGridSize').attr('value', yGridSize);
                $('#wrapper').css({width: (wrapperX+xSize)+'px', float: 'left'}).empty(); 
                // Loop y
                for(var y=1;y<=yGridSize;y++) {
                    for(var x=1;x<=xGridSize;x++) {
                        $("<div></div>").attr('id',x+""+y)
                        .css({float: 'left',border: '1px solid black',width:(xSize)+'px', height:(ySize)+'px'}).appendTo('#wrapper')
                        .droppable({
                            drop: function(event, ui) {
                                $(this).append($(ui.draggable)
                                .clone()
                                .css({border: 'none',width:xSize+'px', height:ySize+'px', padding: '0', margin: '0'})
                                .draggable({helper: 'clone'})
                                .click(function(e){
                                    $('#temp').remove();
                                    $('<div></div>')
                                    .attr('id', 'temp')
                                    .css({position: 'absolute',left: e.pageX+'px', top: e.pageY+'px', width:'150px',height:'150px'})
                                    .appendTo('#wrapper');
                                    // For the next part i need the parent clicked id
                                    var parentId = $(this).parent("div").attr('id');
                                    //alert(parentId);
                                    $.each(roadTypes, function(name, htmlText){
                                        $('<div></div>').attr('id', name).addClass('button').html(name).click(function(e){
                                            // parentId undefined :(
                                            //alert(parentId);
                                            //var parentId = $(this).parent("div").attr('id');
                                            //console.log($('#'+parentId+' > div'));
                                            //$('#'+parentId).children().append('<p>test</p>');
                                            $('#'+parentId+' > div').html(htmlText).css({color: 'white'});
                                            $('#temp').remove();
                                        }).appendTo('#temp');           
                                    })
                                })
                                .bind('contextmenu', function(e){
                                    e.preventDefault();
                                    $(this).remove();
                                }));
                            }
                        });   
                    }
                }       
            }
  donderdag 29 maart 2012 @ 07:47:47 #130
370539 kucher
is snucher
pi_109640276
quote:
$("<div></div>")
Wat is dezen?
pi_109640412
quote:
0s.gif Op donderdag 29 maart 2012 07:47 schreef kucher het volgende:

[..]

Wat is dezen?
Het refereren naar een nieuwe div dmv jQuery natuurlijk. Deze wordt vervolgens in het DOM geplemd met id "wrapper" in de body.

[ Bericht 9% gewijzigd door #ANONIEM op 29-03-2012 08:08:22 ]
pi_109641336
quote:
0s.gif Op donderdag 29 maart 2012 00:14 schreef totalvamp het volgende:

[..]

Heb je een idee voor een gratis host? Er zijn namelijk wat custom dingen nodig qua JS.
Edit: Linkje hier
http://totalvamp.woelmuis.nl/gridedit.html

Edit2:
Ik heb het gefixt op de volgende manier:
[ code verwijderd ]

Officieel mag een id niet met een cijfer beginnen. Zo zet je er een letter voor:

1.attr('id', 'a' + Math.floor((Math.random()*10000)+1))
fokstok.nl
  donderdag 29 maart 2012 @ 11:18:28 #133
87680 Mirel
Mirel wil een bongophone.
pi_109644854
Bestaat er een gallery die foto's op deze manier rangschikt? http://paard.tumblr.com/archive

Ik heb dit proberen na te maken. Heb in feite gewoon alle code overgekopieerd en alle externe bestanden meegenomen.

Alleen het bestand die de foto's verzorgd is voor mij een raadsel. Hoe moet ik hier precies een foto in plaatsen? De thumbnail link linkt naar een mapje? En noderef ook?

http://pastebin.com/7v5sSFZv

Dit is m'n testomgeving: www.mirelmasic.nl/troep/gallery en zo moet het eruit zien: http://fmaul.de/gallery-grid-example/

Als iemand een wordpress plugin weet die hetzelfde doet, dan is dat ook goed :P
When all else fails, you always have delusion.
pi_109645615
quote:
0s.gif Op maandag 26 maart 2012 15:57 schreef Mirel het volgende:
Ik heb vrij weinig: http://www.mirelmasic.nl/sites/

En ben nu bezig met http://www.filmdepartment.nl/v2
filmdepartment ziet er netjes uit
je ziet wel heel goed dat er iets gerommelt is met die bril van die man
maar wel een mooi effect
  donderdag 29 maart 2012 @ 11:45:26 #135
87680 Mirel
Mirel wil een bongophone.
pi_109645969
Ja, dat ben ik met een nepbril :P We probeerden een soort http://iwdrm.tumblr.com effect te maken
When all else fails, you always have delusion.
pi_109646318
quote:
0s.gif Op donderdag 29 maart 2012 11:45 schreef Mirel het volgende:
Ja, dat ben ik met een nepbril :P We probeerden een soort http://iwdrm.tumblr.com effect te maken
best goed gelukt..misschien is de beweging wel net iets te subtiel tov je voorbeeld
  donderdag 29 maart 2012 @ 12:00:36 #137
87680 Mirel
Mirel wil een bongophone.
pi_109646477
Ik wilde het juist subtieler. En m'n ogen bewegen omdat de beweging eigenlijk met m'n hele hoofd was. Dat is allemaal binnen de bril gepropt. Maar ik heb enkel geposeerd :)
When all else fails, you always have delusion.
  donderdag 29 maart 2012 @ 12:42:47 #138
87680 Mirel
Mirel wil een bongophone.
pi_109648285
quote:
0s.gif Op donderdag 29 maart 2012 11:18 schreef Mirel het volgende:
Bestaat er een gallery die foto's op deze manier rangschikt? http://paard.tumblr.com/archive

Ik heb dit proberen na te maken. Heb in feite gewoon alle code overgekopieerd en alle externe bestanden meegenomen.

Alleen het bestand die de foto's verzorgd is voor mij een raadsel. Hoe moet ik hier precies een foto in plaatsen? De thumbnail link linkt naar een mapje? En noderef ook?

http://pastebin.com/7v5sSFZv

Dit is m'n testomgeving: www.mirelmasic.nl/troep/gallery en zo moet het eruit zien: http://fmaul.de/gallery-grid-example/

Als iemand een wordpress plugin weet die hetzelfde doet, dan is dat ook goed :P
Hmm dit moet dus in iets genaamd Alfresco.. :/ Denk niet dat dit 'em wordt..

Even nog een keer Wordpress plugins zoeken dan..
When all else fails, you always have delusion.
  vrijdag 30 maart 2012 @ 20:08:40 #139
345970 Doodloper
Is een hardloper.
pi_109706332
Ik wil graag bij het openen van een pagina weten of die pagina actief is (dus focus heeft).
Je kunt met jQuery een focus of blur-event opvangen:
1
2
3		$(window).bind('focus',function() { 
    doeDingen();
});
maar ik wil weten of hij bij het laden ook al focus heeft (of dat het bijvoorbeeld een tab is die op de achtergrond geopend is). Een soort window.hasFocus() ofzo.

Iemand een idee hoe ik dat handig doe?

Ik wil namelijk een functie die enkel draait als de pagina actief is.
We zullen zien, zei de blinde.
pi_109706666
Je kunt natuurlijk gewoon een event binden aan het mousemove event ofzo op de body.
Nee.
  vrijdag 30 maart 2012 @ 20:29:27 #141
345970 Doodloper
Is een hardloper.
pi_109707138
Ja opzich kan dat wel als workaround, maar is er geen normale functie voor?

Ik vind het raar dat je het wel met triggers/events kan afhandelen, maar dat er geen hasFocus ofzo is..
We zullen zien, zei de blinde.
  vrijdag 30 maart 2012 @ 20:33:55 #142
370539 kucher
is snucher
  vrijdag 30 maart 2012 @ 20:37:56 #143
345970 Doodloper
Is een hardloper.
pi_109707532
Hm oke ;(

Ik kan natuurlijk wel op die muis-bewegingen afgaan, maar als je een keer een blind persoon of mobiele user hebt dan zit je daar weer mee.

Naja, anders ga ik er wel gewoon vanuit dat er standaard een focus is.
We zullen zien, zei de blinde.
  vrijdag 30 maart 2012 @ 20:46:34 #144
370539 kucher
is snucher
  vrijdag 30 maart 2012 @ 21:06:17 #145
345970 Doodloper
Is een hardloper.
pi_109709006
Thanks, ga ik daar ff mee verder prutsen. :)
We zullen zien, zei de blinde.
  zondag 1 april 2012 @ 16:14:15 #146
292596 Faux.
Fan van zichzelf
pi_109767546
1
2
3
4
5		<form action="/post" method="post">
<textarea name="content"></textarea><br />
<button onclick="addKey()">Key</button><br />
<button onclick="addChar()">Char</button><br />
</form>

In Firefox en in Chrome verzendt ie automatisch het formulier als er op een button gedrukt wordt, zonder dat die button een submit-button is. Hoe kan ik dat voorkomen?
Hier schreef tong80 het volgende:
Faux is een FOK!held, zoals dat vroeger Gellarboy en Brechtje waren. Users die je koestert.
pi_109770111
return false?
zcflevo.nl
pi_109770472
Of gewoon het default event preventen.

1
2
3
4		var addChar = function(e){
e.preventDefault();
// je eigen code
}

Ofzo.
Nee.
  maandag 2 april 2012 @ 10:09:27 #149
87680 Mirel
Mirel wil een bongophone.
pi_109795053
Ik heb op http://filmdepartment.nl/v2/?page_id=61 een soort gallery of iets, het komt van de template maar ik kan niet vinden wat de bron is in de code.

Ik wil namelijk van het standaard mouse hover plaatje:


Dit maken:
When all else fails, you always have delusion.
  maandag 2 april 2012 @ 10:11:10 #150
56176 Catch22-
Ben je Blind?!
pi_109795090
Alsjeblieft zeg, dat kan je toch zelf wel vinden?
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[html, css, js] Waar dummies nog meer iniatief gaan tonen! ;) #24
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')