GoldenLine
Zaloguj się
Waldemar Stańko

Waldemar Stańko ...

Temat: Skrypt jquery typu flying/sliding footer?

Witam!
Szukam skryptu pod jquery do wykorzystania do modułu reklamowego jak w stronie poniżej (ZWIŃ/ROZWIŃ):
http://wpolityce.pl

Ma ktoś coś choćby podobnego?

Z góry dzięki i pozdrawiam
Link do wypowiedziLink

konto usunięte

Temat: Skrypt jquery typu flying/sliding footer?

http://api.jqueryui.com/slide-effect/
Demo zwija do lewej ale to nie problem wystarczy przerobić.
Tu implementacja biblioteki //code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css
-wzięte z link rel, z dema.
O kierunku decyduje o ile się nie mylę wartość 'direction' (wartość w bibliotece).
Pozdrawiam.Ten post został edytowany przez Autora dnia 20.05.14 o godzinie 12:53
Link do wypowiedziLink

konto usunięte

Temat: Skrypt jquery typu flying/sliding footer?

Wirtualne piwo dla osoby, która pokaże mi na tej stronie to ZWIŃ / ROZWIŃ, o której mówi autor postu :)
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Skrypt jquery typu flying/sliding footer?

Marcin Z.:
Wirtualne piwo dla osoby, która pokaże mi na tej stronie to ZWIŃ / ROZWIŃ, o której mówi autor postu :)

Też wcześniej tego nie widziałem ale teraz wszedłem i jest. Co X odsłon strony pojawia się reklama przyklejona do dolnej krawędzie okna i po kliknięciu napisu "Zwiń/Rozwiń" ucieka do prawej strony tak, że jest niewidoczna - wystaje tylko rzeczony napis. Po jego ponownym kliknięciu reklama wraca.
Link do wypowiedziLink

konto usunięte

Temat: Skrypt jquery typu flying/sliding footer?

Sugeruję, aby w tego typu pytaniach umieszczać jakiś screen, szkic albo małe how-to do wywołania funkcjonalności :) Dzięki.

Udało się, więc <piwo> dla Ciebie :) Przyjrzałem się #dokawy tej stronce i pomogę.

Mechanizmem sterują dwie proste funkcje, więc nie wiem czy jest sens tworzenia na te potrzeby jakiegoś "modułu". #flyfooter do div, który składuje reklamę (plik graficzny, flasha etc. - akurat u tego dostawcy reklam jest to chyba flash), #on to div / paseczek do wysuwania reklamy, na którego zdarzeniu click() wywoływana jest funkcja hidez(), a #off to paseczek zwiń / rozwiń obok reklamy wywołujący na click() funkcję hidex().

Funkcja ukrywająca / przesuwająca reklamę w divie poza obszar strony:


function hidex() {   

     $('#flyfooter').stop(true).animate({ left: "2000px" }, 3500); 

     $('#on').stop(true).animate({ right: "0px" }, 3500); 

}


Funkcja pokazująca / wysuwająca reklamę:


function hidez() {   

     $('#flyfooter').stop(true).animate({ left: "0px" }, 3500);

     $('#on').stop(true).animate({ right: "-2000px" }, 3500);   

}
Ten post został edytowany przez Autora dnia 20.05.14 o godzinie 15:27
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Skrypt jquery typu flying/sliding footer?

Tutaj prosta implementacja z użyciem CSS3: http://jsfiddle.net/S955X/

jQuery jest wykorzystywane tutaj wyłącznie do dodawania/usuwania klasy mówiącej o widoczności reklamy. Animacja i pozycjonowanie to już działka CSS - tak jak powinno być. Zadziała to we wszystkich nowoczesnych przeglądarkach (po dodaniu prefiksów autorskich) od IE10 w górę (http://caniuse.com/css-transitions). W IE <= 9 reklama się będzie chować / pokazywać na kliknięcie ale bez animacji.

Tutaj podobne rozwiązanie ale wykorzystujące jQuery do animacji - http://jsfiddle.net/S955X/2/ - powinno działać bez zarzutu w IE8 i 9.

EDIT: 2. Wersja "pure CSS - zero JS" - http://jsfiddle.net/S955X/4/ - wykorzystuje pseudo-selektor :checked. Wsparcie IE9+ (w 9-tce bz animacji).

P.S. Pionowy napis "POKAŻ / SCHOWAJ" wykorzystuje transform z CSS3 więc rozleci się w starszych przeglądarkach...

EDIT: Powyżej pokazałem jak ja bym zaimplementował takie rozwiązanie, nie to jak są one zaimplementowane na podanej przez autora postu stronie.Ten post został edytowany przez Autora dnia 20.05.14 o godzinie 15:42
Link do wypowiedziLink

konto usunięte

Temat: Skrypt jquery typu flying/sliding footer?

Tak jak było powiedziane, ładuje się co X- wyświetleń strony.Ten post został edytowany przez Autora dnia 20.05.14 o godzinie 18:28
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj