SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox works fine, but not IE6

    Hi there,

    My friend sent me a js script that collapses a DIV. When I tested it, it works fine in Firefox, but not in IE6. Please can someone tell me what I need to change? Basically, the content that's supposed to be hidden is showing when the page loads in IE.

    here's js script:
    Code:
    // JavaScript Document
    var uniquepageid=window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, "") //get current page path and name, used to uniquely identify this page for persistence feature
    
    function animatedcollapse(divId, animatetime, persistexpand, initstate){
    	this.divId=divId
    	this.divObj=document.getElementById(divId)
    	this.divObj.style.overflow="hidden"
    	this.timelength=animatetime
    	this.initstate=(typeof initstate!="undefined" && initstate=="block")? "block" : "contract"
    	this.isExpanded=animatedcollapse.getCookie(uniquepageid+"-"+divId) //"yes" or "no", based on cookie value
    	this.contentheight=parseInt(this.divObj.style.height)
    	var thisobj=this
    	if (isNaN(this.contentheight)){ //if no CSS "height" attribute explicitly defined, get DIV's height on window.load
    		animatedcollapse.dotask(window, function(){thisobj._getheight(persistexpand)}, "load")
    		if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes" && this.isExpanded!="") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
    			this.divObj.style.visibility="hidden" //hide content (versus collapse) until we can get its height
    	}
    	else if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes" && this.isExpanded!="") //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
    		this.divObj.style.height=0 //just collapse content if CSS "height" attribute available
    	if (persistexpand)
    		animatedcollapse.dotask(window, function(){animatedcollapse.setCookie(uniquepageid+"-"+thisobj.divId, thisobj.isExpanded)}, "unload")
    }
    
    animatedcollapse.prototype._getheight=function(persistexpand){
    	this.contentheight=this.divObj.offsetHeight
    	if (!persistexpand && this.initstate=="contract" || persistexpand && this.isExpanded!="yes"){ //Hide DIV (unless div should be expanded by default, OR persistence is enabled and this DIV should be expanded)
    		this.divObj.style.height=0 //collapse content
    		this.divObj.style.visibility="visible"
    	}
    	else //else if persistence is enabled AND this content should be expanded, define its CSS height value so slideup() has something to work with
    		this.divObj.style.height=this.contentheight+"px"
    }
    
    
    animatedcollapse.prototype._slideengine=function(direction){
    	var elapsed=new Date().getTime()-this.startTime //get time animation has run
    	var thisobj=this
    	if (elapsed<this.timelength){ //if time run is less than specified length
    		var distancepercent=(direction=="down")? animatedcollapse.curveincrement(elapsed/this.timelength) : 1-animatedcollapse.curveincrement(elapsed/this.timelength)
    	this.divObj.style.height=distancepercent * this.contentheight +"px"
    	this.runtimer=setTimeout(function(){thisobj._slideengine(direction)}, 10)
    	}
    	else{ //if animation finished
    		this.divObj.style.height=(direction=="down")? this.contentheight+"px" : 0
    		this.isExpanded=(direction=="down")? "yes" : "no" //remember whether content is expanded or not
    		this.runtimer=null
    	}
    }
    
    
    animatedcollapse.prototype.slidedown=function(){
    	if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
    		if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
    			alert("Please wait until document has fully loaded then click again")
    		else if (parseInt(this.divObj.style.height)==0){ //if content is collapsed
    			this.startTime=new Date().getTime() //Set animation start time
    			this._slideengine("down")
    		}
    	}
    }
    
    animatedcollapse.prototype.slideup=function(){
    	if (typeof this.runtimer=="undefined" || this.runtimer==null){ //if animation isn't already running or has stopped running
    		if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
    			alert("Please wait until document has fully loaded then click again")
    		else if (parseInt(this.divObj.style.height)==this.contentheight){ //if content is expanded
    			this.startTime=new Date().getTime()
    			this._slideengine("up")
    		}
    	}
    }
    
    animatedcollapse.prototype.slideit=function(){
    	if (isNaN(this.contentheight)) //if content height not available yet (until window.onload)
    		alert("Please wait until document has fully loaded then click again")
    	else if (parseInt(this.divObj.style.height)==0)
    		this.slidedown()
    	else if (parseInt(this.divObj.style.height)==this.contentheight)
    		this.slideup()
    }
    
    // -------------------------------------------------------------------
    // Some utility functions below:
    // -------------------------------------------------------------------
    
    animatedcollapse.curveincrement=function(percent){
    	return (1-Math.cos(percent*Math.PI)) / 2 //return cos curve based value from a percentage input
    }
    
    
    animatedcollapse.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
    	var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
    	if (target.addEventListener)
    		target.addEventListener(tasktype, functionref, false)
    	else if (target.attachEvent)
    		target.attachEvent(tasktype, functionref)
    }
    
    animatedcollapse.getCookie=function(Name){ 
    	var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
    	if (document.cookie.match(re)) //if cookie found
    		return document.cookie.match(re)[0].split("=")[1] //return its value
    	return ""
    }
    
    animatedcollapse.setCookie=function(name, value){
    		document.cookie = name+"="+value
    }
    here's the div:

    HTML Code:
    <div id="banner"><h1><a href="#">I LOOK GOOD</a>: HANDBAGS</h1></div>
    <div id="leftcontent">
    	<h1>leftcontent</h1>
    	<img src="/images/test/pumps_apepazza_2.jpg"><p>&nbsp;</p>
    	<p><a href="#">PUMPS XYZABC <br>$499</a></p>
    	<!--Collapsible div-->
    	
    	
    
    <p><a href="javascript:collapse2.slideit()">Show/ Hide DIV</a></p>
    <div id="cat" style="width: 250px; background-color: #99E0FB;">
    
    <!--Your DIV content as follows. Note to add CSS padding or margins, do it inside a DIV within the Collapsible DIV -->
    <div style="padding: 0 5px">
    <h3>
    More detailed</h3>
    <h3>More detailed!</h3>
    
    </div>
    
    </div>
    
    <script type="text/javascript">
    
    //Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
    var collapse2=new animatedcollapse("cat", 800, false)
    
    </script>

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would say the best solution to this would be to use THIS instead. That is cross browser.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot. I'm also trying to mimic this section(part with the pictures) from www.neimanmarcus.com without of course using tables. Can you show me how to do it?

    Thanks


Bookmarks

Posting Permissions

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