[HTML, CSS, JS] Frontend #43: 0 === -0

quote:

Op vrijdag 4 september 2015 09:57 schreef LeNick het volgende:
Ik loop even vast: wat ik wil is een transparant background over een img (en bij een hover verdwijnt / vermindert de background).

[..]

In de span staat de naam van het project. Die tekst moet zowel horizontaal als verticaal gecentreerd staan.

Met wat kloten heb ik de volgende CSS, waarbij de tekst dus wel in het midden staat, maar niet op een 'nette' manier (vind ik), en ook bij het verkleinen van de browser gaat het dan niet echt netjes.

[..]

Paar jaar terug had ik dit, herinner ik, heel gemakkelijk voor elkaar. Nu lijk ik iets fout te doen.

Any help?

Maak eens een codepen aan.

quote:

Op vrijdag 4 september 2015 09:57 schreef LeNick het volgende:
Ik loop even vast: wat ik wil is een transparant background over een img (en bij een hover verdwijnt / vermindert de background).

[..]

In de span staat de naam van het project. Die tekst moet zowel horizontaal als verticaal gecentreerd staan.

Met wat kloten heb ik de volgende CSS, waarbij de tekst dus wel in het midden staat, maar niet op een 'nette' manier (vind ik), en ook bij het verkleinen van de browser gaat het dan niet echt netjes.

[..]

Paar jaar terug had ik dit, herinner ik, heel gemakkelijk voor elkaar. Nu lijk ik iets fout te doen.

Any help?

Begin eens met die div eromheen weg te halen, het plaatje als achtergrond te zetten van de anchor en de span weg te halen. Je maakt het nu onnodig lastig.

quote:

Op vrijdag 4 september 2015 10:15 schreef donroyco het volgende:

[..]

Maak eens een codepen aan.

http://codepen.io/anon/pen/OyPxKN

Vraagje: ik wil een cash-tabel maken, waarin je moet kunnen invullen hoeveel muntstukken er in kas zitten. Op basis van die input moet een totaal berekend worden dat terug geschreven wordt naar de site.

De enige manier die ik kan bedenken om de bereken- en schrijffunctie te activeren is om er een submit-knop aan te verbinden. Maar ik zat te denken dat er wellicht een makkelijkere manier is, waarbij bijvoorbeeld met een enter of wanneer het invulveld niet meer geselecteerd is.

Helaas ben ik nogal een noob op het gebied van javascript, dus ik ken maar een paar commando's. Met die commando's gaat het bovenstaande niet lukken. Google geeft ook geen goede suggesties, allicht door mijn vage zoektermen. Wellicht dat FOK! mij kan helpen?

De "blur" en "keyup" zijn events waarmee je dit kunt triggeren. Als je die beide laat verwijzen naar je reken-functie, moet het goedkomen.

En je zoekt naar event listeners

quote:

Op vrijdag 11 september 2015 13:20 schreef Tijn het volgende:
De "blur" en "keyup" zijn events waarmee je dit kunt triggeren. Als je die beide laat verwijzen naar je reken-functie, moet het goedkomen.

Thanks, het blur werkt. Ik krijg alleen de contentEditable niet naar een nummer. Noch parseInt() noch Number() werkt, ik krijg voortdurend NaN.

Voor de verduidelijking, ik heb het zo opgesteld:

Log eens wat er in coup[100] zit

En waarom doe je moeilijk met contenteditable ipv gewoon een input

quote:

Op zaterdag 12 september 2015 17:42 schreef Ser_Ciappelletto het volgende:

[..]

Thanks, het blur werkt. Ik krijg alleen de contentEditable niet naar een nummer. Noch parseInt() noch Number() werkt, ik krijg voortdurend NaN.

Voor de verduidelijking, ik heb het zo opgesteld:
[ code verwijderd ]

Je probeert het hele jQuery object om te zetten naar een integer in plaats van alleen de waarde van het veld.
Deze codepen doet volgens mij wat je bedoeld.

Verder met Catch22 eens dat input een stuk makkelijker, en netter, is via de daarvoor bedoelde input elementen waar mensen al mee bekend zijn. Van het gemiddelde stuk tekst op een website is het laatste wat ik zou verwachten dat deze editable zou zijn.

