[HTML, CSS, JS] Frontend #40: De Node is hoog

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  woensdag 16 april 2014 @ 20:50:01 #1
56176 Catch22-
Ben je Blind?!
pi_138955549
[html, css, js] Voor Dummies

Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.

HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen. Omdat javascript zeer veelzijdig is, is er voor specifieke JS vragen ook een specaal topic, zie: [Javascript] voor dummies

Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Deze kun je stellen in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. kun je terecht in Het grote (betaalde) webhosting topic
En voor Wordpress is er ook een speciaal topic, als het om meer gaat dan de HTML/CSS van een theme: [Wordpress]Algemeen topic

Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (code.png, 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
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?
  woensdag 16 april 2014 @ 20:50:26 #2
56176 Catch22-
Ben je Blind?!
pi_138955571
Er zit ook gewoon een "Open nieuw deel" linkje in de mobiele layout hoor
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?
  woensdag 16 april 2014 @ 20:52:14 #3
230788 n8n
Pragmatisch
pi_138955673
quote:
0s.gif Op woensdag 16 april 2014 20:50 schreef Catch22- het volgende:
Er zit ook gewoon een "Open nieuw deel" linkje in de mobiele layout hoor
klopt dan is de op alleen weg
“Specialization is for insects”.—Robert Heinlein
  woensdag 16 april 2014 @ 20:52:40 #4
56176 Catch22-
Ben je Blind?!
pi_138955692
quote:
1s.gif Op woensdag 16 april 2014 20:52 schreef n8n het volgende:

[..]

klopt dan is de op alleen weg
Neehoor. Ik zit ook mobiel
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?
  woensdag 16 april 2014 @ 20:56:22 #5
230788 n8n
Pragmatisch
pi_138955853
quote:
1s.gif Op woensdag 16 april 2014 20:52 schreef Catch22- het volgende:

[..]

Neehoor. Ik zit ook mobiel
dan mij excuus, pardon
“Specialization is for insects”.—Robert Heinlein
  woensdag 16 april 2014 @ 21:00:31 #6
56176 Catch22-
Ben je Blind?!
pi_138956032
quote:
1s.gif Op woensdag 16 april 2014 20:56 schreef n8n het volgende:

[..]

dan mij excuus, pardon
Voor deze keer.
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_138960929
Lieve jongens en meisjes, ik ben bezig met jQuery leren, heb wat tuts gedaan en ben nou aan het prutsen met een image slider (aan de hand van deze tutorial maar het lukt me niet om de slider te pauzeren als je hovert, en ik weet niet wat ik verkeerd doe.

Als beginner kan het dus best zijn dat ik ergens een syntax foutje over het hoofd zie, maar misschien is het wat gecompliceerder. Ik kom er niet uit!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24		function slideSwitch() {
    var $active = $('#slideshow div.active');

    if ( $active.length == 0 ) $active = $('#slideshow div:last');

    var $next =  $active.next('div').length ? $active.next()
        : $('#slideshow div:first');

    $active.addClass('last-active');
        
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

var playSlideshow = setInterval( "slideSwitch()", 2000 );
$('#slideshow').hover(function() {
    clearInterval(playSlideshow);
},
function() {
    playSlideshow = setInterval( "slideSwitch()", 2000 );
});
Hij loopt, hij slide, maar hij pauzeert niet als je hovert.
Chocoladetaartjes.
Op donderdag 25 juli 2013 18:44 schreef trovey het volgende: Evert, de vrouwelijke versie. :P
  woensdag 16 april 2014 @ 22:28:51 #8
56176 Catch22-
Ben je Blind?!
pi_138961475
Triggert hij de hover callbacks wel? Even breakpoints zetten of loggen dus. Is de clearinterval wel een wrapper voor de divs? Als de elementen er absoluut gepositioneerd staan en hij geen breedte en hoogte heeft dan is heeft hij geen grootte
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_138961547
quote:
0s.gif Op woensdag 16 april 2014 22:28 schreef Catch22- het volgende:
Triggert hij de hover callbacks wel? Even breakpoints zetten of loggen dus. Is de clearinterval wel een wrapper voor de divs? Als de elementen er absoluut gepositioneerd staan en hij geen breedte en hoogte heeft dan is heeft hij geen grootte
Wat wat wat? #slideshow is waar de hele handel in staat. De divs in #slideshow worden geslide. Met CSS heb ik #slideshow een hoogte en breedte gegeven. De rest snap ik niet. :P
Chocoladetaartjes.
Op donderdag 25 juli 2013 18:44 schreef trovey het volgende: Evert, de vrouwelijke versie. :P
  woensdag 16 april 2014 @ 22:31:24 #10
56176 Catch22-
Ben je Blind?!
pi_138961606
Zet eens console.log("in") en console.log("uit") in de twee callbacks van de hover.

En als je het inspect, welke grootte rapporteert hij dan?
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?
  woensdag 16 april 2014 @ 22:39:25 #11
268341 Xaryna
Ecchi yaoi
pi_138962062
Hij logt niets, idd. En grootte zit schijnbaar alleen op de #slideshow, bij de andere divs geeft hij geen afmetingen.

Maar mijn cursor verandert wel. Ik had bij css #slideshow div.active { cursor: pointer;} gezet.
Ik mik er even afmetingen in, de divs zijn idd absoluut. Momentje.

Edit: nope, werkte niet.
Chocoladetaartjes.
Op donderdag 25 juli 2013 18:44 schreef trovey het volgende: Evert, de vrouwelijke versie. :P
  woensdag 16 april 2014 @ 22:44:48 #12
56176 Catch22-
Ben je Blind?!
pi_138962338
De hover wordt niet getriggerd omdat je divs over de slideshow liggen.

Doe eens $("#slideshow").on("mousein", "div.active", function{});
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?
  woensdag 16 april 2014 @ 22:54:47 #13
268341 Xaryna
Ecchi yaoi
pi_138962873
quote:
0s.gif Op woensdag 16 april 2014 22:44 schreef Catch22- het volgende:
De hover wordt niet getriggerd omdat je divs over de slideshow liggen.

Doe eens $("#slideshow").on("mousein", "div.active", function{});
Nog steeds niets. Ik kan wel een linkje doen?
Chocoladetaartjes.
Op donderdag 25 juli 2013 18:44 schreef trovey het volgende: Evert, de vrouwelijke versie. :P
  woensdag 16 april 2014 @ 22:55:33 #14
56176 Catch22-
Ben je Blind?!
pi_138962914
quote:
0s.gif Op woensdag 16 april 2014 22:54 schreef Xaryna het volgende:

[..]

Nog steeds niets. Ik kan wel een linkje doen?
doe maar
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?
  woensdag 16 april 2014 @ 23:07:13 #15
268341 Xaryna
Ecchi yaoi
pi_138963579
quote:
1s.gif Op woensdag 16 april 2014 22:55 schreef Catch22- het volgende:

[..]

doe maar
- }) -
Chocoladetaartjes.
Op donderdag 25 juli 2013 18:44 schreef trovey het volgende: Evert, de vrouwelijke versie. :P
  woensdag 16 april 2014 @ 23:09:01 #16
56176 Catch22-
Ben je Blind?!
pi_138963676
Document ready er om heen dus. Je include je js bovenin en bind die actie daar gelijk. Dan is de dom nog niet geladen en wordt die event handler dus niet opgelijmd
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?
  woensdag 16 april 2014 @ 23:35:40 #17
268341 Xaryna
Ecchi yaoi
pi_138965107
Het werkt inmiddels, dank je wel Catch22- O+

Nou op naar m'n volgende dingetje, werkende bolletjes zodat je kan zien hoeveel slides en welke actief is. :P
Chocoladetaartjes.
Op donderdag 25 juli 2013 18:44 schreef trovey het volgende: Evert, de vrouwelijke versie. :P
  woensdag 16 april 2014 @ 23:36:41 #18
230788 n8n
Pragmatisch
pi_138965166
Gewoon js als laatst draaien
“Specialization is for insects”.—Robert Heinlein
  woensdag 16 april 2014 @ 23:38:02 #19
56176 Catch22-
Ben je Blind?!
pi_138965219
quote:
1s.gif Op woensdag 16 april 2014 23:36 schreef n8n het volgende:
Gewoon js als laatst draaien
Sowieso het best om je js onderaan je body te definieren idd.
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?
  woensdag 16 april 2014 @ 23:50:59 #20
230788 n8n
Pragmatisch
pi_138965774
http://bradfrostweb.com/blog/post/carousels/

Dit al gelezen? #sliders
“Specialization is for insects”.—Robert Heinlein
  woensdag 16 april 2014 @ 23:57:02 #21
268341 Xaryna
Ecchi yaoi
pi_138966013
quote:
0s.gif Op woensdag 16 april 2014 23:50 schreef n8n het volgende:
http://bradfrostweb.com/blog/post/carousels/

Dit al gelezen? #sliders
Leuk artikel, dank je :)
Chocoladetaartjes.
Op donderdag 25 juli 2013 18:44 schreef trovey het volgende: Evert, de vrouwelijke versie. :P
  donderdag 17 april 2014 @ 00:09:08 #22
