Done :) >From line 3889 to 3895 in http://static.telia.dk/lib/jQuery/jquery-1.3.1-mod.js
Tested in small project in Opera9, Firefox 3, IE7, Chrome1, Safari3 on a windows Vista box. - dotnetCarpenter On Wed, Mar 11, 2009 at 1:27 AM, Anonymous <ilaughlou...@gmail.com> wrote: > inline-block is well supported but widely misunderstood. Even IE6 supports > it and it is much cleaner than using float that breaks the document flow. > jQuery should support this but so far I haven't been able to find anything. > I might make a patch to 1.3.1 (unfortunately there is a regression in 1.3.2 > that I haven't had time to investigate)... > > Article about inline-block: http://www.search-this.com/2008/08/28/ > > On Fri, Oct 24, 2008 at 6:00 PM, ricardobeat <ricardob...@gmail.com>wrote: > >> >> The inline-block property is not yet well-supported cross-browser. >> >> Use display:block, float:left, you'll get the same results (and spot >> some flaws in your layout too). >> >> In case someone is reading this: I suppose all animations in jQuery >> give the elements a display:block property? Is inline-block support >> coming in 1.3? >> >> - ricardo >> >> On Oct 23, 9:18 pm, bulgarian388 <bulgarian...@gmail.com> wrote: >> > Hi guys, I'm new to jQuery and I need some help. I have a UL with LIs. >> > In each LI there is a DIV with a bunch of content. The LIs are set to >> > display inline. >> > >> > Anyway, when I run the animate function, the LIs get shifted into >> > their default display (a list) and when the animation completes, the >> > LIs return to their inline display. It's driving me crazy trying to >> > figure it out, and I could definitely use some help. Here is the >> > entire 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> >> > <script type="text/javascript" src="jQuery.js"></script> >> > <script type="text/javascript"> >> > var container; >> > var lis; >> > var axes = []; >> > >> > $(function () { >> > container = $('#Container'); >> > lis = $('li', container); >> > axes = getAxes(); >> > >> > }); >> > >> > var getAxes = function (container) { >> > var axes = []; >> > >> > for (var i = 0; i < 600; (i = i + 100)) { >> > var axis = { >> > width: 100, >> > left: i, >> > right: (500 - i) >> > }; >> > >> > axes.push(axis); >> > }; >> > >> > return (axes); >> > >> > }; >> > >> > var Animate = function () { >> > var h = document.getElementById('height'); >> > var w = document.getElementById('width'); >> > >> > for (var i = 0; i < lis.length; i++) { >> > $(lis[i]).animate({ >> > height: h.value + 'px', >> > width: w.value + 'px' >> > }, 1000); >> > };}; >> > >> > </script> >> > <style type="text/css"> >> > * { >> > margin: 0; >> > outline: none; >> > padding: 0; >> > text-decoration: none; >> > >> > } >> > >> > body { >> > margin: 64px; >> > margin-left: auto; >> > margin-right: auto; >> > width: 600px; >> > >> > } >> > >> > #Container { >> > border: 3px solid #0000FF; >> > height: 180px; >> > overflow: hidden; >> > position: relative; >> > >> > } >> > >> > #Container ul { >> > overflow: hidden; >> > margin: 6px; >> > position: absolute; >> > white-space: nowrap; >> > >> > } >> > >> > #Container ul li { >> > border: 3px solid #FF0000; >> > display: inline-block; >> > height: 160px; >> > vertical-align: top; >> > width: 146px; >> > >> > } >> > >> > #Container ul li div { >> > overflow: hidden; >> > padding: 6px; >> > >> > } >> > >> > #Control { >> > list-style: none; >> > padding: 32px;} >> > >> > </style> >> > </head> >> > >> > <body> >> > <div id="Container"> >> > <ul> >> > <li >> > ><div >> > ><h1>Package 1</h1 >> > ><hr / >> > ><dl >> > ><dd>Website A</dd >> > ></dl >> > ><a href="#">Continue</a >> > ></div >> > ></li >> > ><li >> > ><div >> > ><h1>Package 2</h1 >> > ><hr / >> > ><dl >> > ><dd>Website A</dd >> > ><dd>Website B</dd >> > ></dl >> > ><a href="#">Continue</a >> > ></div >> > ></li >> > ><li >> > ><div >> > ><h1>Package 3</h1 >> > ><hr / >> > ><dl >> > ><dd>Website B</dd >> > ><dd>Website C</dd >> > ></dl >> > ><a href="#">Continue</a >> > ></div >> > ></li >> > ><li >> > ><div >> > ><h1>Package 4</h1 >> > ><hr / >> > ><dl >> > ><dd>Website A</dd >> > ><dd>Website C</dd >> > ></dl >> > ><a href="#">Continue</a >> > ></div >> > ></li >> > ><li >> > ><div >> > ><h1>Package 5</h1 >> > ><hr / >> > ><dl >> > ><dd>Website A</dd >> > ><dd>Website B</dd >> > ><dd>Website C</dd >> > ></dl >> > ><a href="#">Continue</a >> > ></div >> > ></li> >> > </ul> >> > </div> >> > <ul id="Control"> >> > <li> >> > <input type="text" id="height" /> >> > <input type="text" id="width" /> >> > <input type="button" onclick="Animate();" value="Go" /> >> > </li> >> > </ul> >> > </body> >> > </html> >> > >
