sgoldbaum
10-26-2011, 10:26 PM
1) Script Title: Accordion Content Script
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm
3) Describe problem: <div>'s do not expand in IE8, though they jump when "collapsing" and you can see the expanded content for a quick second. They are set to expand onClick. Works perfectly in IE9, Firefox, Google Chrome, and Safari. The script will also work in IE8 when set to Compatibility View.
I'm not sure what might be causing the issue. I've also tried doing a conditional statement for IE8 users to force IE7 emulation, but this doesn't work either.
The page is here: http://shop.skirball.org/WHUHTS_HolidayPopupShop.aspx
Here's the javascript and related CSS as it appears within the <head> tags:
<style type="text/css">
.HTSvendors{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 2px;
width: 100%;
font-family: Helvetica, Tahoma, Arial sans-serif;
display: inline-block;
}
.openHTSvendor{ /*class added to contents of 1st demo when they are open*/
font-weight: bold;
border-top: 1px solid #cccccc;
}
.closedHTSvendor{
border-top: 1px solid #cccccc;
}
.theHTSvendor{
width: 100%;
font-family: Helvetica, Tahoma, Arial, sans-serif;
clear: both;
/*border-bottom: 1px solid #cccccc;*/
display: inline-block;
}
.HTSIndexHeading{
width: 100%;
font-weight: bold;
color: #50C8E8;
}
.vendor50{
float: left;
width: 50%;
}
.vendor15{
float: left;
width: 15%;
padding-top: 5px;
}
.vendor10{
float: left;
width: 10%;
text-align: center;
}
.vendor35{
width: 35%;
float: right;
text-align: center;
padding-top: 10px;
}
.vendor50 blockquote{
font-family: Helvetica, Tahoma, Arial, sans-serif;
font-style: italic;
color: #784400;
clear: both;
}
.vendor50 p{
padding-right: 10px;
}
.HTSvendors img, .HTSvendorindex img{
padding-right: 5px;
border: 0px;
}
.vendor15 ul, .vendor15 li{
line-height: 133%;
list-style-type: circle;
list-style-position: outside;
color: #E46F1D;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/images/content/halfthesky/ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
//Initialize first demo:
ddaccordion.init({
headerclass: "HTSvendors", //Shared CSS class name of headers group
contentclass: "theHTSvendor", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["closedHTSvendor", "openHTSvendor"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "0", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
Any help is much appreciated. Thanks!
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm
3) Describe problem: <div>'s do not expand in IE8, though they jump when "collapsing" and you can see the expanded content for a quick second. They are set to expand onClick. Works perfectly in IE9, Firefox, Google Chrome, and Safari. The script will also work in IE8 when set to Compatibility View.
I'm not sure what might be causing the issue. I've also tried doing a conditional statement for IE8 users to force IE7 emulation, but this doesn't work either.
The page is here: http://shop.skirball.org/WHUHTS_HolidayPopupShop.aspx
Here's the javascript and related CSS as it appears within the <head> tags:
<style type="text/css">
.HTSvendors{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 2px;
width: 100%;
font-family: Helvetica, Tahoma, Arial sans-serif;
display: inline-block;
}
.openHTSvendor{ /*class added to contents of 1st demo when they are open*/
font-weight: bold;
border-top: 1px solid #cccccc;
}
.closedHTSvendor{
border-top: 1px solid #cccccc;
}
.theHTSvendor{
width: 100%;
font-family: Helvetica, Tahoma, Arial, sans-serif;
clear: both;
/*border-bottom: 1px solid #cccccc;*/
display: inline-block;
}
.HTSIndexHeading{
width: 100%;
font-weight: bold;
color: #50C8E8;
}
.vendor50{
float: left;
width: 50%;
}
.vendor15{
float: left;
width: 15%;
padding-top: 5px;
}
.vendor10{
float: left;
width: 10%;
text-align: center;
}
.vendor35{
width: 35%;
float: right;
text-align: center;
padding-top: 10px;
}
.vendor50 blockquote{
font-family: Helvetica, Tahoma, Arial, sans-serif;
font-style: italic;
color: #784400;
clear: both;
}
.vendor50 p{
padding-right: 10px;
}
.HTSvendors img, .HTSvendorindex img{
padding-right: 5px;
border: 0px;
}
.vendor15 ul, .vendor15 li{
line-height: 133%;
list-style-type: circle;
list-style-position: outside;
color: #E46F1D;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/images/content/halfthesky/ddaccordion.js">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
//Initialize first demo:
ddaccordion.init({
headerclass: "HTSvendors", //Shared CSS class name of headers group
contentclass: "theHTSvendor", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["closedHTSvendor", "openHTSvendor"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "0", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
Any help is much appreciated. Thanks!