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 / Visa/dölj lager, ändra innehåll & hål i lager

LÄR DIG DHTML
Visa/dölj lager, ändra innehåll & hål i lager

Det script vi nu ska titta på visar hur man kan dölja och visa lager. Lägg märke till att du ändrar attributen visibility med värdet hidden (osynlig) och visible (synlig). I Netscape ska det egentligen vara show och hide, fast eftersom Netscape även accepterar hidden och visible så kan man alltid använda dessa värden, både för Explorer och Netscape.
Exempel 9 - Lager visas/döljs
<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 visa_dolj(namn,varde)
{
if (document.all)
{
	document.all[namn].style.visibility=varde;      //Explorer 4,5 har denna hierarki
}
else if (document.layers)
{
	document.layers[namn].visibility=varde;         //Netscape 4 har denna hierarki
}
else if (document.getElementById)
{
	document.getElementById(namn).style.visibility=varde;    //Netscape 6 har denna hierarki
}
}
//-->
</SCRIPT>

Titta på mina pengar! Du kan båda
<A HREF="javascript:visa_dolj('magicmoney','hidden')">dölja</A>
och
<A HREF="javascript:visa_dolj('magicmoney','visible')">visa</A>
dem.
<BR>
<DIV ID="magicmoney"><IMG SRC="pengar.gif"></DIV>

En annan mycket användbar funktion med DHTML är att du kan skriva information till dina lager, dvs du kan ändra vad som ska finnas i dina lager. Exemplet nedan innehåller ett lager med en fråga. Trycker man på frågan så kommer svaret på frågan upp. Frågan har alltså ersatts av svaret.
Exempel 10 - Ändra ett lagers innehåll
<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 andra_innehall(txt)		//Ändrar texten
{
if (document.all)
{
	document.all["tallager"].innerHTML=txt;		//Explorer har denna hierarki
}
else if (document.layers)
{
	document["tallager"].document.open();
	document["tallager"].document.write(txt);		//Netscape 4 har denna hierarki
	document["tallager"].document.close();
}
else if (document.getElementById)
{
	document.getElementById("tallager").innerHTML=txt;    //Netscape 6 har denna hierarki
}
}
//-->
</SCRIPT>

<DIV ID="tallager" STYLE="position:absolute"><A STYLE="text-decoration: none" HREF="javascript:andra_innehall('Svar: 25')">Vad är 5<SUP>2</SUP></A></DIV>

Om du vill kan du göra så att ett lager endast visar information i en viss del av lagret. Här har vi ett lager med en massa text, fast bara en del av texten visas - det som visas genom "hålet" som vi gjort i lagret:
Exempel 11 - Hål i lagret
<DIV ID="textblock" STYLE="position:absolute; background-color:lightgreen; clip: rect(10,75,50,10)">
Hejsan hej på er alla.
<BR>
Jag vet att du inte kan se hela denna text,
<BR>
så jag antar att det är ganska onödigt
<BR>
att fortsätta skriva nu.
</DIV>

background-color:lightgreen gör så att lagret blir grönt, anledningen till att jag har det i detta exempel är att du lättare ska se vart hålet finns. Det viktiga i detta exempel är dock att detta lager har clip: rect(10,75,50,10) i STYLE-attributen. Det detta gör är helt enkelt en rektangel som visar det som finns i lagret, det övriga som ej är bakom detta hål visas inte alls.
Definitionen:
clip: rect(a,b,c,d)
  • Övre vänstra hörnet befinner sig a pix neråt och d pix åt höger räknat från övre vänstra hörnet på lagret.
  • Nedre högre hörnet befinner sig c pix neråt och b pix åt höger räknat från övre vänstra hörnet på lagret.

Om hela lagret är från pixlarna (0,0) till (10,10) (egentligen kan det vara hur stort som helst, jag tar (10,10) som exempel för att det ska överensstämma med bilden) så skulle man kunna ha något av följande hål i lagret:
clip: rect(2,5,4,3)
...Eller varför inte...
clip: rect(8,8,9,3)

[DHTML guiden] - [Till kapitel 5]






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