accordian not pulling through css in ie6

welshstew · #1 Aug 24th, 2007, 12:35

So, I have developed a nice little JS / Css app that acts like an acordian. Basically, I want the information to float down from hidden divs upon a click of banner images.

It works beautifully in FF and IE7, but in IE6 it doesn't. And it is driving me crazy!

The issue is around the css for the initial 'on' state that isn't being recognised in IE6.

Please, Please, someone save me from my demensia....

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Accordian Test Page</title>
<style type="text/css">
    body{
    }

    .accordian{
        width:349px;
    }
    
    .accordian .accessible{
        display:none;
    }
    
    .accordian #heading1{
        height:59px;
        cursor:pointer;
    }
    
    .accordian #heading1.headingoff{
        background-color:#00FF66;
    }
    
    
    .accordian #heading1.headingon{
        background-color:#FF33CC;
    }
    
    .accordian #heading2{
        height:59px;
        margin-top:2px;
        cursor:pointer;
    }
    
    .accordian #heading2.headingoff{
        background-color:#00FF66;
    }
    
    .accordian #heading2.headingon{
        background-color:#FF33CC;
    }
    
    .accordian #heading3{
        height:40px;
        margin-top:2px;
        cursor:pointer;
    }
    
    .accordian #heading3.headingoff{
        background-color:#00FF66;
    }
    
    .accordian #heading3.headingon{
        background-color:#FF33CC;
    }
    
    .accordian .content{
        width:339px;
        background-color:#DADAE9;
        padding: 0px 5px 0px 5px;
        overflow:hidden;
    }
</style>
<script language="javascript" type="text/javascript">
<!--
// constructor
function Accordian(PanelName, PanelCount){

    // set private fields
    this.animationFrames = 5;
    this.panelName = PanelName;
    this.panelCount = PanelCount;
    this.panelHeights = new Array();
    
    // store panel max heights
    for(var i = 1; i <= this.panelCount; i++){
        this.panelHeights[this.panelName + i] = document.getElementById(this.panelName + i).style.height.replace("px","");
    }

    // event handler for panel clicks
    this.Panel_OnClick = function(PanelId){
        var clickedPanel = document.getElementById(PanelId);
        var index = clickedPanel.id.replace(this.panelName,"");
        if(clickedPanel.style.height == "0px"){
            // expand panel
            this.ExpandPanel(clickedPanel, index);
        }
        else{
            // collapse panel
            this.CollapsePanel(clickedPanel, index);
        }
    }
    
    // close the panel
    this.CollapsePanel = function(Panel, Index){
        var pixels = this.panelHeights[Panel.id] / this.animationFrames;
        ResizePanel(Panel.id,"up",pixels,this.panelHeights[Panel.id],1,this.animationFrames, Index);
    }
    
    // open the panel
    this.ExpandPanel = function(Panel, Index){
        var pixels = this.panelHeights[Panel.id] / this.animationFrames;
        ResizePanel(Panel.id,"down",pixels,this.panelHeights[Panel.id],1,this.animationFrames, Index);
    }
}

function ResizePanel(PanelId, Direction, IncrementPixels, MaxPixels, CurrentFrame, MaxFrames, Index){
// run until last frame
    var Panel = document.getElementById(PanelId);
    if(CurrentFrame <= MaxFrames){
        if(Direction == "up"){
            // collapse
            Panel.style.height = MaxPixels - (CurrentFrame * IncrementPixels) + "px";
            
            // last frame
            if(CurrentFrame == MaxFrames){
                Panel.style.display = "none";
                document.getElementById("heading" + Index).className = "headingoff";
            }
        }
        else{
            if(CurrentFrame == 1){
                document.getElementById("heading" + Index).className = "headingon";
                Panel.style.display = "block";
            }
            // expand
            Panel.style.height = CurrentFrame * IncrementPixels + "px";            
        }
        // move to next frame
        var x = setTimeout("ResizePanel('" + PanelId + "','" + Direction + "'," + IncrementPixels + "," + MaxPixels + "," + (CurrentFrame + 1) + "," + MaxFrames + "," + Index + ");",30);
    }
}

