[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 ]

Ik ben op dit moment bezig met een verticaal menu, welke een content vak naar rechts opent.
Alleen wil ik dat dit menu open blijft wanneer je met de muis per ongeluk over een ander item gaat wanneer je naar de content wil.

Ik ben alle nog niet helemaal zeker hoe ik dit het beste kan aanpakken, ik kan een delay instellen op het dichtklappen in en in de periode andere elementen op slot zetten zodat deze niet open mogen klappen.

Hebben jullie een beter idee?

Mocht het niet helemaal duidelijk zijn, een paint maakt alles duidelijker.



Lichtblauw is het menu, en donkerblauw de content. En ik wil graag dat het donkerblauwe vlak open blijft wanneer je via de gele vlakken er naar toe gaat. Wat dus andere menu items zijn.

En zoals altijd wanneer je het vraagt kom je een paar minuten later het antwoord tegen, dit is waarschijnlijk hoe ik het ga doen.

Voor de mensen wie geïnteresseerd zijn.
https://css-tricks.com/dr(...)ouse-movement-paths/

Ik zit even met een onhandig probleempje.
Ik draai op mijn OSX een Parallels versie van IE9 om sites waar ik aan werk te testen.
Op een of andere manier is er nu ingesteld dat als ik een .js bestand wil openen dat gebeurt in het kladblok van de Windows image in Parallels. Die start dus ook steeds op als ik er niet aan denk expliciet aan te geven mijn .js bestanden in Sublime Text te openen.
Ik heb al geprobeerd om via alt + rechter muis knop "open altijd met" te gebruiken maar dan opent het bestand de volgende keer wederom in Parallels.

Iemand een betere oplossing om de bestandskoppeling aan te passen zonder dat ik programma's moet gaan herinstalleren e.d.

Ik gebruik overigens voor mijn bestandsnavigatie Path Finder 7, maar Finder zelf heeft het probleem ook. Parallels is versie 10.

quote:

Op vrijdag 25 september 2015 12:59 schreef BrainOverfloW het volgende:
Ik zit even met een onhandig probleempje.
Ik draai op mijn OSX een Parallels versie van IE9 om sites waar ik aan werk te testen.
Op een of andere manier is er nu ingesteld dat als ik een .js bestand wil openen dat gebeurt in het kladblok van de Windows image in Parallels. Die start dus ook steeds op als ik er niet aan denk expliciet aan te geven mijn .js bestanden in Sublime Text te openen.
Ik heb al geprobeerd om via alt + rechter muis knop "open altijd met" te gebruiken maar dan opent het bestand de volgende keer wederom in Parallels.

Iemand een betere oplossing om de bestandskoppeling aan te passen zonder dat ik programma's moet gaan herinstalleren e.d.

Ik gebruik overigens voor mijn bestandsnavigatie Path Finder 7, maar Finder zelf heeft het probleem ook. Parallels is versie 10.

Op een bestand in de Finder, cmd + i. In het venster onder ‘open with’ de app kiezen en daarna op ‘change all’ klikken. Dit per type bestand, dus 1 keer voor alle .js bestanden.

quote:

Op zaterdag 26 september 2015 11:23 schreef n8n het volgende:

[..]

Op een bestand in de Finder, cmd + i. In het venster onder ‘open with’ de app kiezen en daarna op ‘change all’ klikken. Dit per type bestand, dus 1 keer voor alle .js bestanden.

Dat werkt Dank je

Ik kwam onderstaand stukje Javascript tegen:


Deze laat de JSON-waarden van een vriend met de naam "Steve" zien.

Waar ik mee zit, is dat ik weinig informatie kan vinden wat "friends[prop]" eigenlijk inhoudt.

Een object is zo: friends.foobar.

Een array is eerder array[1,2,3].

Maar friends is een object. Dus ik vraag mij af waarom het gezien wordt als een array met de "friends[prop]".

for(var prop in friends)

prop is een key in een loop, friends.steve en -.bill dus.

Er wordt door iedere property van het friends-object gelopen. Voor iedere property wordt een variabele 'prop' gemaakt. In jouw geval is het dus zo dat bij de eerste iteratie van de loop prop = friends.bill en bij de tweede iteratie is prop = friends.steve. Ik denk dat je dit beter gewoon met een array kunt oplossen met daarin objecten.

quote:

Op zaterdag 26 september 2015 20:52 schreef Robuustheid het volgende:
Ik kwam onderstaand stukje Javascript tegen:
[ code verwijderd ]

Deze laat de JSON-waarden van een vriend met de naam "Steve" zien.

Waar ik mee zit, is dat ik weinig informatie kan vinden wat "friends[prop]" eigenlijk inhoudt.

Een object is zo: friends.foobar.

Een array is eerder array[1,2,3].

Maar friends is een object. Dus ik vraag mij af waarom het gezien wordt als een array met de "friends[prop]".

Dat is van Codecadamy, een oefening. De kans is groot dat er een stuk code ontbreekt.

Een object is eigenlijk een array. person.name is ook aan te roepen met person["name"]

quote:

Op zondag 27 september 2015 00:20 schreef Catch22- het volgende:
Een object is eigenlijk een array. person.name is ook aan te roepen met person["name"]