56176 Catch22-
Ben je Blind?!
pi_138966455
Ik ben er ook geen fan van. Heb t principe onlangs wel toegepast, maar dat was scrollable content, dat is wat anders
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_139002292
Kan iemand mij vertellen hoe ik kan uitvissen of een pagina een submit heeft.

Uitleg, onderstaand stuk code gebruik ik als iemand een formulier invult maar niet verzend en naar een andere pagina gaat, dan krijg je een confirm te zien met de vraag of je de gewijzigde data wilt opslaan of juist verder wilt gaan. Nu wil ik wanneer een pagina gesubmit wordt (form submit) dat ik deze melding niet krijg... en eventueel als mogelijk ook een 'zoek' veld waarbij met enter gezocht kan worden niet mee genomen wordt... How do i do this?

1
2
3		$('input').live("change", function () {
    window.onbeforeunload = function () { return "De wijzigingen zijn nog niet opgeslagen, weet u zeker dat u verder gaat?" };
});
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  vrijdag 18 april 2014 @ 09:33:57 #24
12221 Tijn
Powered by MS Paint
pi_139003923
Doen browsers dit niet al zelf?

Anyway, je kunt het form submit event gebruiken om te kijken of je je waarschuwing wel of niet moet geven :)
Verberg de nieuwsticker
pi_139007840
Wat tijn zegt inderdaad. Houd ergens een variabele bij die standaard op false staat, en hang een functie aan het submit-event dat die variabele op true zet. Dan hoef je bij je bovenstaande functie alleen te checken welke waarde die variabele heeft.

