Accordion Content (ddaccordion) Script / IE8 error

**sgoldbaum** · 10-26-2011, 10:26 PM

1) Script Title: Accordion Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...daccordion.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:

Code:

<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!

**jscheuer1** · 10-27-2011, 06:38 AM

Works fine here in IE 8 if I add:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
	
    Women Hold Up Half the Sky Holiday Pop-up Shop Participating Organizations
| Audrey's Museum Store at the Skirball
</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta name="Keywords" content="fair trade, coops, co-ops, cooperatives, co-operatives, non-profit, women's organizations, women hold up half the sky, half the sky, kristof, nicholas kristof, sheryl wudunn, holiday shopping, holiday gifts, holiday gift ideas" />
    <meta name="Description" content="Shop for handcrafted goods representing women's cooperatives and female artisans from around the world. Proceeds of all sales will support more than seventy-nine organizations that promote gender equality in developing nations, helping women entrepreneurs provide for their families, educate their children, and pass on deep-rooted artistic and cultural traditions." />

    
    
<meta id="CustomMetaControl3" name="copy . . .

By way of possible explanation, if you put the tag in before you may have been viewing a cached version of the page, or you may have put it in the wrong place. It usually needs to be the first meta tag. Or you had your developer tools open in IE 8 and had inadvertantly already locked it into IE 8 mode. Or you may have been testing in a 'standalone' or IE tester version of IE 8. These browsers sometimes do not respect the meta http-equiv="X-UA-Compatible" tag.

One other possibility, your server might be forcing a higher mode.

Try it out, and if it doesn't work, leave it in so I can do some testing on it.

The browser cache may need to be cleared and/or the page refreshed to see changes.

However, this is not an ideal solution as it also forces IE 9 into IE 7 standards mode, which is limiting for that browser. But it's a nice trade off for the time being. I will look at it a bit more in depth to see if there is a way to deal with this without IE 7 standards mode.

**jscheuer1** · 10-27-2011, 07:20 AM

OK, this appears to work fine without forcing IE 7 standards mode. I'm not sure why though. I think it may have to do with the page's default use of jQuery 1.4.2. That version was a bit buggy. Add the highlighted:

Code:

ndors 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://shop.skirball.org/App_Themes/js-4079145252.axd?p=879435972,789250591,426661498,1209171513,-1684851731,-852815794,25544265,-1395075956,1786764688,"></script>
<!--[if IE 8]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<![endif]-->

<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.dynamicDriv . . .

You might be better off updating the copy of jQuery in the shop.skirball.org/App_Themes/js-4079145252.axd?p=879435972,789250591,426661498,1209171513,-1684851731,-852815794,25544265,-1395075956,1786764688, script, at least as an experiment. If you do, keep a backup just in case.

Oh and jQuery appears twice in that script, that also may be a problem.

**sgoldbaum** · 10-29-2011, 08:31 PM

Hi John,

Thanks for getting back to me so quickly! Unfortunately, I'm still having the problem in IE8 (our browsers here in the office are IE8.0.6001). I was having trouble getting the browser to use the IE conditional statements for whatever reason, so I changed to if lte IE9 to get it to work. I also went ahead and swapped out the jquery to the later version.

One thing that is a bit of a problem is that I'm limited as to what I can access on the server because we are using an ecommerce hosting service that keeps us PCI-compliant (more access=more liability). I'm still trying to figure out what could be the issue on my end. Let me know if you figure it out. Thanks for your help!

Sarah

**jscheuer1** · 10-30-2011, 04:07 AM

This (from the current source code of the page):

Code:

<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<![endif]-->

and this (also from the current source code):

Code:

<!--[if lte IE 8]>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<![endif]-->

Do nothing for at least two reasons. One is that X-UA-Compatible meta tags inside IE conditional comments do nothing because the browser mode must be set before the conditional is interpreted, and once set, cannot be changed. The other is similar. The X-UA-Compatible meta tag must be one of, preferably the first meta tags and come immediately after the title tag with nothing else coming between the title tag and the opening <html> tag. Otherwise you again risk the browser mode being set before the tag is read.

I see no evidence on the page that you tried my other solution, which I'm like 99% sure works:

Originally Posted by jscheuer1

Add the highlighted:

Code:

ndors 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://shop.skirball.org/App_Themes/js-4079145252.axd?p=879435972,789250591,426661498,1209171513,-1684851731,-852815794,25544265,-1395075956,1786764688,"></script>
<!--[if IE 8]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<![endif]-->

<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.dynamicDriv . . .

and doesn't require any X-UA-Compatible meta tag.

**sgoldbaum** · 10-31-2011, 06:47 PM

Hi John,

I apologize-- I fixed the duplication of the emulation code on our staging site, but did not push it to production for the link you were viewing. I am unable to place it above the head tag due to the restricted editing capabilities we have of the page templates.

Regarding the jquery fix, I did implement it and saw no change. I actually went ahead and switched the jquery call to the later version rather than using the conditional statement in the current code, but I did notice that when rendered in the browser, the code changes from the original:

Code:

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript" src="assets/images/content/halfthesky/ddaccordion.js">

to what you see when viewing the source:

Code:

</style>

<script type="text/javascript" src="http://shop.skirball.org/App_Themes/js-4079145252.axd?p=1383587221,-2029422722,789250591,426661498,1209171513,-1684851731,-852815794,25544265,-1395075956,1786764688,"></script>


<script type="text/javascript" src="/assets/images/content/halfthesky/ddaccordion.js">

Just to see, I used a different javascript to call jquery (same as here: http://stackoverflow.com/questions/3...013446#4013446), which worked, but did not cause any change in IE8.

I'm stumped. Thinking it may be interacting with something else on the page, so I'm going to see if our ecommerce support can insert the emulation code.

Thanks for your help.

**jscheuer1** · 10-31-2011, 10:59 PM

It can be difficult when changes you make are not respected when the file is uploaded and in turn served by the server. I've been there, and the host's admin was most uncooperative, while at the same time completely misunderstanding the situation - very frustrating.

Hopefully you will have better luck with your ecommerce support. At least the issues are different here than in the incident I'm recalling.

As a clarification, and on a different aspect of this - the use of the X-UA-Compatible meta tag. You may have misunderstood, or simply mistyped when you stated:

I am unable to place it above the head tag due to the restricted editing capabilities we have of the page templates.

You don't need to and it might not do any good there anyway. I stated:

The X-UA-Compatible meta tag must be one of, preferably the first meta tags and come immediately after the title tag with nothing else coming between the title tag and the opening <html> tag.

The preferred sequence is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
    Women Hold Up Half the Sky Holiday Pop-up Shop Participating Organizations
| Audrey's Museum Store at the Skirball
</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />	
    <meta name="Keywords" content="fair trade, coops, co-ops, cooperatives, co-operatives, non-profit, women's organizations, women hold up half the sky, hal . . .

Thread: Accordion Content (ddaccordion) Script / IE8 error

Thread Tools

Search Thread

Accordion Content (ddaccordion) Script / IE8 error

Bookmarks

Bookmarks

Posting Permissions