Uhm, nee. Gewoon niet.
Dat je een property als index kan aanroepen maakt het nog geen array.

quote:

Op zondag 27 september 2015 16:17 schreef Crutch het volgende:

[..]

Uhm, nee. Gewoon niet.
Dat je een property als index kan aanroepen maakt het nog geen array.

even simpel houden voor iemand die net begint he

quote:

Op zaterdag 26 september 2015 20:52 schreef Robuustheid het volgende:
Ik kwam onderstaand stukje Javascript tegen:
[ code verwijderd ]

Deze laat de JSON-waarden van een vriend met de naam "Steve" zien.

Waar ik mee zit, is dat ik weinig informatie kan vinden wat "friends[prop]" eigenlijk inhoudt.

Een object is zo: friends.foobar.

Een array is eerder array[1,2,3].

Maar friends is een object. Dus ik vraag mij af waarom het gezien wordt als een array met de "friends[prop]".

Voor een object mag je zowel friends.foo als friends["foo"] gebruiken. De eerste is makkelijker om te schrijven en te lezen maar is niet te gebruiken als je een variabele wilt hebben.

Hier is prop een variabele en zit je dus vast aan de tweede notatie. Als je friends.prop gebruikt, krijg je altijd de property met naam prop, en da's niet wat je zoekt.

Zie bijvoorbeeld ook http://stackoverflow.com/(...)notation-vs-brackets

Hallo, ik kom ergens niet uit!

Ik wil graag een full image background op een one page, precies als dit voorbeeld eigenlijk:

http://ironsummitmedia.github.io/startbootstrap-creative/

Als je naar de pagina eronder gaat, dan schuift de website er meteen heen en snijdt de foto ook af op dat punt.

Ik heb gewoon dit


in de div gezet, maar het werkt nog niet echt goed

Het maakt ook niet uit hoe groot je de browser maakt, de foto blijft altijd wel volledig in beeld, lijkt me heel prettig om te hebben.

quote:

Op woensdag 7 oktober 2015 15:12 schreef richolio het volgende:
Hallo, ik kom ergens niet uit!

Ik wil graag een full image background op een one page, precies als dit voorbeeld eigenlijk:

http://ironsummitmedia.github.io/startbootstrap-creative/

Als je naar de pagina eronder gaat, dan schuift de website er meteen heen en snijdt de foto ook af op dat punt.

Ik heb gewoon dit
[ code verwijderd ]

in de div gezet, maar het werkt nog niet echt goed

quote:

Op woensdag 7 oktober 2015 15:13 schreef richolio het volgende:
Het maakt ook niet uit hoe groot je de browser maakt, de foto blijft altijd wel volledig in beeld, lijkt me heel prettig om te hebben.

Wat wil je nu precies?

Iets wat die website ook heeft, namelijk een one-page website met bovenaan een full image background...



De foto blijft full page, ongeacht hoe groot je de browser maakt.. De one-page zelf lukt me wel, maar die foto is het probleem.

quote:

Op woensdag 7 oktober 2015 15:12 schreef richolio het volgende:

in de div gezet, maar het werkt nog niet echt goed

Is dat divje wel zo groot als de hele pagina?

Inderdaad, die div moet een 'height: 100vh' hebben.

Als hier nog VueJS gebruikers zijn ICM bootstrap:
https://github.com/yuche/vue-strap

Geen jquery en bootstrap.js meer nodig en lekker semantisch, nog wel in alpha.

quote:

Op woensdag 7 oktober 2015 23:31 schreef TwenteFC het volgende:
Als hier nog VueJS gebruikers zijn ICM bootstrap:
https://github.com/yuche/vue-strap

Geen jquery en bootstrap.js meer nodig en lekker semantisch, nog wel in alpha.

Ben ook wat aan het oefenen met Vue, vind het tot nu toe wel fijn in elkaar zitten.

Hallo allen.

Ik had een slider gevonden, met maar vier foto's en dus vier bolletjes om op te klikken.

Ik heb de bolletjes uit kunnen breiden tot 10, maar ze sliden nergens heen.

HTML van Slider


CSS ervan


Heel misschien weet iemand het probleem of heeft dit eerder gehad oid?

quote:

Op zondag 25 oktober 2015 20:01 schreef ikbenrond het volgende:
Hallo allen.

Ik had een slider gevonden, met maar vier foto's en dus vier bolletjes om op te klikken.

Ik heb de bolletjes uit kunnen breiden tot 10, maar ze sliden nergens heen.

HTML van Slider
[ code verwijderd ]

CSS ervan
[ code verwijderd ]

Heel misschien weet iemand het probleem of heeft dit eerder gehad oid?

[ afbeelding ]

Heb je er wel javascript bij om de slider ook daadwerkelijk te laten werken? Met alleen HTML en CSS blijft het een statisch geheel.

quote:

Op zondag 25 oktober 2015 20:11 schreef BrainOverfloW het volgende:

[..]

Heb je er wel javascript bij om de slider ook daadwerkelijk te laten werken? Met alleen HTML en CSS blijft het een statisch geheel.

Ik heb 'm in een codepen gezet ;

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

Het is wel wat ik wil. Ik zie nu dat hij wel ergens heen slide, maar naar een leeg beeld, geen foto dus.