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

maandag 12 mei 2014 @ 15:20:31 #126

BrainOverfloW

Fok! around the Clock!

quote:
Op maandag 12 mei 2014 13:58 schreef n8n het volgende:

[..]

De breakpoints werken wel, dacht alleen dat wanneer je media in de link als attribuut zet de bestanden alleen zouden worden gedownload wanneer er aan de eisen voldaan werd maar blijkbaar pakt ie alsnog alle gelinkte bestanden.

Misschien kun je hier iets mee. Conditional loading of resources with mediaqueries

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

maandag 12 mei 2014 @ 16:19:03 #127

n8n

Pragmatisch

quote:
Op maandag 12 mei 2014 15:20 schreef BrainOverfloW het volgende:

[..]

Misschien kun je hier iets mee. Conditional loading of resources with mediaqueries

Ben geen voorstander van het conditioneel inladen van CSS met JavaScript. Dan liever die paar honderd extra regels code in de main stylesheet die ik vrijwel altijd in toch onder de 12Kb minified gzipped hou. Een referentie naar een artikel kon me wel bekoren dus in ieder geval bedankt. Is echt een luxeprobleem om uiteindelijk 1Kb ofzo te besparen

“Specialization is for insects”.—Robert Heinlein

dinsdag 13 mei 2014 @ 07:40:06 #128

BrainOverfloW

Fok! around the Clock!

quote:
Op maandag 12 mei 2014 16:19 schreef n8n het volgende:

[..]

Ben geen voorstander van het conditioneel inladen van CSS met JavaScript. Dan liever die paar honderd extra regels code in de main stylesheet die ik vrijwel altijd in toch onder de 12Kb minified gzipped hou. Een referentie naar een artikel kon me wel bekoren dus in ieder geval bedankt. Is echt een luxeprobleem om uiteindelijk 1Kb ofzo te besparen

Het leek mij ook wat overbodig gezien de bestandsgrootte waar je het over had maar ik wou toch even laten zien dat er wel mogelijkheden beschikbaar zijn als je het zou willen.

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

dinsdag 13 mei 2014 @ 18:15:11 #129

n8n

Pragmatisch

quote:
Op dinsdag 13 mei 2014 07:40 schreef BrainOverfloW het volgende:

[..]

Het leek mij ook wat overbodig gezien de bestandsgrootte waar je het over had maar ik wou toch even laten zien dat er wel mogelijkheden beschikbaar zijn als je het zou willen.

Ja inderdaad, was met name omdat het tegenwoordig zo makkelijk is aparte versies te compilen maar het is inderdaad vrij overbodig.

“Specialization is for insects”.—Robert Heinlein

woensdag 14 mei 2014 @ 16:46:40 #130

Sitethief

Fulltime Flapdrol

1
2
3
4
5
6
7
8
9

    saveFormEvent: function(closeAfterSave,customSave,mailDialog,closedDialog){
        var customSave      = typeof customSave     !== 'undefined' ? customSave        : false;
        var mailDialog      = typeof mailDialog     !== 'undefined' ? mailDialog        : true;
        var closeAfterSave  = typeof closeAfterSave !== 'undefined' ? closeAfterSave    : true;
        var closedDialog    = typeof closedDialog   !== 'undefined' ? closedDialog      : true;
        var elements        = this.gatherElementsForSave();
        var properties      = this.gatherPropertiesForSave();
        return this.saveForm(elements,properties,closeAfterSave,customSave,mailDialog,closedDialog);
    },

Is er een betere manier om default values voor variabelen te zetten?

Stroek: Sitethief, die is heel groot en sterk :Y.
Faat: *zucht* zoals gewoonlijk hoor Sitethief weer in de bocht >:)

woensdag 14 mei 2014 @ 16:50:17 #131

Catch22-

Ben je Blind?!

ja. extenden

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php
saveFormevent({
customSave: "jaja",
closedDialog: "jaja"
})
saveFormevent = function(options) {
var defaults = {
customSave: "jaja",
closedDialog: "jaja",
trekken: "lekker"
}
$.extend(defaults,options);
}
?>

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 20 mei 2014 @ 10:27:01 #132

n8n

Pragmatisch

JS

1
2
3
4
5

document.getElementsByClassName('toggle').onclick = function toggle() {

console.log('click');

};

Moet toch de string 'click' loggen waneer ik op een element met de className toggle klik of zie ik scheel?

“Specialization is for insects”.—Robert Heinlein

dinsdag 20 mei 2014 @ 10:31:45 #133

mstx

2x1/2 = 1/2 x 1/2

quote:
Op dinsdag 20 mei 2014 10:27 schreef n8n het volgende:
JS
[ code verwijderd ]

Moet toch de string 'click' loggen waneer ik op een element met de className toggle klik of zie ik scheel?

probeer dit eens:

1
2
3
4
5

document.getElementsByClassName('toggle').onclick = function() {

console.log('click');

};

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.
👾

dinsdag 20 mei 2014 @ 10:37:01 #134

n8n

Pragmatisch

quote:
Op dinsdag 20 mei 2014 10:31 schreef mstx het volgende:

