Hi Jonathon,
I noticed two problems when I copied your code below and pasted it
into a new page:
1. <script type="application/javascript" language="javasacript">
I changed it to this:
<script type="text/javascript">
The language attribute is unnecessary, and IE7 does not like the
script being treated as an application.
By the way, Douglas Crockford says that the type is unnecessary, too,
but I'm not ready to give that one up yet.
2. funky line endings.
Not sure if this happened when you pasted it into a new file or after
it got into my email program. In any case, I got rid of the stray
characters that were introduced at some point.
Take a look at http://test.learningjquery.com/jonathon.html
By the way, after I changed those two things, I was seeing a weird
flicker, only in IE7, when I clicked on an h3 and one of the divs was
already shown. The problem had something to do with IE7 being in
quirks mode, so I put in a DOCTYPE with a system identifier, and now
it runs smoothly.
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Sep 19, 2007, at 7:20 PM, Jonathon Stierman wrote:
Hi all --
This is my first foray into the jQuery library! I'm working on an
Accordion
-- and I've got everything running smoothly in Firefox, but for the
life of
me I cannot get this example to function using IE:
http://www.learningjquery.com/2007/03/accordion-madness
It functions just fine on their site in IE7, but when I imported
the data
(perhaps I missed something? I did strip out most of what I
thought wasn't
being used) to my test environment, IE fails to perform the
actions. No
error messages or anything -- just no actions. Here's the code I
am using:
<html>
<head>
<script language="JavaScript"
src="/includes/jQuery/jquery-1.2.1.js" type="text/javascript"></
script>
<script type="application/javascript" language="javascript">
$(document).ready(
function()
{
$('div.demo-show> div').hide();
$('div.demo-show> h3').click(
function()
{
var $nextDiv =
$(this).next();
var $visibleSiblings
= $nextDiv.siblings('div:visible');
if
($visibleSiblings.length )
{
$visibleSiblings.slideUp('fast', function() {$nextDiv.slideToggle
('fast');
});
}
else
{
$nextDiv.slideToggle('fast');
}
}
);
}
);
</script>
<style>
/* -----------------------------------
=more show, more hide
-------------------------------------- */
.demo-show {
width: 350px;
margin: 1em .5em;
}
.demo-show h3 {
margin: 0;
padding: 5px;
width: 338px;
background: #bfcd93;
border-top: 1px solid #386785;
border-bottom: 1px solid #386785;
cursor: pointer;
}
.demo-show div {
padding: 1em .25em .5em;
}
.demo-show p {
margin-top: 0;
}
</style>
</head>
<body>
<div class="demo-show">
<h3>Title 1</h3>
<div>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui
officia deserunt mollit anim id est laborum.</div>
<h3>Title 2</h3>
<div>Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit
anim id est laborum.</div>
<h3>Title 3</h3>
<div>Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</div>
</div>
</body>
</html>
Thanks in advance for any insights!
Jonathon
