Till Startsidan
JavaScript.nu hostas av Ballou.se

Skaffa webbhotell
Från 12 kr/månad.

100 kr rabatt för JavaScript.nu-
besökare.

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-2010; Alla rättigheter reserverade.
Guider: [ HTML guide ] - [ JavaScript guide ] - [ DHTML guide ] - [ Perl guide ] - [ Sitemap ]