Ticket #4780: accordion_a_zoom_1.html

File accordion_a_zoom_1.html, 1.5 KB (added by rdworth, August 13, 2009 06:34PM UTC)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div { clear: left; }
</style>
<script src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.core.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.accordion.js"></script>
<script>
$(function() {
	$('#click').click(function() {
		$('#accordion').accordion().find('h3').text('Accordion');
		$('#accordion a:has(img):last').css('zoom', '');
	});
});
</script>
</head>
<body>
<button id="click">Click to make accordion</button>
<div id="accordion">
	<h3>Not Accordion</h3>
	<div>
		<div>
			<a href="http://jqueryui.com/">
				<img style="float:left;" src="http://jqueryui.com/images/home-nav-widgets.gif">
			</a>
			This text should be wrapping around the image to the left, with no whitespace above it. If it isn't in IE, it's because of the following code in ui.accordion.js:
<code><pre>// IE7-/Win - Extra vertical space in lists fixed
if ($.browser.msie) {
	this.element.find('a').css('zoom', '1');
}
</pre></code>
		</div>
		<hr>
		<div>
			<a href="http://jqueryui.com/">
				<img style="float:left;" src="http://jqueryui.com/images/home-nav-widgets.gif">
			</a>
			This text should has been made to wrap around the image to the left, with no whitespace above it, by resetting the zoom css on the A element that wraps the img.
<code><pre>$('#accordion a:has(img):last').css('zoom', '');
</pre></code>
		</div>
	</div>
</div>
</body>
</html>

Download in other formats:

Original Format