22 stycznia 2011

45. Przewijany pasek

Zaprezentuję dziś dość ciekawy (jak sądzę) element do wykorzystania na chomiku w opisie html lub innych stronach internetowych. Zobacz najpierw efekt:




A tak może wyglądać to na chomiku: kliknij aby zobaczyć.
Pasek jest całkiem wygodny i praktyczny. Najedź myszką na przewijający się tekst. Mechanizm zatrzyma się pozwalając na swobodne przeczytanie tekstu. Tak wygląda kod skryptu:

UWAGA!: Aby prawidłowo skopiować kod z okienka poniżej, skorzystaj z opcji "view plain".
<!--PRZEWIJANY PASEK PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP-->
<script type="text/javascript"><!--
/***********************************************
* Dostosowanie do portalu chomika http://poradnikchomika.blogspot.com
***********************************************/

var memorywidth="500px" //Szerokość ramki z tekstem
var memoryheight="18px" //Wysokość ramki z tekstem
var memorybgcolor="#339999" //Tło ramki z tekstem
var memorypadding="1px" //Odległość tekstu od krawędzi ramki. 0 - całkiem przylega.
var borderCSS="border: 1px solid black;" //Grubość krawędzi ramki oraz kolor krawędzi ramki

var memoryspeed=1 //Scroller speed (larger is faster 1-10)
var pauseit=1 //Pause scroller onMousever (0=no. 1=yes)?

var persistlastviewedmsg=1 //should scroller's position persist after users navigate away (1=yes, 0=no)?
var persistmsgbehavior="onload" //set to "onload" or "onclick".

//Specify the scroller's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var memorycontent='<nobr><span style="font: bold 10px Verdana;color:#ffffff" mce_style="font: bold 13px Verdana">Przewijany tekst w pasku informacyjnym. <a style="color:white;" mce_style="color:white;" href="http://chomikuj.pl/?page=332593" target="_blank" mce_href="http://chomikuj.pl/?page=332593">Dowiedz się więcej!</a>. Tutaj możesz wpisać swój własny tekst informacyjny. <a style="color:white;" mce_style="color:white;" href="http://poradnikchomika.blogspot.com/p/konkursy.html" target="_blank" mce_href="http://poradnikchomika.blogspot.com/p/konkursy.html">Jak zdobyć dodatkowe punkty?</a></span></nobr>'

////NO NEED TO EDIT BELOW THIS LINE////////////
var combinedcssTable="width:"+(parseInt(memorywidth)+6)+"px;background-color:"+memorybgcolor+";padding:"+memorypadding+";"+borderCSS+";"
var combinedcss="width:"+memorywidth+";height:"+memoryheight+";"

var divonclick=(persistlastviewedmsg && persistmsgbehavior=="onclick")? 'onClick="savelastmsg()" ' : ''
memoryspeed=(document.all)? memoryspeed : Math.max(1, memoryspeed-1) //slow speed down by 1 for NS
var copyspeed=memoryspeed
var pausespeed=(pauseit==0)? copyspeed: 0
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-10000px">'+memorycontent+'</span>')
var actualwidth=''
var memoryscroller

if (window.addEventListener)
window.addEventListener("load", populatescroller, false)
else if (window.attachEvent)
window.attachEvent("onload", populatescroller)
else if (document.all || document.getElementById)
window.onload=populatescroller

function populatescroller(){
memoryscroller=document.getElementById? document.getElementById("memoryscroller") : document.all.memoryscroller
memoryscroller.style.left=parseInt(memorywidth)+8+"px"
if (persistlastviewedmsg && get_cookie("lastscrollerpos")!="")
revivelastmsg()
memoryscroller.innerHTML=memorycontent
actualwidth=document.all? temp.offsetWidth : document.getElementById("temp").offsetWidth
lefttime=setInterval("scrollmarquee()",20)
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function savelastmsg(){
document.cookie="lastscrollerpos="+memoryscroller.style.left
}

function revivelastmsg(){
lastscrollerpos=parseInt(get_cookie("lastscrollerpos"))
memoryscroller.style.left=parseInt(lastscrollerpos)+"px"
}

if (persistlastviewedmsg && persistmsgbehavior=="onload")
window.onunload=savelastmsg

function scrollmarquee(){
if (parseInt(memoryscroller.style.left)>(actualwidth*(-1)+8))
memoryscroller.style.left=parseInt(memoryscroller.style.left)-copyspeed+"px"
else
memoryscroller.style.left=parseInt(memorywidth)+8+"px"
}

if (iedom){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0" style="'+combinedcssTable+'" mce_style="'+combinedcssTable+'"><td>')
write('<div style="position:relative;overflow:hidden;'+combinedcss+'" mce_style="position:relative;overflow:hidden;'+combinedcss+'" onMouseover="copyspeed=pausespeed" onMouseout="copyspeed=memoryspeed">')
write('<div id="memoryscroller" style="position:absolute;left:0px;top:0px;" '+divonclick+'></div>')
write('</div>')
document.write('</td></table>')
}
}
// --></script>
<!--PRZEWIJANY PASEK PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP--> 
Teraz konfiguracja skryptu:


linia 07
var memorywidth="500px"