Bedenk je wel dat als ze na het submitten weer dingen aanpassen de variabele weer terug op false moet, totdat er natuurlijk weer opnieuw wordt gesubmit.
  vrijdag 18 april 2014 @ 12:15:39 #26
12221 Tijn
Powered by MS Paint
pi_139007984
.live() is trouwens al een tijdje deprecated in jQuery. Je kunt beter .on() gebruiken.
Verberg de nieuwsticker
  zaterdag 19 april 2014 @ 00:07:00 #27
230788 n8n
Pragmatisch
pi_139032989
Iemand nog goede artikel resources zoals zeldman, Brad frost, informaton architects, signal vs noise maar ook dingen als alistapart, smashing, 24ways etc?
“Specialization is for insects”.—Robert Heinlein
pi_139035264
Thanks allemaal, ik zal er mee gaan spelen.. ! :)
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  maandag 21 april 2014 @ 20:20:16 #29
230788 n8n
Pragmatisch
pi_139121349
Website aan het optimaliseren. Van 3,2MB en 142 requests naar 1,3MB met 19 requests :7 Pats
“Specialization is for insects”.—Robert Heinlein
  maandag 21 april 2014 @ 20:30:11 #30
12221 Tijn
Powered by MS Paint
pi_139121855
142 requests, wtf 8)7
Verberg de nieuwsticker
  maandag 21 april 2014 @ 20:33:39 #31
56176 Catch22-
Ben je Blind?!
pi_139122080
Dan moet je wel je best doen.

Heb nu altijd 1 jsfile, 1 cssfile en 1 iconfont. Scheelt al onwijs
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?
  maandag 21 april 2014 @ 20:36:49 #32
230788 n8n
Pragmatisch
pi_139122301
quote:
10s.gif Op maandag 21 april 2014 20:30 schreef Tijn het volgende:
142 requests, wtf 8)7
moet er wel bij zeggen dat 46 van de js was die nog niet samengevoegd was, maar alsnog heb ik geen idee waarom er 42 snippets/libraries nodig zijn :') Geen verstand van js enzo maar daar ga ik het nog ff over hebben met de dev

