Rozwijany element z prawej strony ekranu

Dla specjalistów Webmastering
#1

Witam wszystkich bardzo serdecznie!

Jestem w tych tematach zielona, więc proszę o wyrozumiałość :mrgreen:.

Szukam czegoś takiego, że z prawej strony mamy obrazek (lub po prostu przycisk) (1), a jak na niego klikniemy, rozsuwa się zawartość (chodzi mi tutaj o czat) (2).

3023vqp.png

Robię to po to, by lepiej korzystać z czatu :wink:

Jest takie coś możliwe? Byłabym bardzo wdzięczna! :smiley:

(przepraszam za duże zdjęcie)

#2

A do jakiego czatu?

#3

Zobacz sobie jak to jest tutaj zrobione - http://michalmleczko.waw.pl/allegro-slideout-comments/ - rozwijany panel komentarzy z allegro co prawda, ale można tam wsadzić cokolwiek.

#4

Więc znalazłam kod na jakiejś stronie, wystarczyło go skopiować i zamienić czat na własny. Problem jest jednak taki - pomimo dodania do kodu specjalnych skryptów (nie znam się, siostra zrobiła), dodania animacji, czat nie chce się rozwijać, zsuwać. Kod poniżej:

<div style="width: 230px; height: 390px; position: fixed; top: 150px; left: 0px; padding: 11px 0px 0px 11px; z-index: 300; background-image: url(&quot;http://i58.tinypic.com/slkyti.jpg;); background-repeat: no-repeat;" id="ChatangoWnd" onclick="toggleChatangoWnd()"><iframe src="http://st.chatango.com/h5/gz/r0401151557/iF.html?cid=0010000041709336728&amp;b=100&amp;c=666666&amp;d=2B2B2B&amp;f=46&amp;j=333333&amp;k=666666&amp;l=999999&amp;s=1&amp;ref=http://lazurowafedora.blogspot.com/&amp;grpnm=mietowylinux" id="bd67640010000041709336728" frameborder="0" height="330px" width="185px"></iframe><script async="" style="width: 185px; height: 330px;" src="http://st.chatango.com/js/gz/emb.js" id="cid0010000041709336728_">{"handle":"mietowylinux","styles":{"b":100,"c":"666666","d":"2B2B2B","f":46,"j":"333333","k":"666666","l":"999999","s":1}}</script><script src="http://www.googletagservices.com/tag/js/check_359604.js" type="text/javascript" async=""></script><iframe style="visibility: hidden; display: none;" src="http://tpc.googlesyndication.com/safeframe/1-0-2/html/container.html"></iframe><div id="sid0010000041709336728_"></div></div>

<script>
function toggleChatangoWnd()
{
	if (parseInt($("#ChatangoWnd").css("left"))!==0) $("#ChatangoWnd").animate({left:"0px"}, 700);
	else $("#ChatangoWnd").animate({left:"-211px"}, 700); 
}
 
</script>

Zawsze możecie wypróbować go tutaj (klik), jednak musicie usunąć poprzedni kod i wkleić ten powyżej. Wysłałam ten kod (nie)informatykowi, jednak ten powiedział, że jest niepoukładany. Powinien wyglądać mniej więcej tak, jak tu.

Jakieś inne pomysły? :smiley:

#5

Neukrate Podaj link do strony z problemem lub wklej gdzieś jej kod.

#6

 

(klik)