SupportData.Net DHTML Webbdialogruta

Gör en webbsidedialogruta

En webbsidedialogruta ser ut på i stort sett samma sätt som det fönster många program öppnar för att visa tips när du startar programmet. Namnet "webbsidedialogruta" är så otympligt att jag i fortsättningen skriver "dialogruta" kort och gott.

En sådan ruta öppnas när du kommer till SupportData.Nets förstasida. Den ser ut som i bilden till vänster och du kan bläddra dig igenom 25 tips.

Om du inte vill att dialogrutan skall visas nästa gång du kommer till SupportData.Nets webbplats, tar du bort markeringen ur "Visa tips när sidan öppnas". I stället visas då i webbsidans övre vänstra hörn den här "bilden", som gör att du kan öppna dialogrutan igen om du skulle vilja det. I själva verket är det inte en bild utan DHTML-kod.

Gör så här

Jag har genomgående gjort så att du kan kopiera koden från den här sidan. Spara till att börja med all kod under de filnamn jag föreslår. Senare kan du ändra som du själv vill.

Webbläsare

Det här fungerar inte i Netscape eller Firefox. Det gör i och för sig inte så mycket, eftersom sidan som anropar dialogrutan fungerar helt normalt ändå, men avstå från att placera viktig information i dialogrutan, om alla besökare måste kunna se den!

Sidan som öppnar dialogrutan

Dialogrutan fungerar med hjälp av DHTML-kod, två JavaScript, en bild och en global stilmall. I koden till sidan som skall öppna dialogrutan – som i sin tur är en HTML-sida – finns följande:

I den inledande BODY-taggen placeras en händelsehanterare som anropar en funktion i skriptet men först när sidan för övrigt är färdigladdad:

<body onLoad="datipsinit()">

Funktionen datipsinit() finns i skriptet datips.js (se nedan).

Alldeles efter den inledande BODY-taggen kommer sedan anropet av javaskriptet:

<script language="JavaScript" src="datips.js"></script>

Detta är allt som behövs på den sida som öppnar dialogrutan.

Själva dialogrutan

Sedan skall du ha en HTML-sida som bildar själva dialogrutan. Så här kan koden se ut – du anpassar den naturligtvis till dina egna behov:

Spara följande kod som datips.html <HTML> <HEAD> <TITLE>Om SupportData.Net</TITLE> <LINK REL="stylesheet" HREF="datips.css" TYPE="text/css"> </HEAD> <BODY bgcolor="#D4BCD4" text="#000000" style="font-size:10pt;font-family:Arial" onLoad="visadatips()"> <DIV style="position:absolute;left:10;top:10;background-color:#BC9EBC;text-align:center;width:58;height:79%"> <IMG SRC="datips.gif" WIDTH="32" HEIGHT="32" BORDER="0" style="position:relative;top:18"><BR> <SPAN id="mitti" style="position:relative;top:140px;font-family:Arial;font-size:10pt;font-weight:bold;color:#FFFFF0"> </SPAN> </DIV> <DIV style="position:absolute;left:68;top:10;background-color:#FFFFFF;width:346;height:79%;border:solid 1px #BC9EBC"> <BR>   <FONT face="Arial" color="#008000" size="3"><B>Visste du...</B></FONT> <HR size="1" style="position:relative;top:10"> <SPAN id="mtxt" style="position:relative;top:10px;padding:15px 10px 10px 10px;font-family:Arial;font-size:10pt;width:100%;overflow:auto;height:138px"> </SPAN> </DIV> <DIV style="position:absolute;left:10;top:222;width:100%"> <INPUT id="visa1" type="checkbox" checked> <SPAN onclick="kollastatus()">Visa tips när sidan öppnas</SPAN><INPUT type="button" Value="Nästa" style="width:70;position:relative;left:83;background-color:#D4BCD4;color:#000000;font-family:Arial;font-size:9pt;border:2px outset #FFFFFF" onclick="antaltips()"><INPUT type="button" Value="Stäng" style="width:70;position:relative;left:93;background-color:#D4BCD4;color:#000000;font-family:Arial;font-size:9pt;border:2px outset #FFFFFF" onclick="slutning()"> </DIV> <script language="JavaScript" src="datipstips.js"> </script> <script language="JavaScript"> cnt=0; datipsen.sort(slumpa) function slumpa(a,b){ return (Math.random()-Math.random()) } function kollastatus(){ if (visa1.checked) visa1.checked=false; else visa1.checked=true; } function visadatips(){ mtxt.innerHTML=datipsen[0] mitti.innerHTML="1/"+datipsen.length } function antaltips(){ if (cnt<datipsen.length-1) cnt++; else cnt=0; mtxt.innerHTML=datipsen[cnt]; mitti.innerHTML=(cnt+1)+"/"+datipsen.length } function slutning(){ if (!visa1.checked) window.returnValue=1 else window.returnValue=0 window.close(); } </script> </BODY> </HTML>

