[JS] Responsive

[ghostman]

Dag mede-Tweakers,

Momenteel ben ik druk bezig met het maken van onze nieuwe site. Op een paar dingen na is die bijna af, dus ben ik nu vooral bezig met fouten / verbeteringen.

Nu is één van de verbeter punten dat Jquery niet het zelfde doet als css. Als ik mijn Chrome venster kleiner maak dan veranderd automatisch de css lay-out naar de scherm breedte, helaas doet Jquery dit niet, en moet ik eerst het venster verversen voordat Jquery zich aanpast.

JavaScript:

$(document).ready(function() {
if ($(window).width >= 1439) {
    $('#slideshow').slidesjs() {
       width: 1400,
       height: 500
    }
}
else if ($(window).width >= 850 & $(window).width <= 1438) {
    $('#slideshow').slidesjs() {
       width: 800,
       height: 300
}
else {
   $('#slideshow').hide();
}
});

Zelf heb ik gezocht op internet, maar ik kwam niet veel tegen (of ik moet verkeerd gezocht hebben). Wel heb ik 2 dingen gevonden, maar beide keren gaf het niet het gewenste uitkomt.
In HTML heb ik refresh tijd aangegeven van 1 seconde, helaas gaat die dan ook echt alles refreshen waardoor het scherm gaat flikkeren. En het zelfde in JavaScript dat ie per 1 seconde herlaadt. Hierbij ging het beeld ook flikkeren.

Hopelijk kunnen jullie mij hiermee helpen.

Jeffrey

Hopelijk zit ik goed en had dit niet in Programming gemoeten.
Sh*t, tittel vergeten aan te passen.

[Barryvdh]

Je hangt deze acties nu aan de document ready functie. Je zal elke keer als het scherm resized, je slider moeten aanpassen. Dat kan bijvoorbeeld met http://api.jquery.com/resize/
Er zijn overigens ook functies om de breedte als mediaqueries te benaderen: http://stackoverflow.com/...t-the-same-as-media-query

[ghostman]

Bedankt voor je snelle antwoord!

De resize functie had ik niet gevonden.Ik zal er verder in kijken. De Modernizr.mq had ik wel gevonden, maar die kreeg ik maar niet aan het werken, maar zal ik ook nog eens inkijken.

[EDIT]
Zou je misschien een kleine uitleg kunnen geven over resize functie? Kan er namelijk niet gigantisch veel over vinden op internet en krijg het niet werkend

[ Voor 27% gewijzigd door ghostman op 13-10-2014 16:34 ]

[WernerL]

Er staat gewoon een stukje voorbeeld code op de jquery site, wat is daar niet duidelijk aan?

[Barryvdh]

-Jeffrey- schreef op maandag 13 oktober 2014 @ 16:21:
[EDIT]
Zou je misschien een kleine uitleg kunnen geven over resize functie? Kan er namelijk niet gigantisch veel over vinden op internet en krijg het niet werkend

Van de jQuery site:

JavaScript:

$( window ).resize(function() {
  $( "#log" ).append( "<div>Handler for .resize() called.</div>" );
});

Dus als je dat uitvoert, zal hij elke keer als het scherm resized, die code uitvoeren. Je moet dan in die resize handler jouw slider aanpassen (en in het begin 1 keer).

Voorbeeldje: http://jsfiddle.net/127p05mq/

Met jouw resize functie zou dat zoiets worden:

JavaScript:

function resizeSlider(){
  function resizeSlider(){
    if ($(window).width >= 1439) {
        $('#slideshow').slidesjs() {
           width: 1400,
           height: 500
        }
    } else if ($(window).width >= 850 & $(window).width <= 1438) {
        $('#slideshow').slidesjs() {
           width: 800,
           height: 300
        }
     }else {
       $('#slideshow').hide();
    }
  }
}

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

$(document).ready(function() {
    resizeSlider();
    
});

Overigens miste je een } na de 800/300 slider. En het ligt natuurlijk ook aan je slider, of je die in runtime kan resizen/aanpassen.
En misschien moet je opletten dat je pas aan het van het resizen die functie uitvoert, omdat je anders heel vaak die functie aanroept tijdens verkleinen.

Beter gebruik je gewoon een responsive slider

[ Voor 3% gewijzigd door Barryvdh op 13-10-2014 17:21 ]

[ghostman]

WernerL schreef op maandag 13 oktober 2014 @ 17:02:
Er staat gewoon een stukje voorbeeld code op de jquery site, wat is daar niet duidelijk aan?

Sorry dat ik het niet verder uitlegde. De vraag was hoe ik de resize functie moest toepassen in de code. Ik had namelijk $($window).resize(function() { // Code dan hier } geprobeerd en dat werkte niet.

Toen heb ik meerdere dingen geprobeerd in de document ready, en er buiten maar ik kreeg het niet werkend en kon ook niet echt een antwoord vinden over hoe ik het moest toepassen.

Mijn JavaScript / Jquery is nog niet optimaal en ben deze taal nog aan het leren, maar vaak vind ik wel oplossingen door te kijken op Google, maar deze keer werkte dat dus niet.

Barryvdh schreef op maandag 13 oktober 2014 @ 17:20:
[...]


Van de jQuery site:

JavaScript:

$( window ).resize(function() {
  $( "#log" ).append( "<div>Handler for .resize() called.</div>" );
});

Dus als je dat uitvoert, zal hij elke keer als het scherm resized, die code uitvoeren. Je moet dan in die resize handler jouw slider aanpassen (en in het begin 1 keer).

Voorbeeldje: http://jsfiddle.net/127p05mq/

Met jouw resize functie zou dat zoiets worden:

JavaScript:

function resizeSlider(){
  function resizeSlider(){
    if ($(window).width >= 1439) {
        $('#slideshow').slidesjs() {
           width: 1400,
           height: 500
        }
    } else if ($(window).width >= 850 & $(window).width <= 1438) {
        $('#slideshow').slidesjs() {
           width: 800,
           height: 300
        }
     }else {
       $('#slideshow').hide();
    }
  }
}

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

$(document).ready(function() {
    resizeSlider();
    
});

Overigens miste je een } na de 800/300 slider. En het ligt natuurlijk ook aan je slider, of je die in runtime kan resizen/aanpassen.
En misschien moet je opletten dat je pas aan het van het resizen die functie uitvoert, omdat je anders heel vaak die functie aanroept tijdens verkleinen.

Beter gebruik je gewoon een responsive slider

Bedankt! Eigenlijk wat dit stuk code doet is als de browser grootte veranderd word, dan gaat die automatisch weer langs de if else statement om te controleren of die de juiste aanspreekt toch?

Die bracket kan, ik had even een verkorte code getyped omdat het anders te veel word. Toen ik zocht naar een jquery slideshow kwam ik SlidesJS tegen, makkelijk en kleine script die niet veel vraagt, ook was de support goed dus ik dacht dat dit wel een van de betere zou zijn. Zal nog even kijken of ik een goede reponsive slider kan vinden.

Bedankt

[Bosmonster]

Barryvdh schreef op maandag 13 oktober 2014 @ 17:20:
[...]

Beter gebruik je gewoon een responsive slider

+1

Fixed breakpoints ipv fluid is echt heel erg 3-jaar-geleden.

Neem bijvoorbeeld eens een kijkje bij http://www.owlcarousel.owlgraphic.com/

[ Voor 14% gewijzigd door Bosmonster op 14-10-2014 09:43 ]

[ghostman]

Zat er al naar te kijken . Werkt waarschijnlijk ook wat makkelijker dan de bovenstaande code, bedankt voor de tip!

[R4gnax]

Bosmonster schreef op dinsdag 14 oktober 2014 @ 09:42:
Neem bijvoorbeeld eens een kijkje bij http://www.owlcarousel.owlgraphic.com/

JavaScript:

if (this.settings.responsive !== false) {
  this.on(window, 'resize', this._handlers.onThrottledResize);
}

Nou. Die vlag dekt de lading dus ook niet.
Kijken naar het resize event op het window object is absoluut ontoereikend om te achterhalen of de breedte of hoogte van een DOM element gewijzigd is. Die vlieger gaat alleen op in het simplistische geval waar een component die zich responsive moet gedragen direct of indirect een breedte heeft welke afhankelijk is v/d scherm breedte.

Dit gaat bijvoorbeeld al stuk als je een element hebt dat meer ruimte toegekend krijgt omdat het in een uitschuifpaneelconstructie zit.

Wil je dat echt responsive oplossen, dan moet je naar iets als element queries kijken.

[ghostman]

Hmm, ben nu bezig om JavaScript helemaal werkend te krijgen, dit lukt nog niet helemaal aangezien het mobiele menu nog niet mee werkt, maar anders blijf ik toch gewoon onderstaande code gebruiken met een responsive slideshow. Dan zijn mijn problemen zo goed als verdwenen.

JavaScript:

if ($(window).width >= 1439) {

}
else {

}

Allemaal bedankt voor de reactie's!

[Verwijderd]

Responsive JS kan responsiveness niet afhandelen met alleen Resize.
Wanneer iemand op minimize/maximize knop gebruikt..

Dus, het moet continu checken. De checker ( en voert alleen iets uit bij verandering (continu) ) :

JavaScript:

var previousWidth = 0;
var previousHeight = 0;

function checkWindow() {
 
 if ($(window).height() != previousHeight || $(window).width() != previousWidth) {
  previousWidth =  $(window).width();
  previousHeight = $(window).height();
   // do your checks here and set ur responsive
  if (previousWidth < 1250) {
  happyMobile(); //your behaviour function
 } else {
 happyDesktop(); //your behaviour function
}  
 } 

setTimeout(checkWindow, 30);

}

[R4gnax]

Verwijderd schreef op vrijdag 24 oktober 2014 @ 19:22:
Responsive JS kan responsiveness niet afhandelen met alleen Resize.
Wanneer iemand op minimize/maximize knop gebruikt..

Bij mijn weten is Firefox de enige browser die ooit problemen heeft gehad met het afvuren v/h resize event bij het maximaliseren v/h venster en die problemen zijn lang, lang geleden al gepatched.

(Maar zoals eerder al gezegd; naar het window resize event luisteren is an sich niet voldoende.)

[ Voor 9% gewijzigd door R4gnax op 24-10-2014 23:55 ]

[gitaarwerk]

resize event is op sich vaak wel zat. Ook al werkt het misschien niet het beste en super fluid, het is meer dan voldoende. Het is natuurlijk een beetje de context, maar op onze sites is het dat mensen amper resizen eigenlijk. nog geen 5%. (En dat is geen sampled data )

Je zou sowieso wel willen dat niet op iedere resize actie een functie wordt aangeroepen die alles checked. Als je meer scripts aan die resize wilt hangen, zou ik er wel een korte timeout voor zetten. Normaliter wil je niet overal timeouts hebben, maar je bent (vast niet) bezig de hele tijd met andere belangrijke JS executies op het moment van resizen.

Je zou dus wanneer je "klaar met resizen bent" je scripts kunnen afvoeren door binnen een timeout een event via jquery te triggeren, en alle responsive/resize scripts hierna kunnen laten luisteren.

Element breakpoints zijn awesome, maar je zou even goed moeten kijken met je browser ondersteuning. Wij ondersteunen zelf nog IE7 bijvoorbeeld ;-) (alhoewel we responsive vanaf IE9 ondersteunen)

