Webboard

Pełna wersja: Wysuwany panel.
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
wersja skryptu MyBB:1.6
adres forum:rebelia-allods.cba.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu):

Witam
Chciałabym stworzyć wysuwane boczne menu, ale takie, które wysunie sie gdy najadę na nie myszką. Użyłam porad z tego tematu https://webboard.pl/thread-18127.html Jednak nie chcę aby pojawiał się tam facebook tylko to:
Kod PHP:
<div id="ts3viewer_990816" style="width:; background-color:;"> </div>

<
script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>

<
script type="text/javascript">
<!--
var 
ts3v_url_1 "http://www.tsviewer.com/ts3viewer.php?ID=990816&text=000000&text_size=12&text_family=1&js=1&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=525284&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=525284&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=525284&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=525284&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1990816100);
-->
</
script


Jest to kod wygenerowany ze strony tsviewer.com. Moje pytanie jest teraz takie: co muszę zrobić żeby zamiast facebook'a mieć tam ten serwer z tsviewer ?
CSS:
Kod:
#ts
{
    width:272px;
    height:370px;
    position: fixed;
    top: 300px;
    right: -240px;
    overflow: hidden;
    z-index:999;
}


Header:

Kod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
    <script type="text/javascript" src="http://click-jpa-demo.googlecode.com/svn-history/r12/trunk/war/click/prototype/effects.js"></script>
<script type="text/javascript">
    var animating = false,
        effect_in = false,
        effect_out = false;
        
    Event.observe(window, 'load', function()
        {
            Event.observe($('ts'), 'mouseover', function()
            {
                if( typeof effect_out == 'object' )
                {
                    effect_out.cancel();
                }
                effect_in = new Effect.Morph('ts',
                    {
                        style: {
                            right: '0px'
                        },
                        transition: Effect.Transitions.spring
                    }
                );
            });
            
            Event.observe($('ts'), 'mouseout', function()
            {
                
                if( typeof effect_in == 'object' )
                {
                    effect_in.cancel();
                }
                effect_out = new Effect.Morph('ts',
                    {
                        style: {
                            right: '-240px'
                        },
                        transition: Effect.Transitions.spring
                    }
                );
            });
        }
    );
</script>

I do szablonu:

Kod:
<div id="ts">
    Tutaj Twój kod.
</div>

Mogą być błędy bo robione na szybko, idę na obiad. Poprawie jak wróce.
Bardzo dziękuję wszystko działa, ale chciałabym, aby panel z ts'em wysuwał się po najechaniu na obrazek a do tego czasu cały był ukryty - tak jak jest to w przypadku facebooka oraz by znajdował się niżej, bo teraz gdy najadę na ts wysuwa się i facebook. Przy fb mam taki kod na obrazek:

Kod PHP:
#facebook iframe 

    
floatleft


#facebook img 

    
floatleft
    
cursorpointer


oraz dodane
Kod PHP:
<img src="images/facebook_like.png" /> 

ale po zmianie tego oba przyciski ( od fb i ts) są w tym samym miejscu
One na siebie nachodzą, dlatego! Daj przy cssie ts, np top 500px. :P
Ok tylko teraz mam taki problem ze obrazek, na który po najechaniu ma wyświetlić się ts jest nad ts'em, a sam ts nie jest całkowicie schowany. Zresztą proszę zobaczyć na stronie.
Zmniejsz wartość top facebooka, a zwiększ tsa. Schować tsa możesz poprzez odjęcie od righta px.

Kod:
right: -240px;

Odejmij np. z 10. Dopasuj to sobie po prostu. Pamiętaj też o edycji jq. Jak masz z tym problemy mogę Ci to zrobić. :>
Kiedy odejmuję obrazek na który powinno się najechać przy wysuwaniu tez się cofa. Jest on u góry okna z ts'em a powinien być po lewej stronie - tak jak w przypadku facebooka.
Aaa! Zwiększ:
Kod:
width:272px;

do np. 300. W #ts.
Nadal nic, gdy zmieniam width powiększa się tylko okno w ts'ie i bardziej odstaje :D Myślę, że trzeba jakoś przesunąć obrazek do najechania - na bok ts'a, tak jak w facebooku.
No więc ja mam coś na wzór:

global.css używanego stylu:
Kod PHP:
#nazwa

    
width"szerokość całej ramki wraz z obrazkiem"px
    
height"wysokość całej ramki"px
    
positionfixed
    
bottom0px;
    
right: -"tu wstawiasz szerokość samej ramki bez szerokości obrazka"px
    
overflowhidden
    
z-index:999
}

#nazwa iframe 

    
floatleft


#nazwa img 

    
floatleft;
    
cursorpointer



i


header używanego szablonu:
Kod PHP:
<script type="text/javascript"
    var 
animating false
        
effect_in false
        
effect_out false
        
    
Event.observe(window'load', function() 
        { 
            
Event.observe($('nazwa'), 'mouseover', function() 
            { 
                if( 
typeof effect_out == 'object' 
                { 
                    
effect_out.cancel(); 
                } 
                
effect_in = new Effect.Morph('nazwa'
                    { 
                        
style: { 
                            
right'0px' 
                        
}, 
                        
transitionEffect.Transitions.linear 
                    

                ); 
            }); 
            
            
Event.observe($('nazwa'), 'mouseout', function() 
            { 
                
                if( 
typeof effect_in == 'object' 
                { 
                    
effect_in.cancel(); 
                } 
                
effect_out = new Effect.Morph('nazwa'
                    { 
                        
style: { 
                            
right'"tu również wstawiasz szerokość samej ramki bez szerokości obrazka"px' 
                        
}, 
                        
transitionEffect.Transitions.linear 
                    

                ); 
            }); 
        } 
    ); 
</
script>

<
div id="nazwa"
<
img src="link do obrazka" /></a>
<
iframe src="zawartość Twojej ramki"></iframe>
</
div

:)
Dziękuje za zaufanie. Zrobione proszę Pani. :)

Po prostu trzeba użyć stylu iframe, do diva z ts'em.
Dziękuję bardzo :) I jeszcze jedno pytanko: jak przenieść to na lewą stronę? :)
edit: Zmieniłam obrazek i znowu zrobiło się tak jak było :C
Tak jak było ponieważ Twój nowy obrazek jest szerszy, naprawione. Odwróć tylko w jakimś programie logo facebooka.
Dziękuję, już wszystko ok. :D