-
September 7th, 2009, 09:45 AM
#1
Javascript problem with IE...
So, in this new site, we have quite a complicated layout which I've stuck on z-index:-6, and then the content is just in a div which covers the relevant area of the design and floats on z:6;
As a result we need a mechanism to resize the background dependant on the height of the content. Fairly easy bit of javascript.
It works in FF, Opera, Chrome... All except IE, which for some reason throws an error in my javascript a few lines in to the function.
EDIT: Ok, apparently htmlheight isn't getting a value. clientHeight and offsetHeight are giving 0, but I made a seperate test page which just document.write()'s various different height methods to see which browser supported which, and IE gives the right value for both on that :S.
The full javascript file is (The line with the big comment of *'s after it is the one IE's saying is wrong):
Code:
//BROWSER CHECK
browser=navigator.userAgent;
if (browser.indexOf("MSIE") > -1){
var browser="IE";
}else if (browser.indexOf("Firefox") > -1){
var browser="FF";
}else if (browser.indexOf("Opera/") > -1){
var browser="OP";
}else if (browser.indexOf("AppleWebKit/") > -1){
var browser="CHR";
}else browser="UNK";
/*****************/
//Preload images
var pic1= new Image(0,0);
pic1.src="images/recipes-link-roll.png";
var pic2= new Image(0,0);
pic2.src="images/munch-link-roll.png";
var pic3= new Image(0,0);
pic3.src="images/blog-link-roll.png";
var trip='0';
function resize(){
//ADJUST CONTENT BG HEIGHT
var htmlheight = document.body.clientHeight;
var frame = document.getElementById("bg-table");
if (browser != "IE") {
frame.style.height= ((window.innerHeight / 100) * 77) + "px";
}else{
document.getElementById("bg-table").style.height = htmlheight-20 + "px"; /*************************************************/
}
if (trip==1) htmlheight = htmlheight-40;
if (htmlheight > (window.innerHeight + 30)){
trip='1';
frame.style.height = (htmlheight + 10) + "px";
}
//TINKER ITS WIDTH
alert(browser);
alert(browser == "IE");
if (browser == "IE"){
var inwidth = window.offsetWidth;
alert(window.offsetWidth);
}else{var inwidth = window.innerWidth;}
document.getElementById("bg-content").style.width = (inwidth - ((inwidth / 100)*23.5)) + "px";
//TINKER TOP CONTENT LAYERS WIDTH
document.getElementById("main-content").style.width = (inwidth - ((inwidth / 100) * 40)) + "px";
}
function linkRoll(obj){
if (obj.src.indexOf("-roll")=="-1"){ //NO ROLL
obj.src=obj.src.substring(0,obj.src.lastIndexOf("."));
obj.src=obj.src+"-roll.png";
}else{
obj.src=obj.src.substring(0,obj.src.lastIndexOf("-"));
obj.src=obj.src+".png";
}
}
/*** FOR MENUS ON PAGES ***/
function menuBang(id){
if (id != "search"){
var status = new Array();
status = document.getElementById("menu-wrap").getElementsByTagName("div");
var stat=status[id];
stat = stat.style.display;
if (stat=="") stat="none";
if (stat=='none'){
status[id].style.display="block";
}else{
status[id].style.display="none";
}
}else{ //SEARCH BOX SPECIAL CASE
var stat=document.getElementById("subsearch").style.display;
if (stat=="block"){
document.getElementById("subsearch").style.display="none";
}else{
document.getElementById("subsearch").style.display="block";
document.getElementById("menu-sub-searchbar").focus(); //give bar focus
}
}
}
function menuJump(url){
window.location=url;
}
/*** FOR SEARCH BARS IN MENUS ***/
function submitSearch(page){
var str = document.getElementById("menu-sub-searchbar").value;
if (str==""){
alert("Please enter a query.");
return false;
}else if (str.length < 3){
alert("Please enter a query longer than 3 letters.");
return false;
}
window.location="search/"+page+"/"+str+"/";
}
Obviously all the relevant bits work because its fine in all the other browsers, but there's apparently something about that line IE doesn't get.
Anyone?
-
September 8th, 2009, 12:10 PM
#2
Re: Javascript problem with IE...
Use document.documentElement.clientHeight instead of document.body.clientHeight.
If the post was helpful...Rate it! Remember to use [code] or [php] tags.
-
September 8th, 2009, 04:32 PM
#3
Re: Javascript problem with IE...
-
September 9th, 2009, 05:33 PM
#4
Re: Javascript problem with IE...
for more precision:
Code:
document.<ELEMENT>.offsetHeight;
document.<ELEMENT>.offsetWidth;
Wanna install linux on a vacuum cleaner. Could anyone tell me which distro sucks better?
I had a nightmare last night. I was dreaming that I’m 64-bit and my blanket is 32-bit and I couldn’t cover myself with it, so I’ve spent the whole night freezing. And in the morning I find that my blanket just had fallen off the bed. =S (from: bash.org.ru)
//always looking for job opportunities in AU/NZ/US/CA/Europe :P
willCodeForFood(Arrays.asList("Java","PHP","C++","bash","Assembler","XML","XHTML","CSS","JS","PL/SQL"));
USE [code] TAGS! Read this FAQ if you are new here. If this post was helpful, please rate it!
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|