[js] eleganckie wysuwanie się diva Opcje

[sweter]

Mam taki link:

Kod

<a href="#" onclick="document.getElementById('zmiana_avarta').style.display='block'">Zmień</a>

Po kliknięciu na ten link nowy div nagle pojawia się, a ja bym chciał, aby on się elegancko wysunął.
Możecie wyjaśnić jak to zrobić?

[wookieb]

http://docs.jquery.com/Effects
Dział sliding

[sweter]

Kurczę, nie bardzo wiem, jak tę funkcje podłączyć. (IMG:http://forum.php.pl/style_emoticons/default/sadsmiley02.gif)
Możesz wyjaśnić?
W HEAD'zie strony mam:

Kod

<script src="http://code.jquery.com/jquery-latest.js"></script>
   <script>
   $(document).ready(function(){
     $(document.body).click(function () {
       if ($("div:zmiana_avarta").is(":hidden")) {
         $("div").slideDown("slow");
       } else {
         $("div").hide();
       }
     });
   });
   </script>

A wysuwany fragment strony wygląda tak:

Kod

<a href="#" onclick="document.getElementById('zmiana_avarta').style.display='block'">Zmień</a>
      

         <div id="zmiana_avarta" style="padding:5px; display:none; border-style:solid; border-width:1px; border-color:#5599FF">
           zmiana avarta
         </div>

[wookieb]

Kod

<script src="http://code.jquery.com/jquery-latest.js"></script>

Tak cięzko bylo zassac na wlasny dysk i includowac z dysku?

http://docs.jquery.com/Selectors
Click do BODY (?!?!)?

Ten post edytował wookieb 4.02.2009, 22:06:00

[Agape]

a przepraszam ze w tym temacie, ale nie ma sensu zakladanie nowego ... a jak to zrobic, BEZ uzycia zadnej biblioteki ajax? Mam strone, i potrzebna jest mi TYLKO ta funkcja, napewno dasie to zrobic, skoro da sie przez biblioteke niestety nie moge od dluzszego czasu zanlezc sposobu ;/ podpowie ktos? albo napisze skrypt.

Probowalem kiedys zrobic to przez zmniejszanie/zwiekszanie wysokosci elementu, ale w IE nie dziala funkcja ktora pobiera wysokosc elementu gdy nie jest podany przez uzytkownika (np w CSS).

Ma ktos pomysl jak to zrobic recznie?

[wookieb]

A umiesz napisac skrypt do animacji?
Pobieranie wyspokosci diva...

Kod

element.offsetHeight;

[Agape]

mysle ze mozna zrobic to tak:
zakladamy ze element jest "widoczny" jako zwiniety,
*ustawiamy w css visibility na hidden (nie display bo nie pobierze nam wysokosci czegos co nie jest wyswietlane a tego co jest niewidoczne tak)
*pobieramy wysokosc
*ustawiamy wysokosc na interesujaca nas czyli chyba 0 tak zeby wogole nie bylo widac elementu
*ustawiamy visible na normal

to oczywiscie w skrypcie js w body onload, a przy checi wyciagniecia elementu
*ustawiamy wysokosc na np 4 bo mysle ze tak bedzie bardziej elegancko niz od zera gdy widzi sie ze border top i border bottom sie stykaja
*ustawiamy (juz wczesniej) jakis parametr, albo czas wysuniecia albo postep. Ja np potrzebuje tego drugiego bo mam niski element
*ustawiamy skrypt do obliczania, poczatkowa wartosc wysokosci 4, i niech co zmienna postep podbija wysokosc o tez juz wczesniej okreslony parametr wielkosci postepu, tak wiec co jakis czas, powiedzmy co 10 milisekund obiekt bedzie "rosl" o powiedzmy 2px.

Przykladowo mamy obiekt height:600px a 1000ms to 1s, czyli obiekt rozwinie sie nam w
600/2-4=296 ale zaokraglijmy do 300 cykli
jeden cykl trwa 10ms czyli wychodzi nam 3000ms czyli 3 sekundy

Dane sa tylko przykladowe, taka jest moja teoria (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg) . Tylko jest jeden problem, gdy wezmieny na visibility: hidden element bedzie zajmowal okreslone miejsce na stronie,i jak jest np to element menu, w srodku innych elementow menu, niedoskonalosc bedzie widoczna ;/

Moze ktos ma wiecej kreatywnosci ?;/ Jak to mozna inaczej zrobic zeby nie bylo widoczne ?:|
Sam napisalem wysokosc elementu, ale prawde mowiac chodzi mi o moment gdy nie znamy wysokosci, czyt. gdy nie jest wpisana w CSS bo np, jest dynamiczna, zmienia sie

Ok juz wiem, CHYBA nie da sie zrobic tego bez okreslonej wysokosci w CSS, rozwiazanie na http://www.harrymaugans.com/2007/03/06/how...s/#slideexample mysle ze mozna z niego napisac swoj skrypt.

Ten post edytował Agape 21.02.2009, 13:00:47