Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Angry Update element style in IE

    Hi All,

    I'm using the following code to (try to) update the style of an element in javascript. As you'll no doubt gather from the code, I'm trying to edit the opacity of the element.

    This code executes fine in FF, Opera and Chrome. However, Internet explorer keeps responding with 'style is null or not an object'. Basically, I don't think it's returning the correct element from the DOM, or, for that matter, any element.

    To add some more specific guidance, on the homepage I call launch_randomise() in the onload method, which, after 5 seconds, calls randomise_bottom_images() which calls itself and the bottom image regeneration function every 5 seconds, ensuring the images are regenerated every five seconds.

    Regenerating the bottom images is a three-step process: 1, fade out, 2 switch innerHTML, 3, fade back in. My functions for altering the opacity or innerHTML quite obviously rely on being able to talk about a DOM object, I know no other way of achieving this. I tried straight out getElementById but this doesn't seem to work in IE8, fine in FF, Op, GC.

    So, after much googling I replaced getElementById(string) with my own getElement(string). However, this still doesn't work.

    Any thoughts? Any help would be much appreciated!!

    Getting elements/setting style functions
    Code:
    function getElement(id, type)
    {
        var inputs = document.getElementsByTagName(type);
        var descField = null;
        for(var i=0;i<inputs.length;i++)
        {
            if(inputs.item(i).getAttribute('id') == id )
            {
                descField = inputs.item(i);
                break;
            }
        }
        
        return descField;
    }
    
    
    
    // setStyleById: given an element id, style property and 
    // value, apply the style.
    // args:
    //  i - element id
    //  p - property
    //  v - value
    //
    function setStyleById(i, p, v) {
    	//var n = document.getElementById(i);
    	var n = getElement(i, 'div');
    	n.style[p] = v;
    }
    Full Code:
    Code:
    
    function getElement(id, type)
    {
        var inputs = document.getElementsByTagName(type);
        var descField = null;
        for(var i=0;i<inputs.length;i++)
        {
            if(inputs.item(i).getAttribute('id') == id )
            {
                descField = inputs.item(i);
                break;
            }
        }
        
        return descField;
    }
    
    
    
    // setStyleById: given an element id, style property and 
    // value, apply the style.
    // args:
    //  i - element id
    //  p - property
    //  v - value
    //
    function setStyleById(i, p, v) {
    	//var n = document.getElementById(i);
    	var n = getElement(i, 'div');
    	n.style[p] = v;
    }
    
    function replace_html(el, html) {
    	if( el ) {
                    oldEl = (typeof el === "string" ? document.getElementById(el) : el);
                    newEl = document.createElement(oldEl.nodeName);
    
                    // Preserve any properties we care about (id and class in this example)
                    newEl.id = oldEl.id;
                    newEl.className = oldEl.className;
                    //alert(newEl.id);
                    //set the new HTML and insert back into the DOM
                    newEl.innerHTML = html;
                    
                   // alert(newEl.innerHTML);
                    if(oldEl.parentNode)
            	        oldEl.parentNode.replaceChild(newEl, oldEl);
                    else
    		        oldEl.innerHTML = html;
    
                    //return a reference to the new element in case we need it
                    return newEl;
    	}
    };
    
    
    function populate_array()
    {
    	// this function's sole job is to populate the array of items to be used.
    
    
    	var da = new Array(8);
    
    	da[0] = new Array(3);
    	da[0][0] = "portfolio/garage_conversion_before.jpg";
    	da[0][1] = "portfolio/garage_into_kitchen.jpg";
    	da[0][2] = "pfimage1";
    
    	da[1] = new Array(3);
    	da[1][0] = "portfolio/refurb_old.jpg";
    	da[1][1] = "portfolio/refurb_new.jpg";
    	da[1][2] = "pfimage2";
    
    	da[2] = new Array(3);
    	da[2][0] = "portfolio/fireplace_old.jpg";
    	da[2][1] = "portfolio/fireplace_new.jpg";
    	da[2][2] = "pfimage3";
    
    	da[3] = new Array(3);
    	da[3][0] = "portfolio/bathroom1_old.jpg";
    	da[3][1] = "portfolio/bathroom1_new.jpg";
    	da[3][2] = "pfimage4";
    
    	da[4] = new Array(3);
    	da[4][0] = "portfolio/kitchen1_old.jpg";
    	da[4][1] = "portfolio/kitchen1_new.jpg";
    	da[4][2] = "pfimage5";
    
    	da[5] = new Array(3);
    	da[5][0] = "portfolio/bathroom2_old.jpg";
    	da[5][1] = "portfolio/bathroom2_new.jpg";
    	da[5][2] = "pfimage6";
    
    	da[6] = new Array(3);
    	da[6][0] = "portfolio/bathroom3_old.jpg";
    	da[6][1] = "portfolio/bathroom3_new.jpg";
    	da[6][2] = "pfimage7";
    
    	da[7] = new Array(3);
    	da[7][0] = "portfolio/ext1_old.jpg";
    	da[7][1] = "portfolio/ext1_new.jpg";
    	da[7][2] = "pfimage8";
    
    
    	return da;
    
    }
    
    
    function switchimage(folioItemNum, ImageState)
    {
        var isOpera, isIE = false;
        if(typeof(window.opera) != 'undefined'){isOpera = true;}
        if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}
    
    
    	// folioItemNum tells us which folio item to access,
    	// ImageState tells us which image to set.
    	// we will use ajax/dom to re-write the document.
    
    	var OldImageState = 1 - ImageState;
    
    	// 2d array of items.
    	var darray = populate_array();
    
    	// take one item and fade out
    	opacity(darray[folioItemNum][2], 100, 0, 500);
    	
    	// re-arrange.
    	// with time delay.
    	window.setTimeout(function (a,b,c,d,e){
    		var y = "<a href=\"" + c + "\" rel=\"lightbox[" +  d + "]\" class=\"hiddenimg\"><img src=\"" + c + "\" class=\"folioimghidden\"/></a><a href=\"" + b + "\" rel=\"lightbox[" +  d + "]\"><img src=\"" + b + "\" class=\"folioimg\"/></a>";
    		replace_html(e, y);
    		opacity(e, 0, 100, 500);
    	},500,document.getElementById(darray[folioItemNum][2]),darray[folioItemNum][ImageState],darray[folioItemNum][OldImageState],folioItemNum,darray[folioItemNum][2]);
    	
    	
    	// done.
    }
    
    
    function regenbottomimgs()
    {
        var isOpera, isIE = false;
        if(typeof(window.opera) != 'undefined'){isOpera = true;}
        if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}
    
    
    	var array = Array(3);
    	array[0] = -1;
    	array[1] = -1;
    	array[2] = -1;
    
    
    	array[0] = get_unique_random_int(6, array, 3);
    	array[1] = get_unique_random_int(6, array, 3);
    	array[2] = get_unique_random_int(6, array, 3);
    
    	var darray = populate_array();
    	var imgstr = "<img src=\"" + darray[array[0]][1] + "\" class=\"scaleddown1\" /><img src=\"" + darray[array[1]][1] + "\" class=\"scaleddown2\" /><img src=\"" + darray[array[2]][1] + "\" class=\"scaleddown2\" />";
    
    	opacity("bottomimgs", 100, 0, 500);
    
    	
    	window.setTimeout(function (a,b){
    		var x = replace_html(b, a);
    		opacity(b, 0, 100, 500);
    	},500,imgstr,"bottomimgs");
    	
    	
    }
    
    
    
    function get_random_int(Max)
    {
        var randomnumber = Math.round( Math.random() * Max );
        return randomnumber;
    }
    
    
    function get_unique_random_int(Max, List, List_Length)
    {
    	var stop = 1
    	var esc = 0
    	var x = 0;
    	var i = 0;
    
    	while ( stop == 1 )
    	{
    		esc = 0;
    
    		x = get_random_int(Max);
    
    		for ( i = 0; i < List_Length; i++ )
    		{
    			if ( x == List[i] )
    			{
    				esc = 1;
    				break;
    			}
    		}
    
    		if ( esc == 0 )
    		{
    			stop = 0;
    		}
    	}
    
    	return x;
    }
    
    
    function randomise_bottom_images()
    {
    	regenbottomimgs();
    	setTimeout("randomise_bottom_images()",5000);
    }
    
    function launch_randomise()
    {
    	setTimeout("randomise_bottom_images()", 5000);
    }
    
    function switchallnew()
    {
    	switchimage(0,1);
    	switchimage(1,1);
    	switchimage(2,1);
    	switchimage(3,1);
    	switchimage(4,1);
    	switchimage(5,1);
    	switchimage(6,1);
    	switchimage(7,1);
    }
    
    
    
    function opacity(id, opacStart, opacEnd, millisec) 
    {
        //speed for each frame
        var speed = Math.round(millisec / 100);
        var timer = 0;
    
        //determine the direction for the blending, if start and end are the same nothing happens
        if( opacStart > opacEnd ) 
        {
            for(i = opacStart; i >= opacEnd; i--) {
                setTimeout(function (opacity, id) {
                    setStyleById(id, "opacity", (opacity / 100));
                    setStyleById(id, "MozOpacity", (opacity / 100));
                    setStyleById(id, "KhtmlOpacity", (opacity / 100));
                    setStyleById(id, "filter", "alpha(opacity=" + opacity + ")");
                
                },(timer * speed), i, id);
                timer++;
            }
        } 
        else if(opacStart < opacEnd) 
        {
            for(i = opacStart; i <= opacEnd; i++)
            {
                setTimeout(function (opacity, id) {
                   
                    setStyleById(id, "opacity", (opacity / 100));
                    setStyleById(id, "MozOpacity", (opacity / 100));
                    setStyleById(id, "KhtmlOpacity", (opacity / 100));
                    setStyleById(id, "filter", "alpha(opacity=" + opacity + ")");
                
                },(timer * speed), i, id);
                timer++;
            }
        }
    }
    Thanks,

    A.
    Last edited by quark_77; 12-06-2009 at 06:30 AM. Reason: Clarification.

  • #2
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fixed it, oh the frustration though.

    I tried element.opacity = x in the onload function and hey presto it worked just like that.

    Which led me to think; what's wrong with my code, then? Well, everywhere I've used pseudo functions (inline functions, whatever they're called), from that point forward including any subsequent function calls ( so if I define function(a){call something} inline) the DOM is inaccessible.

    But only in IE.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,950
    Thanks
    0
    Thanked 236 Times in 233 Posts
    You're also doing MozOpacity and KhtmlOpacity which IE does not support.

    Code:
    setStyleById(id, "opacity", (opacity / 100));
    setStyleById(id, "MozOpacity", (opacity / 100));
    setStyleById(id, "KhtmlOpacity", (opacity / 100));
    setStyleById(id, "filter", "alpha(opacity=" + opacity + ")");
    Try changing setStyleById to this:
    Code:
    function setStyleById(i, p, v) {
    	var n = document.getElementById(i);
    	if (n.style[p]) n.style[p] = v;
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •