abonnementen ibood.com bol.com Gearbest
  zondag 15 mei 2016 @ 00:03:25 #1
56176 Catch22-
Ben je Blind?!
pi_162202612
registreer om deze reclame te verbergen
roEhbv3.jpg

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.

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 (code.png, zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.
Nog beter is om een snippet in Codepen of JSFiddle te plakken. Hierdoor kunnen anderen je ook makkelijker helpen.

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
CSS Floats 101
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

Overige tips & tricks
jQuery Tips and Tricks
Hidden Features of JavaScript

Populaire frameworks
• [HTML/CSS] Bootstrap
• [HTML/CSS] Foundation
• [JS] jQuery
• [JS] AngularJS
• [JS] Backbone
• [JS] Ember.js
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
  zondag 15 mei 2016 @ 00:04:16 #2
56176 Catch22-
Ben je Blind?!
pi_162202683
In een loopje doe ik het wel. Daarbuiten wel +=, maar niet in optellingen met meer dan 1 variabele
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_162202800
Stuk ongeduld.
  zondag 15 mei 2016 @ 00:09:23 #4
56176 Catch22-
Ben je Blind?!
pi_162203089
registreer om deze reclame te verbergen
quote:
7s.gif Op zondag 15 mei 2016 00:05 schreef KomtTijd... het volgende:
Stuk ongeduld.
Ik wou dat posten en anders vergeet ik het weer. Mijn garbage collector is vrij agressief
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
  zondag 15 mei 2016 @ 10:52:48 #5
118011 BrainOverfloW
Fok! around the Clock!
pi_162210722
Inmiddels zouden Vue en React ook wel een plekje in bij de populaire frameworks mogen krijgen denk ik.
Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
  Grappenmaker zaterdag 28 mei 2016 @ 23:55:10 #7
388507 d4v1d
Wat vind je van de Singel?
pi_162580386
registreer om deze reclame te verbergen
quote:
Kijk ook hier eens naar http://pingendo.com/
Op vrijdag 3 oktober 2014 22:08 schreef LompeHork het volgende:
D4v1d is wel een baas _O_
Op zondag 25 september 2016 16:43 schreef Crip het volgende:
Ik vind jou echt een onwijs leuke user.
pi_162587389
quote:
1s.gif Op zaterdag 28 mei 2016 23:55 schreef d4v1d het volgende:

[..]

Kijk ook hier eens naar http://pingendo.com/
Oh cool! Dat is wel een leuk alternatief (en gratis), thanks
  Grappenmaker zondag 29 mei 2016 @ 13:57:42 #9
388507 d4v1d
Wat vind je van de Singel?
pi_162589951
Zat er even mee te klooien, het heeft wel een vervelende bug met de (image) paths. Op Windows pakt die dan een backslash ipv een forward slash :')
Op vrijdag 3 oktober 2014 22:08 schreef LompeHork het volgende:
D4v1d is wel een baas _O_
Op zondag 25 september 2016 16:43 schreef Crip het volgende:
Ik vind jou echt een onwijs leuke user.
  Grappenmaker zondag 29 mei 2016 @ 14:50:43 #10
388507 d4v1d
Wat vind je van de Singel?
pi_162591708
Wat zijn we lekker enthousiast jongens.
Op vrijdag 3 oktober 2014 22:08 schreef LompeHork het volgende:
D4v1d is wel een baas _O_
Op zondag 25 september 2016 16:43 schreef Crip het volgende:
Ik vind jou echt een onwijs leuke user.
  Moderator zondag 29 mei 2016 @ 15:10:55 #11
403866 crew  richolio
#MacMasterrace
pi_162592524
Grappig. Ik ging het ook even uitproberen, alleen werd heel Pingendo ineens wit :') Maar ik mag niet klagen over zulke bugs, het is toch gratis.

bleFMCT.png

Gebeurt dus als je de typography wil aanpassen
'Richolio _O_' - tong80
LAST.FM
  Moderator zondag 29 mei 2016 @ 15:31:11 #12
403866 crew  richolio
#MacMasterrace
pi_162593165
Als ze het nou nog net wat meer Sketch maken :9~
'Richolio _O_' - tong80
LAST.FM
  zondag 29 mei 2016 @ 15:42:42 #13
279571 JanCees
&#128076;&#128064;
pi_162593467
quote:
1s.gif Op zaterdag 28 mei 2016 23:55 schreef d4v1d het volgende:

[..]

Kijk ook hier eens naar http://pingendo.com/
Is wel heel basic zo te zien
People tell me I'm crazy. "You take that 'Jesus-thing' too seriously."
Well, Christ took me really seriously, when he died for me on that cross.

MUZ / Het volksmuziektopic
  Grappenmaker zondag 29 mei 2016 @ 15:54:50 #14
388507 d4v1d
Wat vind je van de Singel?
pi_162593782
quote:
0s.gif Op zondag 29 mei 2016 15:10 schreef richolio het volgende:
Grappig. Ik ging het ook even uitproberen, alleen werd heel Pingendo ineens wit :') Maar ik mag niet klagen over zulke bugs, het is toch gratis.

[ afbeelding ]

Gebeurt dus als je de typography wil aanpassen
Sylvana Simons kom d'r maar in
Op vrijdag 3 oktober 2014 22:08 schreef LompeHork het volgende:
D4v1d is wel een baas _O_
Op zondag 25 september 2016 16:43 schreef Crip het volgende:
Ik vind jou echt een onwijs leuke user.
  donderdag 14 juli 2016 @ 21:36:14 #15
291799 TwenteFC
Red is the color.
pi_163742847
:P Zitten hier toevallig nog freelancers die nog een klus zoeken?
pi_166471868
Kick! :P.

Naar aanleiding van FB / FOK!'s User Awards-verkiezing 2016......:
Ik wil het invullen van dat vragenlijstje vergemakkelijken.

Bedoeling: users vullen de antwoorden in en de code die op het forum geplaatst kan worden, wordt geplaatst in een textarea dat kopieerbaar is.

Wat ik momenteel heb: http://fok.nfshost.com/verkiezingen/.

Is gemaakt met behulp van: https://jsfiddle.net/y55rbykv/ (ben op weg geholpen door een andere user - picodealion).

Iemand een idee hoe ik het werkend krijg?
jouw neus is perfect
voor mijn klit
pi_166472295
-edit-
Je moet toch wat duidelijker zijn. Wat werkt bij jou wel en niet? Je pagina doet het niet omdat je daar geen scripts in hebt zitten, alleen jQuery. De fiddle werkt hier wel gewoon in Chrome.
Knowledge is power. France is Bacon.
pi_166472421
quote:
14s.gif Op maandag 7 november 2016 11:18 schreef picodealion het volgende:
-edit-
Je moet toch wat duidelijker zijn. Wat werkt bij jou wel en niet? Je pagina doet het niet omdat je daar geen scripts in hebt zitten, alleen jQuery. De fiddle werkt hier wel gewoon in Chrome.
Ik gebruik Firefox, en daar bleef de textbox in JSFiddle leeg. In Chrome werkt het wel.

Edit: nu werkt het ook in Firefox... Hm, weird.

Even verder puzzelen. Bedankt!
jouw neus is perfect
voor mijn klit
pi_166472512
quote:
14s.gif Op maandag 7 november 2016 11:18 schreef picodealion het volgende:
-edit-
Je moet toch wat duidelijker zijn. Wat werkt bij jou wel en niet? Je pagina doet het niet omdat je daar geen scripts in hebt zitten, alleen jQuery. De fiddle werkt hier wel gewoon in Chrome.
O+. Hij doet 't.

Is er een mogelijkheid om alleen de veranderde input-boxen mee te nemen? Dus als er maar 4 van 15 worden ingevuld, zie je ook alleen de output van die 4, zeg maar.
jouw neus is perfect
voor mijn klit
pi_166472563
iets van (psuedo code) if (textbox.value != "") inbouwen?
pi_166472613
Dat zou je dan op iedere individuele regel moeten toepassen. Het kan uiteraard wel, maar gezien je geringe ervaring met javascript zou ik daar niet aan beginnen. Of wel, maar dan moet je wel echt even wat actiever uitzoeken hoe javascript werkt en vooral hoe je met behulp van de developer tools je code kan debuggen.
Knowledge is power. France is Bacon.
pi_166472659
quote:
14s.gif Op maandag 7 november 2016 11:34 schreef KomtTijd... het volgende:
iets van (psuedo code) if (textbox.value != "") inbouwen?
Zou je een voorzetje kunnen geven? :@.

Bedoel, kan zelf wel prutsen natuurlijk, maar ik denk niet ik het vlot krijg zoals ik het wil.

quote:
14s.gif Op maandag 7 november 2016 11:37 schreef picodealion het volgende:
Dat zou je dan op iedere individuele regel moeten toepassen. Het kan uiteraard wel, maar gezien je geringe ervaring met javascript zou ik daar niet aan beginnen. Of wel, maar dan moet je wel echt even wat actiever uitzoeken hoe javascript werkt en vooral hoe je met behulp van de developer tools je code kan debuggen.
Geen probleem om het per regel toe te passen...

Thanks in ieder geval, ga zo even uitzoeken of er wat 'makkelijks' voor op te verzinnen valt. Eerst het geheel maar even afmaken.
jouw neus is perfect
voor mijn klit
  maandag 7 november 2016 @ 11:46:10 #23
56176 Catch22-
Ben je Blind?!
pi_166472757
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(function($) {

  $('input').change(updateOutput);

  function updateOutput() {
      var output = "";
            $("p.item").each(function(item) {
          var text = $("span", this).text();
        var value = $("input:text", this).val();
        if(value && value.length > 0) {
        console.log("adding", value)
            output += "[b]" + text + "[/b]" + " " + value + "\n\n";
        }
      })
      console.log("Setting output", output)
      $('#output').val(output);
  }

  function getUser(award) {
    return $('input[name="' + award + '"]').val();
  }
  
})(jQuery);
1
2
3
4
5
6
7
8
<p class='item'>
  <span>Leo Blokhuis Award - Grootste muziekkenner :</span>  <input type="text" name="LeoBlokhuis">
</p>
<p class='item'>
  <span>Philippe Geubels Award - User met de meest humor :</span> <input type="text" name="PhilippeGeubels">
</p>
 
<textarea id="output" id="" cols="30" rows="10"></textarea>

https://jsfiddle.net/78825ajh/

quote:
0s.gif Op maandag 7 november 2016 11:40 schreef zarGon het volgende:
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
pi_166472844
Ah ja, netjes.
Knowledge is power. France is Bacon.
pi_166473176
quote:
11s.gif Op maandag 7 november 2016 11:46 schreef Catch22- het volgende:

[ code verwijderd ]

[ code verwijderd ]

https://jsfiddle.net/78825ajh/

[..]

O+. O+. O+.

FB / FOK!'s User Awards-verkiezing 2016....... :P.

Hartstikke bedankt alledrie, voor het meedenken en ook daadwerkelijk meeschrijven van de code. _O_.
jouw neus is perfect
voor mijn klit
abonnementen ibood.com bol.com Gearbest
Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')