• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z wysuwanym panelem Wordpress

0 głosów
106 wizyt
pytanie zadane 20 maja 2015 w HTML i CSS przez Daniel Siwek Nowicjusz (140 p.)

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>

1 odpowiedź

0 głosów
odpowiedź 20 maja 2015 przez niezalogowany
edycja 20 maja 2015

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;

 

komentarz 20 maja 2015 przez Daniel Siwek Nowicjusz (140 p.)
Właśnie planowałem żeby się przesuwał, więc zmiana z position fixed na inny chyba to zepsuje?
komentarz 20 maja 2015 przez niezalogowany
jak jest fixed to stoi w miejscu gdy przesuwasz suwakami

Tak to wygląda

http://www.kurshtml.edu.pl/przyklady/css/ustalone.html
komentarz 21 maja 2015 przez Daniel Siwek Nowicjusz (140 p.)
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...
komentarz 21 maja 2015 przez niezalogowany
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)
komentarz 21 maja 2015 przez Daniel Siwek Nowicjusz (140 p.)
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.

Podobne pytania

0 głosów
2 odpowiedzi 106 wizyt
0 głosów
1 odpowiedź 73 wizyt
pytanie zadane 25 grudnia 2018 w HTML i CSS przez Dariusz Hozer Początkujący (390 p.)
0 głosów
2 odpowiedzi 91 wizyt
pytanie zadane 11 czerwca 2015 w C i C++ przez SicoL332 Nowicjusz (120 p.)
Porady nie od parady
Forum posiada swój własny chat IRC, dzięki któremu będziesz mógł po prostu pogadać z innymi Pasjonatami lub zapytać o jakiś problem. Podstrona z chatem znajduje się w menu pod ikoną człowieka w dymku.IRC

66,324 zapytań

113,061 odpowiedzi

239,220 komentarzy

46,589 pasjonatów

Przeglądających: 241
Pasjonatów: 13 Gości: 228

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...