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"




Kliknij w przycisk HTML




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.




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




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



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ę.