I'm working on a page that uses the Columnize plugin to organize a set of
divs into two columns.
The behavior that I want (and which works in FF & Safari) is this: when the
page loads, all .speakers divs are hidden except for one (specified by
script). Clicking on an H3 toggles the visibility of the next .speakers div
and hides the one that is open.
In IE 7 & 6, this only works if I turn delete this line:
jQuery('.columns').columnize({ columns: 2 });
To be more specific: clicking on the first H3 closes & opens the visible
.speakers div. Clicking on any other H3 does nothing. If columnizing is
disabled, the slideUp/slideDown functions work fine.
Ideas or work arounds would be much-appreciated! Thanks, Esther
URL: http://verbatimlectures.com/wordpress/ideas/
The divs follow this format:
<div id="issue-#" class="issue">
<h3>Issue Name</h3>
<div id="speakers-issue-#" class="speakers">
<div id="speaker-#-issue-#" class="speaker">
headshot src
<h4 class="entry-title"> speaker-permalink
Speaker Name </h4>
<p class="tagline">Tagline text</p>
<div class="clearfix"> </div>
</div> <!-- #speaker-% -->
</div> <!-- #speakers-% -->
</div> <!-- .isssue -->
Here is my script:
jQuery(document).ready(function() {
<!-- Columns & Toggling -->
jQuery('.issue').addClass("dontsplit");
jQuery('.speakers').addClass("dontsplit");
jQuery('.columns').columnize({ columns: 2 });
jQuery('.speaker-excerpt').addClass("dontsplit");
jQuery('div.speakers').hide();
jQuery('div#speakers-business').slideToggle("fast");
jQuery('.issue > h3').click(function () {
jQuery('div.speakers').slideUp("fast");
jQuery(this).next('div.speakers:hidden').slideDown("fast");
});
});
--
View this message in context:
http://www.nabble.com/Columnize-Plugin-%2B-ToggleSlide-%3D-problems-in-IE-tp20918586s27240p20918586.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
