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.
[html, css, js] Voor Dummies
Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.
HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen. Omdat javascript zeer veelzijdig is, is er voor specifieke JS vragen ook een specaal topic, zie: [Javascript] voor dummies
Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Deze kun je stellen in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. kun je terecht in Het grote (betaalde) webhosting topic
En voor Wordpress is er ook een speciaal topic, als het om meer gaat dan de HTML/CSS van een theme: [Wordpress]Algemeen topic
Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (
, zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.
Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.
IK SNAP ER NIETS VAN HELLEP! WAT IS CSS?
We helpen iedereen graag in dit topic, ook mensen die er helemaal niets van begrijpen. Maar we verwachten wel dat je je best doet om het wel te gaan begrijpen. Lees eens wat tutorials en probeer het altijd eerst zelf. Je krijgt hier tips waar je zelf iets mee moet doen.
Hier een paar artikelen over CSS elementen die vaak voor verwarring zorgen
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
Heb je zin om HTML, CSS of Javascript leren, dan zijn deze video tutorials een goede plek om te beginnen
30 Days to Learn HTML & CSS
30 Days to Learn jQuery
JavaScript from null
Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.
HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen. Omdat javascript zeer veelzijdig is, is er voor specifieke JS vragen ook een specaal topic, zie: [Javascript] voor dummies
Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Deze kun je stellen in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. kun je terecht in Het grote (betaalde) webhosting topic
En voor Wordpress is er ook een speciaal topic, als het om meer gaat dan de HTML/CSS van een theme: [Wordpress]Algemeen topic
Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (
, zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.
IK SNAP ER NIETS VAN HELLEP! WAT IS CSS?
We helpen iedereen graag in dit topic, ook mensen die er helemaal niets van begrijpen. Maar we verwachten wel dat je je best doet om het wel te gaan begrijpen. Lees eens wat tutorials en probeer het altijd eerst zelf. Je krijgt hier tips waar je zelf iets mee moet doen.
Hier een paar artikelen over CSS elementen die vaak voor verwarring zorgen
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
Heb je zin om HTML, CSS of Javascript leren, dan zijn deze video tutorials een goede plek om te beginnen
30 Days to Learn HTML & CSS
30 Days to Learn jQuery
JavaScript from null
“Specialization is for insects”.—Robert Heinlein
Hallo script magistralen, heb dus ene js met een loop die bij onclick (is de bedoeling) een functie aanroept. Het script zegt alleen fuck die onclick ik doe het gewoon bij elke link in de loop.
De JavaScript:
Wat er dus gebeurd is dat er een oneindige loop van automatische redirects komt (wat niet de bedoeling is). Weet iemand waarom het niet onclick gebeurd maar laten we zeggen continue met magische krachten?
De JavaScript:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // index all links on the current page var linkindex = document.getElementsByTagName('a'), linkindexlength = linkindex.length; // loop trough links on page and change onclick behaviour for( i = 0; i < linkindexlength; i++ ) { linkindex[i].onclick = jsredirect(i); } // change default link behaviour to js redirect function jsredirect(link) { window.location = linkindex[link].getAttribute('href'); return false; } |
Wat er dus gebeurd is dat er een oneindige loop van automatische redirects komt (wat niet de bedoeling is). Weet iemand waarom het niet onclick gebeurd maar laten we zeggen continue met magische krachten?
“Specialization is for insects”.—Robert Heinlein
En wat gebeurd er als je van de onclick een functie maakt?quote:Op zaterdag 28 juni 2014 13:29 schreef n8n het volgende:
Hallo script magistralen, heb dus ene js met een loop die bij onclick (is de bedoeling) een functie aanroept. Het script zegt alleen fuck die onclick ik doe het gewoon bij elke link in de loop.
De JavaScript:
[ code verwijderd ]
Wat er dus gebeurd is dat er een oneindige loop van automatische redirects komt (wat niet de bedoeling is). Weet iemand waarom het niet onclick gebeurd maar laten we zeggen continue met magische krachten?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // index all links on the current page var linkindex = document.getElementsByTagName('a'), linkindexlength = linkindex.length; // loop trough links on page and change onclick behaviour for( i = 0; i < linkindexlength; i++ ) { linkindex[i].onclick = function(){ jsredirect(i); }; } // change default link behaviour to js redirect function jsredirect(link) { window.location = linkindex[link].getAttribute('href'); return false; } |
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
dat zegt jslint dat ik geen functie in een loop mag zetten maar het werkt welquote:Op zaterdag 28 juni 2014 13:34 schreef boem-dikkie het volgende:
[..]
En wat gebeurd er als je van de onclick een functie maakt?
onclick = function(){
redirect();
}
Met jouw code vind ik dat trouwens geen bezwaar want de (anonieme) functie doet verder niks dan de echte functie aanroepen. Beter. Thanks a bunch
“Specialization is for insects”.—Robert Heinlein
Het probleem is dat onclick de functie zelf moet zijn (bv onclick = jsredirect) en niet de output van de functie (zoals je krijgt bij onclick = jsredirect()).quote:
[..]
dat zegt jslint dat ik geen functie in een loop mag zetten maar het werkt wel
Ah oke, ik dacht nu (wat ik eerst had) dat het sowieso zou 'wachten' op een click, ogenschijnlijk vreemde manier om duidelijk te maken dat het niet werkt zoals bedoeldquote:Op zaterdag 28 juni 2014 13:36 schreef Tijn het volgende:
[..]
Het probleem is dat onclick de functie zelf moet zijn (bv onclick = jsredirect) en niet de output van de functie (zoals je krijgt bij onclick = jsredirect()).
“Specialization is for insects”.—Robert Heinlein
Wat je eigenlijk deed was in een loop de functie jsredirect aanroepen (en daarmee dus ook direct de window.location veranderen) en vervolgens de onclick-handler op "false" zetten (want dat is de output van de functie).quote:
[..]
Ah oke, ik dacht nu (wat ik eerst had) dat het sowieso zou 'wachten' op een click, ogenschijnlijk vreemde manier om duidelijk te maken dat het niet werkt zoals bedoeld
Je wil niet dat de functie wordt uitgevoerd in de loop, je wil alleen dat bij een onclick gelijk is aan die functie. Daarom laat je de haakjes weg.
Deze pagina geeft meer uitleg + een werkbare oplossing trouwens: http://jslinterrors.com/dont-make-functions-within-a-loop
chill dankjewel, het automatisch redirecten is weg maar de functie is ook kapot. Ga er later even naar kijken, moet nu een andere klus afhandelen. Mehquote:
Deze pagina geeft meer uitleg + een werkbare oplossing trouwens: http://jslinterrors.com/dont-make-functions-within-a-loop
“Specialization is for insects”.—Robert Heinlein
dan snap ik weer niet hoe de functie weet welk argument gebruikt wordt (inhoud haakjes) maar ik ga eerst je artikel lezen voordat ik verder vraag. Wel prettig weer wat leven in dit topicquote:Op zaterdag 28 juni 2014 13:40 schreef Tijn het volgende:
[..]
Wat je eigenlijk deed was in een loop de functie jsredirect aanroepen (en daarmee dus ook direct de window.location veranderen) en vervolgens de onclick-handler op "false" zetten (want dat is de output van de functie).
Je wil niet dat de functie wordt uitgevoerd in de loop, je wil alleen dat bij een onclick gelijk is aan die functie. Daarom laat je de haakjes weg.
“Specialization is for insects”.—Robert Heinlein
Ja, dat is precies waar dat artikeltje over gaat.quote:Op zaterdag 28 juni 2014 13:52 schreef n8n het volgende:
[..]
dan snap ik weer niet hoe de functie weet welk argument gebruikt wordt (inhoud haakjes) maar ik ga eerst je artikel lezen voordat ik verder vraag. Wel prettig weer wat leven in dit topic
Jouw code zou er zo uit moeten zien denk ik:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | // index all links on the current page var linkindex = document.getElementsByTagName('a'), linkindexlength = linkindex.length, i; // change default link behaviour to js redirect function jsredirect(index) { "use strict"; window.location = linkindex[index].getAttribute('href'); return false; } // return handler function makeHandler(index) { "use strict"; return function () { jsredirect(index); }; } // loop trough links on page and change onclick behaviour for (i = 0; i < linkindexlength; i += 1) { linkindex[i].onclick = makeHandler(i); } |
[ Bericht 3% gewijzigd door Tijn op 28-06-2014 14:14:32 ]
Dit zou eventueel ook heel eenvoudig met jQuery kunnen.quote:
Hallo script magistralen, heb dus ene js met een loop die bij onclick (is de bedoeling) een functie aanroept. Het script zegt alleen fuck die onclick ik doe het gewoon bij elke link in de loop.
De JavaScript:
[ code verwijderd ]
Wat er dus gebeurd is dat er een oneindige loop van automatische redirects komt (wat niet de bedoeling is). Weet iemand waarom het niet onclick gebeurd maar laten we zeggen continue met magische krachten?
| 1 2 3 4 5 6 7 | <?php $('a').click(function(e) { e.preventDefault(); //jouw extra functie. window.location = $(this).attr('href'); }); ?> |
No citizen has a right to be an amateur in the matter of physical training...what a disgrace it is for a man to grow old without ever seeing the beauty and strength of which his body is capable.
Maar... waarom zou je het default browser gedrag afvangen en dan de window.location via Javascript zetten? :-D
Bleuh.
Misschien een iOS home screen web app? Dan opent een normale link in Safari, terwijl een window.location change binnen de app blijft.quote:Op zaterdag 28 juni 2014 23:29 schreef PimD het volgende:
Maar... waarom zou je het default browser gedrag afvangen en dan de window.location via Javascript zetten? :-D
Lol inderdaad de enige reden .quote:
[..]
Misschien een iOS home screen web app? Dan opent een normale link in Safari, terwijl een window.location change binnen de app blijft.
Precies dat jaquote:
[..]
Misschien een iOS home screen web app? Dan opent een normale link in Safari, terwijl een window.location change binnen de app blijft.
“Specialization is for insects”.—Robert Heinlein
Je kunt het trouwens simpeler doen:quote:
Op | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | var a, i; function linkHandler(link) { "use strict"; return function () { window.location = link; return false; }; } a = document.getElementsByTagName("a"); for (i = 0; i < a.length; i += 1) { a[i].onclick = linkHandler(a[i].getAttribute("href")); } |
Ook vrij eenvoudig met vanilla JS zoals bovenstaande post laat zien.quote:
[..]
Dit zou eventueel ook heel eenvoudig met jQuery kunnen.
[ code verwijderd ]
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
Ik zit even om te prutsen met een website en ik heb met jquery een sorteer functie gemaakt voor een aantal div's met lijsten er in.
Ik wil nu dat als je een selectie maakt van twee dingen en het staat niet in de lijst dat deze hele lijst en div weg wordt gehaald en dat de rest doorschuift, is dat mogelijk? Zie voorbeeld.
Begin
Na selectie blijkt er geen overeenkomst te zijn in div1b, div2a en div2b, deze moeten weg.
Dit gebeurd er op dit moment:
En ik wil dit voor elkaar krijgen:
Alvast bedankt
Ik wil nu dat als je een selectie maakt van twee dingen en het staat niet in de lijst dat deze hele lijst en div weg wordt gehaald en dat de rest doorschuift, is dat mogelijk? Zie voorbeeld.
Begin
Na selectie blijkt er geen overeenkomst te zijn in div1b, div2a en div2b, deze moeten weg.
Dit gebeurd er op dit moment:
En ik wil dit voor elkaar krijgen:
Alvast bedankt
Wil je de rijen perse in hun eigen div hebben? Als je alle 9 sub-divs in één div zet zouden ze netjes op moeten schuiven als je er een paar divs tussen uit haalt.quote:
Ik zit even om te prutsen met een website en ik heb met jquery een sorteer functie gemaakt voor een aantal div's met lijsten er in.
Ik wil nu dat als je een selectie maakt van twee dingen en het staat niet in de lijst dat deze hele lijst en div weg wordt gehaald en dat de rest doorschuift, is dat mogelijk? Zie voorbeeld.
Begin
[ afbeelding ]
Na selectie blijkt er geen overeenkomst te zijn in div1b, div2a en div2b, deze moeten weg.
[ afbeelding ]
Dit gebeurd er op dit moment:
[ afbeelding ]
En ik wil dit voor elkaar krijgen:
[ afbeelding ]
Alvast bedankt
Anders moet je denk ik kijken naar een oplossing die na het verwijderen, uit de overgebleven div's, nieuwe rijen opbouwt.
Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
Nouja ik maak op dit moment gebruik van bootstrap die de rijen in divs opbouwt. Als ik de rij-divs weghaalt wordt het een grote chaos.quote:
[..]
Wil je de rijen perse in hun eigen div hebben? Als je alle 9 sub-divs in één div zet zouden ze netjes op moeten schuiven als je er een paar divs tussen uit haalt.
Anders moet je denk ik kijken naar een oplossing die na het verwijderen, uit de overgebleven div's, nieuwe rijen opbouwt.
heb nu dit (JS):quote:
[..]
Je kunt het trouwens simpeler doen:
[ code verwijderd ]
Sweetquote:// redirect
// add jsredirect onclick function to all links on page
function approuter() { 'use strict';
for (i = 0; i < linkindexlength; i++) {
linkindex[i].onclick = jsredirect(linkindex[i]);
}
}
// add javascript redirect to all links on page, opens external links in new window
function jsredirect(link) { 'use strict';
var href = link.getAttribute('href'),
rel = link.getAttribute('rel');
return function () {
if (rel === 'external' || rel === 'test') {
window.open = href; dev.console('external link' + href);
} else {
window.location = href; dev.console('internal link' + href);
}
return false;
};
}
heb een rel="external" toegevoegd aan externe links en dit werkt, de links worden alleen niet geopend met window.open, zelfs niet als ik pop-ups niet blokkeer. dev.console logt ze wel (is een console.log() maar dan alleen als dev.mode op true staat).
“Specialization is for insects”.—Robert Heinlein
is toch dé manier om dit probleem op te lossen.quote:
[..]
Nouja ik maak op dit moment gebruik van bootstrap die de rijen in divs opbouwt. Als ik de rij-divs weghaalt wordt het een grote chaos.
“Specialization is for insects”.—Robert Heinlein
Kun je een snel voorbeeld van je code maken in JSfiddle?quote:
[..]
Nouja ik maak op dit moment gebruik van bootstrap die de rijen in divs opbouwt. Als ik de rij-divs weghaalt wordt het een grote chaos.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
