[HTML, CSS, JS] Frontend #36: Think before you act

Komt goed, beide sites zijn van dezelfde opdrachtgever.

Ik zit hier met het volgende probleem:

Ik heb een hoop input textboxes die met kleine getallen ingevoerd worden door de gebruiker. Wat dan een logisch scenario is, is dat een gebruiker '1' en 'tab' in razendsnel tempo afwisselt om alle inputs te vullen met 1'tjes. Voor een ander doeleinde wil ik graag dat alle inputveldjes die niet leeg zijn een andere achtergrondkleur krijgen. Heel simpel, echter voert jQuery niet altijd addClass() uit als het allemaal in een razend tempo gaat. Heeft iemand een idee of dit op te lossen is?

http://jsfiddle.net/pascal08/JLz3y/1/

Dit gebeurt er dan:

SPOILER

Om 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.

Dit zou moeten gebeuren:

SPOILER

Om 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.

quote:

Op zaterdag 12 oktober 2013 14:48 schreef pascal08 het volgende:
Ik zit hier met het volgende probleem:

Ik heb een hoop input textboxes die met kleine getallen ingevoerd worden door de gebruiker. Wat dan een logisch scenario is, is dat een gebruiker '1' en 'tab' in razendsnel tempo afwisselt om alle inputs te vullen met 1'tjes. Voor een ander doeleinde wil ik graag dat alle inputveldjes die niet leeg zijn een andere achtergrondkleur krijgen. Heel simpel, echter voert jQuery niet altijd addClass() uit als het allemaal in een razend tempo gaat. Heeft iemand een idee of dit op te lossen is?

http://jsfiddle.net/pascal08/JLz3y/1/

Dit gebeurt er dan:

SPOILER

Om 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.

Dit zou moeten gebeuren:

SPOILER

Om 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.

Je kan het langzaam nabootsen door de 1 vast te houden en dan al op tab te drukken.

Komt er op neer dat ie dan geen 'on(keyup)' ziet in het input wara je net was, maar in de volgende waar je naartoe bent getabbed en dus de functie dus uitvoert op die input. Je zal dus of een 'keydown' of 'change' event moeten gebruiken.

quote:

Op zaterdag 12 oktober 2013 14:55 schreef Maringo het volgende:

[..]

Je kan het langzaam nabootsen door de 1 vast te houden en dan al op tab te drukken.

Komt er op neer dat ie dan geen 'on(keyup)' ziet in het input wara je net was, maar in de volgende waar je naartoe bent getabbed en dus de functie dus uitvoert op die input. Je zal dus of een 'keydown' of 'change' event moeten gebruiken.

Ah, top, probleem opgelost.

quote:

Op zaterdag 12 oktober 2013 15:26 schreef Catch22- het volgende:
Maaruh, dit is gevolgbestrijding.

Waarom zou een gebruiker dat doen? Waarom valideer je niet per veld wat er in staat? Wat maakt t uit als er rommel in komt?

Omdat die validatie niet nodig is. Het is geen registratieformulier.

quote:

Op zaterdag 12 oktober 2013 16:18 schreef Catch22- het volgende:
Waar maak je je dan druk over? Als mensen met muisclicks eenen invullen, a tab s tab d tab f doen?

Garbage in, garbage out. Ik weet niet over welke data t gaat, maar ik zou t gewoon laten als t is.

Ik wil ingevulde velden herkenbaar maken door de achtergrondkleur te laten veranderen.

Zie: http://wefut.com/en/player-database

quote:

Op zaterdag 12 oktober 2013 17:14 schreef pascal08 het volgende:

[..]

Ik wil ingevulde velden herkenbaar maken door de achtergrondkleur te laten veranderen.

Zie: http://wefut.com/en/player-database

Met veel velden maakt dat het wel overzichtelijk inderdaad over welke je hebt ingevuld en welke niet.
Ik heb het ook eens moeten doen voor een klant die precies dat wilde.

quote:

Op zaterdag 12 oktober 2013 17:26 schreef Maringo het volgende:

[..]

Met veel velden maakt dat het wel overzichtelijk inderdaad over welke je hebt ingevuld en welke niet.
Ik heb het ook eens moeten doen voor een klant die precies dat wilde.

Jep. Het zijn nu wel iets te veel velden, wat het vooral op kleinere schermen een puinhoop maakt. Ik heb nu een klein menuutje gemaakt met labeltjes waaraan je kunt zien of er per tabblad velden zijn ingevuld.

quote:

Op zaterdag 12 oktober 2013 14:48 schreef pascal08 het volgende:
Ik zit hier met het volgende probleem:

Ik heb een hoop input textboxes die met kleine getallen ingevoerd worden door de gebruiker. Wat dan een logisch scenario is, is dat een gebruiker '1' en 'tab' in razendsnel tempo afwisselt om alle inputs te vullen met 1'tjes. Voor een ander doeleinde wil ik graag dat alle inputveldjes die niet leeg zijn een andere achtergrondkleur krijgen. Heel simpel, echter voert jQuery niet altijd addClass() uit als het allemaal in een razend tempo gaat. Heeft iemand een idee of dit op te lossen is?

