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.
Weet je dat zeker? Heb je de gegenereerde HTML bekeken?quote:Op donderdag 29 november 2012 22:23 schreef pascal08 het volgende:
[..]
Het puntje kan ik niet selecteren.
Anders is het misschien een glitch. Heb je het met andere browsers ook?
Ik wil straks met jQuery gegevens versturen. Kan dat ook anders dan? Waarom is deze plugin er dan?quote:Op donderdag 29 november 2012 22:24 schreef picodealion het volgende:
Waarom heb je hier überhaupt jQuery voor nodig? Dit kan toch gewoon in CSS?
[ Bericht 2% gewijzigd door pascal08 op 29-11-2012 22:30:57 ]
Ja, die heb ik bekeken. Er valt mij niets vreemds op. Ik zal nu kijken of ik het ook kan triggeren met Firefox.quote:Op donderdag 29 november 2012 22:25 schreef Tijn het volgende:
[..]
Weet je dat zeker? Heb je de gegenereerde HTML bekeken?
Anders is het misschien een glitch. Heb je het met andere browsers ook?
Ik zou toch even goed kijken of er niet een element is dat daarvoor zorgt. Anders zit er weinig anders op dan het online te zetten zodat we kunnen meekijken, want op de gok lossen we natuurlijk niks op 
Nee, dat snap ik. Ik hoopte dat het een bekend probleem is. Zonder code wordt het natuurlijk gewoon gokken als je dit probleem niet eerder hebt gezien. Ik zal eens kijken of ik het kan reproduceren in een fiddle, momentje.quote:
Ik zou toch even goed kijken of er niet een element is dat daarvoor zorgt. Anders zit er weinig anders op dan het online te zetten zodat we kunnen meekijken, want op de gok lossen we natuurlijk niks op
Ik wist ten eerste niet hoe ik mijn layout wilde gaan maken, dus dit bracht me op een goed idee. Ten tweede weet ik hoe ik met jQuery gegevens moet doorsturen, zodat ik een query kan maken die de juiste gegevens ophaalt uit m'n database. En ten derde scheelde het me wat tijd, want ik hoef nu niet zelf m'n CSS te maken. Ik zag er dus alleen maar voordelen in. Waarom vraag je dat dan?quote:
Ik begrijp trouwens ook niet helemaal waarom je hier zo'n plugin voor nodig hebt.
Ik kan het probleem trouwens niet reproduceren in een fiddle, dus ik laat het maar even zo. Toch bedankt voor de snelle reactie.
Het lijkt me nogal simpel om dit zelf te maken met een paar regeltjes CSS en een jQuery eventhandler voor de blokjes. Ik zou daar geen plugin voor willen includen op m'n website.quote:
Ik gebruik jQuery UI toch al, dus dan is het toch handiger om deze plugin te gebruiken in plaats van het zelf te schrijven. Daarnaast vind ik jQuery wel fijn. Alles is voorgekauwd en het scheelt mij als beginner een hoop tijd.quote:
[..]
Het lijkt me nogal simpel om dit zelf te maken met een paar regeltjes CSS en een jQuery eventhandler voor de blokjes. Ik zou daar geen plugin voor willen includen op m'n website.
Met jQuery zelf is natuurlijk niks mis, dat gebruik ik ook altijd.
Maar jQueryUI vind ik persoonlijk wat minder. Als ik het al gebruik is het vaak een hele minimale build met maar 1 of 2 componenten.
Maar jQueryUI vind ik persoonlijk wat minder. Als ik het al gebruik is het vaak een hele minimale build met maar 1 of 2 componenten.
Ik vind het wel een uitkomst. Ik haal er een hele hoop ideeën vandaan en het werkt altijd meteen. Wellicht is de code zelf schrijven efficiënter voor de website, maar dan ben ik in 2025 nog niet klaar.quote:
Met jQuery zelf is natuurlijk niks mis, dat gebruik ik ook altijd.
Maar jQueryUI vind ik persoonlijk wat minder.
Ik heb het puntje nu ook weten te triggeren in deze fiddle: http://jsfiddle.net/5BNdM/
Vraag me niet hoe. Het vereist in ieder geval een hoop clicks.
Ik zie niks hoor. Maar het zal dat selectieblokje met die stippellijntjes wel zijn dat blijft hangen ofzo.
Ik zou dat eerlijk gezegd sowieso niet doen, dat selecteren met zo'n vakje. Dat zie je op andere sites ook nooit.
Ik zou dat eerlijk gezegd sowieso niet doen, dat selecteren met zo'n vakje. Dat zie je op andere sites ook nooit.
Hoe zou jij het doen dan? Het gaat alleen om het principe van selecteren/geselecteerd blijven en deselecteren/gedeselecteerd blijven.quote:
Ik zie niks hoor. Maar het zal dat selectieblokje met die stippellijntjes wel zijn dat blijft hangen ofzo.
Ik zou dat eerlijk gezegd sowieso niet doen, dat selecteren met zo'n vakje. Dat zie je op andere sites ook nooit.
Wat zou dat schelen in ms of is het puur omdat je code er kleiner van wordt?quote:Op donderdag 29 november 2012 23:13 schreef Tijn het volgende:
Gewoon onclick een class "selected" geven of ontnemen.
Da's waar.quote:Op donderdag 29 november 2012 23:16 schreef Tijn het volgende:
Het scheelt vooral dat je niet zo'n raar puntje hebt staan op willekeurige momenten
Hij is nu wel al een tijdje weg nadat ik de code opnieuw gekopieerd en geplakt heb. *klop klop*
Puntje is er weer. 
Volgens jou kan ik dus beter het zo doen?
en dan de jQuery... ?
Volgens jou kan ik dus beter het zo doen?| 1 2 3 | <div class=" (selected of niks) " style="float:left; margin: 2px; padding: 0px; width: 80px;"> // inhoud </div> |
en dan de jQuery... ?
Is zoiets niet wat je wil?
style.css:
script.js:
| 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 | <!DOCTYPE html> <html> <head> <title>Voorbeeld van klikbare blokjes</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <h1>omg klikbare blokjes</h1> <ul id="selectable"> <li data-id="1">blokje 1</li> <li data-id="2">blokje 2</li> <li data-id="3">blokje 3</li> <li data-id="4">blokje 4</li> <li data-id="5">blokje 5</li> <li data-id="6">blokje 6</li> <li data-id="7">blokje 7</li> <li data-id="8">blokje 8</li> <li data-id="9">blokje 9</li> </ul> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="script.js"></script> </body> </html> |
style.css:
| 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 | body { font-family: sans-serif; text-align: center; } #selectable { list-style-type: none; } #selectable li { float: left; width: 80px; height: 80px; background-color: #eee; border: 1px solid #888; border-radius: 3px; margin: 5px; padding: 10px; cursor: pointer; } #selectable li:hover { background-color: #fff; } #selectable li.selected { background-color: #f8f89f; } |
script.js:
| 1 2 3 4 5 | $(document).ready(function(){ $('#selectable li').live('click', function(){ $(this).toggleClass('selected'); }); }); |
Holy shit, even kijken.quote:
Is zoiets niet wat je wil?
[ code verwijderd ]
style.css:
[ code verwijderd ]
script.js:
[ code verwijderd ]
W00t, deze is nog mooier.
...en geen puntje!!! Thanks a million. 
Het is maar een voorbeeldje hoor.
In de click eventhandler (waar nu alleen toggleClass() wordt aangeroepen) zou je ook een Ajax call kunnen doen als je nog communicatie met je server wil na het aanklikken van een blokje.
In de click eventhandler (waar nu alleen toggleClass() wordt aangeroepen) zou je ook een Ajax call kunnen doen als je nog communicatie met je server wil na het aanklikken van een blokje.
Wel een heel mooi voorbeeldje.quote:
Het is maar een voorbeeldje hoor.
In de click eventhandler (waar nu alleen toggleClass() wordt aangeroepen) zou je ook een Ajax call kunnen doen als je nog communicatie met je server wil na het aanklikken van een blokje.
Ik weet hoe ik jouw voorbeeld kan uitbreiden met een Ajax call, dus dit is perfect. Nog 1 vraagje: waar gebruik je data-id voor bij elke <li>?