[ Bericht 0% gewijzigd door n8n op 21-04-2014 20:46:19 ]
“Specialization is for insects”.—Robert Heinlein
  maandag 21 april 2014 @ 20:40:12 #33
230788 n8n
Pragmatisch
pi_139122571
quote:
0s.gif Op maandag 21 april 2014 20:33 schreef Catch22- het volgende:
Dan moet je wel je best doen.

Heb nu altijd 1 jsfile, 1 cssfile en 1 iconfont. Scheelt al onwijs
fonts kan je als base64 in de main css zetten, geen FOUT meer, 1 request voor alle fonts. Deze site heeft er 6 wat al vrij riant is.

van ySlow




Moet nog de JS en gMaps toevoegen. Bij de JS zie ik nog genoeg mogelijkheden de size omlaag te halen. Voor gMaps ga ik waarschijnlijk over op afbeeldingen ipv. de Google API omdat het niet echt nodig is om een interactieve kaart te krijgen (plus dat er nu meteen bij het openen van de single page website wordt gevraagd om locatie-permissies).

In de Css zitten dus ook de fonts, zonder gzip is 371KB fonts van de 397

[ Bericht 2% gewijzigd door n8n op 22-04-2014 00:45:05 ]
“Specialization is for insects”.—Robert Heinlein
  maandag 21 april 2014 @ 20:55:38 #34
137776 boem-dikkie
Jedi Mind Baby!
pi_139123657
Iemand fatsoenlijke library om naar een volgende div te scrollen bij mousescroll of touch? Ik wil geen gebloate libraries waar ik weer drie andere libraries voor nodig heb. Kan zo even niet iets wat okay is vinden eigenlijk.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  maandag 21 april 2014 @ 21:06:12 #35
56176 Catch22-
Ben je Blind?!
pi_139124351
Script je zelf toch net zo makkelijk?
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?
  maandag 21 april 2014 @ 21:50:05 #36
12221 Tijn
Powered by MS Paint
pi_139127392
quote:
7s.gif Op maandag 21 april 2014 20:40 schreef n8n het volgende:

[..]

iconfonts kan je als base64 in de main css zetten
Dan issie wel 33% groter dan als-ie niet base64 encoded is.
Verberg de nieuwsticker
pi_139128000
1,3MB voor een website vind ik nog steeds wel bizar veel.
zcflevo.nl
  maandag 21 april 2014 @ 22:01:33 #38
56176 Catch22-
Ben je Blind?!
pi_139128234
Is ook de moeite niet. Ik heb liever elke request minder load dan 1x een fout minder. Daarbij gaat t dus niet eens per se sneller als de fontfile in hetzelfde requestblock meegaat.
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?
  dinsdag 22 april 2014 @ 00:14:50 #39
230788 n8n
Pragmatisch
pi_139134478
quote:
2s.gif Op maandag 21 april 2014 21:50 schreef Tijn het volgende:

[..]

Dan issie wel 33% groter dan als-ie niet base64 encoded is.
dat doe je weer teniet met gzip compressie.

http://davidbcalhoun.com/(...)ges-and-when-not-to/

[ Bericht 13% gewijzigd door n8n op 22-04-2014 00:32:34 ]
“Specialization is for insects”.—Robert Heinlein
  dinsdag 22 april 2014 @ 00:15:32 #40
230788 n8n
Pragmatisch
pi_139134498
quote:
14s.gif Op maandag 21 april 2014 21:58 schreef KomtTijd... het volgende:
1,3MB voor een website vind ik nog steeds wel bizar veel.
dat wel ja, single pager met alles er op en er aan dan krijg je dat
“Specialization is for insects”.—Robert Heinlein
  dinsdag 22 april 2014 @ 00:29:15 #41
56176 Catch22-
Ben je Blind?!
pi_139134832
quote:
1s.gif Op dinsdag 22 april 2014 00:15 schreef n8n het volgende:

[..]

dat wel ja, single pager met alles er op en er aan dan krijg je dat
Dan nog. Je laadt alles in 1x in?
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?
  dinsdag 22 april 2014 @ 00:42:12 #42
230788 n8n
Pragmatisch
pi_139135074
quote:
1s.gif Op dinsdag 22 april 2014 00:29 schreef Catch22- het volgende:

[..]

