Nu har jag börjat få ordning på det här, dock några oklarheter kvar.
Här är min kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function()
{
var link = document.createElement("p");
link.style.color = "white";
link.onclick = closeBox;
link.style.cursor = "pointer";
var linktext = document.createTextNode("CloseBox(x)");
link.appendChild(linktext);
var popup = document.createElement("div");
popup.id = "popup";
popup.style.display = "none";
popup.appendChild(link);
document.body.appendChild(popup);
var overlay = document.createElement("div");
overlay.id = "overlay";
overlay.style.display = "none";
overlay.style.height = "100%";
overlay.style.width = "100%";
document.body.appendChild(overlay);
}
function fade(elementId, opacityStart, opacityEnd, millisec)
{
if (opacityStart < opacityEnd)
{
changeOpacity(elementId, opacityStart);
document.getElementById(elementId).style.display = "";
for(var i = opacityStart; i <= opacityEnd; i++)
{
setTimeout("changeOpacity(\"" + elementId + "\"," + i + ")", millisec * i);
}
}
if (opacityStart > opacityEnd)
{
changeOpacity(elementId, opacityStart);
document.getElementById(elementId).style.display = "";
var time = 0;
for(var i = opacityStart; i >= opacityEnd; i--)
{
setTimeout("changeOpacity(\"" + elementId + "\"," + i + ")", millisec * time);
time++;
}
}
}
function changeOpacity(id, opacity)
{
var object = document.getElementById(id);
object.style.opacity = (opacity / 100);
object.style.MozOpacity = (opacity / 100);
object.style.filter = 'alpha(opacity="' + opacity + '")';
}
//function fade(elementId, opacityStart, opacityEnd, millisec)
//{
// if (opacityStart < opacityEnd)
// {
// changeOpacity((opacityStart/100),elementId);
// document.getElementById(elementId).style.display = "";
// //testObj = document.getElementById(elementId);
//
// for (var i=(opacityStart/100);i<(opacityEnd/10);i++)
// setTimeout('changeOpacity('+i+',"' + elementId +'")',millisec*i);
// }
//}
//
//
//function changeOpacity(value,id)
//{
// var testObj = document.getElementById(id);
// testObj.style.opacity = value/10;
// testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
//}
function closeBox()
{
document.getElementById("popup").style.display="none";
document.getElementById("overlay").style.display = "none";
var opEnd = document.getElementById("overlay").style.opacity;
opEnd = opEnd * 100;
fade("overlay", opEnd, 0, 35);
}
function openBox()
{
fade("overlay", 0, 70, 35);
document.getElementById("popup").style.display="";
}
</script>
<style type="text/css">
div#background
{
color:gray;
font-size:100px;
position:absolute;
left:10%;
top:5%;
}
div#popup
{
background-color:black;
color:white;
width:300px;
height:200px;
position:absolute;
left:20%;
top:10%;
z-index:5;
}
div#popup a
{
color:white;
text-align:right;
}
div#overlay
{
position:absolute;
left:0px;
top:0px;
z-index:3;
background-color:black;
}
</style>
</head>
<body>
<a href="javascript:openBox()">Show box</a>
<div id="background">
<span>BACKGROUND</span>
</div>
</body>
</html>
Jag punktar.
1. Explorer använder ju som bekant något som kallas filter istället för opacity. Varför klarar den köra closeBox()?
document.getElementById("popup").style.display="none";
document.getElementById("overlay").style.display = "none"; (onödig...)
var opEnd = document.getElementById("overlay").style.opacity;
opEnd = opEnd \* 100;
fade("overlay", opEnd, 0, 35);
Dels hämtar jag bara style.opacity. Dels multiplicerar jag med hundra för att få det rätt i Mozilla som anger från 0-1 istället för filter som går från 0-100.
Jag vill förstå.
2. Den viktigaste punkten. Varför kan jag bara köra openBox()-scriptet en gång? När jag kört openBox() och sedan följdaktligen closeBox() så måste jag uppdatera sidan innan jag kan köra openBox() igen. Jag verkar ha missat något väsentligt i javascript.
3. Exakt hur fungerar setTimeout? Jag har ju fått koden att fungera men jag förstår inte det här med att den måste bero på en räknare om man nu vill att den ska utföra upprepade saker. Jag antar att setInterval fungerar mer som jag tänker att setTimeout skulle fungera. Men exakt vad är det setTimeout gör varje gång i forloopen?
Kan någon svara på någon av punkterna är jag glad. Speciellt tvåan för den fungerar ju inte.
sidan ligger ute på: http://www.ilcalcio.se/webforumtest/test3.html
