31 stycznia 2011

47. Odliczanie czasu DO danej daty

1 komentarze
Skrypt odliczania czasu do wcześniej ustawionej daty :) Wielu z Was szukało takiego gadżetu nie tylko na swojego chomika, ale również do zastosowań na innych stronach www, które prowadzicie. Oto jak działa taki licznik. Spójrz najpierw na efekt:


Do końca licytacji pozostało:  


A tak wygląda to na: chomiku

UWAGA!: Aby prawidłowo skopiować kod z okienka poniżej, skorzystaj z opcji "view plain".
Do końca licytacji pozostało: &nbsp;<script type="text/javascript"><!--
TargetDate = "12/31/2011 00:00 PM";
BackColor = "#FFFFFF";
ForeColor = "#000000";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%D%% Dni, %%H%% Godzin, %%M%% Minut, %%S%% Sekund.";
FinishMessage = "Koniec Licytacji! Niebawem rozpocznie się nowa!";
// --></script>
<script src="http://scripts.hashemian.com/js/countdown.js"></script>

Linia 1
Wpisujemy tekst przed samym odliczaniem. Ja napisałem dla przykładu: "Do końca licytacji pozostało".

Linia 2
Ustalamy do jakiej daty i godziny licznik ma nam odliczać. Teraz czytaj uważnie zanim zasypiesz mnie pytaniami. Omówię podany tu przykład: 12/31/2011 - najpierw miesiąc/dzień/rok. Jeżeli musisz podać datę składającą się z pojedynczych liczb uważaj na sposób zapisu:

  • 02/09/2011 - nieprawidłowy (skrypt nie będzie działał)
  • 2/9/2011 - prawidłowy (skrypt będzie dział)

Czas, czyli godzina wprowadzana jest w systemie 12-godzinnym. Nie możemy zatem podać godziny 23:00 ponieważ skrypt nie zadziała. Stosujemy zatem oznaczenia:


  • AM - przed południem (od 00:00 do 12:00 AM-ante meridiem)
  • PM - po południu (od 12:00 do 00:00 PM-post meridiem)

Linia 3
Ustalasz tu kolor tła. Zmień #FFFFFF na inne oznaczenie kolorów. Podstawowe oznaczenia kolorów w języku HTML znajdziesz tutaj. Jeżeli nie chcesz, aby tło było przeźroczyste, skasuj same liczby i pozostaw sam # pomiędzy cudzysłowami.

Linia 4
Kolor tekstu. Ustawiasz tak samo jak opisane wyżej tło. Zasada jest identyczna.

Linia 9
Wpisujesz tekst, który pojawi się po zakończeniu odliczania. Uwaga! zamiast tekstu możesz także wstawić obrazek lub jedno i drugie! Należy zwrócić jednak uwagę na sposób zapisywania linku prowadzącego do obrazka. Zamiast cudzysłowów, link należy podać w apostrofach czyli zamiast "" stosuj ''.


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


Dotyczy tylko zaawansowanych:
Kod który tu podałem jest odwołaniem do pliku wykonywalnego znajdującego się pod adresem http://scripts.hashemian.com/js/countdown.js Jeżeli dysponujesz własnym serwerem, możesz skopiować ten plik i umieścić go na swoim ftp. Musisz wówczas zmienić tylko ścieżkę podaną w kodzie linia 11 na własną.

46. Blokada przed kopiowaniem

4 komentarze
Często denerwujecie się jak koś kopiuje Wasze menu z chomika, lub inne skrypty nad którymi pieczołowicie się napracowaliście. Pytacie mnie w mailach, jak zablokować możliwość kopiowania kodu z Waszego opisu html. Podstawowym sposobem jest zablokowanie używania prawego przycisku myszy, którym zazwyczaj wyświetlacie menu kontekstowe.

Zabezpieczenie to, pozwoli Wam uchronić swoje skrypty / kody przed początkującymi użytkownikami, którzy mają słabe pojęcie o kodowaniu w html, php czy java. Skopiuj przedstawiony poniżej kod i wklej go na samym początku swojego opisu HTML w edycji chomikowego profilu:


