Tomasz Krzak

Tomasz Krzak spragniony zmian

Temat: ilość elementów zależna od szerokości okna

Mam taki przypadek: wyświetlam na stronie kilka elementów, wypełniających jedną linię. Klikając button można załadować następną linię, i następną, i tak do wyświetlenia wszystkich elementów (ot, taki przykład load more jak w twitterze) - kod poniżej.
Szerokość elementów uzależniona jest od szerokości okna (media queries). Jednak przy mniejszych szerokościach w jednej linii mieści się mniej elementów, przez co niektóre przechodzą do następnej linii. Jak zrobić, aby można było uzależnić ilość elementów ładowanych przez skrypt w zależności od aktualnej szerokości okna (definicja vis = x)?


var vis = 5;
$('.mask').slice(vis).hide();
var $more = $('<a href="#" id="load">Zobacz więcej</a>')
$more.click(function(e){
e.preventDefault();
$('.mask').removeClass('stoker');
$('.mask:hidden').slice(0,vis).addClass('stoker').slideDown(500, function() {
$('html, body').animate({
scrollTop: $('.stoker').offset().top -55
});
}
);
if($('.mask:hidden').length == 0)
$more.hide();
});
$('.folio').after($more);

Temat: ilość elementów zależna od szerokości okna

Hmmm...

Badasz szerokość kontenera do którego wstrzykujesz elementy? Pobierz szerokość, dodaj przez css('width', xxx) a wstrzykiwanym elementom nadaj float left.

Jak uzależnić ilość elementów w zależności od szerokości strony? Podczas fetcha w ajaksie na pewno znasz szerokość jednego elementu. Mam nadzieje, że każdy ma taką samą szerokość.

Iterując sumuj szerokości sumAll = sumAll + elementWidth oraz zwiększaj zmienną i. Do czasu aż sumAll nie przekroczy szerokości kontenera, o którym piszę akapit wyżej pobierz i elementów przekazując to jako limit do zapytania bądź jakkolwiek inaczej... :-)
Tomasz Krzak

Tomasz Krzak spragniony zmian

Temat: ilość elementów zależna od szerokości okna

Czy będzie to miało również zastosowanie gdy wielkość elementu będzie procentowa? Szerokość kontenera będzie zmienna, natomiast w pewnym zakresie szerokości (queries) szerokość elementu będzie stała. Czyli teoretycznie muszę sprawdzić dwie zmienne. Jakaś wskazówka jak to zrobić (tzn. jak ugryźć te dwie zmienne)?
Jacek Kozioł

Jacek Kozioł Web Developer,
Webmaster

Temat: ilość elementów zależna od szerokości okna

Przy zapytaniu sprawdzaj jaką szerokość posiada kontener do którego chcesz ładować treści,dziel przez szerokość (z uwzględnieniem marginów i paddingów) pojedynczego elementu który ma zostać załadowany o ile wszystkie ładowane elementy mają taką samą szerokość, i iloraz tego przekazuj jako parametr podczas pobierania elementów.

Następna dyskusja:

sortable - powiązanie ele...




Wyślij zaproszenie do