En als je er nu ook nog een number input van maakt, klopt het semantisch en ux technisch ook nog

quote:

Op zaterdag 12 september 2015 17:57 schreef BrainOverfloW het volgende:

[..]

Je probeert het hele jQuery object om te zetten naar een integer in plaats van alleen de waarde van het veld.
Deze codepen doet volgens mij wat je bedoeld.

Verder met Catch22 eens dat input een stuk makkelijker, en netter, is via de daarvoor bedoelde input elementen waar mensen al mee bekend zijn. Van het gemiddelde stuk tekst op een website is het laatste wat ik zou verwachten dat deze editable zou zijn.

Input heb ik niet gedaan omdat het m'n hele layout verneukt.

Heb het juist toch eens geprobeerd, maar daarbij krijg ik hetzelfde probleem: als ik die een ID geef en daarnaar verwijs, werkt de functie wel, maar de variabele is nog steeds geen cijfer. Moet ik op een andere manier verwijzen naar de input van dat element?

Neem een uurtje de tijd voor jquery 101 en opmaak van inputs.

quote:

Op zaterdag 12 september 2015 18:21 schreef Ser_Ciappelletto het volgende:

[..]

Input heb ik niet gedaan omdat het m'n hele layout verneukt.

Heb het juist toch eens geprobeerd, maar daarbij krijg ik hetzelfde probleem: als ik die een ID geef en daarnaar verwijs, werkt de functie wel, maar de variabele is nog steeds geen cijfer. Moet ik op een andere manier verwijzen naar de input van dat element?

Inputs werken niet met $().text(); maar met $().val(); om de inhoud ervan te pakken te krijgen. Dat kun je hier zien.

Ik kan geen oordeel geven over hoe je layout er uit ziet met inputs zonder het te zien maar bedenk in ieder geval dat ook input velden met CSS te stijlen vallen om ze meer in lijn met je layout te laten zijn.

quote:

Op zaterdag 12 september 2015 18:37 schreef BrainOverfloW het volgende:

[..]

Inputs werken niet met $().text(); maar met $().val(); om de inhoud ervan te pakken te krijgen. Dat kun je hier zien.

Thanks, dat ga ik zo eens proberen.

quote:

Ik kan geen oordeel geven over hoe je layout er uit ziet met inputs zonder het te zien maar bedenk in ieder geval dat ook input velden met CSS te stijlen vallen om ze meer in lijn met je layout te laten zijn.

Ja, dat weet ik. Het probleem is vooral dat ik al genoeg moeite heb gehad met de gewone layout in orde te krijgen, dat ik een beetje huiverig ben om die opnieuw aan te passen. Maar ach, het is weer een goede oefening.

quote:

Op zaterdag 12 september 2015 18:43 schreef Ser_Ciappelletto het volgende:

[..]

Thanks, dat ga ik zo eens proberen.

[..]

Ja, dat weet ik. Het probleem is vooral dat ik al genoeg moeite heb gehad met de gewone layout in orde te krijgen, dat ik een beetje huiverig ben om die opnieuw aan te passen. Maar ach, het is weer een goede oefening.

Dingen uitzoeken leer je van en het gaat dan steeds sneller. Dus niet klooien tot het is Zoals je wil, maar uitzoeken waarom het niet is Zoals je wil en het adhv de gevonden informatie aanpassen

quote:

Op zaterdag 12 september 2015 18:47 schreef Catch22- het volgende:

[..]

Dingen uitzoeken leer je van en het gaat dan steeds sneller. Dus niet klooien tot het is Zoals je wil, maar uitzoeken waarom het niet is Zoals je wil en het adhv de gevonden informatie aanpassen

Hmm, verschillende opties gebruiken helpt ook hoor. Als manier 1 niet werkt en manier 2 wel, kun je jezelf altijd eens afvragen waarom dat zo is. Maar in praktijk komt het wel vaak neer op even Googlen.

quote:

Op zaterdag 12 september 2015 18:55 schreef Ser_Ciappelletto het volgende:

[..]

Hmm, verschillende opties gebruiken helpt ook hoor. Als manier 1 niet werkt en manier 2 wel, kun je jezelf altijd eens afvragen waarom dat zo is. Maar in praktijk komt het wel vaak neer op even Googlen.

Ook van Googlen kun je een hoop leren

