Van JavaScript naar jQuery - hoe doe je dat?

[Doctor Who]

Hoi iedereen, ik heb een vraagje.

Ik draai zelf een webserver met erop een pagina die middels CSS en JavaScript een achtergrond-afbeelding simuleert.

Die afb. past zich dan aan aan een gewijzigde schermgrootte (resize) zonder dat de aspect-verhouding geweld aan wordt gedaan c.q. de afb. wordt niet "uitgerekt".

Thans ben ik bezig het JavaScript-gedeelte te vervangen door jQuery.

Dit omdat het browser-onafhankelijk werkt (qua intentie anyway) en daarnaast een scaka van geweldige mogelijkheden biedt in diverse opzichten.

Mijn "probleem" is (na flink googlen),

ik heb een code als deze (JavaScript):

Code: Selecteer alles

with (window)   onload=onresize=function() {

// MijnGeweldigeCode

}

vervangen door deze (jQuery):

Code: Selecteer alles

$(document).ready(function() {

   $(window).on("load resize", function() {

// MijnGeweldigeCode

  });

});

ofwel:

Code: Selecteer alles

$(function () {

   $(window).on("load resize", function() {

// MijnGeweldigeCode

  });

});

Dit draait naar mijn ervaring prachtig op alle "major browsers" (Firefox, Internet Explorer, Chrome Opera en Safari).

Maar nou ben ik ook niet van gisteren - ik las zoveel als dit:

The document ready event is to prevent any jQuery code from running before the document is finished loading (is ready).

Nou is dus mijn vraag:

ik kan dat 'document ready event' uit m'n scripts verwijderen

- het 'windows on event' blijft werken (getest met genoemde browsers) -

maar is het verstandig een windows-event binnen een document-ready-event te nesten?

M'n testpagina staat overigens hier

(feel free to visit the sources).

Een antwoord heb ik tot nog toe niet kunnen vinden dus dacht ik:

ik stel de vraag op dit forum.

Wil ik ergens wijzer worden dan is dit de goede plaats.

Greetz,

DW

[Benm]

Het is verstandig te wachten tot het document ready is voordat je met zaken als jquery aan de gang gaat.

Je hebt alle content nodige om bijvoorbeeld te bepalen hoe 'lang' een document is qua scrollheight, en dat is pas te bepalen -nadat- je het helemaal hebt binnengehaald, en eventuele aanpassingen in fonts/marges/paddings etc via jquery hebt uitgevoerd.

Bijkomend aspect is dat je zaken als jquery pas wilt doen op het einde zodat browsers die het niet ondersteunen niet vroegtijdig stuklopen: als een browser er geen support voor heeft (bijv gebruiker heeft javascript uitgeschakeld) zal de pagina nog steeds in beeld komen, al is het zonder alle fancy stijlen en effecten die je in gedachten had.

Het kan verstandig zijn om je pagina eens te bekijken met javascript uitgeschakeld, zodat je ook weet wat mensen in beeld krijgen die een 'rare' browser gebruiken of doelbewust javascript hebben uitgeschakeld. Fraai zal het niet zijn, maar je kunt het minstens "bruikbaar" maken.

[Doctor Who]

Benm,

heel erg bedankt voor je reactie - het is me duidelijk.

Dit moet dus gezien worden als soort van "basic syntax" als het om jQuery gaat:

Code: Selecteer alles

$(document).ready(function() {

  // Plaats hier alle jQuery code, ongeacht wat

});

Wat je er verder over zegt klinkt mij heel plausibel, echter, er is wel een giftige adder onder het gras:

"document ready" geeft aan dat het document "geladen" is in de zin dat alle op de web-pagina gespecificeerde HTML-elementen gedefinieerd zijn en ook benaderbaar middels scripting.

Maar het geeft geen garantie dat die elementen (met name "images") tot in detail zijn geladen.

Dat is waar de "windows (on)load" om de hoek komt kijken, en ik heb begrepen dat die ook altijd iets later wordt uitgevoerd dan de "document ready".

En dat lijkt mij alleen maar logisch.

Een code als deze bleek bloedlink:

Code: Selecteer alles

$(document).ready(function() {

  // Manipuleer mijn afbeelding "on-load"

  $(window).resize(function() {

// Manipuleer mijn afbeelding "on-resize"

  });

});

FireFox 24 onder LINUX en Apple Safari 5.1.7 onder Windows pikken dit niet:

