FitVids.js

A FitVids azzal a céllal jött létre Chris Coyier munkásság által, hogy az aktuális felbontáshoz igazodva méretezzen át iframe dom elemeket. Az iframe használatát Youtube videó, Google térkép, illetve Facebook doboz beágyazásához használjuk. Viszont ezek a dobozok mérete általában egy fix méret, mely már nem biztos, hogy megfelelő lenne több felbontáson nézve. A FitVids ezt méretezi át annak megfelelően, hogy alkalmazkodjon a weboldal méretéhez.

A probléma ezzel a megoldással az, hogy ha több ilyen beágyazott tartalmat használunk, amit szeretnénk ilyen módon átméretezni, akkor egy aloldalra lépést követően visszalépéskor, minden ilyen iframe-ben a meghívott tartalom a legelső iframe tartalmával lesz azonos. Ezt a jelenséget az alábbi ábrán illusztráljuk.

Alap állapot

A hibajelenség egy másik oldalról való visszalépés után

Ez a hibajelenség főleg Chrome böngészőn jelentkezik.

Megoldás

A megoldás rá igen egyszerű. Amikor inicializáljuk a FitVids.js-t, akkor közvetlenül utána töltsük újra az összes FitVids-el kezelt iframe tartalmát az alábbi módon:

JavaScript

<script type="text/javascript">
$(document).ready(function() {
	$('.iframe-wrap').fitVids({customSelector: 'iframe'});
	$('iframe').each(function() {
		$(this).attr('src', $(this).attr('src'));
	});
});
</script>

Demo letöltése

Leírásaink azon kezdő és haladó programozóknak nyújtanak segítséget, akik már minimális szinten foglalkoztak weboldalkészítéssel. Ha szeretnél jobban elmélyülni a témában, vagy elsajátítani alapokat, még tovább fejlődni, akkor nézz körbe tanfolyam kínálatunkban, ahol a kezdőtől a profi szintig nyújtunk képzéseket a számodra.