30.09.2013 o 23:45
[HTML][JS][jQuery] Własny wysuwany płynnie Like Box
Pewnie nie raz, nie dwa widziałeś jak zrobić Like Box na stronę www, ja też, ale postanowiłem i tak napisać swój i nawet działa na Internet Explorer 8 :) Jak nie wierzysz, to wystarczy że wpiszesz adres mojej strony https://karol-drag.eu w Internet Explorer 8 lub nowszej przeglądarce. A w razie gdy by skrypt box nie zadziałał prawidłowo dajcie znać w komentarzach wraz ze screenem i wersją przeglądarki.
Wracając do boxa najpierw tworzymy DIV-y które będą odpowiadać za boxa. Jeden box będzie składać się z 3 DIV-ów.
Pierwszy nazwiemy sobie "box", będzie to główny DIV, w nim damy dwa DIV-y, pierwszy odpowiadający za napis lub obrazek, po najechaniu którego wysunie się box, nazwiemy go "box_submit", a trzeci zawierający treść boxa, który nazwiemy sobie "box_tresc".
<div id="box">
<div id="box_submit"></div>
<div id="box_tresc"> Zawartość boxa po rozwinięciu </div>
</div>
<div id="box_submit"></div>
<div id="box_tresc"> Zawartość boxa po rozwinięciu </div>
</div>
Dlaczego trzy DIV-y? Ponieważ chcemy by zawartość DIV-a "box" wysuwała nam się tylko po najechaniu na DIV-a "box_submit", a nie po najechaniu na DIV-a "box", który jest tak wysoki jak wysokość "box_tresc" i przeważnie jest wyższy niż "box_submit".
Teraz tworzymy sobie obrazek w programie graficznym do "box_submit", ja wykonałem sobie przykładowo taki jak na obrazku po lewej dla facebook-a.
Teraz tworzymy kod CSS, odpowiadający za ułożenie DIV-ów, ale nie będę już tego opisywał bo to powinno być jasne:
Teraz tworzymy sobie obrazek w programie graficznym do "box_submit", ja wykonałem sobie przykładowo taki jak na obrazku po lewej dla facebook-a.Teraz tworzymy kod CSS, odpowiadający za ułożenie DIV-ów, ale nie będę już tego opisywał bo to powinno być jasne:
#box {
width: 280px;
height: 300px;
top: 200px;
right: -260px;
position: fixed;
z-index: 99999;
}
#box_submit {
width: 20px;
height: 100px;
background: #35619f;
float: left;
border-radius: 10px 0px 0px 10px;
background: url(box2.png);
}
#box_tresc {
width: 250px;
height: 260px;
background: #FFF;
float: right;
border-radius: 0px 0px 0px 10px;
padding: 5px;
}
width: 280px;
height: 300px;
top: 200px;
right: -260px;
position: fixed;
z-index: 99999;
}
#box_submit {
width: 20px;
height: 100px;
background: #35619f;
float: left;
border-radius: 10px 0px 0px 10px;
background: url(box2.png);
}
#box_tresc {
width: 250px;
height: 260px;
background: #FFF;
float: right;
border-radius: 0px 0px 0px 10px;
padding: 5px;
}
No i teraz potrzebujemy wykonać animacje wysuwania DIV-a po najechaniu na niego i schowania po zsunięciu kursora. Do tego celu potrzebujemy jQuery i dlatego musimy dodać bibliotekę jQuery do naszej strony dodając poniższy kod pomiędzy <head>...</head>:
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
Gdy już to mamy dodajemy kod animacji:
$(document).ready(function(){
$('#box_submit, #box_tresc')
.mouseover(function(){
$('#box').stop().animate({right: "0px"}, 500);
})
.mouseout(function(){
$('#box').stop().animate({right: "-260px"}, 500);
})
});
$('#box_submit, #box_tresc')
.mouseover(function(){
$('#box').stop().animate({right: "0px"}, 500);
})
.mouseout(function(){
$('#box').stop().animate({right: "-260px"}, 500);
})
});
Gdzie mouseover odpowiada za wykonanie animacji po najechaniu, a mouseout, po zsunięciu kursora z DIV-a. Animacja ustawiona jest tylko dla odległości od prawej krawędzi, 0px gdy box ma się wysunąć i -260px gdy box się schowa.
Dlaczego -260px, a nie -280px?
Ponieważ dhowiemy tylko "box_tresc", a "box_submit" musi być widoczny.
Efekt końcowy wygląda tak jak na mojej stronie :)
Więcej o funkcjonalności .animate() znajdziesz na https://api.jquery.com/animate/.
W razie problemów bądź pytań piszcie komentarze lub na maila.
10.04.2015 o 14:10
29.09.2013 o 23:10
Komentarze
Dick (27.11.2013 o 12:46)
fajny patent :) pozdrawiam
DraG (27.11.2013 o 23:56)
To po prostu skrypt jeden z tych co napisałem :) Więcej mam w PHP, ale w JS i jQuery też czasem piszę, a czasem łącze jedno z drugim, ale o tym kiedy indziej :)
Isani (21.12.2013 o 18:38)
Nie wiem, gdzie mam wstawić kod animacji, w hedzie? czy divie?
DraG (22.12.2013 o 12:38)
Kod daj w <head>, a jak nie będzie działać to w <body>.
Donat (05.07.2015 o 8:15)
nie chodzi w click shop
DraG (11.08.2015 o 0:32)
Donat, to już musisz zapytać ich dlaczego nie chodzi.
fajny patent :) pozdrawiam
DraG (27.11.2013 o 23:56)
To po prostu skrypt jeden z tych co napisałem :) Więcej mam w PHP, ale w JS i jQuery też czasem piszę, a czasem łącze jedno z drugim, ale o tym kiedy indziej :)
Isani (21.12.2013 o 18:38)
Nie wiem, gdzie mam wstawić kod animacji, w hedzie? czy divie?
DraG (22.12.2013 o 12:38)
Kod daj w <head>, a jak nie będzie działać to w <body>.
Donat (05.07.2015 o 8:15)
nie chodzi w click shop
DraG (11.08.2015 o 0:32)
Donat, to już musisz zapytać ich dlaczego nie chodzi.
