konto usunięte

Temat: [jQuery] zmiana wysokości - problem

Cześć,

Postaram się najkrócej jak umiem.
Są dwa divy. Jeden nazywa się "gal" i w nim zmienia się treść, drugi nazywa się "bggal", jest większy od "gal", ma nadaną przezroczystość i służy jako ładny border. "Gal" nie ma ustalonej wysokości w css (=auto) więc dopasowuje się ona do treści która aktualnie jest w divie.

Kliknięcie na przycisk nr 1 powoduje wyświetlenie w "gal" treści i wtedy wysokość jaką "gal" osiąga jest równa 500px. Kliknięcie w przycisk nr 2 powoduje wyświetlenie większej objętościowo treści i wtedy wysokość jest równa 1000px.

"Bggal" zawsze ma wysokość równą "gal + 40px".

Problem:
Jak w zależności od wysokości "gal" zmieniać wysokość "bggal"?

Wymyśliłem więc taką konstrukcję:

$("#cośtam").click(function(){
wys = $("#gal").css("height");
wys = wys.slice(0,-2);
wys = parseInt(wys) + 40;
$("#bggal").css("height", wys);});

Całość działa idealnie pod warunkiem, że treści jest na tyle mało, że mieści się ona na jednym ekranie i nie trzeba przewijać. Problem pojawia się w momencie, kiedy treści jest za dużo na jeden ekran. Wtedy wysokość "bggal" zawsze jest mniejsza od "gal" o kilkadziesiąt px lub wynosi dokładnie tyle ile podczas wyświetlania tej krótszej treści. Podejrzewam, że ma to związek z szybkością wykonywania się skryptu.

Wymyśliłem więc, żeby powyższy kod wywalić do osobnej funkcji changeHeight() a w jego miejsce wstawić:
setInterval("changeHeight()",1);

Efekt? Nie pytajcie mnie dlaczego, ale działa (prawie) wyśmienicie. Prawie, dlatego że rodzi się problem z internet explorerem 7. Otóż kod funkcji wygląda tak:
function changeHeight(){
wys = $("#gal").css("height");
wys = wys.slice(0,-2);
wys = parseInt(wys) + 40;
[B]$("#bggal").css("height", wys);[/B]
}

Explorerowi nie pasuje $ w pogrubionej linijce. Pisze "invalid argument" i nie przestaje wykonywać skrypt.

Ściągnąłem ichni debugger, którego użycie skutkuje tym, że pokazuje mi gdzie jest błąd (w kodzie jquery.js) i zawiesza zarówno siebie jak i przeglądarkę.

Any ideas?

konto usunięte

Temat: [jQuery] zmiana wysokości - problem

A może inaczej - czy ktos zna szybki sposob na odczytanie wysokosci danego DIV i wpisanie jej+40 jako wysokosci innego?
Kamil Lewandowski

Kamil Lewandowski profesjonalny opis
:)

Temat: [jQuery] zmiana wysokości - problem

Jeżeli dobrze zrozumiałem, to masz problem analogiczny do mojego, który rozwiązałem tak: http://camikazee.com/overflow/overflow.html

konto usunięte

Temat: [jQuery] zmiana wysokości - problem

Dzięki, ale to chyba nie to :) Albo nie ogarniam już, bo nie śpię od 40 godzin...

Chodzi o to, że jest Div1 i Div2. Div1 ma zmienna wysokosc, a pytanie brzmi: jak sprawic, zeby Div2 mial wysokosc rowna Div1+40?

aaa = $("#div1").css("height");
$("#div2").css("height",aaa+40);

Oczywiscie powyzszy kod nie ma prawa dzialac, ale pokazuje obrazowo o co mi chodzi.

Ciekawostka jest tez, ze powyzszy kod nie zadziala jesli wsadze go w $("costam").click(function(){ .... }); natomiast jezeli w w/w wywolam zewnetrzna funkcje (zapisana poza $(document).ready) z tym kodem to dziala jak nalezy!Janek Kowalski edytował(a) ten post dnia 14.12.08 o godzinie 11:04

konto usunięte

Temat: [jQuery] zmiana wysokości - problem

Nie używaj właściwości css height, tylko wbudowanych funkcji do pobierania takich wartości jak wysokość, szerokość, czy pozycja na ekranie. Służy do tego plugin dimensions. Od wersji 1.2.6 jest on wbudowany w jądro jQuery. Więcej info znajdziesz pod adresem http://brandonaaron.net/docs/dimensions/
Kamil Lewandowski

Kamil Lewandowski profesjonalny opis
:)

Temat: [jQuery] zmiana wysokości - problem

Odnośnie mojego przykładu, pobierasz wysokość diva $("#div1").height() i dalej jak zapisałeś dodajesz do niej 40 i przypisujesz dla diva drugiego $("#div2").css("height",$("#div1").height()+40), tylko wszystko w stylach CSS musi być dobrze "zbudowane".

konto usunięte

Temat: [jQuery] zmiana wysokości - problem

Ponownie dzieki za odpowiedz.
Korzystalem juz z .height() i chyba nawet opisalem moje wrazenia :) Krótko - nie działa.

Wytlumacze moze jeszcze lepiej jak to wyglada.

Na stronie mam przycisk But_1 ktorego klikniecie powoduje:
- pojawia sie Div1
- na Div1 wskakuje div_tekst_1
- ustalamy wysokosc div1 przez .height() i wedle niej wys. warstwy z tlem - div2

Na div1 oprocz tresci mam przycisk But_2, ktorego klikniecie powoduje:
- znikniecie div_tekst_1 (ta warstwa znajduje sie na div1)
- pojawienie sie w tym miejscu div_tekst_2.
W zwiazku z tym zmienia sie wysokosc div1. Niestety div_tekst_2 to conajmniej dwa razy wiecej tekstu, wiec wysokosc ulega zmianie rowniez (prawie) dwukrotnie.

Efekt jest taki, ze przegladarka (obojetne Opera, FF czy IE7) nie potrafi ponownie odczytac wysokosci div1 i po wywolaniu $("#div2").css("height",$("#div1").height()+40); ustawia wysokosc na taka jaka byla poprzednio (tj gdy na warstwie byl tekst_1).

Jest to dla mnie o tyle dziwne, ze staram sie odczytac wysokosc juz po zaladowaniu warstwy, juz po tym jak div1 ma inna wysokosc, i w zupelnie innym zdarzeniu (klikniecie innego przycisku) wiec de facto przegladarka nie powinna pamietac jaka wysokosc diva byla wczesniej, tylko ustalic nową. Nie robi tego.

Edit: nagralem filmik jak to wyglada :)
Link: http://www.voila.pl/020/9005g/
Chodzi o to jak wyglada te blade tło w 9 - 10 sekundzie filmu :)Janek Kowalski edytował(a) ten post dnia 14.12.08 o godzinie 13:11

Następna dyskusja:

Problem z jquery toggle




Wyślij zaproszenie do