Till Startsidan
JavaScript.nu / DHTML-kurs / Lager & script i lager

L�R DIG DHTML
Lager & script i lager

H�r ska vi titta p� ett script d�r vi har ett lager i ett annat.
Exempel 14 - Lager i lager
<SCRIPT LANGUAGE="javascript">
<!--This is one of many scripts which are available at:     *---
//--http://www.JavaScript.nu/javascript                     *---
//--This script is FREE, but you MUST let these lines       *---
//--remain if you use this script.                          *---

function dolj()
{
if (document.all)			//Explorer 4,5
{
	document.all["forsta"].document.all["andra"].style.visibility="hidden";
	// �ven detta g�r f�r IE:
	// document.getElementById("andra").style.visibility="hidden";
}
else if (document.layers)		//Netscape 4
{
	document.layers["forsta"].document.layers["andra"].visibility="hidden";
	// �ven detta g�r f�r NN 4:
	// document["forsta"].document["andra"].visibility="hidden";
	// Detta g�r INTE f�r NN 4:
	// document.layers["andra"].visibility="hidden";
}
else if (document.getElementById)	//Netscape 6
{
	document.getElementById("andra").style.visibility = "hidden";
	// �ven detta g�r f�r NN 6:
	// document.getElementById("andra").style.visibility="hidden";
}
}
//-->
</SCRIPT>


<DIV ID="forsta" STYLE="position:absolute; top:100; left:100;">
	<IMG SRC="bild1.gif" WIDTH="300" HEIGHT="300">
	<DIV ID="andra" STYLE="position:absolute; top:100; left:100;">
		<A HREF="javascript:dolj()"><IMG SRC="bild2.gif" WIDTH="200" HEIGHT="200" BORDER="0"></A>
	</DIV>
</DIV>

L�gg m�rke till att b�da lagren har exakt samma attribut, och att top:100; left:100 f�r lager forsta betyder positionen fr�n sidans �versta v�nstra h�rn men f�r lager andra betyder fr�n forsta's �versta v�nstra h�rn.
Med detta script ser du hur du ska �ndra attribut p� lager som finns i andra lager. Observera att Explorer och Netscape 6 kan klara detta p� vanligt s�tt, medan Netscape 4 kr�ver att man �ven talar om i vilket/vilka lager det lager man vill �ndra finns.
Jag t�nker ocks� ge dig en liten, dock ganska viktig, p�minnelse. Gl�mmer du position:absolute/relative f�rst�r inte Netscape att du har ett lager, och d� fungerar inte s�dana h�r script, eftersom vi hela tiden h�nvisar till ett lager med v�rt JavaScript.
Ha allts� alltid position:absolute/relative p� alla dina lager.

N�sta script vill visa att motsvarande hierarki m�ste finnas �ven i JavaScript d� man med Netscape 4 ska anropa t.ex. funktioner. F�r IE och NN 6 beh�vs det inte:

Exempel 15 - Script i lager
<SCRIPT LANGUAGE="javascript">
<!--This is one of many scripts which are available at:     *---
//--http://www.JavaScript.nu/javascript                     *---
//--This script is FREE, but you MUST let these lines       *---
//--remain if you use this script.                          *---

function starta()
{
if (document.all)			//Explorer 4,5
{
	alert(meddelande);			//'meddelande' kan endast n�s p� detta s�tt av Explorer
	// Detta g�r INTE f�r IE:
	// document.all["forsta"].document.all["andra"].meddelande
	// document.all["andra"].meddelande

	hejsan();
	// Detta g�r INTE f�r IE:
	// document.all["forsta"].document.all["andra"].hejsan();
	// document.all["andra"].hejsan();
}
else if (document.layers)		//Netscape 4
{
	alert(document.layers["forsta"].document.layers["andra"].meddelande);
	// �ven detta g�r f�r NN 4:
	// document["forsta"].document["andra"].meddelande
	// Detta g�r INTE f�r NN 4:
	// meddelande

	document.layers["forsta"].document.layers["andra"].hejsan();
	// �ven detta g�r f�r NN 4:
	// document["forsta"].document["andra"].hejsan();
	// Detta g�r INTE f�r NN 4:
	// hejsan();
}
else if (document.getElementById)	//Netscape 6
{
	alert(meddelande);			//'meddelande' kan endast n�s p� detta s�tt av Netscape 6
	// Detta g�r INTE f�r NN 6:
	// document.getElementById("forsta").document.getElementById("andra").meddelande
	// document.getElementById("andra").meddelande

	hejsan();
	// Detta g�r INTE f�r NN 6:
	// document.getElementById("forsta").document.getElementById("andra").hejsan();
	// document.getElementById("andra").hejsan();
}
}
//-->
</SCRIPT>


<DIV ID="forsta" STYLE="position:absolute;">
	<DIV ID="andra" STYLE="position:absolute;">
		<SCRIPT LANGAUGE="javascript">
		<!--
		var meddelande="Denna variabel skapades i lagret 'andra', som finns i lagret 'forsta'.";	//H�r skapas variabeln 'meddelande'

		function hejsan()
		{
		alert("Hejsan hej p� dig.\nDenna funktion finns i lagret 'andra', som finns i lagret 'forsta'.");
		}
		//-->
		</SCRIPT>
		<A HREF="javascript:starta()">Starta funktionen</A>
	</DIV>
</DIV>

Detta script visar tydligt hur du anropar en funktion och en variabel som finns i ett annat lager. Explorer och Netscape 6 g�r det hela l�tt f�r sig genom att man anropar allt p� vanligt s�tt, fast Netscape 4 �r lite mer kr�set. H�r m�ste du noga ange i vilket lager scriptet/variabeln finns.
T�nk p� detta d� du ska g�ra avancerade script d� du har t.ex. formul�r i olika lager. Dessa m�ste anropas p� olika s�tt av Explorer och Netscape.

H�r tar denna DHTML-kurs slut.
F�rhoppningsvis har du l�rt dig b�de ett och annat som du kommer att ha nytta av n�r du fram�ver ska g�ra egna script.
F�r dig som vill g� vidare och l�ra dig mer DHTML kan jag rekommendera att du tittar i mitt JavaScript-arkiv d�r jag har samlat en hel del JavaScript- & DHTML-script. Genom att studera DHTML-scripten och senare skapa egna kommer du att l�ra dig detta �nnu b�ttre. Om du vill skapa egna DHTML-script nu men k�nner att du beh�ver lite mer hj�lp s� har jag tagit fram ett klipp-och-klistra-script som du kan anv�nda dig av och som hj�lper dig n�r du skapar egna script.
Om du vill veta n�r kursen uppdateras kan du registrera dig f�r JavaScript.nu's nyhetsbrev (skickas ut ca 6 g�nger om �ret).

[DHTML guiden]






Copyright © Omid Rouhani 1997-2022; Alla r�ttigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]