Gemme div egenskab i javascript variable
Først vil jeg lige starte med at undskylde overskriften, men jeg aner virkelig ikke hvad jeg skal finde på :) håber I overlever.Hurtigt videre til problemet.
Jeg er ved at lave en html side med css styling og lidt javascript, landet ligger nu sådan at jeg har fået skrevet en js funktion der kan få mine menuer til at vise og gemme sig, + at de slider ind i billedet (gejl :) ). Problemet består nu I at jeg er nødt til at angive position i div tagget i stedet for I selve css filen, for ellers kan mit js ikke finde ud af at slide med menuen, så langt så godt, men men men.
Firefox og IE er langt fra enige om hvor jeg i virkeligheden har placeret mine divs, derfor har jeg forsøgt at give dem hvert deres css dokument, men det hjælper jo ikke en dyt når positioneringen foregår i html dokumentet, derfor er mit spørgsmål:
Er det muligt for at js placeret i html dokumentet at læse fra css dokumentet, og derved gemme positionen for de enkelte divs, så jeg derved kan nøjes med udelukkende at have positionering i mit css dokument?
Jeg smækker lige html og css dokumentet på:
index.html:
<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<!-- Testing for webbrowser -->
<link href="css/typostyle.css" rel="stylesheet" type="text/css" />
<link href="css/layoutstyle.css" rel="stylesheet" type="text/css" />
<!--[if gte IE 6]>
<link href="css/ielayoutstyle.css" rel="stylesheet" type="text/css" />
<![endif]-->
<title>FHF</title>
<script type="text/javascript">
<!--
var activemenu = null;
var activesubmenu = null;
var activesubsubmenu = null;
function startmove(ident,startx,starty)
{
removeElement(activemenu);
removeElement(activesubmenu);
removeElement(activesubsubmenu);
var obj = document.getElementById(ident);
activemenu = ident;
moveObject(ident,startx,starty,parseInt(obj.style.left),parseInt(obj.style.top));
}
function movesub(ident,startx,starty)
{
removeElement(activesubmenu);
removeElement(activesubsubmenu);
var obj = document.getElementById(ident);
activesubmenu = ident;
moveObject(ident,startx,starty,parseInt(obj.style.left),parseInt(obj.style.top));
}
function movesubsub(ident,startx,starty)
{
removeElement(activesubsubmenu);
var obj = document.getElementById(ident);
activesubsubmenu = ident;
moveObject(ident,startx,starty,parseInt(obj.style.left),parseInt(obj.style.top));
}
function moveObject(elementid,curx,cury,endx,endy)
{
var divisor = 4;
var obj = document.getElementById(elementid);
var movex = endx-curx;
var movey = endy-cury;
obj.style.visibility = "visible";
if(movey != 0)
{
if(Math.abs(movey/divisor) >= 1)
{
cury = parseInt(cury + (movey/divisor));
obj.style.top = cury + "px";
}
else
{
obj.style.top = endy + "px";
cury = endy;
}
}
if(movex != 0)
{
if(Math.abs(movex/divisor) >= 1)
{
curx = parseInt(curx + (movex/divisor));
obj.style.left = curx + "px";
}
else
{
obj.style.left = endx + "px";
curx = endx;
}
}
if(curx != endx || cury != endy){
window.setTimeout('moveObject(\'' + elementid + '\',' + curx + ',' + cury + ',' + endx + ',' + endy + ')',25);
}
}
function removeElement(elementid)
{
if(elementid != null)
{
var obj = document.getElementById(elementid)
obj.style.visibility = "hidden";
}
}
// -->
</script>
</head>
<body>
<div id="centerwrapper">
<div id="wrapper">
<div id="wrappermenubar">
<div id="menubar">
<ul class="ulmenu">
<li><a href="index.html">Forside</a></li>
<li><a href="#" onMouseUp="startmove('guides',290,0)">Guides</a></li>
<li><a href="#" onMouseUp="startmove('staten',290,0)">Staten</a></li>
<li>Nyttige links</li>
<li><a href="#" onMouseUp="startmove('forbruger',290,0)">Forbruger</a></li>
</ul>
</div>
<div id="guides" style="top: 26px;left: 290px;">
<ul class="ulmenu">
<li><a href="#" onMouseUp="movesub('budget',290,0)">Budget guide</a></li>
<li><a href="madlavning.html">Madlavning</a></li>
<li><a href="#" onMouseUp="movesub('bolig',290,0)">Bolig</a></li>
<li><a href="stikordsregister.html">Stikordsregister</a></li>
</ul>
</div>
<div id="budget" style="top: 48px; left: 290px;">
<ul class="ulmenu">
<li><a href="skabelon.html">Skabelon</li>
<li><a href="sparetips.html">Spare tips</li>
</ul>
</div>
<div id="bolig" style="top: 48px; left: 290px;">
<ul class="ulmenu">
<li><a href="kollegie.html">Kollegie</li>
<li><a href="#" onMouseUp="movesubsub('lejlighed',538,0)">Lejlighed</li>
</ul>
</div>
<div id="lejlighed" style=" top: 48px; left: 538px;">
<ul class="ulmenu">
<li><a href="leje.html">Leje</a></li>
<li><a href="koeb.html">Køb/Forældrekøb</a></li>
</ul>
</div>
<div id="staten" style="top: 26px;left: 290px;">
<ul class="ulmenu">
<li><a href="#" onMouseUp="movesub('penge',290,0)">Penge</a></li>
<li><a href="#" onMouseUp="movesub('lovgivning',290,0)">Lovgivning</a></li>
<li>Post/flyttekort</li>
<li>Læge/tandlæge</li>
</ul>
</div>
<div id="penge" style="top: 48px; left: 290px;">
<ul class="ulmenu">
<li>Boligstøtte</li>
<li>SU</li>
</ul>
</div>
<div id="lovgivning" style="top: 48px; left: 290px;">
<ul class="ulmenu">
<li>Licens</li>
<li>Flyttemelding</li>
</ul>
</div>
<div id="nyttige">
</div>
<div id="forbruger" style="top: 26px;left: 290px;">
<ul class="ulmenu">
<li>Købe / Reklamationsret</li>
<li>Internet/telefoni</li>
<li>Forsikring</li>
</ul>
</div>
</div>
<div id="mainframe">
<div id="textbg">
</div>
<div id="text">
<h1>Når du har besluttet at flytte</h1>
<p>
Flytte hjemmefra - to ord der for nogle rummer uro - bort fra de trygge rammer
og ud i livet, måske til studier eller job i en anden by. <br />
For andre betyder de befrielse; endelig egen bolig, egen livsstil, egne beslutninger.
Om du flytter hjemmefra glad eller tung om hjertet venter der masser af opgaver,
som du nu er ansvarlig for.<br />
På denne hjemmeside har vi samlet alt du har brug for, når du skal flytte hjemme.
Brug den både før og efter du er flyttet: Der er pludselig mange ting du selv skal
tage stilling til, men her kan du få gode råd om f.eks. lovgivning, madlavning, økonomi,
tøjvask - og meget mere af samme slags.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
layoutstyle.css:
/* CSS Document */
#centerwrapper
{
text-align: center;
}
#wrapper
{
position: relative;
width:980px;
height:595px;
background-image: url('../img/frontpage-background.jpg');
margin-left: auto;
margin-right: auto;
text-align: left;
}
#wrappermenubar
{
position: absolute;
width:980px;
height:80px;
top: 0px;
left: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#menubar
{
position: absolute;
width:680px;
height:5px;
top: -10px;
left: 290px;
margin-left: auto;
margin-right: auto;
text-align: left;
z-index: 500;
}
#mainframe
{
position: absolute;
width:980px;
height:480px;
top: 115px;
left: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#text
{
position: absolute;
overflow: auto;
width:450px;
height:405px;
top:40px;
left:325px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#textbg
{
position: absolute;
background-color:#FFFFFF;
filter:alpha(opacity=15);
opacity: .15;
width:450px;
height:405px;
top:40px;
left:325px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
ul.ulmenu li
{
background-color:#fa8008;
float:left;
margin: 5px;
padding: 2px;
width: 110px;
text-align:center;
}
ul.ulmenu
{
list-style-type:none;
}
/* Menu divs */
#guides
{
position: relative;
width:645px;
height:0px;
text-align: left;
visibility:hidden;
}
#budget
{
position: absolute;
width:645px;
height:0px;
text-align: left;
visibility:hidden;
}
#bolig
{
position: absolute;
width:645px;
height:0px;
text-align: left;
visibility:hidden;
}
#lejlighed
{
position: absolute;
width:445px;
height:0px;
text-align: left;
visibility:hidden;
}
#staten
{
position: absolute;
width:645px;
height:0px;
text-align: left;
visibility:hidden;
}
#penge
{
position: absolute;
width:645px;
height:0px;
text-align: left;
visibility:hidden;
}
#lovgivning
{
position: absolute;
width:645px;
height:0px;
text-align: left;
visibility:hidden;
}
#forbruger
{
position: absolute;
width:645px;
height:0px;
text-align: left;
visibility:hidden;
}
