Dziś zwracam się do was z ogromną prośbą o pomoc przy skrypcie który nie działa jak powinien
Opisuję problem:
Koduję stronę metodą responsywną (zmienia się wygląd strony zależnie od szerokości ekranu, więc na różnych urządzeniach mobilnych strona wygląda inaczej) i napotkałem następujący problem: Mam skrypt, który ma mi zwijać/rozwijać DIV (coś jak opis filmików na YouTube). Początkowo DIV jest zwinięty, ale po kliknięciu w button ma się rozwinąć lub zwinąć. I to jest dość proste, ale problem mam przy zmianie układu urządzenia mobilnego.
Przykładowo:
Odpalam stronę na tablecie w pozycji poziomej, DIV się ładnie zwija i rozwija, ale jak przekręcę tablet do pionu, to tekst się zwęża, więc jest go "więcej linijek" a zatem i DIV powinien być "wyższy". Niestety skrypt pokazuje mi po rozwinięciu tylko tyle DIVa ile było potrzebne aby pokazać całość na pozycji poziomej (czyli rozwija do zczytanej wartości przy załadowaniu strony) więc DIV jest za krótki i ucina tekst.
Sytuacja odwrotna - odpalam stronę na tablecie w pozycji pionowej, obracam do poziomej i DIV nagle staje się za "wysoki" przez co poniżej tekstu jest jeszcze kawałek pustej przestrzeni.
Prośba:
Bardzo proszę o pomoc w zmodyfikowaniu poniższego mojego kodu, aby działał on zgodnie z moimi wymaganiami
Chodzi o to by przy zmianie szerokości okna przeglądarki, zmieniała się wartość zmiennej, która przetrzymuje wysokość całego DIVa.Kod
// ROZWIŃ / ZWIŃ
var slideHeight = 35; //wysokość rozwiniętego DIVa
var defHeight = $('div.descryption').height(); // wysokość całego DIVa
var more = document.getElementById('more'); // wykrycie buttona do rozwijania/zwijania
if (defHeight >= slideHeight)
{
$('div.descryption').css('height' , slideHeight + 'px');
more.innerHTML = 'więcej';
$('a#more').click(function()
{
var curHeight = $('div.descryption').height();
if(curHeight == slideHeight)
{
$('div.descryption').animate(
{
height: defHeight
}, 'normal');
more.innerHTML = 'mniej';
}
else
{
$('div.descryption').animate(
{
height: slideHeight
}, 'normal');
more.innerHTML = 'więcej';
}
return false;
});
}
var slideHeight = 35; //wysokość rozwiniętego DIVa
var defHeight = $('div.descryption').height(); // wysokość całego DIVa
var more = document.getElementById('more'); // wykrycie buttona do rozwijania/zwijania
if (defHeight >= slideHeight)
{
$('div.descryption').css('height' , slideHeight + 'px');
more.innerHTML = 'więcej';
$('a#more').click(function()
{
var curHeight = $('div.descryption').height();
if(curHeight == slideHeight)
{
$('div.descryption').animate(
{
height: defHeight
}, 'normal');
more.innerHTML = 'mniej';
}
else
{
$('div.descryption').animate(
{
height: slideHeight
}, 'normal');
more.innerHTML = 'więcej';
}
return false;
});
}