de afbeelding was nog niet geladen op het moment dat "document ready" werd uitgevoerd.

En dan werkt dit dus wel:

Code: Selecteer alles

$(document).ready(function() {

   $(window).on("load resize", function() {

    // Manipuleer mijn afbeelding

  });

});

Verder...

Bijkomend aspect is dat je zaken als jquery pas wilt doen op het einde zodat browsers die het niet ondersteunen niet vroegtijdig stuklopen: als een browser er geen support voor heeft (bijv gebruiker heeft javascript uitgeschakeld) zal de pagina nog steeds in beeld komen, al is het zonder alle fancy stijlen en effecten die je in gedachten had.

Het kan verstandig zijn om je pagina eens te bekijken met javascript uitgeschakeld, zodat je ook weet wat mensen in beeld krijgen die een 'rare' browser gebruiken of doelbewust javascript hebben uitgeschakeld. Fraai zal het niet zijn, maar je kunt het minstens "bruikbaar" maken.

Dat is in feite bij gebruik van javascript ook al zo - het kan zijn dat een browser het gewoon niet ondersteunt om wat voor reden dan ook.

Mijn pagina is gebaseerd op dit:

How Do you Stretch a Background Image in a Web Page?

en daar heb ik een (java)script aan toegevoegd:

http://www.stamcafe.com/publictest/xhtml/js/

Wil je het zonder die code zien - dan kan dat:

http://www.stamcafe.com/publictest/xhtml/js/?noscript=1&notable=1

vergroot of verklein je browser-window en zie wat het effect is - precies wat je bedoelt.

Het is wellicht niet mooi - maar wel werkzaam.

[Benm]

Ah, op die manier. Als het enige is wat je wilt doen een achtergrond op 100% van het window te laten zien (en laten stretchen zodat het altijd vult, ongeacht aspect ratio) kan je dat evt ook zonder javascript/jquery doen:

In CSS:

#background {width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -99;}

.stretch {width:100%; height:100%;}

In html, net onder de <body> tag:

<div id="background"><img src="sitebg.jpg" class="stretch" /></div>

In de praktijk werkt dit goed met recente versies van alle gebruikelijke browsers (ie, chrome, firefox). Vaak gebruik ik dit niet omdat de aspect-ratio verstoringen meestal ongewenst zijn, maar het werkt wel goed. De browser trekt dit recht, ook als de achtergrondafbeelding trager geladen kan worden vergeleken met de rest van de content.

[Doctor Who]

Maar zo werkt het ook in beginsel - ik maak gebruik van dergelijke CSS-properties.

Goed, we laten de "backward-compatibility" even buiten beschouwing teneinde de codes wat simpeler te houden.

Ik heb je code iets gewijzigd:

in CSS:

#background, #stretch {width: 100%; height: 100%; left: 0px; top: 0px;}

#background {position: fixed; z-index: -99;}

#stretch {position: relative;}

In html, net onder de <body> tag:

<div id="background"><img src="/images/testbeeld.jpg" id="stretch" /></div>

Ik heb dit alleen nog maar getest op Firefox 25 (onder Windows) en Internet Explorer 9 en daar werkt het.

Als achtergrond-afbeelding heb ik deze gekozen:



zo kun je onmiddelijk zien hoe de aspect-verhoudingen verstoord worden.

En dáár zocht ik nou juist een oplossing voor!

Sinds oktober 2010 heb ik die draaien (maar ik was er natuurlijk eerder al mee bezig).

Als je dit (java)script aan je pagina toevoegt - bij voorkeur in de &--#60;header&--#62; en na je CSS:

Code: Selecteer alles

var bgAspectX=null;

var bgAspectY=null;

// Haal de grootste gemene deler van twee getallen op

function gcd(a, b)

{

  return (!b ? a : gcd(b,a % b) );

}

// Bereken de aspect-ratio van een afbeelding

function getAspectRatio(imgObj)

{

  var i = new Image();

  i.src = imgObj.src;

  var rw, rh, fact;

  rw = i.width;

  rh = i.height;

  fact = gcd(rw, rh);

  bgAspectX=parseInt(rw/fact);

  bgAspectY=parseInt(rh/fact);

}

// specificeer de onload and onresize handler

with (window) onload=onresize=function()