http://jsfiddle.net/pascal08/JLz3y/1/

Dit gebeurt er dan:

SPOILER

Om 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.

Dit zou moeten gebeuren:

SPOILER

Om 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.

Maak er dan keydown van, aangezien er 99 van de 100 keer iets wordt ingevuld.

quote:

Op zaterdag 12 oktober 2013 18:47 schreef Crutch het volgende:

[..]

Maak er dan keydown van, aangezien er 99 van de 100 keer iets wordt ingevuld.

Juist niet toch? Eerder 1/10 keer, want vaak wordt er gewoon overheen 'getabbed' en dat geldt dan ook als een keydown. Change lijkt me logischer, want die wordt alleen geactiveerd als er daadwerkelijk iets ingevuld wordt.

quote:

Op zaterdag 12 oktober 2013 19:08 schreef pascal08 het volgende:

[..]

Juist niet toch? Eerder 1/10 keer, want vaak wordt er gewoon overheen 'getabbed' en dat geldt dan ook als een keydown. Change lijkt me logischer, want die wordt alleen geactiveerd als er daadwerkelijk iets ingevuld wordt.

Nope, tab rekent ie niet mee als keydown, maar als focus.

Kijk zelf: http://jsfiddle.net/JLz3y/2/

quote:

Op zaterdag 12 oktober 2013 19:13 schreef Crutch het volgende:
Kijk zelf: http://jsfiddle.net/JLz3y/2/

Oh ja, dom. Keydown dan maar doen.

Maar wacht even. Als ik een random input selecteer met m'n muis en ik vul vervolgens wat in, dan doet 'ie het niet met keydown.

quote:

Op zaterdag 12 oktober 2013 19:25 schreef pascal08 het volgende:

[..]

Oh ja, dom. Keydown dan maar doen.

Maar wacht even. Als ik een random input selecteer met m'n muis en ik vul vervolgens wat in, dan doet 'ie het niet met keydown.

Dat komt omdat je checkt op !== '' ipv >= 1

heb die van Crutch geupdate en dan pakt hij hem wel meteen als je 1 karakter in vult.
http://jsfiddle.net/JLz3y/3/

quote:

Op zaterdag 12 oktober 2013 19:43 schreef stefanhaan het volgende:

[..]

Dat komt omdat je checkt op !== '' ipv >= 1

heb die van Crutch geupdate en dan pakt hij hem wel meteen als je 1 karakter in vult.
http://jsfiddle.net/JLz3y/3/

Dan heb je weer het probleem dat de achtergrond niet naar wit terugspringt als je de input weer leegmaakt.

Zo doet 'ie het wel weer:
http://jsfiddle.net/pascal08/JLz3y/4/

nvm ik deed op een object de .length en die is dan altijd 1.

Ik heb hem nog een keer voor je aangepast en nu doet hij het wel.
http://jsfiddle.net/JLz3y/7/

quote:

Op zaterdag 12 oktober 2013 19:46 schreef pascal08 het volgende:

[..]

Dan heb je weer het probleem dat de achtergrond niet naar wit terugspringt als je de input weer leegmaakt.

Zo doet 'ie het wel weer:
http://jsfiddle.net/pascal08/JLz3y/4/

Enigste nadeel van 'change' is dat die pas afgevuurd word zodra de focus van het betreffende veld weg is.

[ Bericht 44% gewijzigd door stefanhaan op 12-10-2013 19:53:27 ]

quote:

Op zaterdag 12 oktober 2013 19:47 schreef stefanhaan het volgende:
nvm ik deed op een object de .length en die is dan altijd 1.

Ik heb hem nog een keer voor je aangepast en nu doet hij het wel.
http://jsfiddle.net/JLz3y/7/

[..]

Enigste nadeel van 'change' is dat die pas afgevuurd word zodra de focus van het betreffende veld weg is.

Of als er enter ingedrukt wordt. Als je nu op een input klikt en een 1 invult en verder gaat, slaat 'ie de eerste addClass over.

Met simpele regex check op garbage:
http://jsfiddle.net/pascal08/JLz3y/8/

Even een vraagje over Foundation. Ik heb in een test bestandje de volgende code:

SPOILER: Hele code

Om 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.

Hoe zorg ik er dan voor dat de large-offset-3 ook alleen bij een large scherm werkt. Nu springt die er al in als ik van small naar medium over ga.

Probeer je nu dmv voor iedere mogelijke style een classname te maken, weer met inline-styles te gaan werken?

En div's met classnames als "row" en "column", daar krijg ik al direct jeuk van. Wat ben je in hemelsnaam aan het doen joh? Gebruik een table als je een table nodig hebt, en gebruik op zijn minst enigszins semantische classnames.