För att sidan skall fungera tillsammans med anropet och javaskripten, sparar du den som "datips.html".

Stilmallen

Som du ser i koden ovan anropas en stilmall för dialogrutan – "datips.css". Den ser ut så här:

Spara följande kod som datips.css BODY { scrollbar-face-color: #F1F1F1; scrollbar-highlight-color: #F1F1F1; scrollbar-3dlight-color: #CC33CC; scrollbar-shadow-color: #CC3380; scrollbar-darkshadow-color: #FFFFFF; scrollbar-track-color: #F5F0F0; scrollbar-arrow-color: #CC33CC; } H1 { text-align:center; color: #CC33CC; font-family:"times new roman", serif; font-size:18pt; } H2 { margin: 10px; color:#666699; font-family:"times new roman", serif; font-size:14pt; } H3 { text-align:center; color: #006633; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12pt; margin-bottom : 10px; margin-top : 10px; } H5 { margin:10px; color: #666699; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12pt; margin-bottom : 10px; margin-top : 10px; } P { margin: 20px; font-family:arial, sans-serif; font-size:9pt; } b { color: #006633; } UL { color:#000000; font-family:arial, sans-serif; font-size:10pt; } OL { color:#000000; font-family:arial, sans-serif; font-size:10pt; } A, A:LINK { font-family:arial, sans-serif; font-size:10pt; text-decoration:none; color: Blue; } A:VISITED { font-family:arial, sans-serif; font-size:10pt; text-decoration:none; color: Purple; } A:HOVER { font-family:arial, sans-serif; font-size:10pt; text-decoration:none; color: White; background-color: #666699; } .fotnot { color:#000000; font-family: Arial, Helvetica, sans-serif; font-size:8pt; } .mellanfet { margin:10px; color:#666699; font-family: Arial, Helvetica, sans-serif; font-size:10pt; } .bildtext { margin:0px; color:#006633; font-family: Arial, Helvetica, sans-serif; font-size:10pt; } .tabelltext { margin: 0px 10px; font-family: Arial, Helvetica, sans-serif; font-size:10pt; } .bakgrund { background-color: #FEF8EF; } blockquote { background-color: #FFFF99; padding: 2em 4em 2em; color: #3333FF; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; margin-left: 2em; } .indrag { font-family: Arial, Helvetica, sans-serif; font-size:10pt; margin-top: 0px; margin-left: 30px; margin-bottom: 0px; } .indrag2 { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; margin-top: 0px; margin-left: 40px; margin-bottom: 0px; } .skript { color: red; }

I princip är det här samma stilmall som jag använder till alla sidor, men med några små förändringar. Det gör att dialogrutan får samma stil som webbplatsen för övrigt. Många av reglerna används inte i dialogrutan, men finns med ändå "för framtida behov".

Du anpassar stilmallen som du vill och sparar den som "datips.css".

Javaskripten

Skriptet som öppnar dialogrutan

Det första av de båda externa javaskripten öppnar dialogrutan och ger den dess grundläggande utseende. Det skapar och hanterar dessutom den cookie som gör att besökaren inte behöver börja om från förjan med första tipset varje gång han kommer, och som ser till att dialogrutan inte öppnas om besökaren har bestämt sig för det. Detta skript har filnamnet datips.js.

Spara följande kod som datips.js bver=navigator.appVersion.split(";"); function datipsstart(){ if(bver[1].match("5.")) rv=window.showModalDialog("datips.html",null,"dialogWidth:430px;dialogHeight:280px;center:1;scroll:0;help:0;status:0"); else rv=window.showModalDialog("datips.html",null,"dialogWidth:430px;dialogHeight:300px;center:1;scroll:0;help:0"); nd= new Date(); nd.setTime (nd.getTime()+(365*24*60*60*1000)); cdomain = (location.domain) ? location.domain : null; cpath = (location.domain) ? location.pathname : null; if (rv!=0) SetCookie ("tipskaka", "true", nd, cpath, cdomain); } function datipsinit(){ if (document.all){ if (GetCookie("tipskaka")!="true") datipsstart() else document.body.insertAdjacentHTML('beforeEnd','<DIV id="edatips" style="width:140;position:absolute;top:0;center:0;BACKGROUND-COLOR:#CC33CC;BORDER-BOTTOM:#993366 solid 2px;BORDER-LEFT:#CC99FF solid 2px;BORDER-RIGHT:#993366 solid 2px;BORDER-TOP:#CC99FF solid 2px;font-family:Arial;font-size:8pt;font-weight:bold;text-align:center;padding-top:2px;padding-bottom:2px;color:#FFFFFF;cursor:default" onclick="ooppna()">Om SupportData.Net</DIV>'); } } function ooppna(){ DeleteCookie("tipskaka"); edatips.innerHTML="Om SupportData.Net visas"; setTimeout('edatips.style.visibility="hidden";datipsstart()',1000); } function flyttning(){ edatips.style.borderLeftColor="#993366 "; edatips.style.borderRightColor="#CC99FF"; edatips.style.borderBottomColor="#CC99FF"; edatips.style.borderTopColor="#993366 "; edatips.style.paddingLeft="1px"; edatips.style.paddingTop="3px"; } function muspekut(){ edatips.style.borderLeftColor="#CC99FF"; edatips.style.borderRightColor="#993366 "; edatips.style.borderBottomColor="#993366 "; edatips.style.borderTopColor="#CC99FF"; edatips.style.paddingLeft="0px"; edatips.style.paddingTop="2px"; } function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); } function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } function SetCookie (name, value) { var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 4) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)); } function DeleteCookie(name){ exp=new Date(); exp.setTime (exp.getTime() - 1); var cval = GetCookie ("name"); document.cookie = name + "=" + cval +"; expires=" + exp.toGMTString(); }

