Responsive design trigger met jQuery

[Martine]

Momenteel ben ik even aan het knutselen met een responsive design, daarbij liep ik tegen het probleem aan als ik met jQuery verschillende afbeeldingen wil laden op het moment als de breedte van de website wordt gewijzigd.

Het werkt prima! Kan het beter? Vergeet ik iets?

JavaScript:

    $(document).ready(function(){
        // eerste keer functie aanroepen
        triggerBreakPoint();
        
        // functie aanroepen wanneer de breedte wordt gewijzigd
        // moet deze hier trouwens staan? of is het beter om deze buiten de domready te plaatsen?
        $(window).resize(function(){
            triggerBreakPoint();
        });
    });
    
    
    var bpCheckNum=0;
    function triggerBreakPoint() {
        var c = $('#breakpoint').css('color')
        var num = c.charAt(4);
        
        // content alleen laden/wijzigen wanneer de breakpoint echt gewijzigd wordt, anders 
        // wordt het 101 keer aangeroepen wanneer het venster in breedte gewijzigd wordt.
        if (num != bpCheckNum) {
            bpCheckNum = num;
            
            // content inladen/wijzigen
        }
    }

Alleen zit ik nog een beetje te klooien met de verschillende breedtes. Volgens mij hoeven er maar drie of vier in te staan. denk ik, dacht ik.

Cascading Stylesheet:

    #breakpoint {
        display: none;
        color: #010101;
    }
    .site-width {
        max-width: 1200px;
    }
    
    
    @media screen and (max-width:1200px) {
        #breakpoint {
            color: #020202;
        }
        .site-width {
            max-width: 1000px;
        }
    }
    
    @media screen and (max-width:1000px) {
        #breakpoint {
            color: #030303;
        }
        .site-width {
            max-width: 800px;
        }
    }
    
    @media screen and (max-width:800px) {
        #breakpoint {
            color: #040404;
        }
        .site-width {
            width: 100%;
        }
    }

nou doei he. tot morgen

[JJ93]

Ik ben persoonlijk niet zo'n fan van Javascript om een site responsive te maken.
In de media query kan je ook afbeeldingen aanpassen

Cascading Stylesheet:

@media screen and (max-width: 310px) {
  .yourClass {
    content:url("images/310x205/image1.jpg");
  }
}

@media screen and (min-width: 620px) {
  .yourClass {
    content:url("images/620x410/image1.jpg");
  }
}

[ Voor 7% gewijzigd door JJ93 op 13-12-2014 04:33 ]

[Sthomkop]

Wat JJ93 zegt: +1.

Daarbij nog een kleine JavaScript tip: de volgende code

code:

        $(window).resize(function(){
            triggerBreakPoint();
        });

kun je beter schrijven als

code:

        $(window).resize(triggerBreakPoint);

De reden dat dit kan is dat functies in JavaScript 'first-member citizens' zijn, oftewel: je kunt ze in variabelen duwen en zo gebruiken. De reden dat ik dit aanraad is dat het een functie aanroep scheelt en gewoon beter leesbare code oplevert. Verder zou ik dat inderdaad in de DOM ready zetten, dus dat is prima.

Je check op 'is de breakpoint veranderd' is lelijk, maar werkt wel, haha. Merk wel op dat dit (mogelijk) stukgaat als je voor andere kleuren kiest.

Al met al is de CSS-only oplossing op alle vlakken beter

[ Voor 7% gewijzigd door Sthomkop op 13-12-2014 09:40 . Reden: Kleine tweaks en aanvullingen. ]

[Martine]

JJ93. Eigenlijk wou ik een sidebar laden, hierin zitten afbeeldingen en tekst, een soort menu zeg maar. Dit geheel laten laden met jQuery dmv ajax. Indien het scherm te klein is (mobiel of tablet) wordt de sidebar helemaal niet geladen. Geen afbeeldingen = geen verkeer = snel.

Wanneer het scherm te klein is, dus niet resize van window. Bezoeker komt gewoon met een tablet dan wordt de sitebar standaard in de html geladen, alleen meteen dmv een css breakpoint op display:none; verborgen gehouden. Dan worden de afbeeldingen wel geladen wat compleet overbodig is omdat ze toch niet zichtbaar zijn.
OF
Worden de afbeeldingen dan ook niet geladen? Daar heb ik om gezocht maar kon niet echt een duidelijk antwoord vinden. (Het is eigenlijk een aanname van mij, en een aanname zonder achtergrondinformatie is in principe altijd dodelijk. )
//edit; dit is natuurlijk te testen met Firebug. Indien de sidebar afbeeldingen bevat, die gewoon in de html staan <img src=''>, maar met de css wordt de sidebar verborgen gehouden. Dan wordt de afbeelding wel gedownload. Zie bv hier. http://www.quirksmode.org/css/displayimg.html

En dat zou ik graag willen voorkomen. Maar hoe?


//edit2;
http://www.stomptheweb.co...images-on-mobile-devices/
Getest, in Chrome is dit de oplossing. In Firefox wordt een <div style=bg-img[url]></div> wanneer display:none nooit geladen. Dus beide keren ok.
Alleen het is toch te gek als ik iedere afbeelding in een div én inline als background-image moet weergeven? De zoektoch gaat verder.

Wat ik mij zojuist wel bedenk is dat wanneer de sidebar content geladen wordt dmv ajax. De pagina eerst geladen moet worden door de browser, die ziet als er een ajax request gedaan moet worden. Wordt uitgevoerd en zo moet er nog een pagina geserveerd worden. In theorie neemt deze methode meer tijd.