UWAGA!: Aby prawidłowo skopiować kod z okienka poniżej, skorzystaj z opcji "view plain".
<script type="text/javascript"><!--
var message="Nie ma tak łatwo - musisz się bardziej postarać!";
///////////////////////////////////
function clickIE() {if (document.all) {alert(message);return false;}}
function clickNS(e) {if 
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {alert(message);return false;}}}
if (document.layers) 
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
// --></script>

W linii 2 wprowadź swój własny tekst. Zobaczy go osoba, która kliknie prawym przyciskiem myszy próbując skopiować Twoje dane z opisu HTML. Przypominam, że jest to bardzo podstawowa forma zabezpieczenia swoich danych.

22 stycznia 2011

45. Przewijany pasek

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

1 stycznia 2011

44. Ręczny pop-up

1 komentarze
Skrypt, który dzisiaj przedstawię w niniejszym poście, jest jednym z moich ulubionych. Dlaczego? Ponieważ przy swojej prostocie daje ogromne możliwości. Pokażę Ci jego zastosowanie w połączeniu z pewną prostą stroną, która na pewno ucieszy i pobudzi Twoją wyobraźnię do działania.

Najpierw efekt:


Kliknij tutaj, aby zobaczyć efekt ręcznego pop-up



Tekst, który pojawił się w ramce, został stworzony na stronie www.wklejtekst.pl, którą mogą wykorzystać osoby nie posiadające własnego serwera lub hostingu. Jeżeli posiadasz własny hosting, równie dobrze możesz podlinkować swój własny plik z tekstem html bez potrzeby tworzenia go w podanym wyżej serwisie.

Pomyśl teraz jakie możliwości może Ci dać taki skrypt. Organizujesz konkursy na chomiku? W łatwy i wygodny sposób przygotujesz tekst html, opiszesz informacje, które nie zmieszczą się na Twojej stronie głównej itd etc... rusz głową - możliwości jest naprawdę bardzo wiele.

UWAGA!: Aby prawidłowo skopiować kod z okienka poniżej, skorzystaj z opcji "view plain".
<a onclick="NewWindow(this.href,'www.poradnikchomika.blogspot.com','1030','700','no','center');return false" href="http://wklejtekst.pl/zarabiaj_z_chomikuj" onfocus="this.blur()">
<script type="text/javascript"><!--
/****************************************************

     Więcej porad na http://poradnikchomika.blogspot.com

****************************************************/
var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=yes';
win=window.open(mypage,myname,settings);}
// --></script>
<span style="font-size:26px;font-weight:bold;">Kliknij tutaj, aby zobaczyć efekt ręcznego pop-up</span></a>

Pozwolę sobie opisać podstawowe funkcje skryptu, aby początkujący połapali się co gdzie jest.

Linia 01:
Tutaj określasz rozmiary okna wyrażoną w pikselach. Wartość 1030 to szerokość, natomiast 700 wysokość okna. Następnie w tej samej linii wpisujesz link do strony lub pliku który ma pojawić się w wyskakującym oknie. Podmień ten link http://wklejtekst.pl/zarabiaj_z_chomikuj na swój własny.

Linia 16:
W ostatniej linii określasz jak ma wyglądać Twój link do kliknięcia. Możesz używać tu wszystkich stylów formatowania tekstów w języku html. Mało tego, możesz usunąć cały ten tekst "Kliknij tutaj, aby zobaczyć efekt ręcznego pop-up" i zastąpić go na przykład dowolnym obrazkiem. Stanie się on automatycznie linkiem do wyskakującej strony. Przykład poniżej:




Nadmienię tylko, że w przeciwieństwie do automatycznych okienek typu POP-UP, mój skrypt nie będzie blokowany przez przeglądarki!
Jeżeli będziesz miał jakiekolwiek problemy z tym skryptem, tradycyjnie pozostaw swój komentarz. Pozdrawiam i życzę oryginalnych pomysłów!