DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Hoe laat ik style="visibility:visible" veranderen naar style="visibility:hidden" bij het klikken naast de div?
Ik heb nu:
Maar dan kan ik 'm alleen laten verdwijnen op het moment dat de muis UIT de div gaat.
Ik heb nu:
| 1 2 3 4 | $('.selector').mouseout(function() { $('.selector').mouseup(function() { } } |
Maar dan kan ik 'm alleen laten verdwijnen op het moment dat de muis UIT de div gaat.
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.
Simpeler kan niet?
Desnoods een plaatje in Div 2 maken met een knopje erin
Redacted
npquote:
[..]
Even wat over gelezen, heel handig! Dankjewel
It was an opportunity to honour our memories and to make room for new ones
quote:
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() { }); |
Zoiets?
Edit: dit lijkt me beter: http://stackoverflow.com/(...)single-event-handler
2000 light years from home
Ik heb de oplossing die Merkie heeft gevonden gebruikt. Bedankt voor het meedenken!quote:
[..]
Een 2e div maken en beide laten verdwijnen als er op Div 2 wordt geklikt.
Simpeler kan niet?
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
Ik heb er dit van gemaakt:| 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'; } }); }); |
[ Bericht 4% gewijzigd door pascal08 op 18-11-2012 18:36:37 ]
Zo zou ik dat niet doen. Verdiep je een klein beetje in hoe jQuery werktquote:
[..]
Ik heb de oplossing die Merkie heeft gevonden gebruikt. Bedankt voor het meedenken!
[..]
Dit is dus wat ik zocht.
[ code verwijderd ]
.Als je toch al jQuery gebruikt kan je beter $('#autosuggestcontainer').hide(); doen.| 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(); } }); }); |
.
2000 light years from home
Wat is precies het verschil?quote:
[..]
Zo zou ik dat niet doen. Verdiep je een klein beetje in hoe jQuery werkt
[ code verwijderd ]
Dit lijkt me beter. Als je toch bezig bent om javascript / jQuery te leren, doe het dan in 1x goed
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?
| 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'; } }); }); |
[ Bericht 7% gewijzigd door pascal08 op 18-11-2012 19:12:14 ]
document.getElementById('autosuggestcontainer').style.visibility = 'hidden';
Doe gewoon "$('#autosuggestcontainer').hide();", veel sneller.
Doe gewoon "$('#autosuggestcontainer').hide();", veel sneller
.
2000 light years from home
Waarom zou je native DOM-functies gebruiken als je toch jQuery al include?quote:
[..]
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:
document.getElementById('autosuggestcontainer').style.visibility = 'hidden';
Doe gewoon "$('#autosuggestcontainer').hide();", veel sneller
[ Bericht 0% gewijzigd door pascal08 op 18-11-2012 19:39:20 ]
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?
Ik zou het eigenlijk wel moeten doen, maar het leren van PHP heeft me ook enkele dagen gekost en ik wil nu zo langzamerhand beginnen met iets op te zetten.
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/
Hoe maak je nu "visibility:hidden" ongedaan dan?quote:
[..]
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.
Anders kan je altijd nog $('#element').css('visibility','hidden'); doen.
2000 light years from home
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:
[..]
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"; |
Het zal inderdaad verre van optimaal zijn, maar het werkt.
Stap 1 is iig, stop met klooien, breng structuur aan.quote:
[..]
Ahh, nice! Dankzij hele goede video's over PHP, heb ik PHP ook vrij snel geleerd. Ik zal binnenkort eens kijken. Bedankt.
Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.
Dan veranderd je die regel toch in $('#element').show();?quote:
[..]
"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.
2000 light years from home
Ahh, gelukt!quote:
[..]
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); }); } }); }); |
En:
| 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(); } }); }); |
Nu beter?
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.
2000 light years from home
Dat zag ik ook met Chrome: element inspecteren. Bedankt voor jullie tip.quote:
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:
[..]
Ahh, nice! Dankzij hele goede video's over PHP, heb ik PHP ook vrij snel geleerd. Ik zal binnenkort eens kijken. Bedankt.
“Specialization is for insects”.—Robert Heinlein
Op
dank maar ik doelde op die over php, had deze al gebookmarkedquote:
Op specifiek kanaal in YouTube? kom er vaak toch zut tegen wat tijdverspilling bleekquote:
“Specialization is for insects”.—Robert Heinlein