//edit3;
Dit is echt feest, er zijn al hele artikelen over geschreven. http://timkadlec.com/2012...sset-downloading-results/


Sthomkop. Helder verhaal, inmiddels gewijzigd hoe de functie aangeroepen wordt in de resize().
De breakpoint is lelijk? hmm, maar maar.. dit gebruik ik heel soms wel vaker. Eigenlijk alleen als het niet anders kan. De variabele zit buiten de functie en dat staat een beetje slordig vindt ik persoonlijk.

Nu wou ik het op een andere manier doen. Heb gezocht om het met one() van jQuery te doen alleen dat lukte me niet.

Daarna heb ik nog gekeken als het ook met een zelf geschreven functie kan en indien de waarde hetzelfde is, dan unbind() te doen. Alleen dit kon ik ook niet gebruiken, want als de waarde (color) gewijzigd wordt dan moet ik weer bind() doen. Hier kwam ik niet uit.

Okay, lelijk. zeg dan liever, niet mooi.

Hoe eventueel wel op te lossen? Een for loop wou ik ook vermijden want dat kost in mijn ogen teveel tijd. Het liefst zo kort mogelijk. Daar ben ik gek op alleen sla ik er soms totaal in door. Variabelen af te korten na i,x,u,z,w,r etc. etc. en je later rot moeten zoeken welke waarvoor eigenlijk is.

[ Voor 21% gewijzigd door Martine op 14-12-2014 01:23 . Reden: ben knettermoe na een lange dag, maar kan het gewoon testen met firebug. kon het niet laten. :D ]

[Shineless]

Eensch met JJ93 en Sthomkop; een CSS implementatie van media-queries heeft altijd de voorkeur boven een JavaScript implementatie. Daarom is het altijd goed om nog even drie keer na te denken voordat je media-queries gebruikt binnen JavaScript, en te bedenken of er niet een CSS manier voor te vinden is.
Dat gezegd hebbende weet ik uit ervaring dat het in uitzonderlijke gevallen niet anders kan en dat je gewoon JavaScript nodig hebt voor media-queries.
Wanneer dat het geval is, zou ik je willen aanraden om hier gewoon vanilla JavaScript voor te gebruiken, bijvoorbeeld aan de hand van de volgende link

Dat komt er dan bijvoorbeeld als volgt uit te zien:

JavaScript:

var mq1200 = window.matchMedia('@media screen and (max-width: 1200px)');
mq.addListener(function(changed) {
    if(changed.matches) triggerBreakPoint(1200);
});

var mq1200 = window.matchMedia('@media screen and (max-width: 1000px)');
mq.addListener(function(changed) {
    if(changed.matches) triggerBreakPoint(1000);
});

var mq1200 = window.matchMedia('@media screen and (max-width: 800px)');
mq.addListener(function(changed) {
    if(changed.matches) triggerBreakPoint(800);
});

var mq1200 = window.matchMedia('@media screen and (min-width: 800px)');
mq.addListener(function(changed) {
    if(changed.matches) triggerBreakPoint(0);
});

Hierdoor heb je geen variabelen nodig buiten je scope, en hoef je geen resize uit te voeren.

[Sthomkop]

Martine schreef op zondag 14 december 2014 @ 00:07:
[...] Okay, lelijk. zeg dan liever, niet mooi. [...]

Oké, oké, lelijk is overdreven, niet mooi is een betere term. Ik doelde ook niet op het gebruik van een variabele per se, maar misschien is het netter/logischer om gewoon een boolean (voor/na breakpoint) of integer te gebruiken (in welke breakpoint zit je), dan ben je ook niet afhankelijk van het anders zijn van de X^e letter/cijfer in de hex-representatie van je kleuren.

Martine schreef op zondag 14 december 2014 @ 00:07:
[...] Hoe eventueel wel op te lossen? Een for loop wou ik ook vermijden want dat kost in mijn ogen teveel tijd. Het liefst zo kort mogelijk. Daar ben ik gek op alleen sla ik er soms totaal in door. Variabelen af te korten na i,x,u,z,w,r etc. etc. en je later rot moeten zoeken welke waarvoor eigenlijk is.

Tja. Zelf ben ik er fan van om pas te optimaliseren als het nodig is, anders kun je helemaal gek worden van jezelf (ik heb er ook ervaring mee, haha). Voor JavaScript bestaan overigens goede minifiers, zodat je leesbare code kunt hebben om mee te ontwikkelen en dat hard kunt comprimeren in je productieomgeving. Een makkelijke is bijvoorbeeld de Closure compiler service. Als je echt all-out gaat en het hele patroon gebruikt van de Closure compiler kan hij nog beter optimaliseren/comprimeren, maar dat vereist een heel andere manier van programmeren, dus dat is niet direct aan te raden.

In feite komt het er gewoon op neer dat CSS altijd sneller is dan JavaScript omdat het op een dieper niveau in de browser zit en dus sneller afgehandeld kan worden bij resizen van venster en dergelijke. Het enige probleem is dat het gedrag van browsers minder consistent is bij CSS oplossingen dan bij JavaScript oplossingen, zoals je zelf al hebt gemerkt. De vraag is natuurlijk tot op welke hoogte je je daar druk over moet maken, dat is uiteraard een persoonlijke afweging. Als ik zo die artikelen lees die je linkt (dank daarvoor overigens, ik heb ook weer wat geleerd!), denk ik dat er goede oplossingen zijn en als het alleen gaat om een paar plaatjes in de sidebar is het ook weer niet zo veel moeite om dat te implementeren denk ik?