Why does my javascript not reposition this heading?
I'm trying to position a block of page headers to the right of an HTML page display, with the actual position depending on the width of the available window. There's a div containing an image and a div containing a line of text "buttons" below it.
Both divs have position: absolute set and I want to set top and left using a javascript function when the page has loaded. I'm obviously missing something, because the javascript has no effect on the display - the position is always as taken from the style sheet (default zeroes or actual values: I've tried both).
This is the code, cut down to try to isolate the problem. The alert at the bottom seems to show that the left value is as I expect (890px in my test case), but the actual position (and the 开发者_运维百科value reported by Firebug) is 630px. I've tried it on Firefox 4.0.1 and Chrome 11 with the same effect.
<body onload="javascript:positionHeaders()">
<div id="pageheader">
<div id="pageheader1a">
x
</div>
<div id="pageheader1b">
x
</div>
<div id="pageheader2a">
<img src="../images/memooirs2_320x58.png" class="nonhreflink"
onclick="prepareIndexDisplay()" />
</div>
<div id="pageheader2b">
<span class="smallbutton" onclick="processLogout()">Logout</span><span class="smallbutton" onclick="prepareHelp()">Help</span><span class="smallbutton" onclick="prepareTour()">Take a tour</span>
</div>
</div>
</body>
#pageheader {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 80px;
border-bottom: 1px solid rgb(50,50,50);
background-image: url("../images/headerbkg.png");
background-repeat: repeat-x;
background-position: top;
}
#pageheader1a {
position: absolute;
top: 0;
left: 0;
}
#pageheader1b {
position: absolute;
top: 63px;
left: 0;
}
#pageheader2a {
position: absolute;
top: 0;
left: 630px;
}
#pageheader2b {
position: absolute;
top: 63px;
left: 630px;
}
.smallbutton {
position: relative;
margin: 0 5px 0 5px;
border: 0;
padding: 0;
font-size: 0.8em;
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
color: rgb(50,50,50);
}
function positionHeaders() {
var lWidth = 0, lHeight = 0;
if(typeof(window.innerWidth) == 'number') { //Non-IE
lWidth = window.innerWidth;
lHeight = window.innerHeight;
}
else if(document.documentElement && (document.documentElement.clientWidth ||
document.documentElement.clientHeight)) { //IE 6+ standards compliant mode
lWidth = document.documentElement.clientWidth;
lHeight = document.documentElement.clientHeight;
}
else if(document.body && (document.body.clientWidth ||
document.body.clientHeight)) { //IE 4 compatible
lWidth = document.body.clientWidth;
lHeight = document.body.clientHeight;
}
var z1 = String(lWidth - 550);
document.getElementById("pageheader2a").top = "0";
document.getElementById("pageheader2a").left = z1 + "px";
document.getElementById("pageheader2b").top = "63px";
document.getElementById("pageheader2b").left = z1 + "px";
alert("2bleft=" + document.getElementById("pageheader2b").left);
}
Are you sure that the properties you're setting at the end of positionHeaders() are correct? I would probably set their styles instead; something like:
document.getElementById("pageheader2a").style.top = "0";
Hope that helps.
加载中,请稍侯......
精彩评论