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

quote:

Op vrijdag 21 augustus 2015 21:22 schreef robin007bond het volgende:
Vinden jullie het ook een bijzonder businessmodel dat Highcharts heeft? Hoe controleren ze die licenties.

Highcharts werkt via een callback naar hun eigen servers. Als een grote speler hun API gebruikt, zien ze de referrals wel terug in de logging. Kleine spelers komen er waarschijnlijk wel mee weg idd, afhankelijk van hoe druk hun advocaat het heeft.

quote:

Op vrijdag 21 augustus 2015 21:55 schreef robin007bond het volgende:

[..]

Denk het ook, maar toch wel bijzonder dat zo veel bedrijven blijkbaar uit "good will" toch licenties kopen.

Een bedrijf is alleen maar blij als ze ergens een paar honderd euro voor mogen aftrekken. Al die licenties zijn complete peanuts en geen echte kosten waar je lang over na hoeft te denken.

quote:

Op dinsdag 18 augustus 2015 18:51 schreef Inolvidable het volgende:

[..]

Jep, inderdaad. Met bovenstaande code kwam ik al iets verder (dankje dus!). Ik heb me wat ingelezen in HTML en CCS, maar sommige dingen gaan me toch boven m'n pet. Ik ben op dit moment de pagina aan het verhuizen dus ik kan ook niet heel veel uitproberen, maar ik probeer het nu bij m'n eigen website uit en het komt dan slechts als een klein kadertje en het thema is nog steeds zichtbaar ook al verwijder ik dat.

edit: ik moet dus een 'blank' thema nemen.

Het leek zo makkelijk.

Het is gelukt

Enige probleem is nu dat het niet in alle browsers en op alle desktops volledig te zien is. Weet iemand of ik er een scrollbar of iets in kan zetten of is dat onmogelijk?

quote:

Op woensdag 26 augustus 2015 14:05 schreef Inolvidable het volgende:

[..]

Het is gelukt

Enige probleem is nu dat het niet in alle browsers en op alle desktops volledig te zien is. Weet iemand of ik er een scrollbar of iets in kan zetten of is dat onmogelijk?

Ik weet niet precies waarover het gaat, ben aan het werk, kan niet echt reageren, maar misschien kijken naar overflow:auto; enzovoort van css

quote:

Op woensdag 26 augustus 2015 14:17 schreef jodelahity het volgende:

[..]

Ik weet niet precies waarover het gaat, ben aan het werk, kan niet echt reageren, maar misschien kijken naar overflow:auto; enzovoort van css

Had ik al gedaan, maar dat werkte niet. Heb nu een Plugin geïnstalleerd en ik ben tevreden.

Weet iemand toevallig of window.matchmedia ook met em eenheden werkt? Zie alleen maar voorbeelden met px en de documentatie is niet erg expliciet hier over.

quote:

Op dinsdag 1 september 2015 10:17 schreef n8n het volgende:
Weet iemand toevallig of window.matchmedia ook met em eenheden werkt? Zie alleen maar voorbeelden met px en de documentatie is niet erg expliciet hier over.

quote:

Returns a new MediaQueryList object representing the parsed results of the specified media query string.

Je zou dus als ik het goed begrijp iedere vorm van een media-query moeten kunnen meegeven, of dat nou in em's, pixels, resolutie of wat dan ook is.

quote:

Op dinsdag 1 september 2015 10:35 schreef PimD het volgende:

[..]


[..]

Je zou dus als ik het goed begrijp iedere vorm van een media-query moeten kunnen meegeven, of dat nou in em's, pixels, resolutie of wat dan ook is.

klopt, ik twijfel alleen omdat em afhankelijk is van de css (font-size) en het zoomniveau van de client. Niet zo straight forward als px. Ik zet zo wel een testcase op.

Ik loop even vast: wat ik wil is een transparant background over een img (en bij een hover verdwijnt / vermindert de background).

quote:

<div class="portfolio-item">

<a href="/klanten/[...]/"><img src="img/[...]" alt="[...]"> <span>[...]</span></a>

</div>

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.

quote:

.portfolio-item a { color: #fff; font-size: 24px; text-decoration: none; position: relative; display: inline-block; max-width: 990px; width: 100%; height: 100%; }
.portfolio-item a img { width: 100%; height: 100%; }
.portfolio-item a span { position: absolute; top: 50%; left: 40%; }

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

Any help?

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