Ajax Chat - wysuwany slider na forum

Założony przez Zmarszczak.

wersja skryptu MyBB: 1.6.6 (na razie nie aktualizuję, bo i tak nie mam użytkowników, stronę robię dla nauki)
adres forum: http://www.grywus.y0.pl/forum
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):
Chciałbym na mojej stronie dodać wysuwany slider z ajax chatem, który pokazywałby się po najechaniu na niego myszką wysuwał się i chował jak się "zjedzie myszką". Chodzi o coś takiego jak jest tu na blogu (facebook i twitter), ale szersze i z ramką ajax chata. Szukałem poradników, ale nie znalazłem dużo ciekawych rzeczy, a i tak mi nie działały. Jeśli potrzebne są jakieś grafiki jestem w stanie to sobie zrobić. Samą ramkę też mogę umieścić w divie. Czy jest ktoś w stanie mi pomóc?
TaniDedyk.pl
http://api.jquery.com/animate/
http://www.electrictoolbox.com/jquery-relative-move-div-left-right/
http://docs.jquery.com/UI/Effects/Slide
http://api.jquery.com/category/effects/sliding/
:: Akcja DZIĘKUJĘ ZA POMOC ::
Pomocy udzielam jedynie na forum. Wszystkie rzeczy wykraczające poza tą dziedzinę wykonuję odpłatnie.
Niestety, ale nie rozumiem tych poradników. Zamiast tego znalazłem taki:
http://websta.pl/tutoriale/jquery-wysuwany-boczny-panel-menu
Niestety on mi jednak nie działa. Pojawia się:
[Obrazek: scaled.php?server=826&filename=obraz000.png&res=landing]
Znika welcomeblock i pojawia się w tym divie.
Na razie postanowiłem zrobić to co kazali, bez wstawiania chatu.
1. Dodaję w szablonie index w head

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
$(function(){

$("#panel").css("left","-220px");

$(".slide_button").toggle(function(){

$("#panel").animate({left: "0px"}, 500 );
$(this).addClass("zamknij");
return false;
},
function(){
$("#panel").animate({left: "-220px"}, 500 );
$(this).removeClass("zamknij");
return false;
});

});
</script>


<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

<style type="text/css">

#panel{
background: #223344;
padding: 10px;
width: 200px;

position: fixed;
margin-top: -100px; /*połowa wysokości panelu w górę */
left: 0px;
top: 50%;
}

ul#main_menu{
list-style: none;
}

#main_menu a{
color: #ffffff;
text-decoration: none;
}

#main_menu a:hover{
text-decoration: underline;
}

.slide_button{
background: http://websta.pl/wp-content/uploads/2009/05/przycisk.gif;
display: block;
height: 60px;
text-indent: -9999px;
width: 20px;

position: absolute;
right: -20px;
top: 0px;
}

.zamknij{
background-position: -20px 0px;
}

a:focus {
outline:none; //usuwanie niebieskiej obwódki w FF
}
</style>

2. Zamieniam w szablonie index:

<html>

na:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">

3. Dodaję W szablonie diva:

<div id="panel">
<ul id="main_menu">
<li><a href="http://grywus.y0.pl/forum/">Strona główna</a></li>
<li><a href="http://grywus.y0.pl/index.php/kontakt/">Kontakt</a></li>
</ul>
</div>

http://api.jquery.com/jQuery.noConflict/ - Konflikt!
Nie zrozumiałem jak naprawić problem z konfliktem, ale za to skorzystałem z wpisu w wiki, a właściwie z jego dyskusji:
https://mybboard.pl/thread-16029.html?highlight=facebook%2bslider
Zrobiłem własne tło, pobawiłem się padding'iem i wysokościami i jest świetnie.
Jest w tym jeszcze jeden problem: kiedy po załadowaniu strony rozwinę slider kliknięciem i schowam z powrotem, to muszę kliknąć 2 razy, żeby go rozwinąć. Nie jest to duży problem, ale jak ktoś by wiedział jak to zrobić, to byłoby fajnie :).
Niestety tu też pojawił się problem z konfliktem :(. Wywala edytor postów. Dopiero teraz to zauważyłem. Dodałem do skryptu:
Kod:
<script type="text/javascript">
  $.noConflict();
</script>
Ale to blokuje z kolei skrypt slidera. Co robić? Help!
Zamień $ na jQuery
:: Akcja DZIĘKUJĘ ZA POMOC ::
Pomocy udzielam jedynie na forum. Wszystkie rzeczy wykraczające poza tą dziedzinę wykonuję odpłatnie.
Podziękowali: Zmarszczak


Użytkownicy przeglądający ten wątek:

1 gości