ooops, I got another problem,
in FF3, CSS property white-space will make image have 3px padding, but in
IE, it's not, any good suggestion?
On Tue, Nov 11, 2008 at 7:54 PM, Alexandre Plennevaux
<[EMAIL PROTECTED]>wrote:
>
> my pleasure :)
>
> On Tue, Nov 11, 2008 at 12:53 PM, David Wu <[EMAIL PROTECTED]> wrote:
> > Fantastic, thanks a lot!!!!
> >
> > On Tue, Nov 11, 2008 at 7:32 PM, Alexandre Plennevaux <
> [EMAIL PROTECTED]>
> > wrote:
> >>
> >> activate the button in a callback function after the animate
> >>
> >> var isClickable = true;
> >>
> >> right.click(function()
> >> {
> >> if(ul.css('left') != (maxMove * -1) + 'px' &&
> >> isClickable)
> >> {
> >> isClickable = false;
> >> ul.animate({left:'-=50px'},function(){
> >> isClickable = true;
> >> });
> >> }
> >> });
> >>
> >>
> >> On Tue, Nov 11, 2008 at 11:06 AM, David .Wu <[EMAIL PROTECTED]> wrote:
> >> >
> >> > Hi everybody
> >> > This my testing gallery slider, it will count image's amount, and
> >> > prevent it not to outside the wrapper, but I got one problem, if user
> >> > click button after the animation finished, it's done well, but if user
> >> > click too fast, the js will not catch the left property in time
> >> > correctly, how to fix the bug?
> >> >
> >> > CSS
> >> > <style type="text/css">
> >> > <!--
> >> > body { font-size: 12px; }
> >> > #wrapper
> >> > {
> >> > height: 50px;
> >> > width: 50px;
> >> > overflow: hidden;
> >> > position: relative;
> >> > border:1px #FF0000 solid;
> >> > }
> >> > ul
> >> > {
> >> > margin: 0px;
> >> > padding: 0px;
> >> > list-style-type: none;
> >> > position: absolute;
> >> > white-space:nowrap;
> >> > }
> >> > li
> >> > {
> >> > display:inline;
> >> > margin:0 -3px 0 0;
> >> > width:50px;
> >> > height:50px;
> >> > overflow:hidden;
> >> > }
> >> > -->
> >> > </style>
> >> >
> >> > HTML
> >> > <div id="wrapper">
> >> > <ul>
> >> > <li><img src="1.jpg" border="0" /></li>
> >> > <li><img src="2.jpg" border="0" /></li>
> >> > <li><img src="3.jpg" border="0" /></li>
> >> > </ul>
> >> > </div>
> >> > <input type="button" name="left" id="left" value="left" />
> >> > <input type="button" name="right" id="right" value="right" />
> >> >
> >> > JavaScript
> >> > <script language="javascript">
> >> > <!--
> >> > $(document).ready(function()
> >> > {
> >> > var wrapper = $('#wrapper');
> >> > var ul = $('ul',wrapper);
> >> > var itemsWidth = $('li',ul).outerWidth();
> >> > var itemsLen = $('li',ul).size();
> >> > var maxMove = (itemsLen - 1) * itemsWidth;
> >> > var minMove = 0;
> >> > var right = $('#right');
> >> > var left = $('#left');
> >> > right.click(function()
> >> > {
> >> > if(ul.css('left') != (maxMove * -1) + 'px')
> >> > {
> >> > ul.animate({left:'-=50px'});
> >> > }
> >> > });
> >> > left.click(function()
> >> > {
> >> > if(ul.css('left') != minMove + 'px')
> >> > {
> >> > ul.animate({left:'+=50px'});
> >> > }
> >> > });
> >> > });
> >> > //-->
> >> > </script>
> >> >
> >
> >
>
