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
Geeft de mogelijkheid om multiline strings te gebruiken in JavaScript.
Iets als:
| 1 2 3 4 5 6 7 8 | var str = '' + '<!doctype html>' + '<html>' + ' <body>' + ' <h1>❤ unicorns</h1>' + ' </body>' + '</html>' + ''; |
| 1 2 3 4 5 6 7 8 | var str = multiline(function(){/* <!doctype html> <html> <body> <h1>❤ unicorns</h1> </body> </html> */}); |
Handig als je een js compressor gebruikt die comments weg gooitquote:Op vrijdag 14 maart 2014 18:56 schreef Aether het volgende:
Kwam deze op GitHub tegen: https://github.com/sindresorhus/multiline
Geeft de mogelijkheid om multiline strings te gebruiken in JavaScript.
Iets als:
[ code verwijderd ]
Kan worden geschreven als:
[ code verwijderd ]
Hebben ze gelukkig aan gedacht; van de link:quote:Op vrijdag 14 maart 2014 18:57 schreef mstx het volgende:
[..]
Handig als je een js compressor gebruikt die comments weg gooit
quote:Minification
Even though minifiers strip comments by default there are ways to preserve them:
• Uglify: Use /*@preserve instead of /* and enable the comments option
• Closure Compiler: Use /*@preserve instead of /*
• YUI Compressor: Use /*! instead of /*
You also need to add 0 after the comment so it's not removed as dead-code.
http://thesassway.com/beg(...)ith-sass-and-compass
http://sass-lang.com/guide
Ik gebruikte zelf koala-app voor less onder windows voor compilatie, die doet ook wel sass. Veel editors kunnen het ook. Netbeans sowieso
Thanks!quote:Op zaterdag 15 maart 2014 12:34 schreef Catch22- het volgende:
http://alistapart.com/article/getting-started-with-sass
http://thesassway.com/beg(...)ith-sass-and-compass
http://sass-lang.com/guide
Ik gebruikte zelf koala-app voor less onder windows voor compilatie, die doet ook wel sass. Veel editors kunnen het ook. Netbeans sowieso
Google geeft alleen maar shitresultaten terug. 
http://www.abookapart.com/products/sass-for-web-designersquote:
Ik ben op zoek naar een goede introductie voor Sass / Compass die het naar behoren uitlegt, ik zie te veel crap voorbij komen.
Kan het ebook wel even delen als je wil?
dit komt van google. De eerste drie resultaten als je zoekt op sass getting startedquote:
[..]
Thanks!
Niet nodig, dank je wel.quote:Op zaterdag 15 maart 2014 13:34 schreef picodealion het volgende:
[..]
http://www.abookapart.com/products/sass-for-web-designers
Kan het ebook wel even delen als je wil?
Ah, ik zat de hele tijd met 'introduction' etc. te klooienquote:
[..]
dit komt van google. De eerste drie resultaten als je zoekt op sass getting started
getting started is de standaard titel voor introductieshttp://javascriptweekly.com/ van de Javascript Weekly newsletter.
http://www.thinkbroadband(...)-jquery-website.html
Lees eens 1 regel verderquote:
Als op regel 1 staat dat je jQuery van een CDN moet inladen, dan haak ik al gauw af hoor. Pas werden er in Engeland 1000'en sites om zeep geholpen doordat er één porno-site geblokkeerd werd door de provider. Daardoor werden alle requests naar de CDN van jQuery geblokkeerd:
http://www.thinkbroadband(...)-jquery-website.html
Implement a fallback to your locally hosted library of same version as shown above. More Info
En voor die 0,01% kans dat dat gebeurt bouw je dus een fallback in, zoals op regel 2 staat.quote:
Als op regel 1 staat dat je jQuery van een CDN moet inladen, dan haak ik al gauw af hoor. Pas werden er in Engeland 1000'en sites om zeep geholpen doordat er één porno-site geblokkeerd werd door de provider. Daardoor werden alle requests naar de CDN van jQuery geblokkeerd:
http://www.thinkbroadband(...)-jquery-website.html
edit: spuit 11
Zelf heb ik Sass and Compass for designer gelezen wat mij erg goed beviel, verder ook Pragmatic Guide to Sass geprobeert, die vond ik een stuk minder en dus ook niet uitgelezen. Het is een niet zo dik boek wat je goed op weg helpt met de basis, en hij leest lekker door.quote:
Ik ben op zoek naar een goede introductie voor Sass / Compass die het naar behoren uitlegt, ik zie te veel crap voorbij komen.
Oo ik zie dat iemand mij al voor was
.Een aantal zaken die worden aangestipt zijn inderdaad een goed idee, maar niet alles snijdt hout imho.quote:Op maandag 17 maart 2014 09:42 schreef Catch22- het volgende:
Interessante link: jQuery standards: http://lab.abhinayrathore.com/jquery-standards/
Waar slaat deze bijvoorbeeld op?
Waarom zou je niet een kortere syntax gebruiken die bovendien de leesbaarheid verhoogt?quote:Avoid using .getJson() or .get(), simply use the $.ajax() as that's what gets called internally.
Omdat dat weer 1 functioncall scheelt.quote:Op maandag 17 maart 2014 17:09 schreef Tijn het volgende:
[..]
Een aantal zaken die worden aangestipt zijn inderdaad een goed idee, maar niet alles snijdt hout imho.
Waar slaat deze bijvoorbeeld op?
[..]
Waarom zou je niet een kortere syntax gebruiken die bovendien de leesbaarheid verhoogt?
So what?quote:
[..]
Omdat dat weer 1 functioncall scheelt.
Thanksquote:
[..]
Zelf heb ik Sass and Compass for designer gelezen wat mij erg goed beviel, verder ook Pragmatic Guide to Sass geprobeert, die vond ik een stuk minder en dus ook niet uitgelezen. Het is een niet zo dik boek wat je goed op weg helpt met de basis, en hij leest lekker door.
Oo ik zie dat iemand mij al voor was
Dat klopt. Maar de meeste van wat er staat snijdt wel hout, helemaal voor beginners.quote:
[..]
Een aantal zaken die worden aangestipt zijn inderdaad een goed idee, maar niet alles snijdt hout imho.
Waar slaat deze bijvoorbeeld op?
[..]
Waarom zou je niet een kortere syntax gebruiken die bovendien de leesbaarheid verhoogt?
Maakt mij ook niks uit, maar dat is wat er staat.quote:
Dit werkt in >IE8, iOS vanaf 5 en verder in vrijwel elke grote browser. Als voordeel worden alle fonts in één http-request geladen!
De overhead van bas64 wordt zo goed als teniet gedaan door server-side compressie (scheelt ~1–2% maar dat is de declaratie-css). Met weinig fonts zou je zelfs de data in de main stylesheet kunnen gooien. Ben nu met iets bezig, 4 fonts, 1 css van 125kb (~100 compressed) met alles er in. Scheelt mobiel (zelfs op de desktop) makkelijk een halve seconde initiatie van de connectie.
Cool. Zet het boven je main CSS en het scheelt je ook een FOUT.quote:
Vanaf nu voor iedereen. Converteer je fonts naar woff, encode ze naar base64. Zet alle data in 1 css met @font-face. Profit.
Dit werkt in >IE8, iOS vanaf 5 en verder in vrijwel elke grote browser. Als voordeel worden alle fonts in één http-request geladen!
De overhead van bas64 wordt zo goed als teniet gedaan door server-side compressie (scheelt ~1–2% maar dat is de declaratie-css). Met weinig fonts zou je zelfs de data in de main stylesheet kunnen gooien. Ben nu met iets bezig, 4 fonts, 1 css van 125kb (~100 compressed) met alles er in. Scheelt mobiel (zelfs op de desktop) makkelijk een halve seconde initiatie van de connectie.
FOUT of FOUC? Sowieso altijd eerst de fonts, dat betekend dat je het ook simpelweg als eerst in de main css kan zettenquote:
[..]
Cool. Zet het boven je main CSS en het scheelt je ook een FOUT.
Oud nieuws.quote:
PayPal plukt vruchten van inruilen Java voor node.js.
Is dat niet wat Google Fonts min of meer ook doet?quote:
Vanaf nu voor iedereen. Converteer je fonts naar woff, encode ze naar base64. Zet alle data in 1 css met @font-face. Profit.
Dit werkt in >IE8, iOS vanaf 5 en verder in vrijwel elke grote browser. Als voordeel worden alle fonts in één http-request geladen!
De overhead van bas64 wordt zo goed als teniet gedaan door server-side compressie (scheelt ~1–2% maar dat is de declaratie-css). Met weinig fonts zou je zelfs de data in de main stylesheet kunnen gooien. Ben nu met iets bezig, 4 fonts, 1 css van 125kb (~100 compressed) met alles er in. Scheelt mobiel (zelfs op de desktop) makkelijk een halve seconde initiatie van de connectie.
Die gebruikt externe .woff's, zie http://fonts.googleapis.c(...)no:400,700,400italicquote:
[..]
Is dat niet wat Google Fonts min of meer ook doet?
Ik heb een a href anchor, maar ipv dat ie verspringt naar de content wil ik met jquery dat ie in een vloeiende beweging naar de anchor gaat. Ik heb zelf niet voldoende kennis om dat voor elkaar te krijgen en pogingen van een vriend helpen helaas ook niet. Iemand enig idee waar ik op moet zoeken en of dit uberhaupt mogelijk is (vast wel, heb t eerder gezien, maar nu nog het voor elkaar zien te krijgen. -_-.
http://css-tricks.com/snippets/jquery/smooth-scrolling/quote:
Kan ik hier ook iets vragen over jquery?
Ik heb een a href anchor, maar ipv dat ie verspringt naar de content wil ik met jquery dat ie in een vloeiende beweging naar de anchor gaat. Ik heb zelf niet voldoende kennis om dat voor elkaar te krijgen en pogingen van een vriend helpen helaas ook niet. Iemand enig idee waar ik op moet zoeken en of dit uberhaupt mogelijk is (vast wel, heb t eerder gezien, maar nu nog het voor elkaar zien te krijgen. -_-.
Zelf heb ik recent iets soortgelijks gemaakt:quote:
Kan ik hier ook iets vragen over jquery?
Ik heb een a href anchor, maar ipv dat ie verspringt naar de content wil ik met jquery dat ie in een vloeiende beweging naar de anchor gaat. Ik heb zelf niet voldoende kennis om dat voor elkaar te krijgen en pogingen van een vriend helpen helaas ook niet. Iemand enig idee waar ik op moet zoeken en of dit uberhaupt mogelijk is (vast wel, heb t eerder gezien, maar nu nog het voor elkaar zien te krijgen. -_-.
| 1 2 3 | $('html, body').animate({ scrollTop: that.page_holder[id].y }, 1000); |
+ de call naar de css file. Met 3 fonts dus 4 requests ipv 1. Je request time is dan langer dan de download tijd, zeker mobiel tikt dat aanquote:
[..]
Die gebruikt externe .woff's, zie http://fonts.googleapis.c(...)no:400,700,400italic
Als iemand nou ff een gulp node/sass mixin schrijft
Edit: de gulp node, ff testen van de week https://www.npmjs.org/package/gulp-cssfont64
[ Bericht 7% gewijzigd door n8n op 19-03-2014 07:48:48 ]
Hoe kan ik een inputveld maken met een ''dropdown'' waarbij je meerdere criteria kan kiezen? Zelf heb ik vrij weinig verstand van JS/Jquery.
Op internet heb ik het volgende gevonden:
'' $(window).on('load', function () {
$('.selectpicker').selectpicker({
'selectedText': 'cat'
} );
// $('.selectpicker').selectpicker('hide');
} ;
''
En de bijbehorende html functie:
<select class="selectpicker" multiple data-selected-text-format="count">
</select>
Een dropdown is gemaakt voor maar één inputselectie.quote:
Ik heb een vraagje;
Hoe kan ik een inputveld maken met een ''dropdown'' waarbij je meerdere criteria kan kiezen?
Ow... Hoe zou ik dit kunnen oplossen?quote:
[..]
Een dropdown is gemaakt voor maar één inputselectie.
Kan dat ook met html en css of komt hier echt JS en Jquery bij kijken? Want dat begrijp ik namelijk niet..quote:
Het is gewoon HTML:quote:
[..]
Kan dat ook met html en css of komt hier echt JS en Jquery bij kijken? Want dat begrijp ik namelijk niet..
| 1 2 3 4 5 6 | <select name="auto" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> |
Veelal weten users niet dat ze CRTL moeten gebruiken.quote:
[..]
Het is gewoon HTML:
[ code verwijderd ]
Dan gebruik je checkboxes, dat snapt iedereen.quote:
[..]
Veelal weten users niet dat ze CRTL moeten gebruiken.
Wordt het scherm dan niet overdreven vol? Want het betreft autowebsite, er moeten ook checkboxes komen voor de opties van de auto etc etc.quote:
[..]
Dan gebruik je checkboxes, dat snapt iedereen.
Of ik zou net als autoscout24 gebruik moeten maken van ''meerdere merken zoeken'';
http://zoeken.autoscout24(...)L&cy=NL&ustate=N%2CU
Maar heb geen flauw idee hoe dat moet, weet jij dat toevallig?
Ja klopt, maar zo'n ''show more'' functie is volgens mij JS/Jquery en daar heb ik vrij weinig verstand van.quote:Op woensdag 19 maart 2014 15:50 schreef Tijn het volgende:
Dat zijn gewoon meerdere selects onder elkaar. Niet moeilijker dan eentje toch?
Klopt, maar dat komt doordat ik niet weet hoe ik mijn probleem/gap kan oplossen.quote:
http://davidstutz.github.io/bootstrap-multiselect/
Buiten het feit als dingen zoals alert en prompt vind ik JS vrij nutteloos. De mogelijkheden van Jquery en Ajax daarentegen zijn wel vrij duidelijk. Ook kun je direct bedenken wat voor dingen je ermee kunt maken (dingen als fade, show, hide, select, changeon).
Maar met JS is mij dat nog steeds niet duidelijk, vooral die arrays (reeksen) en loops (herhalen tot een bepaalde limiet).
Javascript is de programmeertaal die wordt gebruikt in de browser. Ajax werkt met Javascript. jQuery is een Javascript-framework. Alle interactie in de browser gebeurt met Javascript, want dat is de enige programmeertaal die er beschikbaar is.quote:
Wat zijn precies de mogelijkheden van Javascript en wat kun je ermee? Dat is mij niet echt duidelijk.. ik snap de theorie allemaal wel, maar alle functies van JS heeft PHP ook..
Buiten het feit als dingen zoals alert en prompt vind ik JS vrij nutteloos. De mogelijkheden van Jquery en Ajax daarentegen zijn wel vrij duidelijk. Ook kun je direct bedenken wat voor dingen je ermee kunt maken (dingen als fade, show, hide, select, changeon).
Maar met JS is mij dat nog steeds niet duidelijk, vooral die arrays (reeksen) en loops (herhalen tot een bepaalde limiet).
PHP is een programmeertaal op de server. Als je wil dat er iets op de server gebeurt, kun je dat met PHP programmeren. Op de server heb je echter veel meer controle over de omgeving, dus daar kun je kiezen uit tal van platformen en programmeertalen. PHP is slechts een van de vele mogelijkheden.
Precies. Het is een beetje raar om te zeggen dat je het nut van Javascript niet begrijpt, maar wel van jQuery. jQuery IS Javascript.quote:
Ofwel: je kan met jquery niets meer of minder dan wat je met javascript kan. Het gaat alleen makkelijker.
aha.. ja ik weet wel dat Jquery een deel van JS is, maar ik heb bijvoorbeeld de tutorials bij Thenewboston.org gevolgd en PHP en mysql is mij geheel duidelijk. Wat je ermee kunt en dat bijna alle websites op databases draaien en ook de structuren is mij duidelijk..quote:
Ofwel: je kan met jquery niets meer of minder dan wat je met javascript kan. Het gaat alleen makkelijker.
Echter is de kronkel nog steeds niet recht wat betreft JS.. ik ga vanavond de jquery tuts volgen van thenewboston en kijken wat ik daar kan behalen qua kennis..
De videos over JS begrijp ik wel, maar ik kan me er niet bij bedenken wanneer ik dat zal gebriiken in de hedendaagse web development.
Ik heb zelfs een boek snel doorgelezen van Robert Nixon en nog steeds rinkelt er geen bel...
Ook wat betreft voorbeelden over arrays en loops kan ik niet terugvinden in zowel boeken als thenewboston..
ik tref alleen zeer simpele voorbeelden zoals het herhalen tm een bepaald getal bijv. X<10
http://www.w3schools.com/js/DEFAULT.asp
http://thenewboston.org/list.php?cat=10
quote:
[..]
Precies. Het is een beetje raar om te zeggen dat je het nut van Javascript niet begrijpt, maar wel van jQuery. jQuery IS Javascript.
Stel je voor dat je een formulier hebt met 10 checkboxes en 1 box die ze allemaal selecteert. Met JavaScript kan je die 10 checkboxes aflopen in een loop en ze aanvinken.quote:
Ik bedoelde de "basis/geavanceerde JS" hieronder, dus zonder frameworks.
http://www.w3schools.com/js/DEFAULT.asp
http://thenewboston.org/list.php?cat=10
[..]
Heus? Schrijf een boek! Ik ben dit in geen 1 boek of tut tegengekomen...quote:
[..]
Stel je voor dat je een formulier hebt met 10 checkboxes en 1 box die ze allemaal selecteert. Met JavaScript kan je die 10 checkboxes aflopen in een loop en ze aanvinken.
Kun je een voorbeeld code posten?
verzameling?! Ik dacht uitbreiding!quote:
Alsnog is een framework niets anders dan een verzameling javacriptcode.
Nee.quote:
Je kunt Javascript niet uitbreiden. Elke browser heeft min of meer dezelfde Javascript-functionaliteit aan boord en daar zul je het mee moeten doen.quote:
Javascript zelf is alleen maar een programmeertaal. De interface om met de inhoud van een webpagina te communiceren is de DOM. Als je een boek of een tutorial over de DOM icm Javascript leest, kom je absoluut allerlei relevante voorbeelden tegen.quote:
[..]
Heus? Schrijf een boek! Ik ben dit in geen 1 boek of tut tegengekomen...
Kun je een voorbeeld code posten?
dom is die innerhtml etc? Die dingen die automatisch veranderen?quote:
[..]
Javascript zelf is alleen maar een programmeertaal. De interface om met de inhoud van een webpagina te communiceren is de DOM. Als je een boek of een tutorial over de DOM icm Javascript leest, kom je absoluut allerlei relevante voorbeelden tegen.
een beetje zelf zoeken kan geen kwaad hoorquote:
[..]
dom is die innerhtml etc? Die dingen die automatisch veranderen?
De DOM is het Document Object Model. Wanneer je bv dmv van document.getElementById een element op je pagina opvraagt en hier iets mee doet, maak je gebruik van de DOM.quote:
[..]
dom is die innerhtml etc? Die dingen die automatisch veranderen?
Wat je er allemaal mee doet ligt helemaal aan jouw fantasie, binnen de mogelijkheden van de taal natuurlijk.
Dan vraag ik mij af welke boeken jij leestquote:
[..]
Heus? Schrijf een boek! Ik ben dit in geen 1 boek of tut tegengekomen...
Kun je een voorbeeld code posten?
.| 1 2 3 4 5 | for(var i in lijst) { if(lijst[i] > 5) { return; } } |
*Waarom document.forms en geen document.form ? Want er staat <form> en geen <forms>
*Waarom ''return false''? Wat betekent dat en waarom hoort dat erbij?
*Waarom ''return validatieform()'' wat betekent die return en waarom hoort dat erbij?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> <html> <head> <script> function validateForm() { var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") { alert("First name must be filled out"); return false; } } </script> </head> <body> <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post"> First name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form> </body> </html> |
2) geef "false" terug
3) geef de output van validatieform() terug (false dus).
2. Ik begrijp van de laatste twee de gedachte erachter niet. Als je return false geeft, dan zeg je inprincipe al dat het false is en dan kan het if statement toch niet meer gecontroleerd worden?quote:
1) Omdat document.forms een array is van alle forms in dat document?
2) geef "false" terug
3) geef de output van validatieform() terug (false dus).
3. Dat is toch dubbelop? In de functie zelf staat al return false.
Hoe zou jij het doen Tijn?quote:
Wat KomtTijd zegt inderdaad. Maar dit is verder echt verschrikkelijk lelijke code. Echt een onwijs slecht voorbeeld om je op te baseren, zo wil je dat niet meer doen anno 2014.
Het wordt in dit geval gebruikt om de het submit event te stoppenquote:
[..]
2. Ik begrijp van de laatste twee de gedachte erachter niet. Als je return false geeft, dan zeg je inprincipe al dat het false is en dan kan het if statement toch niet meer gecontroleerd worden?
Nee, hiermee wordt gezorgd dat de functie wordt aangeroepen op het moment dat het formulier wordt verstuurd.quote:3. Dat is toch dubbelop? In de functie zelf staat al return false.
2. Waar verwijst die false naar eigenlijk dan?quote:
[..]
Het wordt in dit geval gebruikt om de het submit event te stoppen
[..]
Nee, hiermee wordt gezorgd dat de functie wordt aangeroepen op het moment dat het formulier wordt verstuurd.
3. Wordt verstuurd? Er moet niks verstuurd worden als er niks ingevuld is...
Hoe bedoel je "verwijst"?quote:
[..]
2. Waar verwijst die false naar eigenlijk dan?
Nee, dat is wat "return false" voorkomt in dit geval.quote:3. Wordt verstuurd? Er moet niks verstuurd worden als er niks ingevuld is...
Ik zou formvalidatie doen met de functionaliteit die HTML5 hier standaard voor biedt en een polyfill als webshim gebruiken om te zorgen dat dit in alle browsers goed werkt.quote:
Ik heb een goede channel gevonden!quote:
[..]
Hoe bedoel je "verwijst"?
[..]
Nee, dat is wat "return false" voorkomt in dit geval.
Hij legt het duidelijk uit..
Misschien vinden jullie het ook handig?
Link doet het nietquote:
[..]
Ik zou formvalidatie doen met de functionaliteit die HTML5 hier standaard voor biedt en een polyfill als webshim gebruiken om te zorgen dat dit in alle browsers goed werkt.
http://afarkas.github.io/webshim/demos/quote:
Thanks:quote:
[..]
http://afarkas.github.io/webshim/demos/
2:30
''Errormessage += ''enter your last name \n'';
waarvoor die += ? en waarom die \n ?
| 1 2 3 | var bericht = "Hallo mensen, "; bericht += "hoe gaat het ermee?"; // bericht is nu "Hallo mensen, hoe gaat het ermee?" |
Het is hetzelfde als:
| 1 2 | var bericht = "Hallo mensen, "; bericht = bericht + "hoe gaat het ermee?"; |
\n is een newline oftewel een nieuwe regel (hetzelfde wat er gebeurt als je op enter drukt).
Ow... Ik ben </ br> gewend..quote:
+= is een gecombineerde operator om iets toe te voegen aan een variabele.
[ code verwijderd ]
Het is hetzelfde als:
[ code verwijderd ]
\n is een newline oftewel een nieuwe regel (hetzelfde wat er gebeurt als je op enter drukt).
Uiteindelijk voegt hij het volgende toe welke ik natuurlijk ook niet snap:
if (errormessage != "" {
alert(errormessage);
return false;
}
Waarom zou de errormessage getoond moeten worden ALS er wel wat ingevuld is? != betekent ITS NOT EMPTY.
!= dat betekent toch IF NOT EMPTY.quote:
Hoe kom je erbij dat het getoond wordt als er niks is ingevuld?
Nee. != betekent 'niet gelijk aan'. In dit geval: 'indien de error message niet gelijk is aan een lege string, toon hem op het scherm'.quote:
Zeker. Althans, '!= ""' betekent dat.quote:
quote:
[..]
Nee. != betekent 'niet gelijk aan'.
Nou dan als het niet empty is waarom zou er een alert box moeten komen en vervolgens ''return false'' moeten staan?quote:
[..]
Zeker. Althans, '!= ""' betekent dat.
Als wát niet empty is?quote:
[..]
[..]
Nou dan als het niet empty is waarom zou er een alert box moeten komen en vervolgens ''return false'' moeten staan?
| 1 2 3 4 5 | var arrList = new Array(); while(var i = 1; i != 100) { arrList.push("Cijfer "+ i ); i++; } |
Waarom werkt dit niet?quote:99
| 1 2 3 4 5 6 | var arrList = new Array(); var i=1; while(i <= 10) { arrList.push("Cijfer "+ i ); i++; } |
En waarom zou het beter zijn om de i buiten de while te declareren?
Het is good practice in Javascript om al je variabelen bovenaan te declareren, want dat is feite ook wat er gebeurt wanneer het wordt uitgevoerd.quote:
En waarom zou het beter zijn om de i buiten de while te declareren?
Zie bv dit voor meer info: http://www.adequatelygood(...)ng-and-Hoisting.html
Omdat je niet controleert of de er een naam is ingevuld maar of er een error message is.quote:
[..]
[..]
Nou dan als het niet empty is waarom zou er een alert box moeten komen en vervolgens ''return false'' moeten staan?
De stappen die je maakt zijn:
- Je begint met een lege error string.
- Voor elke error plakt hij een string aan je errormessage (met de += operator).
- Dan controleer je of er tekst in je errormessage zit, wat dus alleen het geval is als er een error is. (errormessage != "" zegt dat errormessage niet gelijk is aan een lege string).
- Is er tekst, dan is er een error, dus gooi je die error in een alert op het scherm en breek je de gang naar de action van het form af door je functie "false" terug te laten geven.
- Is er geen tekst, is alles dus goed, en gaat hij door naar de action van het form.
Ik zou niet != gebruiken daarvoor.quote:
[ code verwijderd ]
output:
[..]
Waarom werkt dit niet?
[ code verwijderd ]
output: undefined of error
Dan wordt de i niet voortdurend opgehoogd als-ie niet in de while-loop zit, maar eenmalig verhoogd, lijkt mij?quote:
[..]
Het is good practice in Javascript om al je variabelen bovenaan te declareren, want dat is feite ook wat er gebeurt wanneer het wordt uitgevoerd.
Zie bv dit voor meer info: http://www.adequatelygood(...)ng-and-Hoisting.html
En je post daar een interessante link, dank daarvoor! Daaruit vloeit een andere vraag voor.
| 1 2 3 4 5 6 7 | var x = 1; console.log(x); // 1 if (true) { var x = 2; console.log(x); // 2 } console.log(x); // 2 |
| 1 2 3 4 5 6 7 8 | var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); |
Waarom niet? Het enige wat ik kan bedenken, is dat-ie in een oneindige loop zit als de i hoger dan 100 is, maar binnen dat stukje code kan dat niet voorkomen.quote:
[..]
Ik zou niet != gebruiken daarvoor.
Wie geeft jou de garantie dat i altijd een integer zal zijn?quote:
Waarom niet? Het enige wat ik kan bedenken, is dat-ie in een oneindige loop zit als de i hoger dan 100 is, maar binnen dat stukje code kan dat niet voorkomen.
Omdat Javascript dynamisch is? Als de i een getal bevat zonder quotes, dan wordt-ie ook als integer behandeld.quote:
[..]
Wie geeft jou de garantie dat i altijd een integer zal zijn?
Nee hoor.quote:
[..]
Omdat Javascript dynamisch is? Als de i een getal bevat, dan wordt-ie ook als integer behandeld.
http://stackoverflow.com/(...)t-with-leading-zeros
| 1 2 3 | if(0 == ""){ alert('jawohl!'); } |
http://www.w3schools.com/js/js_comparisons.asp
everything is an object!quote:
Of typeof(new String("foo")) , wat denk je dat daar uit komt?
| 1 2 3 4 5 6 7 8 9 10 | <?php >>> typeof(new String("foo")) "object" >>> typeof(new String("foo")) == "string"; false >>> typeof(new String("foo")) == "object"; true >>> typeof("foo") "string" ?> |
Dat is dan ook waar de meeste nieuwe programmeurs nat op gaan helaas.quote:
| 1 2 3 4 | typeof(new String("foo")); "object" typeof("foo"); "string" |
quote:
[..]
everything is an object!
[ code verwijderd ]
Heerlijk he
Ik krijg toch gewoon 8 en 9 terug in plaats van 0.quote:
[..]
Nee hoor.
http://stackoverflow.com/(...)t-with-leading-zeros
Ja, doe het nu eens in een IE8 browserquote:
[..]
Ik krijg toch gewoon 8 en 9 terug in plaats van 0.
krijg je heel wat anders terug.Ok, zo uitgebreid had ik het ook weer niet getestquote:Op donderdag 20 maart 2014 11:42 schreef Scorpie het volgende:
[..]
Ja, doe het nu eens in een IE8 browser
| 1 2 3 4 5 6 7 8 9 10 11 12 | <?php >>> parseInt(02); 2 >>> parseInt(0020); 16 >>> parseInt(002); 2 >>> parseInt(0020); 16 >>> parseInt(020); 16 ?> |
Chrome ook. Gotta love this shit.quote:
quote:If the input string begins with "0", radix is eight (octal) or 10 (decimal). Exactly which radix is chosen is implementation-dependent. ECMAScript 5 specifies that 10 (decimal) is used, but not all browsers support this yet. For this reason always specify a radix when using parseInt
En hebben deze dezelfde werking als classes en id's? Zo niet, waarin verschillen label en name van elkaar en van classes en id's?
Label is een HTML-tag, name is een attribute van form-elementen. Je hebt het over 2 compleet verschillende dingen
Wat is label dan precies en waarvoor dient het? En welke tag moet je gebruiken om een deel van een form bijv. username te identificeren om het later te kunnen gebruiken voor een verwijzing naar dat deel bijv in javascript en php met bijv $_POSTquote:
Hoe bedoel je "het verschil tussen label en name"?
Label is een HTML-tag, name is een attribute van form-elementen. Je hebt het over 2 compleet verschillende dingen
http://www.w3schools.com/tags/tag_label.asp
Ik heb hem niet begrepen. Anders had ik niks gepost als ik dat had begrepen.quote:
is google down?
http://www.w3schools.com/tags/tag_label.asp
quote:The <label> tag defines a label for an <input> element.
The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.
The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.
Label is een tag . Name is een attribuut van een tag.quote:
[..]
Ik heb hem niet begrepen. Anders had ik niks gepost als ik dat had begrepen.
Laten we van het goede in de mens uitgaan en net doen alsof we heul complex en moeilijk werk doen.quote:
Ik begin echt te twijfelen of html, css en js nu zo moeilijk zijn om te begrijpen, of dat de nieuwelingen gewoon 0 moeite doen om zelf een beetje te leren hoe het werkt...
Het goede in de mens of arrogantie..quote:
[..]
Laten we van het goede in de mens uitgaan en net doen alsof we heul complex en moeilijk werk doen.
0 is ook een lege waarde, toch?quote:
Dan staat er object. Zou toch niet zo gek zijn, aangezien alles in JS een object is, lijkt mij?quote:
Of typeof(new String("foo")) , wat denk je dat daar uit komt?
Waarom is typeof("foo") een string, en typeof(new String("foo")) een object?quote:
[..]
everything is an object!
[ code verwijderd ]
Heerlijk he
Laat me is iets vragen aan jou:quote:
Ik begin echt te twijfelen of html, css en js nu zo moeilijk zijn om te begrijpen, of dat de nieuwelingen gewoon 0 moeite doen om zelf een beetje te leren hoe het werkt...
Heb je alles uit een boek geleerd of heb je het geleerd door gericht te zoeken en uit te zoeken hoe het werkt (wat je gericht hebt gezocht) en zodoende losse dingetjes geleerd?
Want als het het tweede is, dan kun je me niet wijsmaken dat je de taal beheerst, want je leert niet wat het inhoud, maar hoe je het moet gebruiken.. in principe opzoeken, kopie pasten en bewerken naar je wensen.
Het tweedequote:
[..]
Laat me is iets vragen aan jou:
Heb je alles uit een boek geleerd of heb je het geleerd door gericht te zoeken en uit te zoeken hoe het werkt (wat je gericht hebt gezocht) en zodoende losse dingetjes geleerd?
Dat is onzin. Er is geen gigantisch verschil tussen dingen opzoeken en kopieren en plakken, of het proberen te begrijpen en toe te passen en te debuggen./quote:Want als het het tweede is, dan kun je me niet wijsmaken dat je de taal beheerst, want je leert niet wat het inhoud, maar hoe je het moet gebruiken.. in principe opzoeken, kopie pasten en bewerken naar je wensen.
Ga je Catch22- nou vertellen dat hij HTML niet beheerst?quote:
[..]
Laat me is iets vragen aan jou:
Heb je alles uit een boek geleerd of heb je het geleerd door gericht te zoeken en uit te zoeken hoe het werkt (wat je gericht hebt gezocht) en zodoende losse dingetjes geleerd?
Want als het het tweede is, dan kun je me niet wijsmaken dat je de taal beheerst, want je leert niet wat het inhoud, maar hoe je het moet gebruiken.. in principe opzoeken, kopie pasten en bewerken naar je wensen.
___________Sowieso bedoel je het (hopelijk) andersom, door alleen boeken te lezen leer je niets.
Ik heb het over JS.quote:
[..]
Ga je Catch22- nou vertellen dat hij HTML niet beheerst?
Sowieso bedoel je het (hopelijk) andersom, door alleen boeken te lezen leer je niets.
Vertel mij dan alsjeblieft hoe je iets probeert te begrijpen als je de basis niet kent en gewoon maar wat opzoekt.. hoe je dat wilt begrijpen, van punt tot punt, waarom bijv. er tweemaal een }} staat en niet eenmaal (grofweg een voorbeeld).quote:
[..]
Het tweede
[..]
Dat is onzin. Er is geen gigantisch verschil tussen dingen opzoeken en kopieren en plakken, of het proberen te begrijpen en toe te passen en te debuggen./
Ik heb bijvoorbeeld nu iets nodig wat met Jquery te maken heeft en dat is het volgende:
Als er iets uit een select dropdown menu gekozen wordt moet er nieuw selectdropdown menu daarnaast verschijnen, welke dus afhankelijk is van de keuze van de eerste dropdown menu.
Stel je kiest uit selectdropdown 1 keuze A dan moet er een tweede selectdropdown menu komen die speciaal gemaakt is voor keuze A
Stel je kiest uit de selectdropdown 1 keuze C dan moet er een tweede selectdropdown menu komen die speciaal gemaakt is voor keuze C.
Soort search engine uit de database, maar dan met manipulated multiple select dropdowns.
Ik heb bijvoorbeeld geen idee hoe ik hiervoor een uitleg of iets kan vinden... Ik weet niet eens hoe ik het kort beschrijf... Dus dan vraag ik mn god af hoe jij dat doet..
Door het op te zoeken, maar vooral door het te proberen, te testen, debuggen, kijken wat er mis gaat, dat nóg een keer opzoeken, enz?quote:
[..]
Vertel mij dan alsjeblieft hoe je iets probeert te begrijpen als je de basis niet kent en gewoon maar wat opzoekt.. hoe je dat wilt begrijpen, van punt tot punt,
Zulksoort simpele dingetjes laten je IDE al keurig zien, en zo niet dan de syntax error die je krijgt.quote:waarom bijv. er tweemaal een }} staat en niet eenmaal (grofweg een voorbeeld).
Zie mijn post overnieuw, had hem nog niet volledig.quote:
[..]
Door het op te zoeken, maar vooral door het te proberen, te testen, debuggen, kijken wat er mis gaat, dat nóg een keer opzoeken, enz?
[..]
Zulksoort simpele dingetjes laten je IDE al keurig zien, en zo niet dan de syntax error die je krijgt.
Dan moet je beginnen met iets dat je wél kunt bevatten. Niemand was van de ene op de andere dag in staat complete, geavanceerde asynchrone forms te maken en af te handelen.quote:
[..]
Ik heb bijvoorbeeld geen idee hoe ik hiervoor een uitleg of iets kan vinden... Ik weet niet eens hoe ik het kort beschrijf... Dus dan vraag ik mn god af hoe jij dat doet..
http://thenewboston.org/list.php?cat=10quote:
[..]
Dan moet je beginnen met iets dat je wél kunt bevatten. Niemand was van de ene op de andere dag in staat complete, geavanceerde asynchrone forms te maken en af te handelen.
Alles hier is zo easy als wat... Maar voor wat ik wil is dit zeker niet genoeg?
Dat dus. Je moet stap voor stap uitvogelen wat je moet gaan doen en dat dan stap voor stap oplossen.quote:
Wat je verkeerd doet, is dat je nog moeite hebt met uberhaupt een HTML-formulier in elkaar te zetten en uit te lezen, maar al gelijk wilt skippen naar asynchrone webapplicaties. Begin nou gewoon bij het begin.
+1quote:
Wat je verkeerd doet, is dat je nog moeite hebt met uberhaupt een HTML-formulier in elkaar te zetten en uit te lezen, maar al gelijk wilt skippen naar asynchrone webapplicaties. Begin nou gewoon bij het begin.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <?php .setBlockHeights(@slideHeight:100vh, @fbSlideHeight:700px, @navHeight:11vh, @fbNavHeight:70px, @sliderNavHeight:6vh, @fbSliderNavHeight:40px) { .navbar-fixed-top { min-height:@fbNavHeight; height:@fbNavHeight; height:@navHeight; } .container.full-width { min-height:500px; height:@fbSlideHeight - @fbNavHeight; height:@slideHeight - @navHeight; .row.image-container .image-item { min-height:500px; min-height:@fbSlideHeight - @fbNavHeight; height:@fbSlideHeight - @fbNavHeight; height:100vh - @navHeight; } .slider-nav { display:none; } &.multiple-childs.first-item { padding-top:@fbSliderNavHeight; padding-top:@sliderNavHeight; .row.image-container .image-item { min-height:@fbSlideHeight - @fbNavHeight - @fbSliderNavHeight; height:@fbSlideHeight - @fbNavHeight - @fbSliderNavHeight; height:@slideHeight - @navHeight - @sliderNavHeight; } .slider-nav { min-height:@fbSliderNavHeight; height:@fbSliderNavHeight; height:@sliderNavHeight; display:block; } } } } ?> |
Responsive content slider.quote:
Oja goldenheart, als je dit begrijpt, dan mag je opnieuw zeggen dat ik er niets van snap
[ code verwijderd ]
En waar heb je dat vandaan gecopypaste?quote:
Oja goldenheart, als je dit begrijpt, dan mag je opnieuw zeggen dat ik er niets van snap
[ code verwijderd ]
HEET JIJ SOMS GOLDENHEARTquote:
w3schools :$quote:Op donderdag 20 maart 2014 14:46 schreef picodealion het volgende:
[..]
En waar heb je dat vandaan gecopypaste?
quote:
Sorry ik heb je ssh keys gejat en zit mee te loeren in je broncodequote:
[..]
HEET JIJ SOMS GOLDENHEART
[..]
w3schools :$
".Volgens mij vroeg Catch22- gewoon hulp bij zijn code.quote:
Nou is pochen met hoe ingewikkeld je code eruit ziet natuurlijk ook wel behoorlijk "
Het ging mij er meer om dat ik niet compleet achterlijk ben
En doe vooral 1 ding tegelijk. Ik heb 'm nu in een paar dagen al over PHP, MySQL, HTML, CSS en Javascript gehoord, zonder dat-ie een van deze dingen echt heeft doorgrond.quote:
Wat je verkeerd doet, is dat je nog moeite hebt met uberhaupt een HTML-formulier in elkaar te zetten en uit te lezen, maar al gelijk wilt skippen naar asynchrone webapplicaties. Begin nou gewoon bij het begin.
LESS ofzo. In een FOK! [php]-tag bij gebrek aan syntax-highlighting in de [code]-tag.quote:Op donderdag 20 maart 2014 15:09 schreef picodealion het volgende:
Welk smaakje PHP is dat überhaupt?
Ziet ingewikkelder uit dan CSS zelf. Kan toch nooit de bedoeling zijn.quote:
[..]
LESS ofzo. In een FOK! [php]-tag bij gebrek aan syntax-highlighting in de [code]-tag.
Als je het eenmaal doorhebt scheelt het een hoop typwerk en is het juist makkelijker.quote:
[..]
Ziet ingewikkelder uit dan CSS zelf. Kan toch nooit de bedoeling zijn.
Nee, ik bedoel alleen declaratie "var i;". Dat hoort bovenin. Vervolgens hoog je i natuurlijk op daar waar je wil dat dat gebeurt.quote:
[..]
Dan wordt de i niet voortdurend opgehoogd als-ie niet in de while-loop zit, maar eenmalig verhoogd, lijkt mij?
quote:En je post daar een interessante link, dank daarvoor! Daaruit vloeit een andere vraag voor.
Waarop valideert-ie de true en foo op regel 3 als true?
| 1 2 3 4 5 6 7 | var x = 1; console.log(x); // 1 if (true) { var x = 2; console.log(x); // 2 } console.log(x); // 2 |
Nou, eerst voorbeeld 1: true is natuurlijk true, dus dat is logisch, toch?
| 1 2 3 4 5 6 7 8 | var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); |
Voorbeeld 2 is waar het belangrijk wordt om te begrijpen hoe scoping en hoisting van variabelen werkt in Javascript.
Bovenin het script wordt een variabele "foo" gemaakt en daar wordt de waarde 1 aan gegeven. Vervolgens wordt de functie bar() gedefinieerd.
Je zou misschien zeggen dat de if-statement op 3 regel nu niet opgaat, omdat foo immers nog steeds 1 is. Maar dat is niet zo. Niet vanwege scoping (want binnen een functie heb je in Javascript toegang tot variabelen in de scope buiten de functie), maar wel vanwege "hoisting".
Omdat op regel 4 een lokale variabele "foo" wordt gemaakt (en van waarde 10 wordt voorzien), wordt de declaratie van deze variabele "gehoist" naar bovenin de functie. In feite gebeurt er dit:
| 1 2 3 4 5 6 7 8 9 | var foo = 1; function bar() { var foo; if (!foo) { foo = 10; } alert(foo); } bar(); |
En dat is waarom het belangrijk is om variabelen bovenin je functies te declareren, want dat is in feite wat er sowieso wel gebeurt. Als je het opschrijft, kom je niet voor verrassingen te staan.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | $(document).ready(function() { $('#search_name').keyup(function() { search_name = $(this).val(); $(' $names li').removeclass('highlight'); if (jQuery.trim(search_name) != ' ') { $(" #names li:contains(' " + search_name + " ')").addclass('highlight'); } }); }); |
Heeft het dezelfde werking als er in plaats van dit
| 1 | $(' $names li').removeclass('highlight'); |
| 1 2 | if (jQuery.trim(search_name) != ' ') { $(' $names li').removeclass('highlight'); } |
Tenslotte ; wat betekenen die lege waarden rondom search_names, ofwel waarvoor dienen ze?
| 1 | (' " + search_name + " ') |
Is dit ook mogelijk?:
| 1 | (search_name) |
Alvast bedankt
2) search_name is een variable die in een string wordt geplaatst. Zonder "+search_name+" zou er letterlijk search_name in de string staan, in plaats van de waarde van variable search_name.
2) Oeps ik bedoelde geen != maar == , anders zou ik toch denken dat het anders een else bij moet komen met dus die code $(' $names li').removeclass('highlight');quote:
1) Huh, je begrijpt hopelijk wat een if-statement is?
2) search_name is een variable die in een string wordt geplaatst. Zonder "+search_name+" zou er letterlijk search_name in de string staan, in plaats van de waarde van variable search_name.
3) Huh, beetje in de war met betrekking tot de hoeveelheid quotationmarks en de plusjes..
Plusjes zijn om strings aan elkaar te plakken in dit geval. De single quotation mark is om te zorgen dat je ipv $(varname) $('varname') krijgt.quote:
[..]
2) Oeps ik bedoelde geen != maar == , anders zou ik toch denken dat het anders een else bij moet komen met dus die code $(' $names li').removeclass('highlight');
3) Huh, beetje in de war met betrekking tot de hoeveelheid quotationmarks en de plusjes..
En waarom zou je in dit geval de strings aan elkaar moeten laten plakken? Ik dacht tot dusverre dat je juist $(varname) moest gebruiken ipv $("varname") of $('varname'), want die laatste twee gelden voor strings zover ik weet?quote:
[..]
Plusjes zijn om strings aan elkaar te plakken in dit geval. De single quotation mark is om te zorgen dat je ipv $(varname) $('varname') krijgt.
Ja, je wil ook $(varname). Daarom breek je de quotes af en plak je de variabele ertussen met plusjes.quote:
[..]
En waarom zou je in dit geval de strings aan elkaar moeten laten plakken? Ik dacht tot dusverre dat je juist $(varname) moest gebruiken ipv $("varname") of $('varname'), want die laatste twee gelden voor strings zover ik weet?
| 1 | 'hier staat een string ' + variabele + ' hier gaat de string verder' |
$(varname)quote:
[..]
En waarom zou je in dit geval de strings aan elkaar moeten laten plakken? Ik dacht tot dusverre dat je juist $(varname) moest gebruiken ipv $("varname") of $('varname'), want die laatste twee gelden voor strings zover ik weet?
$('varname')
Bij de 1e zal JavaScript eerst proberen een variable te vinden met de naam varname waarna jQuery die variable als selector zal gebruiken om het element op te zoeken. Bij de tweede zal jQuery proberen een element te zoeken met de string 'varname' als selector.
Woops het is harstikke logisch wat je zegt, maar op dit moment volg ik het totaal niet. Wat is het nou in dit geval ?quote:
[..]
$(varname)
$('varname')
Bij de 1e zal JavaScript eerst proberen een variable te vinden met de naam varname waarna jQuery die variable als selector zal gebruiken om het element op te zoeken. Bij de tweede zal jQuery proberen een element te zoeken met de string 'varname' als selector.
Want wat ik nu zie, is dat zowel de twee " als de ' wegkunnen zodat je gewoon (searchname) hebt.
Nee, dan heb je letterlijk de string "search_name". Wat je wil is de inhoud van de variabele search_name.quote:
[..]
Woops het is harstikke logisch wat je zegt, maar op dit moment volg ik het totaal niet. Wat is het nou in dit geval ?
Want wat ik nu zie, is dat zowel de twee " als de ' wegkunnen zodat je gewoon (searchname) hebt.
De uiteindelijke selector die je in je eigen voorbeeld wilt krijgen is bijvoorbeeld:
| 1 | $("#names li:contains('dingen')") |
De string "dingen" zit in de variabele search_name. Dus om de inhoud van search_name neer te zetten waar nu "dingen" staat, breek je de string af (dubbele quote), plak je de variabele ertussen met plusjes en zet je weer een dubbele quote om verder te gaan met je string.
| 1 | $("#names li:contains('"+search_name+"') |
Je vertelt het duidelijker dan ik deed.quote:
[..]
Nee, dan heb je letterlijk de string "search_name". Wat je wil is de inhoud van de variabele search_name.
De uiteindelijke selector die je in je eigen voorbeeld wilt krijgen is bijvoorbeeld:
[ code verwijderd ]
De string "dingen" zit in de variabele search_name. Dus om de inhoud van search_name neer te zetten waar nu "dingen" staat, breek je de string af (dubbele quote), plak je de variabele ertussen met plusjes en zet je weer een dubbele quote om verder te gaan met je string.
Dank uquote:
[..]
Je vertelt het duidelijker dan ik deed.
Zolang de if true is, wordt code dus altijd uitgevoerd. Begrijpelijk, ik ben dit niet gewend, ik veronderstelde dat de if-statement alleen voor vergelijkingen kunt gebruiken, zoals if (test = true) { .. }.quote:
[ code verwijderd ]
Nou, eerst voorbeeld 1: true is natuurlijk true, dus dat is logisch, toch?
Dit volg ik niet helemaal.quote:[ code verwijderd ]
Voorbeeld 2 is waar het belangrijk wordt om te begrijpen hoe scoping en hoisting van variabelen werkt in Javascript.
Bovenin het script wordt een variabele "foo" gemaakt en daar wordt de waarde 1 aan gegeven. Vervolgens wordt de functie bar() gedefinieerd.
Je zou misschien zeggen dat de if-statement op 3 regel nu niet opgaat, omdat foo immers nog steeds 1 is. Maar dat is niet zo. Niet vanwege scoping (want binnen een functie heb je in Javascript toegang tot variabelen in de scope buiten de functie), maar wel vanwege "hoisting".
Omdat op regel 4 een lokale variabele "foo" wordt gemaakt (en van waarde 10 wordt voorzien), wordt de declaratie van deze variabele "gehoist" naar bovenin de functie. In feite gebeurt er dit:
[ code verwijderd ]
| 1 2 3 4 5 6 7 8 | var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); |
als var foo = 1 is, waarom voert-ie de if (!foo) {...} alsnog uit? Want als 1 = true is, dan zou if (!foo) false moeten zijn, lijkt mij. Dan zou de variabele foo op regel 4 niet gedeclareerd worden, en dus niet 'gehoist' naar bovenin de functie?
Omdat-ie vanwege het hoisten eerst een (lege!) lokale variabele aanmaakt op het moment dat de functie bar() begint. Omdat deze variabele dezelfde naam heeft als de globale variabele foo die buiten de functie was gemaakt, is deze niet langer beschikbaar binnen de functie. Daarom is foo ongedefinieerd op het moment dat de if-statement wordt uitgevoerd.quote:
[..]
Dit volg ik niet helemaal.
[ code verwijderd ]
als var foo = 1 is, waarom voert-ie de if (!foo) {...} alsnog uit? Want als 1 = true is, dan zou if (!foo) false moeten zijn, lijkt mij. Dan zou de variabele foo op regel 4 niet gedeclareerd worden, en dus niet 'gehoist' naar bovenin de functie?
Bovenstaande is een tabel
Hoe zorg ik er met css voor dat in niet de grijze rij (het gedeelte met de titel en tags) maar de witte rij (met link naar de download en stats) opgerekt wordt?
M.a.w. ik wil dat de grijze rij niet groter wordt dan hij moet zijn voor de content die er in staat
Post even de relevante HTML structuur, en horizontaal opgerekt?quote:
[ afbeelding ]
Bovenstaande is een tabel
Hoe zorg ik er met css voor dat in niet de grijze rij (het gedeelte met de titel en tags) maar de witte rij (met link naar de download en stats) opgerekt wordt?
M.a.w. ik wil dat de grijze rij niet groter wordt dan hij moet zijn voor de content die er in staat
Hahaha, ik snap geen fuck van wat je bedoelt!quote:
[ afbeelding ]
Bovenstaande is een tabel
Hoe zorg ik er met css voor dat in niet de grijze rij (het gedeelte met de titel en tags) maar de witte rij (met link naar de download en stats) opgerekt wordt?
M.a.w. ik wil dat de grijze rij niet groter wordt dan hij moet zijn voor de content die er in staat
Ironisch he? Want je probeert het uit te leggen.
Ja, grappig, kan er weinig aan veranderen aangezien het niet mijn website is.quote:
Door geen tabel voor layout te gebruiken.
Best i can do (als ik de echte source bekijk wordt alles gegenereerd met javascript)quote:
[..]
Post even de relevante HTML structuur, en horizontaal opgerekt?
De eerste uitgeklapte TR is de grijze rij (inc cover) de tweede is de witte rij)
In het screenshot zie je een witte TR met "x264 / MKV / Blu-ray / 720p / Scene" ik wil dat die rij naar boven toe uitgerekt wordt in plaats van de grijze die er boven staat naar beneden toequote:
[..]
Hahaha, ik snap geen fuck van wat je bedoelt!
Ironisch he? Want je probeert het uit te leggen.
Het werkt nu
| 1 2 3 4 | tr.group_torrent { height: 100%; vertical-align: top; } |
http://jsfiddle.net/arunpjohny/2pza5/
Het grappige van allen is dat ik de basis wel begrijp. Echter zo dit ziende, begrijp ik er geen donder van.
Hij heeft een array van landen die elk een array van steden hebben.
Als die select een andere waarde krijgt (een land) vult hij de andere select met de array van steden van dat land. Met die map functie loopt hij door die array van steden heen en maakt hij een option voor elke stad.
Dankzij hem en hoe hij de geschiedenis van de programmeertalen vertelt in zijn filmpjes ben ik pas gaan beseffen hoe krachtig ECMAScript is.
[ Bericht 0% gewijzigd door #ANONIEM op 23-03-2014 21:07:32 ]
Daar ben ik het mee eens. Een strictere standaard zou niet zo slecht zijn.quote:
Dat is het ook. Maar omdat er zo weinig regels zijn/vrijheid is, moet je wel weten wat je doet. En dat maakt het lastig te begrijpen
In hoeverre kun je kennis over ECMAScript inzetten bij het gebruiken van javascript?quote:
Die filmpjes van Crockford
Dankzij hem en hoe hij de geschiedenis van de programmeertalen vertelt in zijn filmpjes ben ik pas gaan beseffen hoe krachtig ECMAScript is.
Bijna 1:1quote:
[..]
In hoeverre kun je kennis over ECMAScript inzetten bij het gebruiken van javascript.
ECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the web, in the form of several well-known implementations such as JavaScript, JScript and ActionScript.
| 1 2 3 | function test(){ console.log("Testttt") } |
Tik je in console 'test()', dan krijg je naast undefined ook "Testttt" te zien.
Tik je in de console 'test', dan krijg je de hele functie te zien. Waarom krijg je dan de hele functie te zien. De logica ervan ontgaat mij
Waar die undefined vandaan komt is mij ook een raadsel.
En dat die functie weergeeft is misschien duidelijk als je het ziet als:
| 1 2 3 | var test = function test () { console.log('Testttt'); } |
Er is geen praktisch verschil tussen ECMAScript en Javascript. Javascript is de naam voor de implementatie van ECMAScript in de browser.quote:
[..]
In hoeverre kun je kennis over ECMAScript inzetten bij het gebruiken van javascript?
quote:
test() roept de functie aan, test logged de definitie van de variabele test, wat dus die functie is.
Waar die undefined vandaan komt is mij ook een raadsel.
Er is geen variabele 'test' gedefinieerd in m'n code. Ik snap dat hij de functie als definitie ziet. Maar waarom? Er is nl. geen variabele met naam 'test' gedefinieerd.quote:
Undefined is de return value van de functie, als je niks returned is die undefined.
En dat die functie weergeeft is misschien duidelijk als je het ziet als:
[ code verwijderd ]
| 1 | var test = function() { ... } |
| 1 | function test() { ... } |
Zijn uiteindelijk gewoon hetzelfde.
| 1 2 3 4 5 6 7 8 9 | var test = 5; function test() { return 6; } console.log(test); // 5 console.log(test()); // typeError: 5 is not a function |
Wat er in feite gebeurt is dit:
| 1 2 3 4 5 | var test; test = function() { return 6; } test = 5; |
Daarom is het good practice om in je code dezelfde volgorde aan te houden:
1) declareer eerst je variabelen, maar assign nog geen values
2) definieer je functies
3) assign values aan je variabelen
En gebruik niet dezelfde namen voor variabelen en functies, want dat werkt dus niet
dat laatste is wel erg belangrijk. Je moet aan de naam van een variabele gelijk zien wat het is, boolean, string, functie etc.quote:
Ook hier komt het hoisten in Javascript weer om de hoek kijken. Omdat functiedefinities boven assignments worden geplaatst, werkt dit zo:
[ code verwijderd ]
Wat er in feite gebeurt is dit:
[ code verwijderd ]
Daarom is het good practice om in je code dezelfde volgorde aan te houden:
1) declareer eerst je variabelen, maar assign nog geen values
2) definieer je functies
3) assign values aan je variabelen
En gebruik niet dezelfde namen voor variabelen en functies, want dat werkt dus niet
. Thanks, many thanks, thanks. .| 1 2 3 4 5 6 7 | a { color:red; } li a { color:blue; } |
quote:
Hoi mensen, ik zit al een tijd te stoeien met mijn stylesheet. Ik wil dat mijn links in een lijst (Ul,LI) een andere kleur hebben dan links in de lopende tekst. Het lukt mij maar niet om de juiste code te vinden. Ik heb ook al geprobeerd om op de url zelf de <span style="color:#202020"></span> toe te passen, dit werkt wel maar het streepje onder de tekst blijft de linkkleur behouden... Iemand een oplossing?
| 1 2 3 4 5 6 7 8 9 10 11 12 | ul li a { color: #F00; text-decoration: none; } ul li a:hover { color: #0F0; } ul li a:active { color: #00F; } |
En dan voor de normale links gewoon:
| 1 2 3 | a { color: #FFF; } |
Bedankt!quote:
Ik heb je code iets aan moeten passen, maar nu werkt hij!
Met deze code heb ik het werkend gekregen:
| 1 2 3 | ul li a:link {color:#202020;text-decoration:underlined;} ul li a:visited {color:#202020;} ul li a:hover {color:#202020;} |
Ja het was een voorbeeldje voor hoe je het kan aanpakken, mooi dat je het werkend hebt gekregen.quote:
[..]
Bedankt!
Ik heb je code iets aan moeten passen, maar nu werkt hij!
Met deze code heb ik het werkend gekregen:
[ code verwijderd ]
waarvan de grootte van een cirkel wordt gebaseerd op een veld in een array:
| 1 2 3 4 5 6 | "cirkels": [ {"name": "Aap", "size": 398}, {"name": "Noot", "size": 312}, {"name": "Mies", "size": 714}, {"name": "Boom", "size": 43} ] |
het dichtste wat erbij in de buurt komt wat ik heb kunnen vinden is d3.js, maar daarin krijg ik het niet zoals ik wil: http://bl.ocks.org/mbostock/4063269
--
gevonden, hiermee moet het wel lukken: http://bl.ocks.org/mbostock/1062383
[ Bericht 8% gewijzigd door Deeltjesversneller op 27-03-2014 04:50:04 ]
Goed OOP, let variabelen, modules.
Super handig!
En nu te emuleren met TypeScriptquote:
ECMAScript 6.
Goed OOP, let variabelen, modules.
quote:
Of toch niet? Ik kreeg in ieder geval wel een "Unexpected ; "-melding in de console. Nevermind, het werkt wel.
Waarschijnlijk een foutje dan. Ik zal nog eens kijken als ik weer op mijn stage ben. Eigenlijk moet ik ze sowieso nog niet gebruiken omdat het niet door alle browsers ondersteund wordt, maar het was even om te kijken. Blijkbaar zat het in Javascript 1.7 al en is dit in 2006 al geïmplementeerd.
JavaScript 1.7 support was introduced in Firefox 2 (October 2006).
https://developer.mozilla(...)ew_in_JavaScript/1.7
Heftig dat het pas zo laat in de ECMAScript-standaard is gekomen. Toen ik dit las dacht ik namelijk dat het echt iets nieuws was in ECMAScript 6:
http://code.tutsplus.com/(...)t-6-today--net-31582
[ Bericht 18% gewijzigd door #ANONIEM op 28-03-2014 15:15:37 ]
| 1 2 3 4 5 6 7 8 9 | switch (x) { case 0: let foo; break; case 1: let foo; // TypeError for redeclaration. break; } |
Vandaar dus.
Tsja. Dat is inderdaad zo. Ik wist niet dat let-variabelen daar zo nauw naar zouden luisteren.quote:
Gewoon even een ordinaire linkdump omdat ik vandaag erg blij was toen ik dit tegenkwam.http://www.chartjs.org/docs/
Ziet er goed uit, maar helaas geen interactie.quote:Op vrijdag 28 maart 2014 21:45 schreef TwenteFC het volgende:
http://www.chartjs.org/docs/
Ach, is ook niet altijd nodig.Kost je voor commercieel gebruik wel geld helaas.quote:
Ik heb onlangs een project met highcharts gedaan, ook een lekkere library
Ach, het bedrijf waar je werkt zal die kleine licentie wel kunnen bekostigen. Zo duur is het niet.Ziet er ook fraai uit ja, een een bookmarkje waard.quote:
Was een project voor een multinational met een miljardenomzet, dus dan is die 3k niet zon probleemquote:
[..]
Kost je voor commercieel gebruik wel geld helaas.
Tof. Lijkt me best spannend, zo'n verantwoordelijkheid.quote:
[..]
Was een project voor een multinational met een miljardenomzet, dus dan is die 3k niet zon probleem
Is t ook. Maar ik doe alleen dingen waarvan ik weet dat ik t kanquote:
[..]
Tof. Lijkt me best spannend, zo'n verantwoordelijkheid.
| 1 2 3 4 | add: function(itemCost){ this.total += (itemCost || 0); this.lastTransactionAmount = itemCost; } |
Vanwaar bij regelnummer 2 de || operator? Volgens mij willen ze de itemCost optellen bij total als die waarde er is, en anders er 0 bij optellen. Maar waarom? Als de parameter zou slaan op false dan wordt er sowieso 0 bij opgeteld toch?
En je kunt functies die parameters vereisen niet aanroepen zonder een parameter aan te geven toch? Dus die (itemCost ||"0) lijkt me erg overbodig. Kan dat niet gewoon:
| 1 | this.total += itemCost; |
zijn?
Het gaat om deze opdracht:
http://www.codecademy.com(...)24b3a7dffd00020bf661
Wel goed dat ze je de object literal notation leren.
[ Bericht 3% gewijzigd door #ANONIEM op 29-03-2014 19:22:04 ]
http://leafletjs.com/
Mijn project met Leaflet gaat echt zeer soepeltjes.
"|| value" is in Javascript een standaardsyntax voor het opgeven van een alternatieve waarde als een variabele niet beschikbaar is. Door || 0 hier te schrijven zijn er voor een ervaren Javascript-programmeur onmiddellijk 2 dingen duidelijk aan deze functie:quote:
Zat eens te kijken op CodeCademy en zag wat vreemds in de code.
[ code verwijderd ]
Vanwaar bij regelnummer 2 de || operator? Volgens mij willen ze de itemCost optellen bij total als die waarde er is, en anders er 0 bij optellen. Maar waarom? Als de parameter zou slaan op false dan wordt er sowieso 0 bij opgeteld toch?
En je kunt functies die parameters vereisen niet aanroepen zonder een parameter aan te geven toch? Dus die (itemCost ||"0) lijkt me erg overbodig. Kan dat niet gewoon:
[ code verwijderd ]
zijn?
Het gaat om deze opdracht:
http://www.codecademy.com(...)24b3a7dffd00020bf661
Wel goed dat ze je de object literal notation leren.
1) itemCost is een optioneel argument
2) de standaardwaarde van itemCost is 0
De reden dat je dit toch zou schrijven in plaats van het weg te laten (omdat het inderdaad in dit geval niet veel doet) is het verduidelijken van de code en het makkelijker te maken toekomstige aanpassingen te verwerken. Je helpt als het ware je toekomstige collega door je code op deze manier op te schrijven.
Dat kan dus welquote:En je kunt functies die parameters vereisen niet aanroepen zonder een parameter aan te geven toch?
Javascript flexibility powerrrr 
[ Bericht 2% gewijzigd door Tijn op 29-03-2014 23:34:10 ]
Heel erg bedankt Tijn. Held!quote:
[..]
"|| value" is in Javascript een standaardsyntax voor het opgeven van een alternatieve waarde als een variabele niet beschikbaar is. Door || 0 hier te schrijven zijn er voor een ervaren Javascript-programmeur onmiddellijk 2 dingen duidelijk aan deze functie:
1) itemCost is een optioneel argument
2) de standaardwaarde van itemCost is 0
De reden dat je dit toch zou schrijven in plaats van het weg te laten (omdat het inderdaad in dit geval niet veel doet) is het verduidelijken van de code en het makkelijker te maken toekomstige aanpassingen te verwerken. Je helpt als het ware je toekomstige collega door je code op deze manier op te schrijven.
[..]
Dat kan dus wel
Zoiets dacht ik al, maar ik wist het dus niet zeker.
Kun je dan niet net zo goed dit doen?
| 1 2 | function blabla(getal = 0) { } |
Dat ben ik gewend uit andere talen en vind ik persoonlijk ook logischer en makkelijker te lezen. Daarnaast is het schaalbaarder omdat je dan niet bij alles wat je met itemCost doet zo'n "value || 0" moet gebruiken.
[ Bericht 8% gewijzigd door #ANONIEM op 30-03-2014 10:35:05 ]
Haha flexibility power.quote:
[..]
"|| value" is in Javascript een standaardsyntax voor het opgeven van een alternatieve waarde als een variabele niet beschikbaar is. Door || 0 hier te schrijven zijn er voor een ervaren Javascript-programmeur onmiddellijk 2 dingen duidelijk aan deze functie:
1) itemCost is een optioneel argument
2) de standaardwaarde van itemCost is 0
De reden dat je dit toch zou schrijven in plaats van het weg te laten (omdat het inderdaad in dit geval niet veel doet) is het verduidelijken van de code en het makkelijker te maken toekomstige aanpassingen te verwerken. Je helpt als het ware je toekomstige collega door je code op deze manier op te schrijven.
[..]
Dat kan dus wel
Ik doe het ook zo inderdaad.quote:
[..]
Heel erg bedankt Tijn. Held!
Zoiets dacht ik al, maar ik wist het dus niet zeker.
Kun je dan niet net zo goed dit doen?
[ code verwijderd ]
Dat ben ik gewend uit andere talen en vind ik persoonlijk ook logischer en makkelijker te lezen. Daarnaast is het schaalbaarder omdat je dan niet bij alles wat je met itemCost doet zo'n "value || 0" moet gebruiken.
Dat is bijzonder, want het is geen valide syntax in Javascript.quote:
Oh ik bedoelde in PHP.quote:
[..]
Dat is bijzonder, want het is geen valide syntax in Javascript.
Ja, dat is ook een programmeertaal.quote:
Zoals hierboven al is gezegd, is dat dus geen valide syntax in Javascript. Je zult het met de || operator moeten doen.quote:
[..]
Heel erg bedankt Tijn. Held!
Zoiets dacht ik al, maar ik wist het dus niet zeker.
Kun je dan niet net zo goed dit doen?
[ code verwijderd ]
Dat ben ik gewend uit andere talen en vind ik persoonlijk ook logischer en makkelijker te lezen. Daarnaast is het schaalbaarder omdat je dan niet bij alles wat je met itemCost doet zo'n "value || 0" moet gebruiken.
Jezelf herhalen is natuurlijk een grote nono (Don't Repeat Yourself!), dus als je op meerdere plaatsen deze variabele nodig hebt, dan zorg je bovenaan je functie dat de juiste waarde in wordt gevuld.
| 1 2 3 4 5 6 7 8 9 | function something(x, y, z) { var defaultValue = 0; x = x || defaultValue; y = y || defaultValue; z = z || defaultValue; /* hier allerlei berekening waarbij je x, y en z gebruikt en uiteindelijk iets teruggeeft */ } |
[ Bericht 0% gewijzigd door Tijn op 30-03-2014 13:30:38 ]
Dat is inderdaad een mooie manier om herhaling te voorkomen.quote:
[..]
Zoals hierboven al is gezegd, is dat dus geen valide syntax in Javascript. Je zult het met de || operator moeten doen.
Jezelf herhalen is natuurlijk een grote nono (Don't Repeat Yourself!), dus als je op meerdere plaatsen deze variabele nodig hebt, dan zorg je bovenaan je functie dat de juiste waarde in wordt gevuld.
[ code verwijderd ]
Ik mis dan wel die manier van optionele parameters zoals je dat wel hebt in andere talen. Volgens mij introduceren ze dat niet in ECMAScript 6.
Het is ook niet nodig in Javascript, alle argumenten zijn standaard optioneel.quote:
[..]
Dat is inderdaad een mooie manier om herhaling te voorkomen.
Ik mis dan wel die manier van optionele parameters zoals je dat wel hebt in andere talen. Volgens mij introduceren ze dat niet in ECMAScript 6.
Dat vind ik niet netjes!quote:
[..]
Het is ook niet nodig in Javascript, alle argumenten zijn standaard optioneel.
Toen ik mijn Wordpress website had opgezet een aantal jaar geleden werd automatisch bij elke pagina "| website naam" toegevoegd achter elke pagina titel.
Nu wil ik dit weer realiseren, met uitzondering van de homepage.
De code die ik nu heb is als volgt:
| 1 | <title><?php if (is_home () ) { bloginfo('name'); } elseif ( is_category() ) { single_cat_title(); echo ' - ' ; bloginfo('name'); } elseif (is_single() ) { single_post_title(); } elseif (is_page() ) { single_post_title(); } elseif ( is_404() ) { echo 'Pagina niet gevonden'; } else { wp_title('',true); } ?></title> |
Waar voeg ik de statische titel toe....?
Waarschijnlijk kunnen ze je hier beter helpenquote:
Iemand die mij uit de brand kan helpen.
Toen ik mijn Wordpress website had opgezet een aantal jaar geleden werd automatisch bij elke pagina "| website naam" toegevoegd achter elke pagina titel.
Nu wil ik dit weer realiseren, met uitzondering van de homepage.
De code die ik nu heb is als volgt:
[ code verwijderd ]
Waar voeg ik de statische titel toe....?
DIG / [Wordpress] Algemeen topic deel 8
DIG / [PHP/(My)SQL] voor dummies #114
De laatste video van Crockfords YUI Theater serie over Javascript gaat over hoe om te gaan met dit soort irrationele gevoelensquote:
Ik vind het juist een heel rationeel gevoel.quote:Op zondag 30 maart 2014 22:28 schreef Tijn het volgende:
[..]
De laatste video van Crockfords YUI Theater serie over Javascript gaat over hoe om te gaan met dit soort irrationele gevoelens
Maar ik ben benieuwd! Ik heb het nog niet helemaal afgekeken.
Heb de docs wel eens bekeken. Zoveel stelt t niet voor toch?quote:
zitten hier nog mensen met ervaring met underscore.js?
Dit. Zit wel een aantal handige helper functies in, ik zie wel situaties waarin ik dat zou willen gebruiken.quote:
[..]
Heb de docs wel eens bekeken. Zoveel stelt t niet voor toch?
quote:
[..]
Heb de docs wel eens bekeken. Zoveel stelt t niet voor toch?
Oké, ik ben namelijk bezig met mij te verdiepen in AngularJS, maar het wordt een beetje veel bij elkaar. Ik heb verder nog geen ervaring met yeoman et cetera. En er werd in een tutorial aangeraden om functional javascript te lezen, wat er weer vanuit gaat dat je met underscore.js kan werken.quote:
[..]
Dit. Zit wel een aantal handige helper functies in, ik zie wel situaties waarin ik dat zou willen gebruiken.
Een library met functies, wel meer dan alleen string's. Alleen op een van de eerste bladzijden van functional programming krijg je dit al:quote:
Het is toch gewoon een uitgebreide string helper?
En gaan ze ervan uit dat je dit al begrijpt, wat niet het geval is. Daarom laat ik functional programming nog maar even voor wat het is.
Dat heeft niet zoveel met underscore of angular te maken. Daarnaast is je voorbeeld voor de meeste (ervaren) programmeurs wel te lezen.quote:
[..]
Een library met functies, wel meer dan alleen string's. Alleen op een van de eerste bladzijden van functional programming krijg je dit al:
[ afbeelding ]
En gaan ze ervan uit dat je dit al begrijpt, wat niet het geval is. Daarom laat ik functional programming nog maar even voor wat het is.
De structuur begrijp ik wel grotendeels, alleen de underscore functies ken ik niet, en die staan ook niet uitgelegd of beschreven oid. En ik kwam hier bij omdat er in een AngularJs tutorial werd geadviseerd om dit boek te lezen.quote:
[..]
Dat heeft niet zoveel met underscore of angular te maken. Daarnaast is je voorbeeld voor de meeste (ervaren) programmeurs wel te lezen.
Gewoon in de docs checken wat die functies doenquote:
[..]
De structuur begrijp ik wel grotendeels, alleen de underscore functies ken ik niet, en die staan ook niet uitgelegd of beschreven oid. En ik kwam hier bij omdat er in een AngularJs tutorial werd geadviseerd om dit boek te lezen.
Dat heb ik namelijk net ook gedaan. Je moet voor jezelf als je iets niet snapt, het blokje code in stukjes opdelen en ze piece-by-piece opzoeken en proberen te begrijpen.Ik heb een pagina gemaakt met html/css waarbij er een zooi afbeeldingen naast elkaar staan, met float. Elke afbeelding staat in een eigen div, en alle divs met afbeeldingen staan in een div.
Nou heb ik met jQuery er een mooi dingetje opgepleurt waardoor de afbeeldingen faden naar 0,3 opacity, maar ik wil dat er achter die afbeeldingen een logo komt te staan. Dit lukt me niet! Ik heb een backgroundimg bij de afbeeldingen geprobeerd, en een afbeelding in de divs van de afbeeldingen. En het werkt niet.
Als ik height en width opgeef bij de backgroundimg, float de boel niet meer en is er nog steeds geen background. Wat doe ik verkeerd?
Voorbeeld html:
| 1 2 3 4 5 6 7 8 | <div class="producten"> <div class="product1"> <img src="images/1p/1pbed_1.jpg" alt="" class="fade" /> </div> <div class="product2"> <img src="images/1p/1pbed_2.jpg" alt="" class="fade" /> </div> </div> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .producten img { display: block; height: 200px; width: 300px; margin: 10px 0px 10px 15px; float: left; background-image: url("../images/1p/product_bg.jpg") no-repeat top left; } .product1 { background-image: url("../images/1p/product_bg.jpg") no-repeat; display: block; } |
[ Bericht 1% gewijzigd door Xaryna op 31-03-2014 17:18:19 ]
Heeft ook de mogelijkheid om een eigen download samen te stellen door onderdelen weg te laten.
Volgens mij is het probleem dat parents niet over hun children heen kunnen vallen qua z-index. Daarom staat je plaatje altijd over de achtergrond heen, waardoor je de achtergrond niet ziet.quote:
Ik was aan het prutsen voor de lol, en ik heb een probleem
Ik heb een pagina gemaakt met html/css waarbij er een zooi afbeeldingen naast elkaar staan, met float. Elke afbeelding staat in een eigen div, en alle divs met afbeeldingen staan in een div.
Nou heb ik met jQuery er een mooi dingetje opgepleurt waardoor de afbeeldingen faden naar 0,3 opacity, maar ik wil dat er achter die afbeeldingen een logo komt te staan. Dit lukt me niet! Ik heb een backgroundimg bij de afbeeldingen geprobeerd, en een afbeelding in de divs van de afbeeldingen. En het werkt niet. Als ik height en width opgeef bij de backgroundimg, float de boel niet meer. Wat doe ik verkeerd?
Voorbeeld html:
[ code verwijderd ]
Voorbeeld CSS:
[ code verwijderd ]
.producten div {} werkte ook niet en ik doe vast iets doms ergens.
Ik zou er zoiets van maken, dan heb je dit probleem niet:
| 1 2 3 4 5 6 7 8 9 10 | <ul class="producten"> <li> <img src="product1.jpg" alt="" /> <img class="logo" src="logo.png" alt="" /> </li> <li> <img src="product2.jpg" alt="" /> <img class="logo" src="logo.png" alt="" /> </li> </ul> |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .producten li { position: relative; float: left; width: 300px; height: 200px; } .producten li .logo { position: absolute; top: 10px; left: 10px; } |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | .producten div { display: block; height: 200px; width: 300px; margin: 10px 0px 10px 15px; float: left; background-image: url("logo.png"); background-repeat: no-repeat; background-position: 10px 10px; } .producten img { opacity: 0.3; } |
Er zat sowieso volgens mij een fout in de syntax van je background-image-regel. Ik weet niet uit m'n hoofd wat de shorthandnotatie daarvan is, maar ik vermoed dat het alleen werkt met de key "background" en niet met "background-image".
Het werkt nu wel, ik heb nu idd de hele bups op de div gezet ipv de img. Dank je, hij doet het!quote:
Of bedoel je dat je het logo echter ACHTER je plaatje wilt hebben? Is dat waarom je het plaatje ook doorzichtig maakt? In dat geval zou dit moeten werken:
[ code verwijderd ]
Er zat sowieso volgens mij een fout in de syntax van je background-image-regel. Ik weet niet uit m'n hoofd wat de shorthandnotatie daarvan is, maar ik vermoed dat het alleen werkt met de key "background" en niet met "background-image".
Ik kwam dat tegen bij zoeken naar oplossingen.quote:
"display: block" is trouwens niet nodig als je een element float, want hij wordt dan automatisch een block.
Het resultaat is trouwens echt foeilelijk.
Een kaartenmap die een JSON uitleest en daarvan 60.000 markers op een kaart zit. Jullie kunnen je voorstellen dat die dan even hangt.
setTimeout was geen oplossing.
Thanks! Dat zou mij erg helpen.quote:
Ik heb ooit een wrapper functie gemaakt die een for-loop nabootst maar op gezette intervals een setTimeout gebruikt om de browser even ruimte te geven. Je kan dan aangeven hoeveel iteraties per keer je wil laten draaien, heeft voor mij een bepaalde pagina waar duizenden records in moesten worden verwerkt een boel performance-problemen opgelost. Zal 'm even opzoeken.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | function fragmentedFor(arguments) { var fragmentLength, totalLoops, runEachLoop, runWhenDone, start; var init = function() { fragmentLength = arguments.fragmentLength || 10; totalLoops = arguments.totalLoops; runEachLoop = arguments.runEachLoop; runWhenDone = arguments.runWhenDone; start = arguments.start || 0; runNextFragment(); } var runNextFragment = function() { var end = start + fragmentLength; for(var i = start; i < Math.min(end, getTotal()); i++) { runEachLoop( i ); } start += fragmentLength; if(start < getTotal()) { setTimeout(runNextFragment, 1); } else { runWhenDone(); } } var getTotal = function() { // allows totalLoops argument to be either a variable or a function return typeof(mightBeAFunction) === 'function'; } init(); } |
Weet niet of 'ie een beetje netjes is, maar hij werkt als volgt:
ipv bijvoorbeeld
| 1 2 3 4 5 6 | for(var i = 0; i < 10000; i++) { console.log(i); } doeIetsNaDeForLoop(); |
doe je
| 1 2 3 4 5 6 7 8 9 | fragmentedFor({ fragmentLength: 100, // aantal iteraties door de for-loop per keer, optioneel. default is 10 totalLoops: 10000, runEachLoop: function(i) { console.log(i); }, runWhenDone: doeIetsNaDeForLoop, start: 0 // optioneel, default is al 0 }); |
runEachLoop is dus de functie die in de body van for() staat, runWhenDone is een callback functien= als 'ie klaar is.
totalLoops kan zowel een nummer als een functie zijn (die dus een getal moet returnen), dit had ik ooit nodig omdat het totaal werd verminderd doordat de runEachLoop elementen uit een array haalde en dus de loop onderweg korter werd.
Google maps? Dan kan je sowieso clusters gebruiken.quote:Op dinsdag 1 april 2014 21:19 schreef robin007bond het volgende:
Ik mis toch wel multithreading in JavaScript. Ja, je hebt workers maar dan kun je niks doen met de DOM. Ik snap het wel, omdat het anders niet thread safe is, maar toch.
Een kaartenmap die een JSON uitleest en daarvan 60.000 markers op een kaart zit. Jullie kunnen je voorstellen dat die dan even hangt.
setTimeout was geen oplossing.
En dat zijn wel lomp veel markers. Ben benieuwd naar de use-case, want dat lijkt me geen werkbare situatie.
Ja, het lijkt mij op het eerste gezicht niet heel user friendly om 60.000 markers aan te bieden, los van de performance.quote:
[..]
Google maps? Dan kan je sowieso clusters gebruiken.
En dat zijn wel lomp veel markers. Ben benieuwd naar de use-case, want dat lijkt me geen werkbare situatie.
[ Bericht 0% gewijzigd door Tijn op 02-04-2014 00:47:10 ]
ik zou even teruggaan naar de klant.Het belang van goede tutorials om iets te lerentwitter:SlexAxton twitterde op donderdag 13-03-2014 om 21:29:32Great. I read the wrong <canvas> tutorial and now there's oil paint all over my monitor. reageer retweet
Waarom niet?quote:
Inderdaad. Hoe valt 60k markers in godsnaam te verantwoorden.
Je hebt databases met locaties van bomen, OV haltes, horecagelegenheden en zo nog veel meer. Dan kom je makkelijk aan de 60K. Dat het niet verstandig is om ze allemaal tegelijk te laden, dat is een ander verhaal.
Daarom dus.quote:
[..]
Waarom niet?
Je hebt databases met locaties van bomen, OV haltes, horecagelegenheden en zo nog veel meer. Dan kom je makkelijk aan de 60K. Dat het niet verstandig is om ze allemaal tegelijk te laden, dat is een ander verhaal.
Clusters gebruik ik al.quote:
[..]
Google maps? Dan kan je sowieso clusters gebruiken.
En dat zijn wel lomp veel markers. Ben benieuwd naar de use-case, want dat lijkt me geen werkbare situatie.
En er komen nog filteropties en dergelijke. Dus dat komt wel goed.
Die laden alleen op het moment dat de gebruiker kiest de gegevens op te halen. Maar als de gebruiker alles wil zien dan krijgt hij ook alles te zien.Zat al te denken dat ik alleen markers uit een bepaald gebied ophaal om het voor tablets wat beter te maken.
[ Bericht 6% gewijzigd door #ANONIEM op 02-04-2014 18:55:12 ]
In clusters maakt dat toch weinig uit. Voorbeeld:quote:
Je kunt een gebruiker nooit 60.000 markers presenteren op een kaart. Daar heeft niemand wat aan.
http://leaflet.github.io/(...)realworld.50000.html
Tiles doen het niet in het voorbeeld.
[ Bericht 3% gewijzigd door #ANONIEM op 02-04-2014 19:12:16 ]
De performance van je voorbeeld is trouwens best acceptabel toch? En dat is met 50.000 markers, dus waarom zou 60.000 dan een probleem zijn?
Oké, anders verwoord. 60.000 markers worden dus nooit in één keer gepresenteerd. Geen zorgen.quote:
Maar dan presenteer je geen 60.000 markers, dat is juist het punt
De performance van je voorbeeld is trouwens best acceptabel toch? En dat is met 50.000 markers, dus waarom zou 60.000 dan een probleem zijn?
En de performance is wel acceptabel, maar probeer het maar even op een mobiel apparaat uit.
Daarnaast is het bij mij nog een JSON die via asynchroon wordt ingelezen en waar nog wat info bij zit.Ik zou de hele boel filteren voordat je het aan de user presenteert. Bij voorkeur al in de service die de JSON genereert. Het is gewoon veel te veel data voor een persoon om te kunnen verwerken. Je kunt denk ik beter de service een paar keer aanroepen en nieuwe data opvragen dan dit allemaal in 1x naar de client te willen pushen, laat staan het in de DOM te gooien.quote:
[..]
Oké, anders verwoord. 60.000 markers worden dus nooit in één keer gepresenteerd. Geen zorgen.
En de performance is wel acceptabel, maar probeer het maar even op een mobiel apparaat uit.
Dat is ook de bedoeling, maar er kan een user zijn die geen filteropties seelecteert.quote:
[..]
Ik zou de hele boel filteren voordat je het aan de user presenteert. Bij voorkeur al in de service die de JSON genereert. Het is gewoon veel te veel data voor een persoon om te kunnen verwerken. Je kunt denk ik beter de service een paar keer aanroepen en nieuwe data opvragen dan dit allemaal in 1x naar de client te willen pushen, laat staan het in de DOM te gooien.
En dit wordt nu al in de JSON gegenereerd server-side. Don't worry. Maar ik wil het enkel voor het zeldzame geval dat een gebruiker echt alle filteropties uitzet en vervolgens op "Gegevens ophalen" drukt o.i.d. De JSON wordt dynamisch gegenereerd op basis van de filteropties. Ik ga geen 60.000 items in een JSON iedere keer versturen.
[ Bericht 8% gewijzigd door #ANONIEM op 02-04-2014 20:07:09 ]
| 1 | <font color=#FF0000>Value 1 must be a number</font><script>document.forms[0].value1.focus();</script> |
Waar staat de [0] in forms voor?
document.forms is een array van alle forms op een pagina. document.forms[0] is het eerste element in deze array aangezien een array een index heeft die begint bij 0.quote:
[ code verwijderd ]
Waar staat de [0] in forms voor?
Overigens zie ik dat de twee forms wel allebei waarde 0 hebben (alleen andere naam, that's it, value 1 en value 2)
document.getElementById('userForm') wordt t dan
Voor de 'toekomst' wel ja, ondersteunen hier helaas nog wel IE9, 8 en lager niet meer gelukkig.quote:
IE10 ondersteunt wel CSS gradients toch? Dat lijkt me uiteindelijk toch beter voor de toekomst dan een afbeelding, al is het svg. En vendor prefixes zijn voor gradients eigenlijk allang niet meer nodig.
Ik zou denken dat iets als een gradient niet belangrijk is voor de functionaliteit en het daarom niet zo erg is als dat niet in oudere browsers werkt.quote:
[..]
Voor de 'toekomst' wel ja, ondersteunen hier helaas nog wel IE9, 8 en lager niet meer gelukkig.
http://www.postcodeapi.nu/quote:
Iemand hier ervaring met een postcode API die je adresgegevens aanvult op basis van je postcode en huisnummer? Ik heb er een nodig die potentieel honderdduizenden bezoekers krijgt in een korte periode dus ik ben me even aan het orienteren op wat er allemaal aanwezig is.
Die had ik uiteraard al gevonden, maar bij "excessief gebruik" nemen ze contact met je op. Zou een gevalletje worden van zelf alvast even contact met ze opnemen vermoed ik. Maar heb je hier ervaring mee?quote:
https://api.postcode.nl/quote:
Iemand hier ervaring met een postcode API die je adresgegevens aanvult op basis van je postcode en huisnummer? Ik heb er een nodig die potentieel honderdduizenden bezoekers krijgt in een korte periode dus ik ben me even aan het orienteren op wat er allemaal aanwezig is.
Googlen kan ik zelf wel hoor, ik vroeg me alleen af of iemand ervaring met deze tools heeft en op basis daarvan dus nog nuttige tips kan geven
.http://www.webservices.nl(...)de-huisnummer-check/quote:
Iemand hier ervaring met een postcode API die je adresgegevens aanvult op basis van je postcode en huisnummer? Ik heb er een nodig die potentieel honderdduizenden bezoekers krijgt in een korte periode dus ik ben me even aan het orienteren op wat er allemaal aanwezig is.
Gebruiken wij ook voor meerdere klanten (en meerdere api's)Ik heb dit gevonden:
https://github.com/rogerwang/node-webkit/
http://www.tidesdk.org/
http://appjs.com/
https://github.com/neam/webapp-xul-wrapper
Iemand ervaringen of tips? Het hoeft niet per se gratis te zijn.
[ Bericht 7% gewijzigd door Tijn op 15-04-2014 19:34:39 ]
https://wiki.gnome.org/JavaScriptquote:
Ja, voor alle relevante platformen. Mac, Linux, Windows, de hele handel.
Ik heb dit gevonden:
https://github.com/rogerwang/node-webkit/
http://www.tidesdk.org/
http://appjs.com/
https://github.com/neam/webapp-xul-wrapper
Iemand ervaringen of tips? Het hoeft niet per se gratis te zijn.
GTK werkt op alle platformen.
De svg zit er nu voor ie9, kan ik m net zo goed voor andere browsers gebruiken. Was niet op de hoogte dat verder prefixen al obsolete was. Hele specifieke use-case dan maar so be it.quote:
[..]
Ik zou denken dat iets als een gradient niet belangrijk is voor de functionaliteit en het daarom niet zo erg is als dat niet in oudere browsers werkt.
Edit: sorry zit mobiel, Anyone please?