Płynnie powiększany DIV Opcje

[PcPablo]

[HTML] pobierz, plaintext 
function rozwijanie(nazwa,wys) {
	var divwys;
	divwys = document.getElementById(nazwa);  
	divwys.style.height = wys;
}
 
function wysokosc_over(nazwa) {
	var wys = 40;
	setInterval ('rozwijanie()',50);
	do {
		rozwijanie(nazwa,wys);
   		wys=wys+2;
	} while (wys <= 140);
}
[HTML] pobierz, plaintext 

Napisałem taką funkcje, która ma zwiększać płynnie wysokość DIVa po najechaniu na niego, ale nie działa to jak należy.

W IE nie działa setInterval(), czyli wysokość przeskakuje z od razu z 40 do 140,
W FF w nie działa sama zmiana wielkości i wywala zapętlony błąd:

Ostrzeżenie: Błąd podczas przetwarzania wartości dla 'height'. Deklaracja opuszczona.
Plik źródłowy: .../index.htm
Wiersz: 0

Co jest źle?

[Czadus]

<div id="test"></div>

do tego prosta funkcja napisana z wykorzystaniem jQuery

$("#test").animate({"height":"200px"});

na funkcji może wyglądać to np. tak:

function rozwijanie(nazwa,wys) {
$("#"+nazwa).animate({"height":wys+"px"});
}

Mam nadzieję, że to pomoże

[230005]

Źle, źle, wszystko źle . Zacznijmy od tego, że nie podałeś warunku przerwania dla funkcji rozwijanie więc to wywołanie w setInterval() nigdy się nie kończy. Po drugie, zrobiłbym raczej coś w tym guście:

[JAVASCRIPT] pobierz, plaintext 
 
function expand(id, tempHeight) {
  var elem = document.getElementById(id);
 
  if(parseInt(elem.style.height) >= 340) {
    clearInterval(interval);
    return;
  }
 
  tempHeight = parseInt(elem.style.height) + 2;
  elem.style.height = tempHeight + 'px';
}
 
window.onload = function() {
  interval = null;
  var tempHeight = 0;
  var id = 'twoje id';
  var elem = document.getElementById(id);
 
  elem.onmouseover = function() {
    interval = setInterval('expand(' + id + ', ' + tempHeight + ')', 50);
  }
 
  elem.onmouseout = function() {
    clearInterval(interval);
  }
}
 
[JAVASCRIPT] pobierz, plaintext 

jQuery upośledziło moją znajomość js więc nie krzycz jak będą jakieś błędy - w końcu jesteś programistą, to i powinieneś umieć je wychwycić, a sam algorytm jest dobry . Po trzecie, tak jak zaproponował kolega wyżej - możesz to zrobić właśnie w jQuery:

[JAVASCRIPT] pobierz, plaintext 
 
$("#test").animate({"height":"200px"}, 50); //drugi argument to interwał
 
[JAVASCRIPT] pobierz, plaintext 

ps.

W IE ci nie działało, bo nie miało prawa - przecież najpierw wywołujesz funkcję bez argumentów, więc tak na prawdę ona nic nie robi i w dodatku trwa to bez końca. Potem wywołałeś pętlę, a one działają błyskawicznie i dlatego właśnie wysokość ci przeskoczyła, zamiast płynnie się zmieniać. W FF było inaczej, bo to inna przeglądarka więc i silnik js wygląda nieco inaczej. A w ogóle, to w takich wypadkach polecam zapisać sobie na kartce co robi napisany przez siebie skrypt - prześledzić krok po kroczku, gdzie w danym momencie się znajdujemy. Mi to zawsze pomaga...

EDIT:

Nie wiedziałem do jakiego stopnia zapomniało mi się javascriptu dopóki nie przetestowałem tego co napisałem wcześniej, ale teraz już musi działać .

Ten post edytował 230005 26.12.2009, 20:22:11

[PcPablo]

No świetnie działa! nawet nie widziałem o istanieniu jQuery.

Narazie działa jak bezpośrednio wywołam to w onmouseover, ale jak wrzuce w funkcje JS i wywołam tą funkcje poprzez onmouseover:

[HTML] pobierz, plaintext 
<div class="menu_item" id="link1" onmouseover="wysokosc_over('link1')" onmouseout="wysokosc_out('link1')">
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
function wysokosc_over(nazwa) {
	$(nazwa).animate({"height":"140px"}, 600);
}
[HTML] pobierz, plaintext 

...to nie działa.

[Pawel_W]

omg, jquery się kłania...

jak chcesz się odwołać do obiektu po id to przed id wstawiasz #, czyli nie

[HTML] pobierz, plaintext 
$(nazwa).animate({"height":"140px"}, 600);
[HTML] pobierz, plaintext 

a

[HTML] pobierz, plaintext 
$('#'+nazwa).animate({"height":"140px"}, 600);
[HTML] pobierz, plaintext 

[PcPablo]

Dzi, pomotało mi się. No dobra, już działa ale niezłe jajca się dzieją, zobaczcie: http://www.ikielce.pl/test/

Tej samej funkcji używam dla wszystkich pasków do powiększania i pomniejszania DIVa no i w ogóle wszystkie paski mi fruwają...

[Pawel_W]

prościej by było chyba ze slideUp i slideDown, tak jak ja mam na swojej stronie, pawelwolak.info/portfolio

ew. możesz zrobić, żeby po najechaniu wszystkim ustawiało domyślną wysokość, a temu, na który najechałeś tą docelową

EDIT:
co do Twojej strony

[HTML] pobierz, plaintext 
.bg {
	width: 100%;
	height: 100%;
	position: absolute;
}
[HTML] pobierz, plaintext 

ustawianie zwykłego obrazka jako tło strony poprzez pozycję absolutną to dosyć, hmm, nie wiem jak to nazwać - po prostu kombinujesz

od tego jest background, ew. background-image

http://www.kurshtml.boo.pl/css/tlo_obrazkowe,tlo.html

polecam

Ten post edytował Pawel_W 5.01.2010, 20:37:24