[..]

probeer dit eens:
[ code verwijderd ]

Neen, helaas. Zou toch ook niet uit moeten maken? Dacht dat het best practice was om je fucntions te beschermen met een naam, vandaar dat ie er zat.

“Specialization is for insects”.—Robert Heinlein

dinsdag 20 mei 2014 @ 10:52:46 #135

mstx

2x1/2 = 1/2 x 1/2

quote:
Op dinsdag 20 mei 2014 10:37 schreef n8n het volgende:

[..]

Neen, helaas. Zou toch ook niet uit moeten maken? Dacht dat het best practice was om je fucntions te beschermen met een naam, vandaar dat ie er zat.

http://jsfiddle.net/LGEku/
zo dan

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.
👾

dinsdag 20 mei 2014 @ 11:00:25 #136

Scorpie

Abject en infaam!

getElementsByClassName retourneert een array.

Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.

dinsdag 20 mei 2014 @ 11:00:41 #137

Scorpie

Abject en infaam!

quote:
Op dinsdag 20 mei 2014 10:52 schreef mstx het volgende:

[..]

http://jsfiddle.net/LGEku/
zo dan

Ja, zoiets.

Op dinsdag 13 augustus schreef Xa1pt:
Neuh, fraude mag best aangepakt worden. Maar dat het de maatschappij meer oplevert of beter is voor de samenleving, is nog maar de vraag.
Op donderdag 25 juni 2015 schreef KoosVogels:
Klopt. Ik ben een racist.

dinsdag 20 mei 2014 @ 11:00:53 #138

n8n

Pragmatisch

quote:
Op dinsdag 20 mei 2014 10:52 schreef mstx het volgende:

[..]

http://jsfiddle.net/LGEku/
zo dan

Hey het werkt

quote:
( var i=0, total = togglebuttons.length; i < total; i++ )

is trouwens iets sneller omdat anders per ronde opnieuw de index berekend moet worden.

Bedankt!

“Specialization is for insects”.—Robert Heinlein

dinsdag 20 mei 2014 @ 11:02:12 #139

n8n

Pragmatisch

quote:
Op dinsdag 20 mei 2014 11:00 schreef Scorpie het volgende:
getElementsByClassName retourneert een array.

Kreeg net een undefined is not a function error, ga nu verder met de werkende selectors van mtsx

“Specialization is for insects”.—Robert Heinlein

dinsdag 20 mei 2014 @ 13:29:54 #140

-Datdus-

hoi

Ik heb een vraagje.

1
2
3
4
5

$('#search').keyup(function(e){
     if(e.which === '40'){
           $('.item').addClass('.active');
     }
});

Weet iemand waarom de active class er meteen weer wordt afgehaald als ik de knop loslaat? En is er een methode waarmee je de aanpassingen permanent kan maken?

Lekker happen

dinsdag 20 mei 2014 @ 13:31:22 #141

mstx

2x1/2 = 1/2 x 1/2

quote:
Op dinsdag 20 mei 2014 13:29 schreef -Datdus- het volgende:
Ik heb een vraagje.
[ code verwijderd ]

Weet iemand waarom de active class er meteen weer wordt afgehaald als ik de knop loslaat? En is er een methode waarmee je de aanpassingen permanent kan maken?

Dan zit er ergens anders in je script een actie die die class weghaalt want in dit stukje code gebeurt dat niet.

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.
👾

dinsdag 20 mei 2014 @ 13:35:54 #142

-Datdus-

hoi

quote:
Op dinsdag 20 mei 2014 13:31 schreef mstx het volgende:

[..]

Dan zit er ergens anders in je script een actie die die class weghaalt want in dit stukje code gebeurt dat niet.

Oh, ja! je hebt gelijk! Dankjewel voor de helderheid.

EDIT: en het werkt.

Lekker happen

dinsdag 20 mei 2014 @ 23:29:12 #143

n8n

Pragmatisch

Zo! En nu eerst een Bavaria. M'n eerste praktische JavaScript.

Heb vanaf vanmorgen met die toggle zitten klooien omdat ik wat foefjes nodig had.

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

// returns an object containing elements with an id, class or tag name
function get(query) {

    var attribute = query.substring(1, 0), // isolate attribute identifier
        content = query.substring(1); // remove attribute identifier

    // create and return object from matching elements
    if (attribute === '.') {
        return document.getElementsByClassName(content);
        // todo: add <IE9 polyfill
    } else if (attribute === '#') {
        return document.getElementById(content);
    } else {
        return document.getElementsByTagName(query);
    }
}

// adjust (parents’) class on dropdown menu’s to toggle visibility
function toggleMenu(name) {

    var    elements = get(name),
        navigation = get('.primary'),
        amount = elements.length;

    function toggleEvent(current) { "use strict";

        return function() {

            //    see if clicked .toggle was .open at point of clicking
            var    open = (elements[current].classList.contains('open')) ? true : false;

            //    reset all .toggle elements accros page
            for (i = 0; i < amount; i++) {

                elements[i].classList.remove('open');
            }

            //    see if .toggle was .open, adds class otherwise
            if (!open) {
                elements[current].classList.add('open');
            }
        };
    }

    for (i = 0; i < amount; i++) {
        elements[i].addEventListener("click", toggleEvent(i));
    }

} // initialise
toggleMenu('.toggle');

