Problem z wysuwanym panelem Wordpress

Question

Witam, panel ma głównie za zadanie utworzenie dodatkowego miejsca na reklamy, jednak u niektórych osób wyświetla się od w części headera (budowa wordpress), a nie tak jak to jest w założeniu po lewej stronie strony (NIE conteinera). Podejrzewam że jest to problem ze stylowaniem, jednak nie potrafię sobie z tym poradzić... :(
 

$(function() {
    var facebookboxanimating = false, facebookbox = $('#panel'), facebookboxtimer = null;
    $('#button').click(function(e) {
        e.preventDefault();

        if (facebookboxanimating) {
            return false;
        }

        facebookboxanimating = true;
        if (facebookbox.css('left') != '0px') {     //jeśli okienko jest schowane, pokazujemy je
            facebookbox.animate({
                left: 0
            }, 500, function() {     //w tym miejscu, w milisekundach podajemy, jak szybko okno ma się pokazywać - moja wartość to 500 ms
                facebookboxanimating = false;
            });
        } else {     //jeśli nie jest, chowamy
            facebookbox.animate({
                left: -290     //wartość identyczna, jak ta w pliku CSS
            }, 2000, function() {      //w tym miejscu, w milisekundach podajemy, jak szybko okno ma się chować - moja wartość to 500 ms
                facebookboxanimating = false;
            });
        }

        return true;
    });

    //funkcja odpowiadająca za automatyczne chowanie się okienka (zauważ, że na górze ustawiłem jeszcze zmienną facebookboxtimer)
    facebookbox.mouseleave(function() {
        if (facebookbox.css('left') != '-290px') {     //wartość identyczna, jak ta w pliku CSS
            facebookboxtimer = window.setTimeout(function() {
                facebookboxanimating = true;

                facebookbox.animate({
                    left: -290     //wartość identyczna, jak ta w pliku CSS
                }, 500, function() {
                    facebookboxanimating = false;
                });
            }, 2000);     //czas, po jakim okienko ma się automatycznie chować, w milisekundach
        }
    }).mouseenter(function() {
        window.clearTimeout(facebookboxtimer);
        facebookboxtimer = null;
    });
});

/*----------panel----------*/
#panel
{
    background: #f85032; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #f85032 0%, #f16f5c 32%, #f16f5c 45%, #f6290c 84%, #e73827 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f85032), color-stop(32%,#f16f5c), color-stop(45%,#f16f5c), color-stop(84%,#f6290c), color-stop(100%,#e73827)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #f85032 0%,#f16f5c 32%,#f16f5c 45%,#f6290c 84%,#e73827 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #f85032 0%,#f16f5c 32%,#f16f5c 45%,#f6290c 84%,#e73827 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #f85032 0%,#f16f5c 32%,#f16f5c 45%,#f6290c 84%,#e73827 100%); /* IE10+ */
    background: linear-gradient(135deg,  #f85032 0%,#f16f5c 32%,#f16f5c 45%,#f6290c 84%,#e73827 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feccb1', endColorstr='#fb955e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    padding: 2px;
    width: 308px;
    height: auto;  
    position: fixed;
    left: 0px;
    top: 30%;
    color: black;
    padding-right: 40px;
}


/*---------przycisk panelu--------*/
#button
{
    display: block; 
    position: absolute;
    right: -35px;
    top: 1px;
    background: #fceabb; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #fceabb 0%, #fccd4d 50%, #f8b500 75%, #fbdf93 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(75%,#f8b500), color-stop(100%,#fbdf93)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 75%,#fbdf93 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 75%,#fbdf93 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  #fceabb 0%,#fccd4d 50%,#f8b500 75%,#fbdf93 100%); /* IE10+ */
    background: linear-gradient(135deg,  #fceabb 0%,#fccd4d 50%,#f8b500 75%,#fbdf93 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    
    display:block;
    width:25px;
    font-size:16px;
    line-height:30px;
    text-align:center;
    padding:5px;
    border:1px solid #000;
    border-radius:0 10px 15px 0;
    color: red;
    text-decoration: none;
}
#button a{
    text-decoration: none;
}

 

<div id="panel">
    <a id="button" href="#">Z  O  B  A  C  Z !!!</a>
    <div class="button"></div>
</div>

Answer 1

Spróbuj zmienić pozycjonowanie:

position: fixed;

na: position: absolute;

i top: 30%; chyba lepiej podać w px.

chyba, że chcesz aby się nie przesuwał

to  możesz dodać  

position: fixed;

top: 10px;

 

Comments

Właśnie planowałem żeby się przesuwał, więc zmiana z position fixed na inny chyba to zepsuje?

---

jak jest fixed to stoi w miejscu gdy przesuwasz suwakami

Tak to wygląda

http://www.kurshtml.edu.pl/przyklady/css/ustalone.html

---

Wiem, wiem. Właśnie o to mi chodzi. Żeby panel przesuwał się wraz z przesuwaniem strony. Dlatego ustawiłem fixed.

Musi byc jakieś wyjście aby pomimo wartości fixed div byl przylegly do lewej krawędzi wyświetlanej strony...

---

Takie coś co zrobiłeś powinno działać, chyba że na jakiejś pra przeglądarce może być problem ale z tym to już nic nie zrobisz (sprawdź na jakich przeglądarkach jest problem)

---

Problem w tym że u mnie na chrome i firefox działa, a już u kogoś innego na chrome nie działa, a na FF tak.