Okno zwijane i rozwijane z belką, Howto do it? any ideas? Opcje

[v3n0m]

Czołem! Zawracam się do Was o młodzi, dzielni, ambitni programiści!
Mam pytanie. Jak zrobić coś takiego, co pokażę za chwilę na zrobionych przeze mnie rysunkach. Otóż sprawa wygląda następujaco. Chciałbym mieć takie pole z treścią na stronie, którą można zwinąć, tak by dana treść nie była widoczna, ale gdy ktoś kliknąłby w odpowiedni przycik, okno by się rozserzyło i wiadomość byłaby widoczna. Widziałem ten efekt na paru stronach internetowych, więc mam nadzieję, że to wogóle jest możliwe do wykonania. Przejdźmy zatem do wizualizacji mojej wizji (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

(IMG:http://img455.imageshack.us/img455/4185/zwiniete5kq.gif)
Rysunek ten przedstawia belkę takowego okna. W czerwonym okręgu wyszczególniłem przycik, na który użytkownik klika i kolejno następuje oto nstępujący efekt:

(IMG:http://img455.imageshack.us/img455/7770/rozwiniete8ba.gif)
czyli rozwinięcie się treśći. Nie chodzi mi o animację, tylko poprostu o roszerzenie się takowego okna w dół. Mam nadzieję, ze ktoś mnie zrozumiał i wie jak mi pomóc. Jeśli nie bedziecie jeszcze wiedzieć o co mi chodzi to mogę wykonać animację.

Liczę na was. Z góry dziękuję za wszystkie odpowiedzi. Pozdrawiam.

[mike]

A powiedz mi jaki to a związek z php?
Odpowiem Ci: Żaden

Przenoszę na Po stronie przeglądarki

P.S.
Zobacz tutaj: Rico effects

[v3n0m]

LOL, myślałem, ze to jest w php napisane. Skoro mówisz że nie php to w czym?

[mike]

php nie ma zadnego związku z przeglądarką, to co widzisz to zasługa (X)HTML'a, CSS, JS, i rzeczy działających po stronie klienta

A php ma "tylko" za zadanie żebyś coś zobaczył, a to jak to zobaczysz to zasługo powyższych.

Zerknij na link, który dopisałem do swojego posta powyżej.

[v3n0m]

@mike_mech bardzo Ci dziękuję za szybką odpowiedź. Link który mi dałeś sprawdziłem i znalzłem połowicznie to, czego szukałem. Mianowicie, na tej stronie ktoś podaje przykłądy różnych kodów i efekt o który mi chodzi jest wtedy gdy kliknie się np na code czy na explanation. Nie ma natomiast wyjaśnione jak ten efekt uzyskac. I still need help (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

Ten post edytował v3n0m 17.01.2006, 23:30:34

[mike]

Oki, przepraszam tamten link nie był do końca precyzyjny, choć w zamyśle miał Cie doprowadzić do tego:
Combination Effects Demo

Poklikaj na stronie a znajdziesz download i przykłady jak używac róznych efektów tak prezentowanych (Ciebie interesuje chyba najbardziej efekt BlindDown i BlindUp)

[v3n0m]

O!! Dziękuję Ci bardzo. Jestem już coraz bliżej celu. Faktycznie chodzi o efekt BlindDown i BlindUp. Ściągnąłem już scriptaculous-js-1.5.1.zip, ale w javascripcie jestem totalnie zielony. Mógłbys mi pomóc? Byłbym wielce zobowiązany.

[dragomir]

mysle ze w Twoim wypadku, kiedy potrzebujesz prostego skryptu do rozwijania okna, najlepiej bedzie po prostu napisac funkcje w js zmieniajaca parametr "display" danego elementu, cos w stylu:

Kod

function shBlock(id) { var item; item = document.getElementById(id);
if (item.style.display == 'none') {item.style.display = 'block';} else { item.style.display = 'none'; } }

wstawiasz sobie cos takiego w sekcji <script>, tworzysz div'a (badz inny element) ktory ma sie pojawiac i znikac oraz linka (tekstowy, obrazek, cokolwiek), div'owi nadajesz jakies id a linkowi przyporzadkowujesz href="java script:shBlock(id_tego_diva);" cala filozofia.

//edit: jesli chcesz zeby div nie byl widoczny na poczatku to oczywiscie nadajesz mu w css display: none;

Ten post edytował dragomir 17.01.2006, 23:57:40

[v3n0m]

@dragomir Bardzo Ci dziękuję za napisanie kodu. Zrobiłem wszystko tak jak mówiłeś ale nie działa, chyba coś robię nie tak. Mam prośbę. Podaję link do tego co zrobiłem. Gdybyś to mógł przejrzeć i poprawić moje błędy. Byłbym bardzo wdzięczny.

http://apaulo.hopto.org/emes/rozwijanie.zip

Ten post edytował v3n0m 18.01.2006, 00:16:58

[FiDO]

Przy wywolywaniu funkcji shBlock ID elementu musisz podac w apostrofach, a nie bez niczego.

[v3n0m]

Jeeeeeeest! Mam to, czego chciałem, chowa się i pojawia po kliknieciu na link (IMG:http://forum.php.pl/style_emoticons/default/biggrin.gif) Rzeczywiście pomogła modyfikacja linka na

Kod

<A href=javascript:shBlock("jakiesid");>link</a>

Mam jeszcze pytanie. Jak zrobić, żeby ten blok był na początku niewodoczny?? Ktoś coś chyba mówił o css ale nie wiem jak to zrobić. Cssa mogę stworzyć, ale co w nim napisać? Dziękuje wszystkim za poświęcony czas.

Ten post edytował v3n0m 18.01.2006, 09:23:06

[mike]

~v3n0m troche zaczynasz przesadzać z tym brakiem samodzielności. (IMG:http://forum.php.pl/style_emoticons/default/mad.gif)
Przecież ~dragomir Ci napisał: "jesli chcesz zeby div nie byl widoczny na poczatku to oczywiscie nadajesz mu w css display: none;"

[v3n0m]

PRzepraszam, Mikemech (IMG:http://forum.php.pl/style_emoticons/default/sad.gif) Chodzi mi o to, ze napisałem w cssie:

Kod

DIV.jakiesid {
    PADDING-RIGHT: 10px; PADDING-LEFT: 30px; FONT-SIZE: 12px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; FONT-FAMILY: helvetica; display: none;
}

ale i tak blok jest widoczny na początku (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)
To nie tak, ze nie jestem samodzielny, tylko jak coś robię to nigdy nei działa (IMG:http://forum.php.pl/style_emoticons/default/worriedsmiley.gif)

[mike]

Poczytaj trochę o CSS.

[HTML] pobierz, plaintext 
<style type="text/css">
div.jakiesid {
    /* element div z klasą jakiesid */
}
 
div#jakiesid {
    /* element div z identyfikatorem jakiesid */
}
</style>
[HTML] pobierz, plaintext 

[php programmer]

przyklad takiej stronki
www.karwiny.abc.pl
w dziale: ogłoszenia

Ten post edytował php programmer 18.01.2006, 09:57:16

[v3n0m]

Ok, poczytałem na wikipedii. Czyli to ma być tak?

Kod

<style type="text/css">
div.jakiesid {
display: none;
}

div#jakiesid {
display: none;
}

</style>
<A href=javascript:shBlock("jakiesid");>Pokaż / Schowaj</a><br><br>
<div align="center" id="jakiesid"><table bgcolor="#282828"" width="500" height="400"><tr><td>blablabla</td></tr></table></div>

No i działa, bo div się ukrył, ale nie chce sięjuż pojawić. Pewnie znów coś skopałem (IMG:http://forum.php.pl/style_emoticons/default/sad.gif)

Ten post edytował v3n0m 18.01.2006, 10:00:28

[php programmer]

zeby sie pojawilo..

Kod

<style type="text/css">
div.jakiesid {
display: block;
}

div#jakiesid {
display: block;
}

</style>

[mike]

Oj coś czuję że nic z tego nie bedzie, echhh.
Masz cały kod:

[HTML] pobierz, plaintext 
<style type="text/css">
div#jakiesid {
    padding: 10px 10px 10px 30px;
    font: 12px haveltica;
    display: none;
}
</style>
 
<script type="text/javascript">
function shBlock(id)
{
    var item;
 
    item = document.getElementById(id);
 
    if( item.style.display == 'none' || item.style.display == '')
    {
        item.style.display = 'block';
    }
    else
    {
        item.style.display = 'none';
    }
}
</script>
 
<a href="javascript:shBlock('jakiesid')";>link</a>
 
<div id="jakiesid">Lorem ipsum, bla bla , bla Lorem ipsum dolor sit amet</div>
[HTML] pobierz, plaintext 

[v3n0m]

Aaaa, no widzisz, teraz rozumiem gdzie robiłem błąd. Dziękuję wszystkim bardzo serdecznie za zaangażowanie, przepraszam za moje marudzenie. Pozdrawiam!