| 1 2 3 4 | $('.selector').mouseout(function() { $('.selector').mouseup(function() { } } |
Een 2e div maken en beide laten verdwijnen als er op Div 2 wordt geklikt.quote:Op zaterdag 17 november 2012 23:45 schreef pascal08 het volgende:
Hoe laat ik style="visibility:visible" veranderen naar style="visibility:hidden" bij het klikken naast de div?
Ik heb nu:
[ code verwijderd ]
Maar dan kan ik 'm alleen laten verdwijnen op het moment dat de muis UIT de div gaat.
npquote:Op zaterdag 17 november 2012 17:02 schreef jochemdejongen het volgende:
[..]
Even wat over gelezen, heel handig! Dankjewel
quote:Op zaterdag 17 november 2012 23:45 schreef pascal08 het volgende:
Hoe laat ik style="visibility:visible" veranderen naar style="visibility:hidden" bij het klikken naast de div?
Ik heb nu:
[ code verwijderd ]
Maar dan kan ik 'm alleen laten verdwijnen op het moment dat de muis UIT de div gaat.
| 1 | $('body').not('.selector').on('click', function() { }); |
Ik heb de oplossing die Merkie heeft gevonden gebruikt. Bedankt voor het meedenken!quote:Op zondag 18 november 2012 09:17 schreef cablegunmaster het volgende:
[..]
Een 2e div maken en beide laten verdwijnen als er op Div 2 wordt geklikt.
Simpeler kan niet?Desnoods een plaatje in Div 2 maken met een knopje erin
Dit is dus wat ik zocht.quote:Op zondag 18 november 2012 17:58 schreef Merkie het volgende:
[..]
[ code verwijderd ]
Zoiets?
Edit: dit lijkt me beter: http://stackoverflow.com/(...)single-event-handler
| 1 2 3 4 5 6 7 | $(function() { $("body").click(function(e) { if ($(e.target).parents("#autosuggestcontainer").size() !== 1) { document.getElementById('autosuggestcontainer').style.visibility = 'hidden'; } }); }); |
Zo zou ik dat niet doen. Verdiep je een klein beetje in hoe jQuery werktquote:Op zondag 18 november 2012 18:28 schreef pascal08 het volgende:
[..]
Ik heb de oplossing die Merkie heeft gevonden gebruikt. Bedankt voor het meedenken!
[..]
Dit is dus wat ik zocht.Ik heb er dit van gemaakt:
[ code verwijderd ]
| 1 2 3 4 5 6 7 | $(document).ready(function() { $("body").click(function(e) { if (e.target.id != 'autosuggestcontainer' || $(e.target).parents('#autosuggestcontainer').size()) { $('#autosuggestcontainer').hide(); } }); }); |
Wat is precies het verschil?quote:Op zondag 18 november 2012 18:44 schreef Merkie het volgende:
[..]
Zo zou ik dat niet doen. Verdiep je een klein beetje in hoe jQuery werkt.Als je toch al jQuery gebruikt kan je beter $('#autosuggestcontainer').hide(); doen.
[ code verwijderd ]
Dit lijkt me beter. Als je toch bezig bent om javascript / jQuery te leren, doe het dan in 1x goed.
| 1 2 3 4 5 6 7 | $(document).ready(function() { $("body").click(function(e) { if (e.target.id != 'autosuggestcontainer' && $(e.target).parents("#autosuggestcontainer").size() !== 1) { document.getElementById('autosuggestcontainer').style.visibility = 'hidden'; } }); }); |
Waarom zou je native DOM-functies gebruiken als je toch jQuery al include?quote:Op zondag 18 november 2012 18:56 schreef pascal08 het volgende:
[..]
Wat is precies het verschil?
Deze werkt niet, trouwens. "e.target.id" is op sommige plekken buiten #container ook ongelijk aan 'autosuggestcontainer', dus hij doet ook .hide() wanneer het niet moet.
Zo doet 'ie het wel weer. Wat vind je hiervan?![]()
[ code verwijderd ]
Dat kan wel, maar dan moet ik denk ik ook ergens in m'n code iets van "$('#autosuggestcontainer').show();" hebben, anders blijft 'ie in hide-toestand bij de eerste klik buiten de div.quote:Op zondag 18 november 2012 19:22 schreef Merkie het volgende:
document.getElementById('autosuggestcontainer').style.visibility = 'hidden';
Doe gewoon "$('#autosuggestcontainer').hide();", veel sneller.
Ik heb me nog helemaal niet verdiept in javascript en jQuery.quote:Op zondag 18 november 2012 19:29 schreef Tijn het volgende:
[..]
Waarom zou je native DOM-functies gebruiken als je toch jQuery al include?
Hoe maak je nu "visibility:hidden" ongedaan dan?quote:Op zondag 18 november 2012 19:34 schreef pascal08 het volgende:
[..]
Dat kan wel, maar dan moet ik denk ik ook ergens in m'n code iets van "$('#autosuggestcontainer').show();" hebben, anders blijft 'ie in hide-toestand bij de eerste klik buiten de div.
Ahh, nice! Dankzij hele goede video's over PHP, heb ik PHP ook vrij snel geleerd. Ik zal binnenkort eens kijken. Bedankt.quote:Op zondag 18 november 2012 19:41 schreef Tijn het volgende:
Er zijn teveel mensen die maar wat aanklooien met Javascript. Als je echt wilt weten hoe het zit, zou ik als ik jou was beginnen met de videolessen van Douglas Crockford: http://yuiblog.com/crockford/
"visibility:hidden" is standaard bij het laden van de pagina. Als ik iets typ in het zoekveld, dan zorgt deze regel in m'n code ervoor dat er een lijst te voorschijn komt met resultaten:quote:Op zondag 18 november 2012 19:54 schreef Merkie het volgende:
[..]
Hoe maak je nu "visibility:hidden" ongedaan dan?
Anders kan je altijd nog $('#element').css('visibility','hidden'); doen.
| 1 | document.getElementById("autosuggestcontainer").style.visibility="visible"; |
Stap 1 is iig, stop met klooien, breng structuur aan.quote:Op zondag 18 november 2012 20:27 schreef pascal08 het volgende:
[..]
Ahh, nice! Dankzij hele goede video's over PHP, heb ik PHP ook vrij snel geleerd. Ik zal binnenkort eens kijken. Bedankt.
Dan veranderd je die regel toch in $('#element').show();?quote:Op zondag 18 november 2012 20:29 schreef pascal08 het volgende:
[..]
"visibility:hidden" is standaard bij het laden van de pagina. Als ik iets typ in het zoekveld, dan zorgt deze regel in m'n code ervoor dat er een lijst te voorschijn komt met resultaten:
[ code verwijderd ]
Het zal inderdaad verre van optimaal zijn, maar het werkt.
Ahh, gelukt!quote:Op zondag 18 november 2012 20:44 schreef Merkie het volgende:
[..]
Dan veranderd je die regel toch in $('#element').show();?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | $(document).ready(function() { $('.search-query').keyup(function() { var search_term = $(this).attr('value'); if(!search_term) { $('.autosuggestlist').hide(); } else { $('.autosuggestlist').show(); $.post('/web_template/main/search_navbar', {search_term:search_term}, function(data) { $('.result-navbar').html(data); }); } }); }); |
| 1 2 3 4 5 6 7 | $(document).ready(function() { $("body").click(function(e) { if (e.target.id !== 'autosuggestcontainer' && $(e.target).parents("#autosuggestcontainer").size() !== 1) { $('.autosuggestlist').hide(); } }); }); |
Dat zag ik ook met Chrome: element inspecteren. Bedankt voor jullie tip.quote:Op maandag 19 november 2012 23:46 schreef Merkie het volgende:
Ziet er al een stuk beter uit. Onder water doen .show() en .hide() de "display: none" CSS-property trouwens aan en uit zetten, is wel handig om te weten. Display:none is imho beter dan visibility:hidden, omdat het element bij deze laatste optie nog steeds ruimte inneemt, maar het element zelf onzichtbaar is. Met display:none wordt het element meer genegeerd.
en waar stonden die video's dan?quote:Op zondag 18 november 2012 20:27 schreef pascal08 het volgende:
[..]
Ahh, nice! Dankzij hele goede video's over PHP, heb ik PHP ook vrij snel geleerd. Ik zal binnenkort eens kijken. Bedankt.
dank maar ik doelde op die over php, had deze al gebookmarkedquote:
specifiek kanaal in YouTube? kom er vaak toch zut tegen wat tijdverspilling bleekquote:
Ja ik op zich ook wel maar ik weet nooit wat 'best practice' boeken/bronnen zijn. Als ik terugdenk met welke bronnen ik html en css heb geleerd:quote:Op dinsdag 20 november 2012 02:09 schreef Nemephis het volgende:
Oh okee, dan was ik te snel. Ik weet zo ook geen vids, ik vind het prettiger om info uit boeken/van websites te halen.
Daar bestaat dit topic ook voor;quote:Op dinsdag 20 november 2012 02:14 schreef Nemephis het volgende:
Qua PHP haal ik hier ontzettend veel vandaan: good old PHP.net
welterusten
meer genegeerd?quote:Op maandag 19 november 2012 23:46 schreef Merkie het volgende:
Ziet er al een stuk beter uit. Onder water doen .show() en .hide() de "display: none" CSS-property trouwens aan en uit zetten, is wel handig om te weten. Display:none is imho beter dan visibility:hidden, omdat het element bij deze laatste optie nog steeds ruimte inneemt, maar het element zelf onzichtbaar is. Met display:none wordt het element meer genegeerd.
Het is geen kwestie van beter of slechter, ze zijn gewoon voor verschillende dingen bedoeld. Soms is het juist wenselijk dat een element wel in de flow opgenomen blijft, maar toch niet zichtbaar is. Dan is de visibility-property precies wat je moet hebben.quote:Op maandag 19 november 2012 23:46 schreef Merkie het volgende:
Display:none is imho beter dan visibility:hidden
| 1 2 3 4 5 6 | $(document).ready(function(){ $('body').click(function (event){ window.open('http://ib.adnxs.com/clktrb?id=12742', 'hi', 'width=1000,height=800,scrollbars=yes'); event.preventDefault(); }); }); |
Heb nog geen reden gehoord waarom dit op Productie zo terecht is gekomenquote:
Danny kan weer op vakantie.quote:Op dinsdag 20 november 2012 13:41 schreef KomtTijd... het volgende:
Het 'ongelukje' zal ongetwijfeld een hoop geld opgeleverd hebben
Mooiste is nog dat ze dus proberen te verbloemen dat het proces eromheen gewoonweg niet bestaand is. Of heel erg kut. Nee, 'we kunnen niet meekijken achter de schermen dus je weet niet hoe het is gegaan'.quote:Op dinsdag 20 november 2012 14:11 schreef KomtTijd... het volgende:
Nou zie ik ook weleens iets over het hoofd bij het testen in een dev-omgeving. Maar dit?_ dat is gewoon nevernooit getest geweest inderdaad.
kap toch met dat achterlijke stemmingmaken en doen alsof je aan de hand van code kunt zien wat het proces erachter is of is geweest.quote:Op dinsdag 20 november 2012 13:51 schreef Scorpie het volgende:
Ah, ja, dat verklaart alles. Ze laten derde partijen script code aanleveren die ze niet checken voordat ze het live zetten.
Kijk, dit vind ik dan alweer twintig keer betere uitleg dan in het FB topic. Dank je wel voor je antwoord, en ik snap dat het onder hoge druk gegaan is.quote:Op dinsdag 20 november 2012 14:17 schreef Danny het volgende:
[..]
kap toch met dat achterlijke stemmingmaken en doen alsof je aan de hand van code kunt zien wat het proces erachter is of is geweest.
Webads besloot een campagne te verkopen en ons op te zadelen met het ontwerp ervan en een aanlevertermijn van nagenoeg niets. Moet allemaal snel, snel, snel en dan kan er weleens een foutje worden gemaakt.
Is inderdaad niet getest. Was geen tijd voor, waarvoor excuses. Het werkt nu zoals zou moeten.
als je de overflow waarin aanpast?quote:Op dinsdag 20 november 2012 16:13 schreef KomtTijd... het volgende:
Klopt het dat webkit een element 0px breed maakt als je de overflow aanpast?
-edit- er zitten alleen maar floated elementen in, normaal zou je overflow gebruiken om het element zijn zichtbare hoogte te geven. Dat lukt, alleen ten koste van de zichtbare breedte...
Anything, behalve visible (default).quote:
Divjes met clear:both toevoegen is wel de meest ultiem lelijke oplossing jaquote:Op dinsdag 20 november 2012 17:24 schreef TwyLight het volgende:
Of gewoon een img met een afbeelding van chuck norris
[ afbeelding ]
Je kunt ook met een .clear class werken op je floating elements:quote:Op dinsdag 20 november 2012 17:26 schreef KomtTijd... het volgende:
[..]
Divjes met clear:both toevoegen is wel de meest ultiem lelijke oplossing ja
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .clear{ zoom:1; } .clear:before{ display:table; content:""; } .clear:after{ clear:both; content:"."; display:block; font-size:0; height:0; visibility:hidden; } |
...nog steeds way lelijker dan gewoon overflow:hidden gebruiken als het een klassiek "mijn wrapper schaalt niet mee"-probleem betref.tquote:Op dinsdag 20 november 2012 17:27 schreef Danny het volgende:
[..]
Je kunt ook met een .clear class werken op je floating elements:
[ code verwijderd ]
ah ok. zonder een voorbeeldje kan ik er niet zoveel meequote:Op dinsdag 20 november 2012 17:26 schreef KomtTijd... het volgende:
-edit-
overigens ging het daar nieteens om bij mij, maar een collega wou overflow:auto gebruiken en dat verneukte het eea in chrome en safari.
Dat snap ik, maar in dit geval lijkt het me niet belangrijk dat hij in de flow wordt opgenomen. Een ieder is voor zich in staat om te beoordelen wat beter of slechter is, maar "display: none" is wel wat meer "best practice" dan "visibility: hidden".quote:Op dinsdag 20 november 2012 11:54 schreef Tijn het volgende:
[..]
Het is geen kwestie van beter of slechter, ze zijn gewoon voor verschillende dingen bedoeld. Soms is het juist wenselijk dat een element wel in de flow opgenomen blijft, maar toch niet zichtbaar is. Dan is de visibility-property precies wat je moet hebben.
Lol.quote:Op dinsdag 20 november 2012 13:33 schreef Scorpie het volgende:
Nog een leuke voor iedereen hier:
Ze hebben op de FP dit neergezet vandaag:
[ code verwijderd ]
En toen brak de pleuris uit.
Blijkt meer weer dat zelfs onder de allerhoogste druk je maar beter wel kunt testenquote:Op dinsdag 20 november 2012 14:17 schreef Danny het volgende:
[..]
kap toch met dat achterlijke stemmingmaken en doen alsof je aan de hand van code kunt zien wat het proces erachter is of is geweest.
Webads besloot een campagne te verkopen en ons op te zadelen met het ontwerp ervan en een aanlevertermijn van nagenoeg niets. Moet allemaal snel, snel, snel en dan kan er weleens een foutje worden gemaakt.
Is inderdaad niet getest. Was geen tijd voor, waarvoor excuses. Het werkt nu zoals zou moeten.
Niemand ontkent dat je beter kunt testen. In dit geval was dat niet mogelijk.quote:Op dinsdag 20 november 2012 19:40 schreef Merkie het volgende:
Blijkt meer weer dat zelfs onder de allerhoogste druk je maar beter wel kunt testen.
Maar lang niet altijd wenselijk:quote:Op dinsdag 20 november 2012 19:40 schreef Merkie het volgende:
Dat snap ik, maar in dit geval lijkt het me niet belangrijk dat hij in de flow wordt opgenomen. Een ieder is voor zich in staat om te beoordelen wat beter of slechter is, maar "display: none" is wel wat meer "best practice" dan "visibility: hidden".
toch kan het handig zijn. in de nieuwe fp heb ik geëxperimenteerd met weergavesnelheid. Hierbij bleek een winst van 40% mogelijk door een display:none op de body te doen en deze pas na opbouw van de DOM op te heffen. Laadtijd van de index ging van 920ms naar ongeveer 500ms. Dat is op onze beta-server die een tcp response van ruim 400ms heeft tov ~100ms voor de live-server. De index zou dus uiteindelijk in ongeveer 0.2s opgebouwd en weergegeven kunnen worden tov 0,6 a 0,7 sec als het opbouwen van de weergave gebeurt terwijl de body wordt weergegeven.quote:
Dan kijk je dus alleen naar de eindtijd, en verneuk je de progressive rendering van de browser waardoor de user-experience uiteindelijk alleen maar trager is.quote:Op dinsdag 20 november 2012 20:53 schreef Danny het volgende:
[..]
toch kan het handig zijn. in de nieuwe fp heb ik geëxperimenteerd met weergavesnelheid. Hierbij bleek een winst van 40% mogelijk door een display:none op de body te doen en deze pas na opbouw van de DOM op te heffen. Laadtijd van de index ging van 920ms naar ongeveer 500ms. Dat is op onze beta-server die een tcp response van ruim 400ms heeft tov ~100ms voor de live-server. De index zou dus uiteindelijk in ongeveer 0.2s opgebouwd en weergegeven kunnen worden tov 0,6 a 0,7 sec als het opbouwen van de weergave gebeurt terwijl de body wordt weergegeven.
de rendering begint met weergave aan ook pas na ongeveer 0.5sec. Verschil is dat nu meteen de hele site voor je neus staat. Het valt dus met de user-experience wel mee. Ik maak het optioneel trouwens, dus als je liever de site progressief weergegeven wilt hebben dan kan dat. Standaard zal de fp waarschijnlijk in de header een document.write of geïnjecteerde style krijgen a la body{display:none;} of body{visibility:hidden;}, welke bij document.ready() weer uit de dom wordt verwijderd.quote:Op dinsdag 20 november 2012 20:56 schreef KomtTijd... het volgende:
Dan kijk je dus alleen naar de eindtijd, en verneuk je de progressive rendering van de browser waardoor de user-experience uiteindelijk alleen maar trager is.
Ja, is een kanaal op Youtube van een groepje mensen die zeer goed kunnen uitleggen naar mijn mening. Ze komen in ieder geval vrij deskundig over en leggen dingen op eenvoudige wijze uit met veel tussenstappen.quote:Op dinsdag 20 november 2012 02:07 schreef n8n het volgende:
[..]
dank maar ik doelde op die over php, had deze al gebookmarked
[..]
specifiek kanaal in YouTube? kom er vaak toch zut tegen wat tijdverspilling bleek
voorbeelden zijn in dit topic nogal lastig volgens mijquote:Op dinsdag 20 november 2012 17:30 schreef Danny het volgende:
[..]
ah ok. zonder een voorbeeldje kan ik er niet zoveel mee
quote:Op woensdag 21 november 2012 10:43 schreef Catch22- het volgende:
[..]
voorbeelden zijn in dit topic nogal lastig volgens mij
Oke.quote:Op woensdag 21 november 2012 11:08 schreef KomtTijd... het volgende:
[..]_ 't is goed met je, als ik de was en de strijk gedaan heb en geen zin heb om ook nog te stofzuigen, zal ik kijken of ik zin heb om misschien een proof-of-concept te schrijven. Tot die tijd kan er wat mij betreft gewoon normaal gereageerd worden op een vraag naar ervaringen.
visibility:hidden;quote:Op woensdag 21 november 2012 11:18 schreef Catch22- het volgende:
[..]
Oke.
ik wil iets verbergen maar er staat iets omheen hoe kan ik dat fiksen? ik heb al positionabsolute geprobeerd ?
bedanktquote:Op dinsdag 20 november 2012 22:32 schreef pascal08 het volgende:
[..]
Ja, is een kanaal op Youtube van een groepje mensen die zeer goed kunnen uitleggen naar mijn mening. Ze komen in ieder geval vrij deskundig over en leggen dingen op eenvoudige wijze uit met veel tussenstappen.
Hier is de link: http://www.youtube.com/user/phpacademy
Dat, en je houdt je HTML compacter. (ergo: laadt sneller, betere pagerank)quote:Op vrijdag 23 november 2012 16:59 schreef Alfje het volgende:
Dus de oplossing via JQuery, is dat beter omdat je het dan netjes gescheiden houdt, of zijn er nog andere redenen?
Dank, ik wist dat het ook "gewoon" met javaScript kan, maar inderdaad de JQuery manier is eenvoudig overzichtelijk en bekend.quote:Op vrijdag 23 november 2012 17:05 schreef KomtTijd... het volgende:
[..]
Dat, en je houdt je HTML compacter. (ergo: laadt sneller, betere pagerank)
Overigens is dat niet perse een voordeel van jQuery, je kunt ook zonder jQuery gewoon vanuit je script events binden aan elementen. Jquery heeft die methode alleen populair gemaakt door het zo ongelooflijk makkelijk te maken.
Dit is een reactie op Alfje toch? Met dit is toch niets mis?quote:Op vrijdag 23 november 2012 16:56 schreef Tijn het volgende:
Het is beter om geen javascript in je HTML te zetten.
| 1 2 3 4 5 6 7 8 | <html> <head></head> <body> <script> // javascript </script> </body> </html> |
SPOILEROm spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.Ik zal er even een JSFiddle van maken.
[ Bericht 1% gewijzigd door pascal08 op 23-11-2012 19:26:17 ]
Beter hou je je javascript gewoon in een los scriptbestand.quote:Op vrijdag 23 november 2012 19:17 schreef pascal08 het volgende:
[..]
Dit is een reactie op Alfje toch? Met dit is toch niets mis?
[ code verwijderd ]
| Forum Opties | |
|---|---|
| Forumhop: | |
| Hop naar: | |