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 zou jij het doen dan? Het gaat alleen om het principe van selecteren/geselecteerd blijven en deselecteren/gedeselecteerd blijven.quote:Op donderdag 29 november 2012 23:01 schreef Tijn het volgende:
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>?
Nu nergens voor, maar ik kan me voorstellen dat je zoiets nodig hebt om je server te laten weten om welk blokje het gaat.
Juist, dan kan ik natuurlijk met PHP daar de id laten echoën die relevant is voor mijn zoekactie.quote:
Nu nergens voor, maar ik kan me voorstellen dat je zoiets nodig hebt om je server te laten weten om welk blokje het gaat.
Ik heb trouwens ook een slidersysteem gemaakt met jQuery UI. Ik heb er enorm veel werk aan gehad om het helemaal werkend te krijgen, terwijl ik de basis dus niet eens zelf heb hoeven te schrijven. Zou jij zoiets ook zelf maken?
Mja, waarschijnlijk wel. Het hangt er natuurlijk vanaf, als er een standaard plugin is die precies doet wat ik wil, dan gebruik ik dat gewoon. Maar als ik er enorm veel werk aan zou hebben om het aan te passen, dan is het waarschijnlijk sneller en beter om zelf te maken wat je hebben wil is mijn ervaring.
Hmm... oké. Ik heb er veel werk aan gehad omdat ik meerdere sliders wilde aansturen vanuit één eventhandler (?), Uiteindelijk is het me gelukt, zonder dat er rare glitches zichtbaar zijn. Bovendien bestaat het systeem uit meer dan 50 sliders en werkt het onder alle omstandigheden toch heel snel. Vandaar dat ik jQuery UI ook gelijk geweldig vond.quote:
Mja, waarschijnlijk wel. Het hangt er natuurlijk vanaf, als er een standaard plugin is die precies doet wat ik wil, dan gebruik ik dat gewoon. Maar als ik er enorm veel werk aan zou hebben om het aan te passen, dan is het waarschijnlijk sneller en beter om zelf te maken wat je hebben wil is mijn ervaring.
Ik gebruik ook wel eens een of twee componentjes van jQueryUI hoor. Maar voor zoiets simpels als dit begrijp ik niet waarom je een extra library zou willen includen.
Ik snap niet helemaal wat je bedoelt.quote:
Ik gebruik ook wel eens een of twee componentjes van jQueryUI hoor. Maar voor zoiets simpels als dit begrijp ik niet waarom je een extra library zou willen includen.
jQuery UI is toch één compleet bestand? Kan ik delen daarvan gewoon weghalen?
http://jqueryui.com/download/
Hier kun je de componenten kiezen die je wil hebben. Als je alleen de dingen op je website zet die je ook daadwerkelijk gebruikt, scheelt dat zo enkele tientallen kilobytes. Zeker voor mensen met een mobiele verbinding kan dat best wat laadtijd schelen.
Hier kun je de componenten kiezen die je wil hebben. Als je alleen de dingen op je website zet die je ook daadwerkelijk gebruikt, scheelt dat zo enkele tientallen kilobytes. Zeker voor mensen met een mobiele verbinding kan dat best wat laadtijd schelen.
Ik vermoedde het al toen jij het had over includen van componenten die je ook zelf kunt maken. Ik heb gewoon die hele meuk geïnclude.quote:
http://jqueryui.com/download/
Hier kun je de componenten kiezen die je wil hebben. Als je alleen de dingen op je website zet die je ook daadwerkelijk gebruikt, scheelt dat zo enkele tientallen kilobytes. Zeker voor mensen met een mobiele verbinding kan dat best wat laadtijd schelen.
Al die jQuery componenten zijn al goed voor 108kb zie ik. Als er nog niets gecached is gaat er bijna 400kb doorheen. Gelukkig wijs je me er nu op, want volgens mij kan ik uit de bootstrap CSS ook een heleboel slopen.
[ Bericht 10% gewijzigd door pascal08 op 30-11-2012 00:08:06 ]
Omdat totals een array is. Dus totals[0]==null.quote:Op vrijdag 30 november 2012 09:29 schreef Deeltjesversneller het volgende:
[ code verwijderd ]
waarom levert (totals == null) false op?
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
Ik ben mijn custom CSS aan het veranderen maar helaas wordt voor sommige elementen op FOK! geen aparte CSS gebruikt waardoor sommige dingen geen class of id krijgen.
Nu ben ik wel zover dat ik tags een bepaalde kleur kan krijgen, maar ik wil die van moderators een andere kleur geven. Hoe moet ik dat doen?
zelf geprobeerd
en allemaal varianten daarop.
Nu ben ik wel zover dat ik tags een bepaalde kleur kan krijgen, maar ik wil die van moderators een andere kleur geven. Hoe moet ik dat doen?
zelf geprobeerd
| 1 2 3 | a [style*="color:#0000FF"] { color: green!important; } |
en allemaal varianten daarop.
die kleuren zijn inline gestyled dus dat wordt lastig om te overrulen
“Specialization is for insects”.—Robert Heinlein
Geloof er niks van.quote:
was er al achter, toch bedankt voor de moeite!! heb me nu toch wat sjieks gemaakt zeg.
Het is al gelukt.quote:Op zaterdag 1 december 2012 14:41 schreef n8n het volgende:
die kleuren zijn inline gestyled dus dat wordt lastig om te overrulen
| 1 2 3 | a.username[style*="#0000FF"], a.tag[style*="#0000FF"] { color: #389ABE !important; } |
Met dank aan TwyLight.
beterquote:
[..]
Het is al gelukt.
[ code verwijderd ]
Met dank aan TwyLight.
“Specialization is for insects”.—Robert Heinlein
Op 
Wie kan mij even helpen met javascript?
Ik heb een div met id "content". Deze div moet de achtergrond "img_1.jpg" gebruiken.
Ik heb ergens op de pagina een button. Als je op deze button klikt dan moet de achtergrond naar "img_2.jpg" veranderen. Als je dan nog een keer klikt dan naar img_3 etc. Maar img_4 is de laatste en dan moet ie weer terug naar 1.
Ik heb een div met id "content". Deze div moet de achtergrond "img_1.jpg" gebruiken.
Ik heb ergens op de pagina een button. Als je op deze button klikt dan moet de achtergrond naar "img_2.jpg" veranderen. Als je dan nog een keer klikt dan naar img_3 etc. Maar img_4 is de laatste en dan moet ie weer terug naar 1.
Wat heb je zelf tot nu toe?quote:
Wie kan mij even helpen met javascript?
Ik heb een div met id "content". Deze div moet de achtergrond "img_1.jpg" gebruiken.
Ik heb ergens op de pagina een button. Als je op deze button klikt dan moet de achtergrond naar "img_2.jpg" veranderen. Als je dan nog een keer klikt dan naar img_3 etc. Maar img_4 is de laatste en dan moet ie weer terug naar 1.
