Jeg har et lille problem mht. javascript på min nye hjemmeside.
Hjemmeside beta'en kan ses på følgende adresse:
www.taj-web.dk/hehe
Jeg er ikke nogen haj til javascript, jeg har været bedre til det for lang tid siden, men har lagt alt med hjemmeside (og programmering/udvikling) fra mig i et par år, og er blot i de seneste par dage påbegyndt igen fra den bløde ende.
Bemærk at jeg har fravalgt Microsoft Internet Explorer brugere adgang til siden, da den ikke vil vises optimalt i dette, og jeg orker ikke at optimere den til begge, da det vil volde oceaner af problemer. Jeg har dog ikke 'sikret' den, så den er enormt let at komme ind på selvom der ikke haves Mozilla Firefox - så jeg håber ikke nogle af jer kloge hoveder vil spilde tiden med at påminde mig om at 'systemet let kan brydes'
Sagt i al venskabelighed.
Beskrivelse af hjemmesidens indhold: Der er temmelig meget javascript på min hjemmeside. Bare 'pop-up vinduet' er lavet i javascript som en <div> der synliggøres ved klik på enter-knappen. En div med en iframe inden i som har kilde i "hjemmeside.htm", som ligeledes er indholdet af popupvinduet. Ligeledes kan man usynliggøre denne div igen ved hjælp af et tryk på krydset i venstre hjørne. Tag jer ikke af useriøsiteterne omkring hjemmesiden (teksten og de fjollede navne etc.) - lad jer ikke forvirre af dette. Nu til problemet: Jeg har ladet mig beslutte at give besøgeren mulighed for at tilvælge et gore-tema (med blod og indvolde osv.), dette forklarer den lille firkant til højre for krydset i venstre hjørne af det falske popup-vindue. Det er et slags flueben som man kan hakke til og fra alt afhængig af hvilket design man ønsker at pryde siden med.
Efter fluebenet er hakket til, vil jeg gerne have en nedtælling fra 3 inden designet skifter, for at styrke besøgerens indlevningsevne og fortælle at "nu går det løs". Dette fungerer også meget fint, mit problem er bare at når denne variabel der styres af setInterval når til 0, skifter iframeen i det falske popupvindue (div'en med alt indhold) IKKE.
Jeg har brugt denne linje tidligere:
document.getElementById('homepage').src='fejl.htm';
Men det ser bare IKKE ud til at virke ved intervallets timeout. Af en eller anden grund. Hvordan kan det være?
Her er koden tilknyttet til hele funktionen der sætter skub i layoutskiftet:
gorecount = 0;
function gore_activated() {
document.getElementById('gore_activated').style.visibility='visible';
if (gorecount == 0)
gorecount = 1;
else
gorecount = 0;
if (gorecount == 0)
{
document.getElementById('gore').src='flueben.gif';
removegore();
}
else
{
document.getElementById('gore').src='flueben3.gif';
document.getElementById('gore_activated').innerHTML = idioten;
setgore();
}
}
idioten = 3;
function setgore() {
hans = setInterval("setgore2();", 1000);
}
function setgore2() {
idioten = idioten - 1;
document.getElementById('gore_activated').innerHTML = idioten;
if (idioten == 0)
{
clearInterval(hans);
document.getElementById('gore_activated').style.visibility='visible';
document.getElementById('homepage').src='fejl.htm';
}
else {
}
}
Og her er så HELE kildekoden til index.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nyt dokument</title>
<SCRIPT language="JavaScript">
function hello() {
skaermbredde=window.screen.width;
skaermhoejde=window.screen.height;
<!--
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer")
{
document.getElementById('banan').style.visibility='visible';
document.getElementById('homepage').src='fejl.htm';
document.getElementById('homepage').height='275';
document.getElementById('homepage').width='300';
document.getElementById('banana').style.height='275';
document.getElementById('banana').style.width='300';
document.getElementById('banan').style.height='275';
document.getElementById('banan').style.width='300';
document.getElementById('banan').style.top='20%';
document.getElementById('banan').style.left='35%';
window.screen.width
}
else
{
document.getElementById('banan').style.visibility='visible';
document.getElementById('banan').style.top=skaermhoejde/2-600/2 + 'px';
document.getElementById('banan').style.left=skaermbredde/2-709/2 + 'px';
}
}
//-->
gorecount = 0;
function gore_activated() {
document.getElementById('gore_activated').style.visibility='visible';
if (gorecount == 0)
gorecount = 1;
else
gorecount = 0;
if (gorecount == 0)
{
document.getElementById('gore').src='flueben.gif';
removegore();
}
else
{
document.getElementById('gore').src='flueben3.gif';
document.getElementById('gore_activated').innerHTML = idioten;
setgore();
}
}
idioten = 3;
function setgore() {
hans = setInterval("setgore2();", 1000);
}
function setgore2() {
idioten = idioten - 1;
document.getElementById('gore_activated').innerHTML = idioten;
if (idioten == 0)
{
clearInterval(hans);
document.getElementById('gore_activated').style.visibility='visible';
document.getElementById('homepage').src='fejl.htm';
}
else {
}
}
</SCRIPT>
<style type="text/css">
body {
background-color: #000000;
}
a:link {
color: white;
text-decoration: none;
font-family: times new roman;
font-size: 10px;
}
a:visited {
color: white;
text-decoration: none;
font-family: times new roman;
font-size: 10px;
}
a:active {
color: white;
text-decoration: none;
font-family: times new roman;
font-size: 10px;
}
a:hover {
color: #7E7E7E;
text-decoration: none;
font-family: times new roman;
font-size: 10px;
}
</style>
<meta name="generator" content="TSW WebCoder">
</head>
<body>
<table border="0" width="100%" height="400">
<tr>
<td width="40%"> </td>
<td width="20%"><a href="#" onClick="hello();"><img src="enter.jpg" border="0"></a></td>
<td width="40%"> </td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" style=" top: 0px; left: 0px; width: 709px; height: 420px; position: absolute; visibility: hidden; border: 1px solid #848484;" id="banan">
<tr>
<td id="janejha" style="cursor: move; border-bottom: 1px solid #848484; background-color: #121212; height: 15px; font-size: 10px; background-image: url('topbg.gif'); color: white;" valign="top" onMouseOver="document.getElementById('janejha').style.backgroundColor='#313131';" onMouseOut="document.getElementById('janejha').style.backgroundColor='#121212';" >
<img src="close.gif" style="cursor: default;" onMouseOver="uglen.src='close2.gif';" onMouseOut="uglen.src='close.gif';" onClick="document.getElementById('banan').style.visibility='hidden';" name="uglen" > <img src="flueben.gif" style="cursor: default;" onClick="gore_activated();" id="gore" >
</td>
</tr>
<tr>
<td>
<div style="width: 709px; height: 425px; z-index: 10;" id="banana"><iframe name="homepage" src="hjemmeside.htm" width="709" height="425" frameborder="0"></iframe></div>
</td>
</tr>
<div id="gore_activated" style="z-index: 30; text-align: center; width: 159px; height: 50px; border: 3px solid black; font-size: 40px; background-color: white; background-image: url('gore.jpg'); position: absolute; top: 15%; left: 40%; visibility: hidden;">0</div>
</table>
</body>
</html>