[ghostman]

Het enige wet die dan nu doet als die beneden 850px komt is het menu verbergen. Meer hoeft die eerst niet te doen. Later zal ik een mobiel menu maken, maar aangezien er veel tijds druk is is dit nu niet zo belangrijk.

Iedereen bedankt voor de reactie's!

[R4gnax]

gitaarwerk schreef op zondag 26 oktober 2014 @ 19:16:
Element breakpoints zijn awesome, maar je zou even goed moeten kijken met je browser ondersteuning. Wij ondersteunen zelf nog IE7 bijvoorbeeld ;-) (alhoewel we responsive vanaf IE9 ondersteunen)

Je weet dat IE tot aan IE11, zolang je Element.attachEvent gebruikt ipv Element.addEventListener het resize event niet alleen op Window maar ook op Element niveau ondersteunt, toch?

Oude IEs zijn juist veruit de makkelijkste browsers om element queries werkend in te krijgen. Vanwege het native karakter ook veruit de snelste in het stukje code dat de resize events afvuurt.

(Zelfs met het uitlezen van de dimensies van DOM elementen zijn ze hier nog redelijk vlot, aangezien dat kan met Element.getBoundingClientRect wat al sinds IE4 ondersteund is. Microsoft revolutionair bezig geweest op browser vlak? Oh jawel!)

[gitaarwerk]

R4gnax schreef op maandag 27 oktober 2014 @ 23:43:
[...]


Je weet wat IE tot aan IE11, zolang je Element.attachEvent gebruikt ipv Element.addEventListener het resize event niet alleen op Window maar ook op Element niveau ondersteunt, toch?

Oude IEs zijn juist veruit de makkelijkste browsers om element queries werkend in te krijgen. Vanwege het native karakter ook veruit de snelste in het stukje code dat de resize events afvuurt.

(Zelfs met het uitlezen van de dimensies van DOM elementen zijn ze hier nog redelijk vlot, aangezien dat kan met Element.getBoundingClientRect wat al sinds IE4 ondersteund is. Microsoft revolutionair bezig geweest op browser vlak? Oh jawel!)

Qua JS loop ik nog aardig achter. Maar wel interessant. Vooral wel een nadeel, ook al werkt JS wel, is dat je met CSS border box behoorlijk veel gaat gebruiken. Daarbij moet je om dit toch te gebruiken aardig wat JS erin proppen wat niet bepaald ten goede komt van de render snelheid van je pagina. Maar het is wel vet dat het kan.

Ik denk dat het wel afhankelijk is wanneer je het gaat gebruiken.

[R4gnax]

gitaarwerk schreef op woensdag 29 oktober 2014 @ 16:23:

Qua JS loop ik nog aardig achter. Maar wel interessant. Vooral wel een nadeel, ook al werkt JS wel, is dat je met CSS border box behoorlijk veel gaat gebruiken. Daarbij moet je om dit toch te gebruiken aardig wat JS erin proppen wat niet bepaald ten goede komt van de render snelheid van je pagina. Maar het is wel vet dat het kan.

Ik denk dat het wel afhankelijk is wanneer je het gaat gebruiken.

Dit heeft niets met CSS border-box te maken. Dat is iets wat er weer compleet los van staat. Een cross browser resize event is daarnaast ook vrij eenvoudig in elkaar te zetten. Kost je daadwerkelijk minder dan 100 regels.

[ Voor 3% gewijzigd door R4gnax op 29-10-2014 19:45 ]