Accordian.prototype.resizePanel = ResizePanel;

//-->
</script>
</head>

<body>
        <div id="accordian" class="accordian">
        <div id="heading1" class="headingon" onclick="accordian.Panel_OnClick('content1');" ></div>

        <div class="accessible">Heading 1</div>
        <div id="content1" class="content" style="height:120px">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed id nibh et arcu ornare facilisis. Nullam viverra placerat augue. Praesent euismod ante vel velit.
        </div>
        <div id="heading2" class="headingon" onclick="accordian.Panel_OnClick('content2');"></div>
        <div class="accessible">Heading 2</div>
        <div id="content2" class="content" style="height:120px">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed id nibh et arcu ornare facilisis. Nullam viverra placerat augue. Praesent euismod ante vel velit.
        </div>    
        <div id="heading3" class="headingon" onclick="accordian.Panel_OnClick('content3');"></div>

        <div class="accessible">Heading 3</div>
        <div id="content3" class="content" style="height:120px">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed id nibh et arcu ornare facilisis. Nullam viverra placerat augue. Praesent euismod ante vel velit.
        </div>
    </div>
    <script language="javascript" type="text/javascript">
        var accordian = new Accordian('content',3,'/images/x');
    </script>
</body>
</html>

Stew

1840dsgn · #2 Aug 24th, 2007, 12:38

have you got a working link?

welshstew · #3 Aug 24th, 2007, 12:58

all the code is in the above file, thanks for taking a look

welshstew · #4 Aug 24th, 2007, 13:05

ah, i think I might have fixed it. Looks like it might ba an issue with css inheritance.

let me play for 5 and if it works i'll post the answer

welshstew · #5 Aug 24th, 2007, 13:30

OK, so IE6 doesn't like css inheritance too much, or my inheritance was all wrong. either way, I have changed the css to be more archaic, and updated the JS to pull in the index that I have had to assign the divs

It works really nicely, so please use as you wish.

Stew

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Accordian Test Page</title>
<style type="text/css">
    .accordian{
        width:349px;
    }
    
    .accessible{
        display:none;
    }
    
    #heading1{
        height:59px;
        cursor:pointer;
    }
    
    .heading1off{
        background-color:#FF33CC;
    }
    
    .heading1on{
        background-color:#00FF66;
    }

    #heading2{
        height:59px;
        margin-top:2px;
        cursor:pointer;
    }
    
    .heading2off{
        background-color:#FF33CC;
    }
    
    .heading2on{
        background-color:#00FF66;
    }
    
    #heading3{
        height:40px;
        margin-top:2px;
        cursor:pointer;
    }
    
    .heading3off{
        background-color:#FF33CC;
    }
    
    .heading3on{
        background-color:#00FF66;
    }
    
    .content{
        width:339px;
        background-color:#DADAE9;
        padding: 0px 5px 0px 5px;
        overflow:hidden;
    }