Skriptet med innehållet i dialogrutan

Slutligen skriptet som innehåller den text som visas i dialogrutan. Här tar jag bara med de fem första texterna. Du kan fylla på med hur många texter du vill.

Spara koden nedan som datipstips.js datipsen=new Array(); datipsen[0]="<B>HTML-skolan</B><P>Lär dig från första grunderna att göra en hemsida som verkligen fungerar.</P><P>Under \"Skolor\" hittar du HTML-skolan, som steg för steg och genom många exempel tar dig fram till en bra hemsida.</P>" datipsen[1]="<B>Hämta JavaScript</B><P>Under \"Resurser, Hämta JavaScript\" finns fler än 100 skript, färdiga för din hemsida.</P><P>Skripten är ordnade i kategorier så att du lätt hittar det du söker, och alla skript har tydliga anvisningar på svenska.</P>" datipsen[2]="<B>Att få återbesök</B><P>Ett bra sätt att få besökarna att komma tillbaka är att ge dem något nytt varje gång. Du kan visa \"Dagens tips\" från SupportDAta.Net på din egen hemsida, och besökaren får ett nytt datortips varje dag, hela året!</P><P>Hämta den zippade filen från länken under tipsrutan. Den innehåller tydliga instruktioner om hur du gör för att visa \"Dagens tips\" på din hemsida.</P>" datipsen[3]="<B>Börja med Visual Basic</B><P>Under \"Skolor\" hittar du \"Visual Basic 6\" och \"Visual Basic.Net\", två skolor som lär ut grunderna i Visual Basic. Båda innehåller ett femtiotal lektioner och en mängd exempel.</P>" datipsen[4]="<B>Läs om JavaScript</B><P>Under \"Resurser, Handbok i JavaScript\" finns en omfattande uppslagsbok med det mesta du behöver kunna om JavaScript.</P><P>Använd handboken när du behöver friska upp minnet, eller när du inte riktigt vet har till exempel händelsehanterare kan användas.</P>"

Som du ser går det alldeles utmärkt att använda normal HTML-kod i texterna. Det enda du bör tänka på är att sätta ett bakåtriktat snedstreck före citationstecknen (\").

Observera att textlistan börjar med index [0].

Bilderna

Utöver skripten, stilmallen och HTML-sidan behöver du en enda bild – datips.gif – som visas i själva dialogrutan och anropas från datips.html. Se till att sökvägen blir rätt. Du kan högerklicka på bilden här och kopiera den.

Bilden som visas i övre vänstra hörnet om man stänger av visningen av dialogrutan, är inte en bild utan skapas med DHTML-kod från datips.js.