Dan nog. Je laadt alles in 1x in?
nee ik heb de css over 2 files verdeeld met main en extra content zodat ze naast elkaar geladen worden. De afbeeldingen zullen na de onload geladen worden. Er zijn ~300kb en 4 requests nodig om de pagina te zien opbouwen. Blijf mobiel daarvoor meestal wel onder de 3 sec. (800ms voor requests, 1200ms zou met 1mbs genoeg moeten zijn voor 300 kb). Wellicht de eerste css nog in 2en hakken.
“Specialization is for insects”.—Robert Heinlein
  maandag 28 april 2014 @ 09:11:25 #43
25889 Sitethief
Fulltime Flapdrol
pi_139331572
Jarenlang braaf allerlei frameworks gebruikt, krijg je dit: http://vanilla-js.com/
:X
Stroek: Sitethief, die is heel groot en sterk :Y.
Faat: *zucht* zoals gewoonlijk hoor Sitethief weer in de bocht &gt;:)
  maandag 28 april 2014 @ 09:14:03 #44
230788 n8n
Pragmatisch
pi_139331621
Fuck frameworks
“Specialization is for insects”.—Robert Heinlein
  maandag 28 april 2014 @ 09:17:50 #45
91039 mstx
2x1/2 = 1/2 x 1/2
pi_139331711
quote:
0s.gif Op maandag 28 april 2014 09:11 schreef Sitethief het volgende:
Jarenlang braaf allerlei frameworks gebruikt, krijg je dit: http://vanilla-js.com/
:X
Was hier al eens besproken :6

Vanilla JS
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#thing').fadeOut();
</script>

Wel knap dat vanilla js zonder <script> tag werkt :+
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
  maandag 28 april 2014 @ 09:22:03 #46
56176 Catch22-
Ben je Blind?!
pi_139331807
Laat ze developmenttijd en user experience impact ook meenemen.

Dat eerste is veel lager en het tweede nihiel
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?
  maandag 28 april 2014 @ 09:22:14 #47
230788 n8n
Pragmatisch
pi_139331814
quote:
0s.gif Op maandag 28 april 2014 09:17 schreef mstx het volgende:

[..]

Was hier al eens besproken :6

Vanilla JS
var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#thing').fadeOut();
</script>

Wel knap dat vanilla js zonder <script> tag werkt :+
animeren met js/query lib :') but why.
“Specialization is for insects”.—Robert Heinlein
  maandag 28 april 2014 @ 09:23:11 #48
12221 Tijn
Powered by MS Paint
pi_139331842
quote:
0s.gif Op maandag 28 april 2014 09:14 schreef n8n het volgende:
Fuck frameworks
Waarom?
Verberg de nieuwsticker
  maandag 28 april 2014 @ 09:24:06 #49
230788 n8n
Pragmatisch
pi_139331857
Iemand hier al naar gekeken/is dit wat? http://component.io
“Specialization is for insects”.—Robert Heinlein
  maandag 28 april 2014 @ 09:29:11 #50
230788 n8n
Pragmatisch
pi_139331961
quote:
5s.gif Op maandag 28 april 2014 09:23 schreef Tijn het volgende:

[..]

Waarom?
wordt zonder na te denken een lib gepakt van 100kb, soms alleen om een formulier te valideren. Is het niet zo dat veel net als bij css veel van de syntax al browser compatibele is. Css frameworks zijn helemaal verschrikkelijk, laadt honderden kb's aan de lelijkste troep in die je dwingt van je html troep te maken en je website gijzelt lelijke code te blijven gebruiken. Bah
“Specialization is for insects”.—Robert Heinlein
  maandag 28 april 2014 @ 09:44:05 #51
25889 Sitethief
Fulltime Flapdrol
pi_139332258
Ik bedoel, dat de selectie van elementen op tags en ID sneller zijn in vanilla is niet zo raar. Maar dat fadeout voorbeeldje gaat dan niet zozeer meer om snelheid lijkt me... juist voor dat soort 'complexere' dingen zijn frameworks fijn imho.
Stroek: Sitethief, die is heel groot en sterk :Y.
Faat: *zucht* zoals gewoonlijk hoor Sitethief weer in de bocht &gt;:)
pi_139332282
Node _O_
pi_139332333
quote:
1s.gif Op maandag 28 april 2014 09:29 schreef n8n het volgende:

[..]

