Zaujímavé JavaScripty z scriptasylum.com

14. listopadu 2001

•

V dnešnom článku sa vrátim k svojej srdcovej záležitosti – JavaScriptu. Predstavím vám pár zaujímavých skriptov od jedného autora. Môžete ich použiť na svojich stránkach, alebo sa naučiť niečo nové z JavaScriptu.

Problémom stránok venujúcich sa archívom JavaScriptov je veľké množstvo podobných a veľakrát nezaujímavých skriptov. Skripty typu „games“ radšej zďaleka obchádzam aj ja. Na stránke scriptasylum.com som našiel zopár zaujímavých a hlavne použiteľných skriptov. Tie čo som dnes vybral sa mi zdali niečím výnimočné a autor Brian Gosselin JavaScriptu určite rozumie. Nie je možné ukázať všetky skripty na tejto stránke, preto si pri ukážke môžete skript pozrieť v ďalšom okne, prípadne navštívte scriptasylum.com. Ak by ste sa rozhodli stiahnuť si nejakým programom všetky skripty naraz, asi sa vám to nepodarí, autor totiž používa na odkazy na svojej stránke JavaScript :)

ALTTXT

Tento skript vytvára okolo určených objektov alternatívny text. Ak si spomínate na knižnicu overLIB, tak tento skript má štvrtinovú veľkosť a v novších prehliadačoch funguje tzv. fade efekt. Ukážka.

Context menu

Menu, ktoré sa zobrazí po stlačení pravého tlačítka myši. Ukážka.

Dragging script

Potrebujete na stránke pohybovať s obrázkami, alebo ľubovoľným HTML prvkami ? Tak potom vyskúšajte tento skript. Ukážka.

Crosshair

Kríž namiesto kurzora. Ukážka.

Letter Trail Mouse Effect

Text sledujúci pohyb kurzora. Ukážka.

Title bar

Skript využíva vlastnosť title objektu document – dynamicky mení názov stránky. Po načítaní stránky sa postupne vypíše jej názov. V NN 4 je vlastnosť document.title len na čítanie, teda skript je v NN 4 nefunkčný. Vlastnosť document.title je možné využiť k efektom podobným v stavovom riadku. Väčšinou postačí nahradiť window.status za document.title. Napr. zobrazenie názvu stránky s aktuálnym dátumom a časom. Ak takúto stránku zahrnieme medzi obľúbené, automaticky sa nám ponúkne v jej názve aktuálny dátum s časom.

Set Color Wizard

Tento skript tu spomeniem iba pre ukážku ako jednoducho sa dá vytvoriť nasledovný efekt – hodnota sa zobrazuje na ukazovateli a môžeme ju meniť pohybom a kliknutím myši na ukazovateli, alebo samotným nastavením čísla. Oproti originálu som tento kód upravil a opravil o udalosť mouseup, ak sa kurzor nachádza mimo ukazovateľa hodnoty.

<div style=“background-color:#000066;width:200;height:28;cursor:hand“
  onmousedown=“mouseAction(event);down=true“
  onmousemove=“if(down) mouseAction(event)“
  onselectstart=“event.returnValue=false;return false“>
<div style=“background-color:#0066cc;width:0;height:28″ id=“area“></div>
</div>
<form name=“f“>
<input name=“i“ size=“3″>
<input type=“button“ onClick=“setWidth(this.form.i.value)“ value=“ Ok „>
</form>
<script language=“JavaScript“>
<!–
var down=false
var area=document.getElementById?document.getElementById(„area“):document.all.area
function setWidth(value){
  value = valueControl(value)
  area.style.width=value
  document.f.i.value=value
  }
function valueControl(value){
  if(value<0)
    value=0
  if(value>200)
    value=200
  return value
  }
function mouseAction(e){
  // v NN je objekt e definovany pri spusteni funkcie
  // v IE nie !
  if(!e)
    e=event
  setWidth( 1+parseInt(document.all?e.offsetX:e.layerX) )
  }
function mouseUp(){
  down=false
  }
document.onmouseup=mouseUp
setWidth(70)
//–>
</script>

Marquee

Náhrada za „explorerovský“ tag MARGUEE.

Popup Window

Efektné JavaScriptové okná funkčné v IE5+, NS6+, Mozilla0.9. Skript má síce 8.3 kB, ale okná sú skutočne efektné, o čom ste sa už mohli presvedčiť ak čítate tento článok a máte jeden z uvedených verzií prehliadačov. Okno dokonca vytvára priehľadný tieň. Autor vytvoril aj Popup Wizard, kde si vyplnením formulárových prvkov jednoducho vytvoríte vlastné okno. Okno, ktoré bolo vytvorené ako posledné bude na najvyššej úrovni (aktívne). Pri testovaní som zistil, že najlepšie sa okná správajú v IE 5.5. V ostatných prehliadačoch je presúvanie okien veľmi pomalé. Pri kopírovaní obsahu stránky do clipboardu sa skopíruje aj obsah okien, aj keď sú neviditeľné (schované)! Ukážka.

Progessbar

Po zobrazení stránky sa objaví ukazovateľ, ktorý zobrazuje priebeh načítavania obrázkov, ktoré sa môžu neskôr využiť (onMouse… efekty s obrázkami), prípadne stránka s veľkým množstvom obrázkov. Skript môžem doporučiť, sám som ho použil na jednej stránke. Ukážka.

Obrázky, ktoré sa majú prednačítať sa zadávajú do poľa imagenames. Ukazovateľ má nastaviteľné nasledovné vlastnosti:

var yposition=50; // odsadenie od horného okraja v pixeloch
var loadedcolor=’navy‘; // farba ukazovateľa
var unloadedcolor=’lightgrey‘; // farba ukazovateľa – nenačítaných obrázkov
var barheight=20; // výška ukazovateľa v pixeloch (min 20)
var barwidth=400; // šírka ukazovateľa v pixeloch
var bordercolor=’black‘; // farba okraja

Na stránku sa vkladá ako externý súbor:

V skripte je možné zadať do funkcie action odkaz na stránku, ktorá sa zobrazí po načítaní všetkých obrázkov:

var action=function()
{
document.location.href=“http://redirect_page.html“;
}

Bohužiaľ správne to funguje len pri prvom načítaní. Pri ostatných načítaniach sa nevyvolá funkcia action, a stránka sa automaticky nepresmeruje. Preto je lepšie vložiť na stránku odkaz, ktorý bude smerovať na stránku, kde sa už načítané obrázky zobrazia z cache. Príklad:

Sidemenu

Menu kopírujúce pozíciu stránky, ktoré sa rozbalí iba pri onmouse udalosti. Ukážka.

Väčšina uvedených skriptov využíva vrstvy, s ktorými má Opera veľké problémy, preto vám skripty v tomto prehliadači nepobežia. Dúfam, že skripty sa vám páčili a naučíte sa z nich niečo nové z JavaScriptu, alebo ich použijete na svojich stránkach. Pekný deň!