Konstantno detektiranje širine parent elementa

nemesis · Oktobar 11, 2013, 2:52pm

Ovako, malo je komplicirano za objasniti. Napravio sam Wordpress widget koji ubacuje članke u obliku thumbnaila. No problem mi je odrediti širinu thumbnaila. Npr. ako se widget nalazi unutar elementa koji ima width do 150px, tu bi thumbnail trebao imati width 100%. Ukoliko se widget nalazi unutar elementa širine 150px do 225px, tu bi trebao imati dva thumbnaila širine 50%. Shvaćate?

Ovako mi izgleda HTML.

<div class="wrapper">
	<div class="thumbnail"></div>
	<div class="thumbnail"></div>
</div>

U CSS-u imam sljedeći style (ovo dolje su classes koji bi se dodavali i micali ovisno o širini parent elemenata. Nazivi su davani na temelju 12-ogridnog layout. Npr. w12 => 12/12 tj. cjelokupna širina, w6 => 6/12 tj. pola širine itd…

.wrapper {
	float: left;
	clear: both;
	width: 100%;
	}
	
.thumbnail {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	float: left;
	}
		
.wloop_item_w12 { width: 100%; }
.wloop_item_w6 { width: 48%; margin-left: 1%; margin-right: 1%; }
.wloop_item_w4 { width: 31%; margin-left: 1%; margin-right: 1%; }
.wloop_item_w3 { width: 23%; margin-left: 1%; margin-right: 1%; }
.wloop_item_w2 { width: 14%; margin-left: 1%; margin-right: 1%; }

E sad, ono što sam ja eksperimentirao s jQueryijem je slijedeće:

var parentwidth = $('.thumbnail').parent().width();
var onerow = 150;
var tworows = 225;
var threerows = 300;
var fourrows = 450;
var sixrows = 1250;
if(parentwidth < onerow) {
	$('.thumbnail').addClass('wloop_item_w12');
} else if(parentwidth < tworows) {
	$('.thumbnail').addClass('wloop_item_w6');
} else if(parentwidth < threerows) {
	$('.thumbnail').addClass('wloop_item_w4');
} else if(parentwidth < fourrows) {
	$('.thumbnail').addClass('wloop_item_w3');
} else if(parentwidth < sixrows) {
	$('.thumbnail').addClass('wloop_item_w2');
} else {
	$('.thumbnail').addClass('wloop_item_w2');
}

Ovaj gore kod radi i jQuery prepozna širinu elementa, no kada resizeam prozor te se širina mjenja, jQuery ne dodaje/briše razrede sukladno if/else funkciji. Tj. jQuery se izvrši samo jednom pri otvaranju…

Ne znam kako bi ovo bolje objasnio, pa ako ima pitanja, vičite…

apazinjan · Oktobar 11, 2013, 3:15pm

Ako zelis da ti se kod izvrsi kod resizanja, samo ga stavis unutar window resize metode:

$( window ).resize( function() {

var parentwidth = $('.thumbnail').parent().width();
var onerow = 150;
var tworows = 225;
var threerows = 300;
var fourrows = 450;
var sixrows = 1250;
if(parentwidth < onerow) {
	$('.thumbnail').addClass('wloop_item_w12');
} else if(parentwidth < tworows) {
	$('.thumbnail').addClass('wloop_item_w6');
} else if(parentwidth < threerows) {
	$('.thumbnail').addClass('wloop_item_w4');
} else if(parentwidth < fourrows) {
	$('.thumbnail').addClass('wloop_item_w3');
} else if(parentwidth < sixrows) {
	$('.thumbnail').addClass('wloop_item_w2');
} else {
	$('.thumbnail').addClass('wloop_item_w2');
}

});

E sad, da si ne dupliciras kod, najbolje ti je da si napravis funkciju za to, i onda ju pozoves kad se stranica loada, i unutar resize eventa kao ja gore.

nemesis · Oktobar 11, 2013, 3:26pm

Yup, sad sam došao do sličnog zaključka

$( document ).ready(function(){
	//ITEMS	
	$(document).ready(wloop_item_resize);
	$(window).resize(wloop_item_resize); 
	
	function wloop_item_resize(){
		var parentwidth = $('.thumbnail').parent().width();
		var onerow = 300;
		var tworows = 500;
		var threerows = 750;
		var fourrows = 1000;
		var sixrows = 1250;

		if(parentwidth < onerow) {
			$('.thumbnail').removeClass('wloop_item_w12');
			$('.thumbnail').removeClass('wloop_item_w6');
			$('.thumbnail').removeClass('wloop_item_w4');
			$('.thumbnail').removeClass('wloop_item_w3');
			$('.thumbnail').removeClass('wloop_item_w2');
			$('.thumbnail').addClass('wloop_item_w12');
		} else if(parentwidth < tworows) {
			$('.thumbnail').removeClass('wloop_item_w12');
			$('.thumbnail').removeClass('wloop_item_w6');
			$('.thumbnail').removeClass('wloop_item_w4');
			$('.thumbnail').removeClass('wloop_item_w3');
			$('.thumbnail').removeClass('wloop_item_w2');
			$('.thumbnail').addClass('wloop_item_w6');
		} else if(parentwidth < threerows) {
			$('.thumbnail').removeClass('wloop_item_w12');
			$('.thumbnail').removeClass('wloop_item_w6');
			$('.thumbnail').removeClass('wloop_item_w4');
			$('.thumbnail').removeClass('wloop_item_w3');
			$('.thumbnail').removeClass('wloop_item_w2');
			$('.thumbnail').addClass('wloop_item_w4');
		} else if(parentwidth < fourrows) {
			$('.thumbnail').removeClass('wloop_item_w12');
			$('.thumbnail').removeClass('wloop_item_w6');
			$('.thumbnail').removeClass('wloop_item_w4');
			$('.thumbnail').removeClass('wloop_item_w3');
			$('.thumbnail').removeClass('wloop_item_w2');
			$('.thumbnail').addClass('wloop_item_w3');
		} else if(parentwidth < sixrows) {
			$('.thumbnail').removeClass('wloop_item_w12');
			$('.thumbnail').removeClass('wloop_item_w6');
			$('.thumbnail').removeClass('wloop_item_w4');
			$('.thumbnail').removeClass('wloop_item_w3');
			$('.thumbnail').removeClass('wloop_item_w2');
			$('.thumbnail').addClass('wloop_item_w2');
		} else {
			$('.thumbnail').removeClass('wloop_item_w12');
			$('.thumbnail').removeClass('wloop_item_w6');
			$('.thumbnail').removeClass('wloop_item_w4');
			$('.thumbnail').removeClass('wloop_item_w3');
			$('.thumbnail').removeClass('wloop_item_w2');
			$('.thumbnail').addClass('wloop_item_w2');
		}
	}
});

apazinjan · Oktobar 11, 2013, 3:46pm

P.S. Umjesto da sto puta pises removeClass

Ne:

$('.thumbnail').removeClass('wloop_item_w12');
$('.thumbnail').removeClass('wloop_item_w6');
$('.thumbnail').removeClass('wloop_item_w4');	
$('.thumbnail').removeClass('wloop_item_w3');
$('.thumbnail').removeClass('wloop_item_w2');
$('.thumbnail').addClass('wloop_item_w2');

Da:

$('.thumbnail').attr('class','thumbnail wloop_item_w2');

nemesis · Oktobar 11, 2013, 3:49pm

Zar mi neće onda maknuti i class .thumbnail?
Nisam previše upoznat s .attr();

apazinjan · Oktobar 11, 2013, 3:55pm

Hoce, zato sam i dodao thumbnail ispred klase koju trebas.

.attr() mozes koristiti na dva nacina, prvi:

$('.thumbnail').attr( 'class' )

To je “retrieve” mode i vrati ti sve sto ti je elementu sa klasom .thumbnail pod class="" (ukljucujuci i thumbnail).

drugi:

$('.thumbnail').attr( 'class' , 'thumbnail wloop_item_w2')

To je “set” mode i on ti zamijeni cijeli class atribut tog elementa sa onim sta si ti stavio iza zagrade. U ovom konretnom slucaju na kraju dobijes element sa klasama .thumbnail i .wloop_item_w2

nemesis · Oktobar 11, 2013, 4:09pm

Aha, nisam ni skužio da mi gore piše thumbnail…
Hvala

nemes1s · Oktobar 15, 2013, 6:16pm

E, a sad imam drugi problem. Naime, sad ja taj widget stavim u 3 različita area koji su svi tri različite širine. JS prati kako se prvi div.thumbnail na stranici ponaša, tj. kako se ponaša njegov parent, i onda svim elementima s .thumbnail klasom daje istu širinu. Kako napraviti to da nove classes dodaju ovisno o njihovim parent elementima, a ne parent elementu prvog div.thumbnail?

apazinjan · Oktobar 15, 2013, 6:26pm

Daj mi kod koji trenutno imas.

nemes1s · Oktobar 15, 2013, 6:44pm

$(document).ready(wloop_item_resize);
$(window).resize(wloop_item_resize); 

function wloop_item_resize(){
	var parentwidth = $('.wloop_item').parent().width();
	var onerow = 400;
	var tworows = 650;
	var threerows = 900;
	var fourrows = 1100;
	var sixrows = 1300;

	if(parentwidth < onerow) {

		$('.wloop_item').attr( 'class' , 'wloop_item wloop_item_w12');
	} else if(parentwidth < tworows) {
		$('.wloop_item').attr( 'class' , 'wloop_item wloop_item_w6');
	} else if(parentwidth < threerows) {
		$('.wloop_item').attr( 'class' , 'wloop_item wloop_item_w4');
	} else if(parentwidth < fourrows) {
		$('.wloop_item').attr( 'class' , 'wloop_item wloop_item_w3');
	} else if(parentwidth < sixrows) {
		$('.wloop_item').attr( 'class' , 'wloop_item wloop_item_w2');
	} else {
		$('.wloop_item').attr( 'class' , 'wloop_item wloop_item_w2');
	}
}

Znači, umjesto .thumbnail je .wloop_item… sve ostalo je isto…

Fora je u tome da imam pagebuilder (SiteOrigin) i elementi se putem widgeta ubacuju u njega. Ja želim napraviti hrpu različitih petlji koje korisnici mogu staviti kako bi sami dizajnirali svoj page, bio on portfolio heavy ili više na magazine. E sad, ako oni ubace isti widget više puta u layout, a parent element je drugačije širine, meni će se pojedini članci (koji su u obliku thumbnaila) drugačije loadati i ponašati ovisno o širini prozora/devicea. Tj. loadat će se ovisno o parentu prvog loadanog widgeta…

apazinjan · Oktobar 15, 2013, 6:50pm

Probaj ovako:

$(document).ready(wloop_item_resize);
$(window).resize(wloop_item_resize); 

function wloop_item_resize(){

	$('.wloop_item').each( function() {
		var $this = $( this ),
		    parentwidth = $this.parent().width(),
		    onerow = 400,
		    tworows = 650,
		    threerows = 900,
		    fourrows = 1100,
		    sixrows = 1300;

		if(parentwidth < onerow) {
			$this.attr( 'class' , 'wloop_item wloop_item_w12');
		} else if(parentwidth < tworows) {
			$this.attr( 'class' , 'wloop_item wloop_item_w6');
		} else if(parentwidth < threerows) {
			$this.attr( 'class' , 'wloop_item wloop_item_w4');
		} else if(parentwidth < fourrows) {
			$this.attr( 'class' , 'wloop_item wloop_item_w3');
		} else if(parentwidth < sixrows) {
			$this.attr( 'class' , 'wloop_item wloop_item_w2');
		} else {
			$this.attr( 'class' , 'wloop_item wloop_item_w2');
		}
	}
	
}

nemes1s · Novembar 5, 2013, 7:24pm

Funkcionira, hvala

nemes1s · Novembar 5, 2013, 7:34pm

Imam još jedno pitanje, nevezano uz ovo gore. Kako u jQueryju napisati funckiju da mi određeni linkovi (koje ja selektiram) imaju animirani (fadeIn) hover efekt, ali ja pritom ne mogu predvidjeti koji je to točno hover efekt.

npr. imam
.class a:link {color: blue;}
.class a:hover {color: red; }

i sad bi trebao napraviti fade na prijelazu između njih…

apazinjan · Novembar 5, 2013, 9:00pm

Nisam sto posto siguran sto mislis, mozes malo pojasniti?

nemes1s · Novembar 5, 2013, 9:36pm

Zamisli da imam normalan link koji ima klasu .nekilink

a.nekilink:link { color: #333; background: transparent; }

…i ima hover efekt u css-u

a.nekilink:hover { color: #FFF; background: red; }

e sad, kako napraviti da prijelaz mišem napravi fadeIn efekt iz a:link u a:hover putem jQueryja, a da pritom izričito ne naglasim kako je krajnji rezultat link s crvenom podlogom.

Laički bi to bilo ovako:

$('a.nekilink ').mouseenter(function () {
	$(this).fadeIn(/* this:hover */);
	});
$('.a.nekilink').mouseleave(function () {
	$(this).fadeOut(/* nazad na početko stanje */);
	});

apazinjan · Novembar 5, 2013, 9:58pm

Ne treba ti za to jQuery, mozes koristiti ovaj css:

a {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

nemes1s · Novembar 5, 2013, 10:14pm

E hvala puno. Sad sam napravio za thumbnaile s jqueryjem taj efekt. Po tvojem mišljenju, koje je bolja praksa?

apazinjan · Novembar 5, 2013, 10:19pm

Ako radis css3 efekte sa css-om radit ce na svim modernim browserima i IE 10+, ako radis sa jQuery-em animacije radit ce na svim browserima.
S druge strane css animacije imaju puno bolje performanse tako da ti je moj savjet ako su animacije samo “animacija radi” da to napravis sa css-om.

nemes1s · Novembar 5, 2013, 10:29pm

Ok, hvala puno, stvarno si mi pomogao