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



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:

#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;
}

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="http://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);
   })
 });

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 http://api.jquery.com/animate/.

W razie problemów bądź pytań piszcie komentarze lub na maila.

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.
© 2010 - 2018 - Karol Drąg
Wszelkie prawa zastrzeżone
Polityka plików cookies