Zmień wartość 500 na dowolną inną aby zmienić szerokość ramki w której przewija się tekst. Mniej niż 500 pomniejsza okno, więcej niż 500 poszerza okno.


Linia 08
var memoryheight="18px"

Zmień wartość 18 na dowolną inną aby zmienić wysokość ramki w której przewija się tekst.


Linia 09
var memorybgcolor="#339999"

Kolor tła ramki w której przewija się tekst. Kolor zapisany jest w systemie HEXagonalnym. Zmień wartość 339999 na inną aby zmienić kolor tła. Spis kodów HEXagonalnych dla poszczególnych barw znajduje się tutaj.


Linia 10
var memorypadding="1px"

Odległość / odstęp tekstu od skrajnych krawędzi ramki. Zmień wartość 1 na wyższą, aby krawędzie ramki bardziej oddaliły się od tekstu.


Linia 11
var borderCSS="border: 1px solid black;"

Grubość oraz kolor krawędzi ramki. Zmień wartość 1 na wyższą, aby zwiększyć grubość ramki. Zmień nazwę koloru black na inną, aby zmienić barwę. Nazwy podstawowych kolorów znajdują się tutaj.


Linia 22
var memorycontent='<nobr> twój tekst </nobr>'

W miejscu pomiędzy znacznikami <nobr> ... </nobr> wpisujemy swój własny tekst, który będzie się przewijał w naszej ramce. Uwaga na tworzenie linków! Zauważ że musisz je podać 2x. Przykładowy link wygląda tak: <a style="color:white;" mce_style="color:white;" href="http://twoja_strona.pl" target="_blank" mce_href="http://twoja_strona.pl">Tekst linku</a>.
Zwróć uwagę, że musisz podać taką samą ścieżkę ścieżkę linku w dwóch miejscach - parametr "href" oraz "mce_href". To samo dotyczy koloru linku "color". Musi być taki sam w obu miejscach jak wyżej w podanym przykładzie.

Linia 22 - formatowania tekstu.
Modyfikacje wprowadzamy w tym fragmencie kodu:
<span style="font: bold 10px Verdana;color:#ffffff"
bold: zmień na normal aby nie pisać pogrubioną czcionką.
10px:l zmień na wyższą liczbę, aby pisać większą czcionką.
Verdana: wpisz inną nazwę czcionki, aby ją zmienić.
color:#ffffff": w miejsce ffffff wpisz numer HEX koloru tekstu, który chcesz uzyskać.

I to już wszystko. Możemy cieszyć się nową funkcjonalnością na swoim chomiku :)
Teraz porę słów dla początkujących użytkowników z informacją gdzie dokładnie należy wkleić skrypt, aby móc z niego korzystać:

Przejdź do swojego chomika klikając w "edytuj mój profil i opcje"

Zrzut ekranu edycja profilu chomikuj.pl


Kliknij w przycisk HTML

Zrzut ekranu edycja profilu chomikuj.pl


Pojawi się biała ramka do bezpośredniego wpisywania kodu HTML. Klikamy w niej prawym przyciskiem myszy i z menu kontekstowego wybieramy opcję WKLEJ. Pojawi się wówczas nasz skopiowany wcześniej kod.

Zrzut ekranu edycja profilu chomikuj.pl


Zaakceptuj wklejony kod, poprzez naciśnięcie przycisku "Aktualizuj"

Zrzut ekranu edycja profilu chomikuj.pl


Na koniec zapisujemy wszystko poprzez naciśnięcie przycisku "Zapisz zmiany"

Zrzut ekranu edycja profilu chomikuj.pl

Gratuluję - gotowe! :)

Jeżeli przydał Ci się ten artykuł, będę wdzięczny za wsparcie poprzez zamieszczenie na swojej stronie linku prowadzącego do niniejszego artykułu lub strony głównej bloga. Serdecznie dziękuję za okazaną chęć i dobrą wolę.

9 komentarze:

Anonimowy pisze...

Czy ten kod trzeba cały skopiować i wkleić, czy trzeba pokasować te napisy na zielono?

adam-as pisze...

CAŁY! Te napisy zielone są kodowane w tzw. "komentarz" do kodu więc będą niewidoczne dla przeglądarek. Widoczny będzie tylko przewijany pasek :)

Anonimowy pisze...

Dzięki za ten kodzik :) Dzięki niemu mój chomik wygląda znacznie lepiej :)
Mam do ciebie jednak pytanie, a mianowicie:
Jak umieścić obrazki obok siebie jak masz np ty chodzi mi o te np pierwsze z góry u ciebie w profilu.
Pozdrawiam!

KruchyFix pisze...

Szefie jak zwiększyć wielkość czcionki?

KruchyFix pisze...

Już mam ;P

fred7zio pisze...

Dzięki wielkie Adamie

fred7zio pisze...

Ja mam jeszcze jedno pytanko: Czy da się takie coś wstawić jakoś na forum do podpisu?

adam-as pisze...

Niezupełnie, bowiem ze względów bezpieczeństwa, administratorzy for dyskusyjnych wyłączają możliwość stosowania HTML'a w podpisach użytkowników. Jako alternatywa możesz stworzyć tekst w obrazku GIF, a następnie podlinkować go w podpisie na forum.

fred7zio pisze...

tak też myślałem, ale dzięki za odpowiedź ;)

Prześlij komentarz