wordt zonder na te denken een lib gepakt van 100kb, soms alleen om een formulier te valideren. Is het niet zo dat veel net als bij css veel van de syntax al browser compatibele is. Css frameworks zijn helemaal verschrikkelijk, laadt honderden kb's aan de lelijkste troep in die je dwingt van je html troep te maken en je website gijzelt lelijke code te blijven gebruiken. Bah
Dus niet 'fuck frameworks' maar 'fuck de developers die zonder na te denken een framework pakken'.
  maandag 28 april 2014 @ 09:49:33 #54
230788 n8n
Pragmatisch
pi_139332351
quote:
7s.gif Op maandag 28 april 2014 09:45 schreef Scorpie het volgende:
Node _O_
dat moet k nog ff inlezen ja, gebruik het nu alleen om gulp te draaien
“Specialization is for insects”.—Robert Heinlein
  maandag 28 april 2014 @ 09:50:07 #55
230788 n8n
Pragmatisch
pi_139332362
quote:
7s.gif Op maandag 28 april 2014 09:48 schreef Scorpie het volgende:

[..]

Dus niet 'fuck frameworks' maar 'fuck de developers die zonder na te denken een framework pakken'.
touche maar alsnog. Die developers zie ik vaak niet, alleen de troep die ze achterlaten
“Specialization is for insects”.—Robert Heinlein
  maandag 28 april 2014 @ 09:57:33 #56
12221 Tijn
Powered by MS Paint
pi_139332484
quote:
0s.gif Op maandag 28 april 2014 09:44 schreef Sitethief het volgende:
Ik bedoel, dat de selectie van elementen op tags en ID sneller zijn in vanilla is niet zo raar. Maar dat fadeout voorbeeldje gaat dan niet zozeer meer om snelheid lijkt me... juist voor dat soort 'complexere' dingen zijn frameworks fijn imho.
Sowieso is performance niet het hoogste doel in software ontwikkeling. Maar bedoelen we hier nou dingen als jQuery? Dat is toch helemaal geen framework?
Verberg de nieuwsticker
pi_139332502
Als ik 2 functies nodig heb die ik zonder na te denken in jquery uit mijn mouw kan schudden pak ik gewoon jquery hoor, fuck moeilijk doen als het makkelijk kan.

Als je een bekend CDN gebruikt valt dat inladen ook wel mee.
zcflevo.nl
  maandag 28 april 2014 @ 10:01:12 #58
56176 Catch22-
Ben je Blind?!
pi_139332557
De projecten waar ik aan werk hebben over het algemeen dusdanig veel javascript nodig dat jQuery sowieso uit kan.

En daarbij zijn dat 9 van de 10 keer webapplicaties die op desktops worden gebruikt. Dus die 95kb maakt dan ook niet uit.

jQuery ui gebruik ik trouwens bijna nooit meer. Bootstrap vind ik toch fijner
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?
  maandag 28 april 2014 @ 10:01:29 #59
25889 Sitethief
Fulltime Flapdrol
pi_139332562
quote:
5s.gif Op maandag 28 april 2014 09:57 schreef Tijn het volgende:

[..]

Sowieso is performance niet het hoogste doel in software ontwikkeling. Maar bedoelen we hier nou dingen als jQuery? Dat is toch helemaal geen framework?
Volgens de Nederlandse Wikipedia wel, de Engelse vind dat het een library is _O- .
Zelf zeggen ze:
quote:
jQuery is a fast, small, and feature-rich JavaScript library.
MooTools daarentegen:
quote:
MooTools is a compact, modular, Object-Oriented JavaScript framework
Terwijl het verschil nou weer niet zo heel groot is.

Wat is eigenlijk het verschil tussen een Library en een Framework?
Stroek: Sitethief, die is heel groot en sterk :Y.
Faat: *zucht* zoals gewoonlijk hoor Sitethief weer in de bocht &gt;:)
  maandag 28 april 2014 @ 10:06:41 #60
12221 Tijn
Powered by MS Paint
pi_139332687
quote:
0s.gif Op maandag 28 april 2014 10:01 schreef Sitethief het volgende:

[..]

Wat is eigenlijk het verschil tussen een Library en een Framework?
Ik zou zeggen dat een framework de structuur van je project voorschrijft, terwijl een library niet meer is dan een set functies die je in elke projectstructuur kunt gebruiken.
Verberg de nieuwsticker
  maandag 28 april 2014 @ 10:07:33 #61