Ik heb een .toggle en een .menu. Wanneer de .toggle geklikt wordt krijgt deze een .open. Wil natuurlijk wel dat de andere menu's gesloten zijn als er een menu geopend wordt.

De functie kijkt nu eerst naar de huidige staat van de .toggle wanneer er op geklikt wordt. Dan reset de loop alle .toggle's zodat alle menu's dicht gaan. Als laatst wordt op basis van de voorgaande staat bepaald of het menu bij klikken open of dicht moet.

Ben best trots op mezelf, helemaal geLint. Feedback is welkom.

* De eerste functie is een soort framework ding om makkelijk elementen te selecteren.

[ Bericht 0% gewijzigd door n8n op 20-05-2014 23:39:22 ]

“Specialization is for insects”.—Robert Heinlein

woensdag 21 mei 2014 @ 00:36:51 #144

Catch22-

Ben je Blind?!

Leuk. Maar waarom gebruik geen jquery of tenminste sizzle? Omdat t kan?

Denk dat ik gauw 20-40% minder werk zou verzetten zonder jQuery

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 21 mei 2014 @ 07:58:03 #145

n8n

Pragmatisch

quote:
Op woensdag 21 mei 2014 00:36 schreef Catch22- het volgende:
Leuk. Maar waarom gebruik geen jquery of tenminste sizzle? Omdat t kan?

Denk dat ik gauw 20-40% minder werk zou verzetten zonder jQuery

Komt een hele waslijst naar boven, korte versie is omdat ik JavaScript wil leren, ook omdat ik node.js en Google Closure een keer wil gaan gebruiken. Lange versie is omdat ik een haat/haat verhouding heb met jQuery. Vind de syntax niet mooi, het is traag, het geeft geen voldoening als iets lukt (heel belangrijk in deze fase) en ik wil slimmer leren denken als ‘programmeur’ om zo ook makkelijker andere talen op te pakken.

Vind JS ook gewoon heel leuk sinds ik de rauwe taal een beetje ben leren kennen.

* Dit is geen All jQuery Must Die-post, zal het ook gaan gebruiken omdat het in de long run inderdaad vaak veel tijd en moeite kost die beter anders besteed kan worden.

Speaking of Closure, zijn er hier mensen die dat gebruiken, ervaringen? Wat ik heb begrepen is dat het een library en template framework is met een compiler die (aan de hand van conditionals) alleen parsed wat gebruikt zal worden van de library. Volgens de I/O-talk scheelt het gigantisch veel overhead.

[ Bericht 15% gewijzigd door n8n op 21-05-2014 08:03:21 ]

“Specialization is for insects”.—Robert Heinlein

woensdag 21 mei 2014 @ 08:06:23 #146

n8n

Pragmatisch

Nu even m'n get() uitbreiden zodat je ook get('e.class') kan doen

“Specialization is for insects”.—Robert Heinlein

woensdag 21 mei 2014 @ 08:08:14 #147

mstx

2x1/2 = 1/2 x 1/2

quote:
Op woensdag 21 mei 2014 08:06 schreef n8n het volgende:
Nu even m'n get() uitbreiden zodat je ook get('e.class') kan doen

tip: https://developer.mozilla(...)cument.querySelector

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.
👾

woensdag 21 mei 2014 @ 08:17:39 #148

n8n

Pragmatisch

quote:
Op woensdag 21 mei 2014 08:08 schreef mstx het volgende:

[..]

tip: https://developer.mozilla(...)cument.querySelector

Ah nice, moet de Web API nog leren kennen, straks weer een vaste bezoeker van caniuse

“Specialization is for insects”.—Robert Heinlein

woensdag 21 mei 2014 @ 09:16:12 #149

Tijn

Powered by MS Paint

quote:
Op woensdag 21 mei 2014 07:58 schreef n8n het volgende:

[..]

Lange versie is omdat ik een haat/haat verhouding heb met jQuery. Vind de syntax niet mooi, het is traag

Ik vind het slim om eerst Javascript zelf te leren voordat je met frameworks en libraries aan de gang gaat, maar wat je hier zegt over jQuery is echt niet waar. De syntax is gewoon standaard Javascript, jQuery dwingt verder geen structuur af, dus je kunt je programma's schrijven zoals je wil. Verder is jQuery helemaal niet traag, waarom denk je dat? De manier waarop het soms gebruikt wordt in de praktijk is misschien traag, maar jQuery zelf zit hartstikke goed in elkaar.

Verberg de nieuwsticker

woensdag 21 mei 2014 @ 09:19:40 #150

Catch22-

Ben je Blind?!

Dat heb je zelf in de hand. En een DOM-selector zoals jij die schrijft kan je nooit sneller & completer maken dan jQuery (Sizzle, 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?

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

» digital corner

» development

» digital corner

» development