Inne Wysuwany panel.

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:

<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_1, 990816, 100);
-->
</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:

#ts
{
    width:272px;
    height:370px;
    position: fixed;
    top: 300px;
    right: -240px;
    overflow: hidden;
    z-index:999;
}

Header:

<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:

<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:

#facebook iframe 
{ 
    float: left; 
} 

#facebook img 
{ 
    float: left; 
    cursor: pointer; 
} 


oraz dodane

<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.

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.

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:

width:272px;

do np. 300. W #ts.

Nadal nic, gdy zmieniam width powiększa się tylko okno w ts'ie i bardziej odstaje 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:

#nazwa
{ 
    width: "szerokość całej ramki wraz z obrazkiem"px; 
    height: "wysokość całej ramki"px; 
    position: fixed; 
    bottom: 0px;
    right: -"tu wstawiasz szerokość samej ramki bez szerokości obrazka"px; 
    overflow: hidden; 
    z-index:999; 
}

#nazwa iframe 
{ 
    float: left; 
} 

#nazwa img 
{ 
    float: left;
    cursor: pointer; 
} 


i


header używanego szablonu:

<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' 
                        }, 
                        transition: Effect.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' 
                        }, 
                        transition: Effect.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

Daniel Praźmo napisał 10.05.2012, 19:34:
1 wątek = 1 problem.

Tak jak było ponieważ Twój nowy obrazek jest szerszy, naprawione. Odwróć tylko w jakimś programie logo facebooka.

Dziękuję, już wszystko ok.