Begrijpen waarom manier 1 niet werkt en manier 2 wel zorgt er voor dat je de volgende keer altijd manier 2 zult gebruiken. Als je een oplossing alleen overneemt zonder te snappen waarom het werkt zul je de volgende keer dezelfde fout makkelijk nog eens maken. Daarom is het handig om de bedoelde werking van functionaliteiten te snappen.
Wat tijd steken in het leren van de basis van jQuery is daarom zeker een aanrader als je je site wat interactiviteit wilt geven. Daarbij loop je namelijk constant tegen vragen aan van "op welke knop is er gedrukt?", "wat is de waarde in veld x?" enz. Weten hoe je dat soort dingen in jQuery kunt bevragen is erg handig om goed te snappen. En dan nog loop je vast nog wel eens tegen wat dingen aan waar je niet direct uit komt en dan is Google gewoon weer je grootste vriend. Dat doen we allemaal.

Daarnaast heb je ook nog genoeg situaties waarin meerdere oplossingen werken. Toch zal een van beide beter zijn dan de ander.
Neem jouw invoer. Zowel een editable <p> als een <input> lossen jouw probleem prima op. Je zou daar genoegen mee kunnen nemen en het zo laten staan. Je zou je ook af kunnen vragen welke van de twee de meeste voordelen heeft, naast het feit dat het werkt. Dan kom je naar mijn mening bij <input> uit want:
- <p> tags zijn niet de plek waar gebruikers verwachten input te kunnen geven.
- Je kunt als gebruiker niet door <p> tags heen tabben, bij <inputs> wel.
- <input>'s zijn de standaard manier, waardoor plugins zoals bijvoorbeeld een form validator gebouwd zal zijn om met <input>'s te werken.
- <input> data zal netjes met je POST requests meegestuurd worden als je je formulier naar een server wilt sturen. Of dat bij <p> tags zo is zonder extra werk vraag ik me af.
- Er zijn vast nog wel meer redenen te bedenken

Leren waarom dingen best practices zijn geworden ten opzichte van andere, wel werkende, oplossingen is dus zeker waardevol. Dan kun je ook een goede afweging maken of het afwijken van de standaard een goede optie is en waarom dat zo is. Die nieuwsgierige houding is wat je, over tijd, een steeds betere coder zal maken.

Bedankt voor de hulp, het is me uiteindelijk gelukt.

quote:

Op zaterdag 12 september 2015 23:15 schreef Ser_Ciappelletto het volgende:
Bedankt voor de hulp, het is me uiteindelijk gelukt.

Helemaal goed Nu weer lekker verder bouwen.

Iemand wat tips 'n tricks? Ik heb wel een heel klein beetje JS-kennis (meer html/css) maar me in de richting helpen welke libraries ik moet gebruiken zou al een stuk helpen.

DIG / [jQuery / Masonry ] Nette gallery in jQuery maken

Heeft iemand een uitleg voor mij, ik kom er weer eens niet uit.

Omdat ik vrijheid van eigen werk wil hebben en voor mij en mn partners een aanpassing aan een berg met sites moest doen (ivm cookie wetgeving blaat) heb ik een scriptje geschreven die ik kan gebruiken op al deze sites.

http://tinyurl.com/qzyfmp6

Het probleem is dat deze op de ene website wel laad, maar op de andere niet

Deze niet: http://tinyurl.com/ogmkp6x
Deze wel: http://tinyurl.com/33omyp

Ik heb alle scripting door genomen maar kan niet vinden waarom het script niet geladen wordt..

Iemand een idee?

Gezien de warning die de regel erboven genereert zou ik zeggen: draai ze eens om...

Welke warning? zie alleen maar 1tje van adblock

quote:

An unbalanced tree was written using document.write() causing data from the network to be reparsed. For more information https://developer.mozilla(...)_Speculative_Parsing

Als ik ABP uitzet krijg ik er nog een hele rits meer (allemaal regel 244)

Ik zie dat niet maar kijk via Chrome, jij via FF zeker?

Firefox geïnstalleerd en regel 244 bekeken (was de link naar m'n counter, en idd de document.write was onvolledig (al jaren...)

Thanks!

[ Bericht 70% gewijzigd door Chandler op 15-09-2015 17:48:28 ]