137776 boem-dikkie
Jedi Mind Baby!
pi_139332706
quote:
11s.gif Op maandag 28 april 2014 10:01 schreef Catch22- het volgende:
De projecten waar ik aan werk hebben over het algemeen dusdanig veel javascript nodig dat jQuery sowieso uit kan.

En daarbij zijn dat 9 van de 10 keer webapplicaties die op desktops worden gebruikt. Dus die 95kb maakt dan ook niet uit.

jQuery ui gebruik ik trouwens bijna nooit meer. Bootstrap vind ik toch fijner
Ik heb jQuery UI serieus nog nooit gebruikt.
Ik weet niks van Hindoes. Wel van Samoerai en andere dingen.
  maandag 28 april 2014 @ 10:08:17 #62
56176 Catch22-
Ben je Blind?!
pi_139332717
quote:
11s.gif Op maandag 28 april 2014 10:07 schreef boem-dikkie het volgende:

[..]

Ik heb jQuery UI serieus nog nooit gebruikt.
Ik vond het wel handig. Maar het was hoofdzakelijk de datepicker die ik gebruikte eigenlijk.
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?
  maandag 28 april 2014 @ 10:08:49 #63
12221 Tijn
Powered by MS Paint
pi_139332729
quote:
11s.gif Op maandag 28 april 2014 10:01 schreef Catch22- het volgende:

jQuery ui gebruik ik trouwens bijna nooit meer. Bootstrap vind ik toch fijner
Ik heb jQuery UI altijd al een verschrikkelijk project gevonden. Echt niks dan lompheid.
Verberg de nieuwsticker
  maandag 28 april 2014 @ 10:10:11 #64
230788 n8n
Pragmatisch
pi_139332765
quote:
5s.gif Op maandag 28 april 2014 09:57 schreef Tijn het volgende:

[..]

Sowieso is performance niet het hoogste doel in software ontwikkeling. Maar bedoelen we hier nou dingen als jQuery? Dat is toch helemaal geen framework?
met websites is snelheid een van de belangrijkste punten.
“Specialization is for insects”.—Robert Heinlein
  maandag 28 april 2014 @ 10:10:49 #65
56176 Catch22-
Ben je Blind?!
pi_139332780
quote:
10s.gif Op maandag 28 april 2014 10:08 schreef Tijn het volgende:

[..]

Ik heb jQuery UI altijd al een verschrikkelijk project gevonden. Echt niks dan lompheid.
Het is wel wat log. Maar er zaten genoeg functies in die ik nodig had in mijn applicaties.

In websites heb je het inderdaad zelden nodig.
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?
  maandag 28 april 2014 @ 10:12:32 #66
12221 Tijn
Powered by MS Paint
pi_139332821
quote:
1s.gif Op maandag 28 april 2014 10:10 schreef n8n het volgende:

[..]

met websites is snelheid een van de belangrijkste punten.
Je moet je altijd bewust blijven van de performance, maar om je nou in allerlei bochten te wringen om het includen van 30K aan code te vermijden gaat mij wat te ver.
Verberg de nieuwsticker
  maandag 28 april 2014 @ 10:20:09 #67
230788 n8n
Pragmatisch
pi_139332990
quote:
2s.gif Op maandag 28 april 2014 10:12 schreef Tijn het volgende:

[..]

Je moet je altijd bewust blijven van de performance, maar om je nou in allerlei bochten te wringen om het includen van 30K aan code te vermijden gaat mij wat te ver.
dat is waar maar daarom leek mij die component.io wel interessant omdat het eigenlijk alleen maar functies zijn die je (met node?) samenvoegt waardoor je wel alleen gebruikt wat je nodig hebt. Als zulke componenten getest zijn en je roept alleen aan wat nodig is ben je in principe net zo snel klaar of zie ik het nu verkeerd?
“Specialization is for insects”.—Robert Heinlein
  maandag 28 april 2014 @ 10:23:02 #68
12221 Tijn
Powered by MS Paint
pi_139333060
Maar dat is conceptueel niet heel anders dan een paar jQuery plugins gebruiken, toch?
Verberg de nieuwsticker
  maandag 28 april 2014 @ 10:27:27 #69
230788 n8n
Pragmatisch
pi_139333144
quote:
5s.gif Op maandag 28 april 2014 10:23 schreef Tijn het volgende:
Maar dat is conceptueel niet heel anders dan een paar jQuery plugins gebruiken, toch?
Conceptueel niet, qua performance wellicht wel omdat de functies kleiner (en sneller) zijn
“Specialization is for insects”.—Robert Heinlein
  maandag 28 april 2014 @ 10:29:46 #70
