Javascript: Czasowe wyświetlanie reklamy

Autor: Arkadiusz Tobiasz 20 lutego 2012

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie postaram się pokazać jak to zrobić.

Rozpocznę od pokazania fragmentu HTML


GeSHi Error: GeSHi could not find the language hmtl (using path /home/admin/domains/tobiasz.org/public_html/blog/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

Z powyższego kodu można wywnioskować, że umieszczam reklamę na jakimś obrazku, który ma szerokość 630 pikseli. Reklama będzie wyświetlać się przez 30 sekund po czym zniknie. Użytkownik będzie wiedział dokładnie za jaki czas reklama zniknie. Podam jeszcze kod CSS dla poszczególnych elementów.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#player {
    width: 630px;
    padding: 10px 0;
}
#cinema-player .ads {
    display: block;
    position: absolute;
    z-index: 1004;
    margin-left: 165px;
    margin-top: 50px;
    width: 300px;
}
#cinema-player div#counter-title {
    display: block;
    position: absolute;
    z-index: 1004;
    text-align: center;
    margin-top: 20px;
    width: 630px;
    color: #fff;
    font-weight: bold;
}

Teraz możemy przejść do najistotniejszej rzeczy, a mianowicie kodu Javascript, który będzie odpowiedzialny za odliczanie.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function createCounter(elementId, start, end, totalTime, callback){
    var jTarget=jQuery("#"+elementId);
    var interval=totalTime;
    var intervalId;
    var current=start;
    var f=function(){
        jTarget.text(end-current);
        if(current==end) {
            clearInterval(intervalId);
            if(callback) {
                callback();
            }
        }
        ++current;
    }
    intervalId=setInterval(f, interval);
    f();
}


$(document).ready(function() {
    createCounter("counter",0,30,1000,function(){
        $('#player .ads').hide();
        $('#counter-title').hide();
    });

});

I to by było na tyle. Po upływie 30 sekund reklama zniknie z naszego obrazka. Działanie możecie zobaczyć 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 […]