Ilustrez acest articol cu o imagine a primului site Google, aspectul sub care acesta se infatisa utilizatorilor sai in 1998. Nu este cine stie ce, o sa spuneti, si aveti perfecta dreptate. Era o epoca in care designerii web nu prea aveau instrumente la indemana pentru a face din lucrarile lor ceva atractiv. JavaScript deabia se nascuse.

Vazand aceasta imagine mi-a trecut prin cap sa rememorez ce trebuia sa fac, atunci si mult timp dupa aceea, pentru a scoate ceva mai deosebit dintr-o pagina HTML statica. Nu folositi acum asa ceva. Ar umple de ras vizitatorii.

De fapt, pagina nici nu va avea buton de download.

Ceea ce va fi prezentat in continuare nu va fi conform vreunei clasificari ci, vor fi doar niste amintiri prezentate in ordinea aducerii aminte. Deasemenea, avand in vedere ca articolul nu vrea sa dea solutii, prezentarea nu va fi problematizata.

Selecteaza tot

Vizitatorul poate selecta un text dintr-un tag textarea printr-un singur click.

Modul de abordare

In tag-ul HEAD se insereaza:

<script type="text/javascript">
function SelectAll(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}
</script>

La clic pe campul textarea sau input se va selectat tot continutul

Scroll la titlul paginii in Browser

Cu acest script, titlul paginii din browser face scroll de la stanga la dreapta.

Modul de abordare

In tag-ul HEAD se insereaza:

<script type="text/javascript">
var message="Aici se pune textul din tagul TITLE al paginii"
var message=message+"          "
i="0"
var temptitle=""
var speed="150"

function titler(){
if (!document.all&&!document.getElementById)
return
document.title=temptitle+message.charAt(i)
temptitle=temptitle+message.charAt(i)
i++
if(i==message.length)
{
i="0"
temptitle=""
}
setTimeout("titler()",speed)
}

window.onload=titler

function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
</script>

La inplementare urmariti titlul paginii din bara de titlu a browser-ului.

Tiparirea unei parti din pagina Web

Cu acest script, vizitatorul poate trimite la imprimanta acea parte din pagina web care credeti ca-l va interesa.

Modul de abordare

In tag-ul HEAD se insereaza:

<script type="text/javascript">var gAutoPrint = true; // Tells whether to automatically call the print function

function printSpecial()
{
if (document.getElementById != null)
{
var html = '<HTML>\n<HEAD>\n';

if (document.getElementsByTagName != null)
{
var headTags = document.getElementsByTagName("head");
if (headTags.length > 0)
html += headTags[0].innerHTML;
}

html += '\n</HE>\n<BODY>\n';

var printReadyElem = document.getElementById("printReady");

if (printReadyElem != null)
{
html += printReadyElem.innerHTML;
}
else
{
alert("Could not find the printReady function");
return;
}

html += '\n</BO>\n</HT>';

var printWin = window.open("","printSpecial");
printWin.document.open();
printWin.document.write(html);
printWin.document.close();
if (gAutoPrint)
printWin.print();
}
else
{
alert("The print ready feature is only available if you are using an browser. Please update your browswer.");
}
}
</script>

Partea de text pe care doriti sa o tipariti o incadreti intr-un tag div cu id-ul "printReady".

Observatii

Din fericire, webdesign-erii de acum nu mai au astfel de probleme. Astazi avem la dispozitie in mod gratuit libraria jQuery si o multime de plug-in-uri jQuery, mare parte din ele tot gratuite.

Convingeti-va singuri dand o cautare dupa jQuery.

Multe multumiri...

Internetului ca exista si celor care ne mai spun pe gratis cate ceva, chiar daca i-a costat mult timp sa invete!