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…
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.
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');
}
}
});
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');
Zar mi neće onda maknuti i class .thumbnail?
Nisam previše upoznat s .attr();
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
Aha, nisam ni skužio da mi gore piše thumbnail…
Hvala 
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?
Daj mi kod koji trenutno imas.
$(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…
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');
}
}
}
1 Like
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…
Nisam sto posto siguran sto mislis, mozes malo pojasniti?
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 */);
});
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;
}
1 Like
E hvala puno. Sad sam napravio za thumbnaile s jqueryjem taj efekt. Po tvojem mišljenju, koje je bolja praksa?
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.
3 Likeova
Ok, hvala puno, stvarno si mi pomogao
