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>