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. Stel deze in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. is ook een ander topic: 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: Topicreeks: Algemeen Wordpress 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.
Voor je een vraag stel hier, verplichte kost
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
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. Stel deze in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. is ook een ander topic: 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: Topicreeks: Algemeen Wordpress 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.
Voor je een vraag stel hier, verplichte kost
http://www.alistapart.com/articles/css-floats-101/
http://www.alistapart.com/articles/css-positioning-101/
doen we een 'before' tegenwoordig niet met een dubbele dubbele punt?
ah een artikel hier over gevonden
http://www.impressivewebs.com/before-after-css3/
ah een artikel hier over gevonden
http://www.impressivewebs.com/before-after-css3/
“Specialization is for insects”.—Robert Heinlein
Des te meer reden om 'm dubbel te zettenquote:Op vrijdag 9 november 2012 19:16 schreef picodealion het volgende:
IE struikelt daar soms nog over meen ik.
Hoe zorg ik ervoor dat mijn div's elkaar niet overlappen? Ik neem aan dat ik niet voor elke div een marge hoef in te stellen toch?
SPOILEROm 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 10 november 2012 19:55 schreef picodealion het volgende:
Divs overlappen elkaar sowieso niet? Of snap ik je vraag niet?
div "under_top" zit nu onder div "top"
Jawel, maar die </div> tags zie je niet. Ik heb alles laten collapsen om de structuur te laten zien.quote:Op zaterdag 10 november 2012 20:05 schreef KomtTijd... het volgende:
Ín top bedoel je? Je sluit er geeneen af (ja alleen #button).
Ik zou graag willen weten waarom "top" "under_top" overlapt, maar de rest gewoon wel netjes onder elkaar gezet wordt.quote:
En wat moeten wij er in hemelsnaam over gaan gaan zeggen als je maar de helft laat zien?
Wat wil je zien?
http://pastebin.com/0GwJHmaPquote:Op zaterdag 10 november 2012 20:16 schreef KomtTijd... het volgende:
Je code. Liefst gewoon een online sample.
Ik denk dat ik de oplossing al heb. Ik moet alles met position: relative aanduiden in een nieuwe CSS file, dus niet die van Bootstrap (al zou dat natuurlijk ook kunnen, volgens mij).quote:
EDIT: Werkt niet.
Kan ik eigenlijk een CSS naast de CSS van Bootstrap gebruiken? Of wordt alles dan overruled?
Als ik margin-top: 50px; doe, dan komt de tekst wel onder de navigatiebalk uit, maar zo wil ik het niet. Ik wil gewoon dat de delen van de pagina's na elkaar komen en elkaar dus niet overlappen.
Als ik margin-top: 50px; doe, dan komt de tekst wel onder de navigatiebalk uit, maar zo wil ik het niet. Ik wil gewoon dat de delen van de pagina's na elkaar komen en elkaar dus niet overlappen.
Gebruik jsfiddle.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
quote:
Je code. Liefst gewoon een online sample.
Gebruik jsfiddle.quote:
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Problem solved:
<div class="navbar navbar-fixed-top"> moest zijn: <div class="navbar navbar-absolute-top">
Hier gevonden:
http://css-tricks.com/forums/discussion/16366/help-needed/p1
Thanks voor het meedenken!
<div class="navbar navbar-fixed-top"> moest zijn: <div class="navbar navbar-absolute-top">
Hier gevonden:
http://css-tricks.com/forums/discussion/16366/help-needed/p1
Thanks voor het meedenken!
Gooi het gewoon ergens online. Zeker als het zo'n lap code is ipv een kleine testcase.
Je gaat zelf toch ook niet lopen debuggen zonder firebug...
Je gaat zelf toch ook niet lopen debuggen zonder firebug...
Online gooien, wat bedoel je daarmee?quote:Op zaterdag 10 november 2012 20:46 schreef KomtTijd... het volgende:
Gooi het gewoon ergens online. Zeker als het zo'n lap code is ipv een kleine testcase.
Je gaat zelf toch ook niet lopen debuggen zonder firebug...
Firebug? Ook nog nooit van gehoord. Zal eens kijken wat het is.
Als ik errors gelijk wil outputten in een dropdown-login, dan moet ik met javascript werken toch? Of kan ik dat ook gewoon met PHP doen?
web inspectorquote:
Gooi het gewoon ergens online. Zeker als het zo'n lap code is ipv een kleine testcase.
Je gaat zelf toch ook niet lopen debuggen zonder firebug...
“Specialization is for insects”.—Robert Heinlein
Ik heb met Bootstrap een typeahead veld gemaakt en ik heb de JS code onder aan m'n HTML pagina geschreven. Als ik dit doe werkt het wel:
..., maar zodra ik een query laat uitvoeren vanuit een ander PHP-bestand, dan gaat er iets niet goed. Het PHP-bestand stand-alone draaien werkt wel.
..., maar zodra ik een query laat uitvoeren vanuit een ander PHP-bestand, dan gaat er iets niet goed. Het PHP-bestand stand-alone draaien werkt wel.
SPOILEROm 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.
En wát gaat er niet goed?quote:Op maandag 12 november 2012 12:17 schreef pascal08 het volgende:
..., maar zodra ik een query laat uitvoeren vanuit een ander PHP-bestand, dan gaat er iets niet goed. Het PHP-bestand stand-alone draaien werkt wel.
quote:
Ik heb met Bootstrap een typeahead veld gemaakt en ik heb de JS code onder aan m'n HTML pagina geschreven. Als ik dit doe werkt het wel:
[ afbeelding ]
..., maar zodra ik een query laat uitvoeren vanuit een ander PHP-bestand, dan gaat er iets niet goed. Het PHP-bestand stand-alone draaien werkt wel.
[ afbeelding ]SPOILEROm 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 stukje klopt niet. De while-loop wordt voor elk resultaat uitgevoerd, en voor elk resultaat herdefiniëer je $array[] als de waarde uit de kolom "last_name". Als je in Chrome of Firebug het network request bekijkt (doe dit dan ook, leer de developer tools gebruiken, leer debuggen) zie je waarschijnlijk dat de PHP-pagina een JSON-object terugstuurt met daarin maar één achternaam.
1
2
3
4
5
6<?php
$mysql_query = mysql_query("SELECT * FROM `users` WHERE last_name LIKE '%$query%' ORDER BY `status` DESC LIMIT 15");
while($row = mysql_fetch_assoc($mysql_query)) {
$array[] = $row['last_name'];
}
?>
Ikzelf zou het zo doen:array_push is een functie waarmee je waardes aan een array kunt toevoegen. Deze code is niet getest overigens, maar zoiets als dit moet zeker werken.
1
2
3
4
5
6
7
8
9<?php
$array = array();
$mysql_query = mysql_query("SELECT * FROM `users` WHERE last_name LIKE '%$query%' ORDER BY `status` DESC LIMIT 15");
while($row = mysql_fetch_assoc($mysql_query)) {
array_push($array,$row['last_name']);
}
header('Content-type: application/json');
echo json_encode($return_array);
?>
Wat betreft je je JS-code, ik betwijfel of dit de juiste manier is om te bereiken wat je doet. De source van de typeahead lijkt mij een statisch element namelijk. Ik denk dat je een keydown event moet binden aan het veld waar je in typt, en in die event handler het source-attribuut moet updaten.
[ Bericht 6% gewijzigd door Merkie op 12-11-2012 12:42:43 ]2000 light years from home
Als ik 'm stand-alone via XAMPP draai, dan zie ik wel een JSON met 8 namen, elke keer wordt er toch gewoon een waarde aan de array toegevoegd?quote:
[..]
[ code verwijderd ]
Dit stukje klopt niet. De while-loop wordt voor elk resultaat uitgevoerd, en voor elk resultaat herdefiniëer je $array[] als de waarde uit de kolom "last_name". Als je in Chrome of Firebug het network request bekijkt (doe dit dan ook, leer de developer tools gebruiken, leer debuggen) zie je waarschijnlijk dat de PHP-pagina een JSON-object terugstuurt met daarin maar één achternaam.
Ikzelf zou het zo doen:
[ code verwijderd ]
array_push is een functie waarmee je waardes aan een array kunt toevoegen. Deze code is niet getest overigens, maar zoiets als dit moet zeker werken.
Enne, voortaan inderdaad zeggen wat er niet goed gaat, lijkt me vrij essentiëel.
in de request en de reply daaropquote:
[..]
Ik heb 'm al in het JS-topic gepost.
eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0
Dit lijkt me inderdaad een goede optie, ik ga dat eens proberen.quote:
Wat betreft je je JS-code, ik betwijfel of dit de juiste manier is om te bereiken wat je doet. De source van de typeahead lijkt mij een statisch element namelijk. Ik denk dat je een keydown event moet binden aan het veld waar je in typt, en in die event handler het source-attribuut moet updaten.
In het tabblad 'network' geeft 'ie wel een 404 fout, dus ik ben ook ergens weer verkeerd aan het linken, even checken...quote:
[..]
in de request en de reply daarop
Je hebt gelijk, sorry. Dit is wat je moet doen denk ik.quote:
[..]
Als ik 'm stand-alone via XAMPP draai, dan zie ik wel een JSON met 8 namen, elke keer wordt er toch gewoon een waarde aan de array toegevoegd?
| 1 2 3 | $("#typeahead").on("keydown", function(){ $(this).typeahead({source: <hier je Ajax-functie>}); }); |
2000 light years from home
Ga ik direct proberen.quote:
[..]
Je hebt gelijk, sorry. Dit is wat je moet doen denk ik.
[ code verwijderd ]
Wat er trouwens vaak gebeurd bij mij, is dat een verandering in de code niet goed wordt doorgevoerd in Chrome, terwijl ik wel gewoon refresh. Ik denk dat het iets te maken heeft met een gecached exemplaar, zou dat kunnen? Hoe testen jullie dit soort scripts?
Altijd CTRL-F5 doen.
De manier die ik je verteld heb gaat trouwens niet werken bedenk ik me net. Ajax is namelijk asynchroon, als je een Ajax-request uitvoert dan moet je het resultaat in het Ajax-request zelf gebruiken. Je kan niet zeggen: var test = ajaxRequest(bla);
Je moet dit ongeveer doen:
De manier die ik je verteld heb gaat trouwens niet werken bedenk ik me net. Ajax is namelijk asynchroon, als je een Ajax-request uitvoert dan moet je het resultaat in het Ajax-request zelf gebruiken. Je kan niet zeggen: var test = ajaxRequest(bla);
Je moet dit ongeveer doen:
| 1 2 3 4 5 6 | $("#typeahead").on("keydown", function(){ $.ajax(bla).done(function(result) { var typeahead = $('#typeahead').typeahead(); typeahead.data('typeahead').source = result; }); }); |
2000 light years from home
F5 is genoeg, de ctrl is alleen nodig als je browsercache corrupt is.quote:
eee7a201261dfdad9fdfe74277d27e68890cf0a220f41425870f2ca26e0521b0
Ik moet nu steeds handmatig al m'n browsergegevens verwijderen, dan doet 'ie het wel.quote:
[..]
F5 is genoeg, de ctrl is alleen nodig als je browsercache corrupt is.
F5 werkt ook lang niet altijd. Vooral IE heeft er een handje van om bestanden vrolijk vast te houden.
Vandaar ook dat niemand in his right mind IE gebruikt als development browser.quote:
F5 werkt ook lang niet altijd. Vooral IE heeft er een handje van om bestanden vrolijk vast te houden.
In IE10 werken placeholders eindelijk wel.quote:
[..]
Vandaar ook dat niemand in his right mind IE gebruikt als development browser.
Je ontkomt er niet aan als je je site wilt testen in IE he. En je weet zelf net zo goed als ik dat een site nooit in één keer werkt in IEquote:
[..]
Vandaar ook dat niemand in his right mind IE gebruikt als development browser.
.
2000 light years from home
vooralsnog moet ik bij elke browser ctrl+f5 drukken om zeker te zijn dat alles vers van het net gehaald wordt en de cache ontweken wordt...quote:
[..]
F5 is genoeg, de ctrl is alleen nodig als je browsercache corrupt is.
Uiteindelijk test je in alle browsers ja, maar voor de initiële ontwikkeling IE gebruiken, dan kom je wel met zulke kromme producten...quote:
[..]
Je ontkomt er niet aan als je je site wilt testen in IE he. En je weet zelf net zo goed als ik dat een site nooit in één keer werkt in IE
| Forum Opties | |
|---|---|
| Forumhop: | |
| Hop naar: | |