klopt dan is de op alleen wegquote: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
Neehoor. Ik zit ook mobielquote:
Voor deze keer.quote:
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 ); }); |
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.quote: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
Nog steeds niets. Ik kan wel een linkje doen?quote: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{});
doe maarquote:Op woensdag 16 april 2014 22:54 schreef Xaryna het volgende:
[..]
Nog steeds niets. Ik kan wel een linkje doen?
-quote:
Sowieso het best om je js onderaan je body te definieren idd.quote:
Leuk artikel, dank jequote:Op woensdag 16 april 2014 23:50 schreef n8n het volgende:
http://bradfrostweb.com/blog/post/carousels/
Dit al gelezen? #sliders
1 2 3 | $('input').live("change", function () { window.onbeforeunload = function () { return "De wijzigingen zijn nog niet opgeslagen, weet u zeker dat u verder gaat?" }; }); |
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 zijnquote:
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.quote: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
Dan issie wel 33% groter dan als-ie niet base64 encoded is.quote:Op maandag 21 april 2014 20:40 schreef n8n het volgende:
[..]
iconfonts kan je als base64 in de main css zetten
dat doe je weer teniet met gzip compressie.quote:Op maandag 21 april 2014 21:50 schreef Tijn het volgende:
[..]
Dan issie wel 33% groter dan als-ie niet base64 encoded is.
dat wel ja, single pager met alles er op en er aan dan krijg je datquote:Op maandag 21 april 2014 21:58 schreef KomtTijd... het volgende:
1,3MB voor een website vind ik nog steeds wel bizar veel.
Dan nog. Je laadt alles in 1x in?quote: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
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.quote:
Was hier al eens besprokenquote:Op maandag 28 april 2014 09:11 schreef Sitethief het volgende:
Jarenlang braaf allerlei frameworks gebruikt, krijg je dit: http://vanilla-js.com/
animeren met js/query libquote:Op maandag 28 april 2014 09:17 schreef mstx het volgende:
[..]
Was hier al eens besproken![]()
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
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. Bahquote:
Dus niet 'fuck frameworks' maar 'fuck de developers die zonder na te denken een framework pakken'.quote: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
dat moet k nog ff inlezen ja, gebruik het nu alleen om gulp te draaienquote:
touche maar alsnog. Die developers zie ik vaak niet, alleen de troep die ze achterlatenquote: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'.
Sowieso is performance niet het hoogste doel in software ontwikkeling. Maar bedoelen we hier nou dingen als jQuery? Dat is toch helemaal geen framework?quote: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.
Volgens de Nederlandse Wikipedia wel, de Engelse vind dat het een library isquote: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?
MooTools daarentegen:quote:jQuery is a fast, small, and feature-rich JavaScript library.
Terwijl het verschil nou weer niet zo heel groot is.quote:MooTools is a compact, modular, Object-Oriented JavaScript 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.quote:Op maandag 28 april 2014 10:01 schreef Sitethief het volgende:
[..]
Wat is eigenlijk het verschil tussen een Library en een Framework?
Ik heb jQuery UI serieus nog nooit gebruikt.quote: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 vond het wel handig. Maar het was hoofdzakelijk de datepicker die ik gebruikte eigenlijk.quote:Op maandag 28 april 2014 10:07 schreef boem-dikkie het volgende:
[..]
Ik heb jQuery UI serieus nog nooit gebruikt.
Ik heb jQuery UI altijd al een verschrikkelijk project gevonden. Echt niks dan lompheid.quote:Op maandag 28 april 2014 10:01 schreef Catch22- het volgende:
jQuery ui gebruik ik trouwens bijna nooit meer. Bootstrap vind ik toch fijner
met websites is snelheid een van de belangrijkste punten.quote: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?
Het is wel wat log. Maar er zaten genoeg functies in die ik nodig had in mijn applicaties.quote: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.
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.quote:Op maandag 28 april 2014 10:10 schreef n8n het volgende:
[..]
met websites is snelheid een van de belangrijkste punten.
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?quote: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.
Conceptueel niet, qua performance wellicht wel omdat de functies kleiner (en sneller) zijnquote: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?
Dat ligt maar net aan welke plugins je gebruikt.quote:Op maandag 28 april 2014 10:27 schreef n8n het volgende:
[..]
Conceptueel niet, qua performance wellicht wel omdat de functies kleiner (en sneller) zijn
Ok dat is waar, is niet allemaal (library-)dependency free wat ik dacht.quote:Op maandag 28 april 2014 10:29 schreef Tijn het volgende:
[..]
Dat ligt maar net aan welke plugins je gebruikt.
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> |
Als een keer naar http://www.cssmatic.com/border-radius gekeken.quote: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?
dat werkt ook goed..quote:Op vrijdag 2 mei 2014 16:26 schreef Matty___ het volgende:
[..]
Als een keer naar http://www.cssmatic.com/border-radius gekeken.
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); } |
Probeer een komma tussen verschillende elementen van je object:quote:Op zondag 4 mei 2014 22:02 schreef Darkomen het volgende:
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])
[ code verwijderd ]
1 2 3 4 | var params = { authField: $(this), callBack: 'handleBarReturn' }; |
1 2 3 | if(typeof(params.callBack) === "function") { params.callBack(data, params); } |
Ow mn komma's ware weggevallen tijdens het uitkleden van de functie, die vergeet ik gelukkig niet.quote:Op maandag 5 mei 2014 09:29 schreef picodealion het volgende:
[..]
Probeer een komma tussen verschillende elementen van je object:
[ code verwijderd ]
Overigens is die eval echt vies. Volgens mij kan je ook gewoon dit doen in je success function:
[ code verwijderd ]
1 2 3 4 5 6 | var params = { authField: $authType, authValue: authValue, authId: $authId, callBack: 'changeAuthCallback' }; |
Je kunt ook .call() of .apply() gebruiken.quote:Op maandag 5 mei 2014 11:53 schreef Darkomen het volgende:
[..]
Ik vind Eval ook vies maar wist geen andere manier
Nee. Weet de basis van php en nu dan ook js. Arrays, loops, objecten en wat principes rondom DRY/modulair te werk gaan. In principe zal ik nu wel aardig ver komen door te doen en uit te zoeken. Mijn beef met programmeren is alleen dat de voorbeelden vaak van bedroevende kwaliteit zijn. Als ik kijk naar css/html voorbeelden (zelfs van gerenommeerde websites) is het meestal om te janken.quote:Op maandag 5 mei 2014 09:00 schreef Tijn het volgende:
Maar kun je al programmeren? Heb je de basisprincipes door en beheers je een andere taal? Want als dat niet zo is, zou ik eerst dat leren voordat je in Javascript duikt. Er zijn tegenwoordig allerlei MOOCs waarin je bv in C of Python prima de essentie leer te begrijpen.
ja jQuery is prima natuurlijk maar niet als je net komt kijken bij JS al zie ik meestal beginners gewoon de library inladen en vervolgens 5 scripts er bovenop gooien, dat wil ik zelf dus niet. Daardoor gaan dus ook 99% van stackoverflow vragen en artikelen over jQuery en dat is nogal irritant.quote:Op maandag 5 mei 2014 15:09 schreef Tijn het volgende:
Er is niks mis met jQuery imho, maar als beginner zou ik eerst zorgen dat je Javascript zelf echt begrijpt voordat je met allerlei libraries en frameworks aan de slag gaat.
Er is idd een hoop troep te vinden op internet. Ik zou zelf ook zo 123 geen website weten waar het wel goed wordt uitgelegd.
quote:
quote:
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 42 43 44 45 46 47 48 49 50 51 52 | $(document).ready(function(){ $(".foo").click(function(){ var params = { authField: $(this), callBack: handleFooReturn }; executeAjax(params); }); $(".bar").click(function(){ var params = { authField: $(this), callBack: handleBarReturn }; executeAjax(params) ; }); }); function executeAjax(params){ var data = { success: 'yay', error: 'ahw' }; var returnData = { data: data, params: params }; if(params.callBack){ params.callBack.apply( returnData ); } } function handleFooReturn(data, params){ console.log('Foo'); console.log( this ); console.log(this.data); console.log(this.params); console.log(this.data.success); console.log(this.data.error); this.params.authField.css('border', '2px solid red'); } function handleBarReturn(data, params){ console.log('Bar'); console.log( this ); console.log(this.data); console.log(this.params); console.log(this.data.success); console.log(this.data.error); this.params.authField.css('border', '2px solid red'); } |
Inderdaad, erg vervelend. Ik probeer ook standaard vragen te beantwoorden in vanilla JS, en comment vaak ook wel bij de jQuery antwoorden dat ze die alleen moeten gebruiken als jQuery sowieso al werd ingeladen. Onbegonnen werk natuurlijk, maar als ik er ook maar 1 of 2 kan laten inzien dat je lang niet altijd jQuery nodig hebt ben ik al tevreden..quote:Op maandag 5 mei 2014 15:13 schreef n8n het volgende:
[..]
ja jQuery is prima natuurlijk maar niet als je net komt kijken bij JS al zie ik meestal beginners gewoon de library inladen en vervolgens 5 scripts er bovenop gooien, dat wil ik zelf dus niet. Daardoor gaan dus ook 99% van stackoverflow vragen en artikelen over jQuery en dat is nogal irritant.
ja dankjewel. Sowieso altijd goed om het kaf op te zoeken. Ben somehow enthousiaster over js dan php terwijl ik er altijd (mede door jQueryquote:Op maandag 5 mei 2014 15:25 schreef Tijn het volgende:
Je kunt in elk geval die video's van Douglas Crockford kijken en misschien z'n boek lezen, da's sowieso goed materiaal.
Javascript is echt een ontzettend toffe taal.quote:Op maandag 5 mei 2014 15:40 schreef n8n het volgende:
[..]
ja dankjewel. Sowieso altijd goed om het kaf op te zoeken. Ben somehow enthousiaster over js dan php terwijl ik er altijd (mede door jQuery) wat afstandelijk naar was on te leren
heb bijna m'n codeacedemy diploma vind het erg tof, is ook de eerste course die ik af ga maken. Voor php zit ik toch te denken me juist wel op een frameworks (laravel) te storten maar dat terzijde.quote:Op maandag 5 mei 2014 15:41 schreef Tijn het volgende:
[..]
Javascript is echt een ontzettend toffe taal.
Diploma?quote:Op maandag 5 mei 2014 15:45 schreef n8n het volgende:
[..]
heb bijna m'n codeacedemy diploma vind het erg tof, is ook de eerste course die ik af ga maken. Voor php zit ik toch te denken me juist wel op een frameworks (laravel) te storten maar dat terzijde.
Aankomende tien jaar programmeer ik er nog wel in.quote:Op maandag 5 mei 2014 15:41 schreef Tijn het volgende:
[..]
Javascript is echt een ontzettend toffe taal.
'diploma'. Introductiecursus die me bekend maakt met de syntax, modellen en gebruik. Elk hoofdstuk heeft ook een bruikbare oefening op het eind waardoor de toepassing duidelijker is.quote:
Mja, er is ook weinig andere keusquote:Op maandag 5 mei 2014 15:48 schreef Scorpie het volgende:
[..]
Aankomende tien jaar programmeer ik er nog wel in.
Klopt, het is alleen soms wel wennen als je het rechtlijnige PHP gewend bentquote:Op maandag 5 mei 2014 15:41 schreef Tijn het volgende:
[..]
Javascript is echt een ontzettend toffe taal.
Ah oke.quote:Op maandag 5 mei 2014 15:52 schreef n8n het volgende:
[..]
'diploma'. Introductiecursus die me bekend maakt met de syntax, modellen en gebruik. Elk hoofdstuk heeft ook een bruikbare oefening op het eind waardoor de toepassing duidelijker is.
Ja true. Als ik kijk hoe gemakkelijk ik nu een volledige applicatie bouw in node met express en handlebars als templating machine en hoe geweldig dat schaalt terwijl de codebase echt klein blijft, dan is dat echt wonderbaarlijk.quote:
De header wordt ergens gewijzigd, dit moet echter als allerallerallereerste in je code staan, zelfs geen witregel. Dat is de fout waarnaar je moet zoeken.quote:Op donderdag 8 mei 2014 19:35 schreef Tshot het volgende:
Zijn hier toevallig geen mensen die mij kunnen helpen met dit issue: DIG / [Wordpress] Algemeen topic deel 8
?
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |