jQuery: ruchomy skyscraper

Autor: Arkadiusz Tobiasz 4 sierpnia 2010

Dzisiaj zaprezentuje w jaki sposób możesz na swojej stronie umieścić baner zwany także skyscraperem. Jest to baner o wymiarach 120×600 pikseli, który zazwyczaj wyświetlany jest po boku strony. Jest to jeden z tych rodzajów banerów, których efektywność jest największa (liczba kliknięć w baner), dlatego warto się zastanowić nad umieszczeniem go na swojej stronie. Nasz skrypt sprawi, że baner będzie się przemieszczał wraz z przewijaniem strony, dzięki czemu użytkownik będzie go cały czas widział. Ważnym plusem tego tutoriala jest fakt, że pojawienie się banera nie zmienia centrowania strony.

W naszym skrypcie w sekcji <head>…</head> dodajemy bibliotekę jQuery:

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Teraz musimy zadeklarować odpowiedni styl w tej samej sekcji:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--
#container {
width:775px;
height:auto;
margin:0px auto;
}
#skyscraper {
width:120px;
height:600px;
float:left;
border:0px solid;
}
-->

Teraz przechodzimy do sekcji <body>…</body>. Tworzymy kontener strony o szerokości 775px, a w nim umieszczamy nasz baner w klasie skyscraper:

1
2
3
4
<div id="container" style="position:relative">
<div id="skyscraper" style="position:absolute;top:0px;right:-142px;border:0px solid #827e80;border-left:0px;border-top:0px">
<!-- Tutaj wklejamy kod do bannera -->
</div>

Musimy jeszcze po tym divie dodać odpowiednią funkcję w Javascript, która będzie korzystać z biblioteki jQuery. Funkcja ta odpowiedzialna jest za „podążanie banera za użytkownikiem”, czyli jak użytkownik przewinie stronę w dół, to wraz za nim podąży baner.

1
2
3
4
5
6
<script type="text/javascript">
$(window).scroll(function()
    {
    $('#skyscraper').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
});
 </script>

Funkcja uaktywnia się w momencie, gdy użytkownik przewija okno w dół lub w górę. Wtedy div o id równym skyscraper zostaje animowany tak, że ustawiamy atrybut top, który jest równy przesunięciu strony licząc od jej góry.

Działający skrypt możecie znaleźć tutaj.

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]