abonnement bol.com Unibet Coolblue
  zondag 15 mei 2016 @ 00:03:25 #1
56176 Catch22-
Ben je Blind?!
pi_162202612


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
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
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
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 :')
pi_162591708
Wat zijn we lekker enthousiast jongens.
  zondag 29 mei 2016 @ 15:10:55 #11
403866 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.



Gebeurt dus als je de typography wil aanpassen
'Richolio _O_' - tong80
LAST.FM
  zondag 29 mei 2016 @ 15:31:11 #12
403866 richolio
#MacMasterrace
pi_162593165
Als ze het nou nog net wat meer Sketch maken :9~
'Richolio _O_' - tong80
LAST.FM
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
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
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?
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.
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!

[ Bericht 6% gewijzigd door #ANONIEM op 07-11-2016 11:25:11 ]
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.
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.
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.
  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.
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_.
abonnement bol.com Unibet Coolblue
Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')