12221 Tijn
Powered by MS Paint
pi_139333207
quote:
7s.gif Op maandag 28 april 2014 10:27 schreef n8n het volgende:

[..]

Conceptueel niet, qua performance wellicht wel omdat de functies kleiner (en sneller) zijn
Dat ligt maar net aan welke plugins je gebruikt.
Verberg de nieuwsticker
  maandag 28 april 2014 @ 10:34:01 #71
230788 n8n
Pragmatisch
pi_139333317
quote:
2s.gif Op maandag 28 april 2014 10:29 schreef Tijn het volgende:

[..]

Dat ligt maar net aan welke plugins je gebruikt.
Ok dat is waar, is niet allemaal (library-)dependency free wat ik dacht.
“Specialization is for insects”.—Robert Heinlein
pi_139491293
ik ben wat aan het testen en heb de volgende CSS:
1
2
3
4
5
6
7
8		div{
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    background-color: #F50004;
    border:2px solid;
    border-radius:7px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="index.css" />
</head>

<body>
  <div>
    <form action="">
      <select>
          <option> </option>
          <option>optie 1</option>
      </select>
    </form>
  </div>
</body>
</html>

op Chrome werkt dit goed.
op IE10 krijg ik geen ronde hoeken, terwijl IE10 wel border-radius ondersteund (als ik de voorbeeld pagina van w3schools erbij pak werkt het wel goed)
doe ik wat verkeerd, zie ik b.v. iets over het hoofd? of moet dit gewoon werken?
  vrijdag 2 mei 2014 @ 16:26:26 #73
50623 Matty___
Konichiwa Bitches
pi_139492128
quote:
0s.gif Op vrijdag 2 mei 2014 16:02 schreef mschol het volgende:
ik ben wat aan het testen en heb de volgende CSS:
[ code verwijderd ]

[ code verwijderd ]

op Chrome werkt dit goed.
op IE10 krijg ik geen ronde hoeken, terwijl IE10 wel border-radius ondersteund (als ik de voorbeeld pagina van w3schools erbij pak werkt het wel goed)
doe ik wat verkeerd, zie ik b.v. iets over het hoofd? of moet dit gewoon werken?
Als een keer naar http://www.cssmatic.com/border-radius gekeken.
Deze muziek smaakt naar bier :)
Es bedarf keiner Psychoanalyse, um festzustellen, dass das Leben ein einziger Friedhof gescheiterter Pläne ist!
pi_139492831
quote:
0s.gif Op vrijdag 2 mei 2014 16:26 schreef Matty___ het volgende:

[..]

Als een keer naar http://www.cssmatic.com/border-radius gekeken.
dat werkt ook goed..

ik zie nu, in de IE developer toolbar, dat hij om de een of andere reden bij deze lokale site op quirks document mode stond..
dan gaat het niet werken nee :') :X
problem solved
pi_139566967
Ik zit even vast, waarschijnlijk te lang erna gekeken,
Ik probeer een callback functie aan te roepen nav een parameter.
Maar deze geeft een foutmelding die ik niet snap:

SyntaxError: missing] after element list
handleFooReturn([object Object])

Of

SyntaxError: missing] after element list
handleBarReturn([object Object])

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		$(".foo").click(function(){
             var params = {
                authField: $(this)            
                callBack: 'handleFooReturn'
            };
            var data = executeAjax(params);    
   });

$(".bar").click(function(){
             var params = {
                authField: $(this)            
                callBack: 'handleBarReturn'
            };
            var data = executeAjax(params) ;   
   });

function executeAjax(params){
    $.ajax({
        type: "POST",  
        url: baseUrl,
        data: $.param(params),
        dataType: "json",
        success:function(data){  
            if(params.callBack){
                var callBack = ""+params.callBack+"("+data+","+params+")";
                eval(callBack);
            }
        }
    });
}

function handleFooReturn(data, params){
    console.log('Foo');
    console.log(data);
    console.log(params);
}
function handleBarReturn(data, params){
    console.log('Bar');
    console.log(data);
    console.log(params);
}
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[HTML, CSS, JS] Frontend #40: De Node is hoog
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')