{

  var bgImg, imgWidth, imgHeight, winHeight, winWidth;

  if( !(bgImg=document.getElementById("stretch")) ) return;

  if( !(bgAspectX && bgAspectY) ) getAspectRatio(bgImg);

  // Haal de afmetingen van het browser-venster op

  if(typeof(innerHeight)!="undefined")

  {

winHeight=innerHeight;

winWidth=innerWidth;

  }

  else

  {

// Internet Explorer &--#60; 8

winHeight=document.body.clientHeight;

winWidth=document.body.clientWidth;

  }

  // Stel de hoogte in van de achtergrond afbeelding:

  // als de hoogte van het browser-venster groter is dan wordt die waarde gebruikt

  imgHeight=Math.max(Math.round((winWidth/bgAspectX)*bgAspectY),winHeight);

  // Bereken met de gevonden hoogte en de aspect-ratio de gewenste breedte van de afbeelding

  imgWidth=Math.round((imgHeight/bgAspectY)*bgAspectX);

  with (bgImg.style)

  {

// Stel breedte en hoogte in

height=imgHeight.toString()+"px";

width=imgWidth.toString()+"px";

// Centreer de afbeelding horizontaal en verticaal

left=Math.round((winWidth-imgWidth)/2).toString()+"px";

top=Math.round((winHeight-imgHeight)/2).toString()+"px";

  }

}

dan wordt de afbeelding aangepast aan de venstergrootte, maar wel zonodig bijgesneden.

En dat laatste moet je ook maar willen, nochtans werkt dit wel.

[Doctor Who]

BTW:

Oei! De editor alhier bleek wat creatief om te gaan met wat ik in m'n voorgaande post typte.

"&--#60;header&--#62;" is natuurlijk "<header>", maar okee.

Een voorbeeld HTML (deze is volgens HTML5) maakt het ook wel duidelijk.

Code: Selecteer alles

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>BgResize test</title>

<style type="text/css">

#background, #stretch {width: 100%; height: 100%; left: 0px; top: 0px;}

#background {position: fixed; z-index: -99;}

#stretch {position: relative;}

</style>

<script>

  // Plaats hier evt. dat javascript

</script>

</head>

<body>

<div id="background"><img src="sitebg.jpg" id="stretch" /></div>

<!-- Plaats hier de pagina-inhoud -->

</body>

</html>

Dit werkt.

Maar ik beveel het niet aan.

[Benm]

dan wordt de afbeelding aangepast aan de venstergrootte, maar wel zonodig bijgesneden.

En dat laatste moet je ook maar willen, nochtans werkt dit wel.

Of je het wilt is inderdaad maar de vraag... op traditionele schermen valt het vaak nog wel mee, maar op een tablet in portrait mode wordt het wel een heel raar gezicht.

De oplossing met kijken welke dimensie de beperkende is en vervolgens croppen is dan zeker mooier. Nadeel is dat niet alle browsers plaatjes even netjes schalen. Zeker oudere versies van bijv IE doen dan zonder anti-aliasing, wat een slecht resultaat geeft zelfs als je via javascript doet dat deze via css nog niet ondersteunen.

[Doctor Who]

... en dan zorg je dus voor een "backward-compatible" CSS:

Code: Selecteer alles

<head>

<!-- ...//... -->

<style type="text/css">

html, body {

  height:100%;

  margin:0;

  padding:0;

}

#bg {

  position:fixed;

  top:0;

  left:0;

  width:100%;

  height:100%;

  z-index:-1; /* -99 mag natuurlijk ook */

}

#content {

  position:relative;

  height:100%;

  min-height:100%;

  overflow:auto;

  z-index:1;

}

</style>

<!--[if IE]>

<style type="text/css">

/* Wat aanpassingen voor IE browsers */

html {

  overflow:hidden;

}

body {

  overflow-Y:auto;

}

#bg {

  position:absolute;

}

#content {

  cursor:default;

}

</style>

<![endif]-->

<!-- Plaats hier eventuele scripts etc. -->

</head>

<body>

<!-- Simuleer een background-image -->

<img id="bg" src="bgimage.jpg" alt="background" />

<div id="content">

<!-- Plaats hier de pagina-inhoud -->

</div>

</body>

Dat script wat ik eerder gaf laat je in dit geval los op het "#bg-element" - en zelfs IE 6 trekt dit.

Tablets hebben overigens een ander issue,

maar daarover later.