quote:

Op woensdag 16 oktober 2013 12:41 schreef KomtTijd... het volgende:
Probeer je nu dmv voor iedere mogelijke style een classname te maken, weer met inline-styles te gaan werken?

En div's met classnames als "row" en "column", daar krijg ik al direct jeuk van. Wat ben je in hemelsnaam aan het doen joh? Gebruik een table als je een table nodig hebt, en gebruik op zijn minst enigszins semantische classnames.

Dat is hoe Foundation responsive webdesign uitvoert. Dit is ook niet meer dan een snel in elkaar gezet voorbeeldje om te kijken hoe ik de offset alleen voor de "large" schermen aan de praat krijg.

ken het niet, zo te zien ook geen behoefte aan om het te leren kennen.

Maar als ik je code zo bekijk, moet je waarschijnlijk gewoon een medium-offset defineren die gelijk is aan de small-offset?

quote:

Op woensdag 16 oktober 2013 12:41 schreef KomtTijd... het volgende:
Probeer je nu dmv voor iedere mogelijke style een classname te maken, weer met inline-styles te gaan werken?

En div's met classnames als "row" en "column", daar krijg ik al direct jeuk van. Wat ben je in hemelsnaam aan het doen joh? Gebruik een table als je een table nodig hebt, en gebruik op zijn minst enigszins semantische classnames.

quote:

Op woensdag 16 oktober 2013 13:01 schreef KomtTijd... het volgende:
ken het niet, zo te zien ook geen behoefte aan om het te leren kennen.

Maar als ik je code zo bekijk, moet je waarschijnlijk gewoon een medium-offset defineren die gelijk is aan de small-offset?

Dit is precies de reden dat ik geen fan ben van grids/frameworks als Twitter Bootstrap. Ik moet er nu mee werken, en ik moet zeggen dat ik een aantal dingen wel heel snel voor elkaar krijg, maar het wordt er een enorme antisemantische brij van classes. Helaas wordt er op het huidige project van me verwacht dat ik me aan Bootstrap houd en dus ook alles opbouw met zulke row- en columns classes. Ik kan mijn collega's niet overtuigen van waarom ik dit geen goede basis vind om je stylesheets op te baseren.

Nouja bij bootstrap is het (voor zover ik het gebruikt heb) nog redelijk beperkt. Je hebt wel classes als big en small maar die zijn nog redelijk obvious.

Zodra je classes offset-3 of roundall gaan heten enzo, wordt het eng. Stel dat je op een gegeven moment tot de conclusie komt dat een offset van 2 pixels toch mooier is en dat rounded corners niet meer hip zijn, zit je ineens met allemaal .offset-3{ margin: 2} en .roundall{border-radius: none} declaraties.

quote:

Op woensdag 16 oktober 2013 13:01 schreef KomtTijd... het volgende:
ken het niet, zo te zien ook geen behoefte aan om het te leren kennen.

Maar als ik je code zo bekijk, moet je waarschijnlijk gewoon een medium-offset defineren die gelijk is aan de small-offset?

Het zijn juist allemaal al gedefineerde classes. Een small-offset-0 bestaat niet. Dat is al wat je standaard krijgt als je geen offset class toevoegt.
Het idee is dat je je scherm in een grid van 12 banen verdeeld. Als je een div de hele breedte wilt laten nemen geef je het een large-12 mee. Wil je 2 divs naast elkaar geef je ze allebei large-6 enz.
Met de small/medium/large classes kun je zo je site indeling aan laten passen aan je schermgrootte.

Dan wil ik dus dit krijgen:





Die large-offset moet dus pas bij de overgang van medium naar large werken. Maar hij werkt al vanaf small naar medium waardoor je ineens dit krijgt:



Verder zijn al die classes via SASS wel netjes weg te werken in enkele, semantische classnamen maar dit is gewoon even een snel probeer bestandje. Dat hoeft er niet mooi uit te zien en nette classes te hebben. Die moeite bewaar ik wel voor mijn echte sites.

quote:

Op woensdag 16 oktober 2013 13:32 schreef KomtTijd... het volgende:
Nouja bij bootstrap is het (voor zover ik het gebruikt heb) nog redelijk beperkt. Je hebt wel classes als big en small maar die zijn nog redelijk obvious.

Zodra je classes offset-3 of roundall gaan heten enzo, wordt het eng. Stel dat je op een gegeven moment tot de conclusie komt dat een offset van 2 pixels toch mooier is en dat rounded corners niet meer hip zijn, zit je ineens met allemaal .offset-3{ margin: 2} en .roundall{border-radius: none} declaraties.

Die large-offset heeft verder niks met pixels te maken. Als ik van de 12 banen mijn div van baan 2 tm 10 wil laten laten lopen geeft ik hem een large-offset-1 mee zodat de eerste baan leeg blijft.