Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Ajax Chat - wysuwany slider na forum

Założony przez  Zmarszczak.

27.06.2012, 14:42
#1
wersja skryptu MyBB: 1.6.6 (na razie nie aktualizuję, bo i tak nie mam użytkowników, stronę robię dla nauki)
adres forum: 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?
28.06.2012, 12:09
#2
http://api.jquery.com/animate/
http://www.electrictoolbox.com/jquery-re...eft-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.
29.06.2012, 14:32 (Ten post był ostatnio modyfikowany: 29.06.2012, 14:42 przez Zmarszczak.)
#3
Niestety, ale nie rozumiem tych poradników. Zamiast tego znalazłem taki:
http://websta.pl/tutoriale/jquery-wysuwa...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> 
29.06.2012, 15:38
#4
http://api.jquery.com/jQuery.noConflict/ - Konflikt!
03.07.2012, 16:17
#5
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://webboard.pl/thread-16029.html?hi...k%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 :).
30.07.2012, 21:15
#6
Niestety tu też pojawił się problem z konfliktem :(. Wywala edytor postów. Dopiero teraz to zauważyłem. Dodałem do skryptu:
<script type="text/javascript">
  $.noConflict();
</script>
Ale to blokuje z kolei skrypt slidera. Co robić? Help!
06.08.2012, 19:59
#7
Zamień $ na jQuery
:: Akcja DZIĘKUJĘ ZA POMOC ::
Pomocy udzielam jedynie na forum. Wszystkie rzeczy wykraczające poza tą dziedzinę wykonuję odpłatnie.



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

2 gości