CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 4 of 4
  1. #1
    Join Date
    Sep 2009
    Posts
    5

    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?

  2. #2
    Join Date
    May 2002
    Posts
    10,943

    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.

  3. #3
    Join Date
    Sep 2009
    Posts
    5

    Re: Javascript problem with IE...

    Hey it worked, cheers!

  4. #4
    Join Date
    Jul 2005
    Location
    Currently in Mexico City
    Posts
    568

    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
  •  





Click Here to Expand Forum to Full Width

Featured