jquery - toggle div fills up remaining space in IE but not google chrome or firefox -
i use toggle function jquery toggle 4 blocks of content.
screencast of how works in google chrome: http://screenr.com/w8l
screencast of how not work, in ie 7: http://screenr.com/i8l
see page yourself: http://www.herkimer.edu/impact
for each header (h2) click on, starts section on new line, in ie 7 displays
example html:
<div class="divide-details"> <h2><a href="#" title="view student perspective" class="student-perspective">student perspective</a> <a href="#" title="view student perspective" class="student-perspective"><span>»</span></a></h2> <div id="student-perspective-details"> <p>content</p> <div class="clear-both"></div> </div> </div> <div class="divide-details"> <h2><a href="#" title="view social perspective" class="social-perspective">social perspective</a> <a href="#" title="view social perspective" class="social-perspective"><span>»</span></a></h2> <div id="social-perspective-details"> <p>content</p> <div class="clear-both"></div> </div> </div> <div class="divide-details"> <h2><a href="#" title="view taxpayer perspective" class="taxpayer-perspective">taxpayer perspective</a> <a href="#" title="view taxpayer perspective" class="taxpayer-perspective"><span>»</span></a></h2> <div id="taxpayer-perspective-details"> <p>content</p> <div class="clear-both"></div> </div> </div> <div class="divide-details"> <h2><a href="#" title="view business perspective" class="business-perspective">business perspective</a> <a href="#" title="view business perspective" class="business-perspective"><span>»</span></a></h2> <div id="business-perspective-details"> <p>content</p> <div class="clear-both"></div> </div> </div> css
#student-perspective-details, #social-perspective-details, #business-perspective-details, #taxpayer-perspective-details { display:none; border-bottom:1px solid #ccc; clear:both; overflow:auto; width:100%; clear:both; } .divide-details { float:left; margin:0 0 5px 0; padding:5px; } .divide-details h2 { font-size:1.5em; } .divide-details h2 a:link, .divide-details h2 a:visited { color:#000; text-decoration:none; } .divide-details h2 a:hover { color:#01552e; text-decoration:underline; } .divide-details h2 a:link span, .divide-details h2 a:visited span { color:#c56b02; text-decoration:underline; } .divide-details h2 a:hover span { color:#01552e; text-decoration:underline; } jquery toggle
$(document).ready(function() { $('.student-perspective').click(function() { $("#student-perspective-details").slidetoggle(100); return false; }); $('.social-perspective').click(function() { $("#social-perspective-details").slidetoggle(100); return false; }); $('.taxpayer-perspective').click(function() { $("#taxpayer-perspective-details").slidetoggle(100); return false; }); $('.business-perspective').click(function() { $("#business-perspective-details").slidetoggle(100); return false; }); $('.student-perspective span').click(function() { $("#student-perspective-details").slidetoggle(100); return false; }); $('.social-perspective span').click(function() { $("#social-perspective-details").slidetoggle(100); return false; }); $('.taxpayer-perspective span').click(function() { $("#taxpayer-perspective-details").slidetoggle(100); return false; }); $('.business-perspective span').click(function() { $("#business-perspective-details").slidetoggle(100); return false; }); });
without getting in nitty gritty of why or how it's not working, easy fix apply callback function on slidetoggle toggle float:left property .divide-details div. imagine removing when slidetoggle activates, , putting once it's done solve cross-browser issue.
an alternative solution set h2 elements inline on page load (so don't mess rendering without js enabled), remove float:left setting, , toggle display:block on/off when toggling details divs.
Comments
Post a Comment