</style>
<script language="javascript" type="text/javascript">
<!--
// constructor
function Accordian(PanelName, PanelCount){

    // retrieve session cookie value
    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
        offset = document.cookie.indexOf(search)
        // if cookie exists
        if (offset != -1) { 
        offset += search.length
        // set index of beginning of value
        end = document.cookie.indexOf(";", offset);
        // set index of end of cookie value
        if (end == -1) end = document.cookie.length;
        returnvalue=unescape(document.cookie.substring(offset, end))
        }
    }
    return returnvalue;
    }

    // set private fields
    this.animationFrames = 8;
    this.panelName = PanelName;
    this.panelCount = PanelCount;
    this.panelHeights = new Array();
    
    // event handler for panel clicks
    this.Panel_OnClick = function(PanelId){
        var clickedPanel = document.getElementById(PanelId);
        var index = clickedPanel.id.replace(this.panelName,"");
        if(clickedPanel.style.height == "0px"){
            // store session cookie
            document.cookie = clickedPanel.id + "=expanded"
            
            // expand panel
            this.ExpandPanel(clickedPanel, index);
        }
        else{
            // store session cookie
            document.cookie = clickedPanel.id + "=collapsed"

            // collapse panel
            this.CollapsePanel(clickedPanel, index);
        }
    }
    
    // close the panel
    this.CollapsePanel = function(Panel, Index){
        var pixels = this.panelHeights[Panel.id] / this.animationFrames;
        ResizePanel(Panel.id,"up",pixels,this.panelHeights[Panel.id],1,this.animationFrames, Index);
    }
    
    // open the panel
    this.ExpandPanel = function(Panel, Index){
        var pixels = this.panelHeights[Panel.id] / this.animationFrames;
        ResizePanel(Panel.id,"down",pixels,this.panelHeights[Panel.id],1,this.animationFrames, Index);
    }

    var userFrames = this.animationFrames;
    this.animationFrames = 1;
    // store panel max heights and restore session state
    for(var i = 1; i <= this.panelCount; i++){
        var currentPanel = document.getElementById(this.panelName + i);
        this.panelHeights[this.panelName + i] = currentPanel.style.height.replace("px","");
        if(get_cookie(this.panelName + i) == "collapsed" || get_cookie(this.panelName + i) == "") this.CollapsePanel(currentPanel, i);
    }
    this.animationFrames = userFrames;
}

function ResizePanel(PanelId, Direction, IncrementPixels, MaxPixels, CurrentFrame, MaxFrames, Index){
// run until last frame
    var Panel = document.getElementById(PanelId);
    if(CurrentFrame <= MaxFrames){
        if(Direction == "up"){
            // collapse
            Panel.style.height = MaxPixels - (CurrentFrame * IncrementPixels) + "px";
            
            // last frame
            if(CurrentFrame == MaxFrames){
                Panel.style.display = "none";
                document.getElementById("heading" + Index).className = "heading" + Index + "off";
            }
        }
        else{
            if(CurrentFrame == 1){
                document.getElementById("heading" + Index).className = "heading" + Index + "on";
                Panel.style.display = "block";
            }
            // expand
            Panel.style.height = CurrentFrame * IncrementPixels + "px";            
        }
        // move to next frame
        setTimeout("ResizePanel('" + PanelId + "','" + Direction + "'," + IncrementPixels + "," + MaxPixels + "," + (CurrentFrame + 1) + "," + MaxFrames + "," + Index + ");",30);
    }
}

//-->
</script>
</head>

<body>
        <div id="accordian" class="accordian">
        <div id="heading1" class="heading1on" onClick="accordian.Panel_OnClick('content1');"></div>
        <div class="accessible">Heading 1</div>
        <div id="content1" class="content" style="height:120px">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed id nibh et arcu ornare facilisis. Nullam viverra placerat augue. Praesent euismod ante vel velit.
        </div>
        <div id="heading2" class="headingon" onClick="accordian.Panel_OnClick('content2');"></div>
        <div class="accessible">Heading 2</div>
        <div id="content2" class="content" style="height:120px">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed id nibh et arcu ornare facilisis. Nullam viverra placerat augue. Praesent euismod ante vel velit.
        </div>    
        <div id="heading3" class="headingon" onClick="accordian.Panel_OnClick('content3');"></div>

        <div class="accessible">Heading 3</div>
        <div id="content3" class="content" style="height:120px">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed id nibh et arcu ornare facilisis. Nullam viverra placerat augue. Praesent euismod ante vel velit.
        </div>
    </div>
    <script language="javascript" type="text/javascript">
        var accordian = new Accordian('content',3,'/images/x');
    </script>
</body>
</html>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Pulling dynamic images/JS issue	whoooowhaaaa	Flash & Multimedia Forum	1	Jan 8th, 2007 20:55
Need lots of help with arrays, pulling my teeth here	peryan77	JavaScript Forum	0	Dec 6th, 2005 17:41
Content pulling script	Webforumz Staff	Classic ASP	2	Sep 10th, 2003 09:42

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
accordian not pulling through css in ie6