[jQuery] Re: slide one div out left while sliding one in right

2009-09-04 Thread W. Young 

I tried animate before I found the slide effect and obviously it isn't
quite that simple if the slide effect won't work.

On Aug 29, 7:56 am, Anoop kumar V anoopkum...@gmail.com wrote:
 You can also try to use animate which is part of jquery core. Look up
 some examples on the jquery website, there are quite simple.

 -Anoop

 On 8/29/09, Charlie charlie...@gmail.com wrote:



  there are lots of plugins to do this

  look for carousel or scroll in a plugin search

  jCarousel and scrollable are 2 excellent ones that come to mind as well as
  scrollto

  W. Young wrote:

  A good example of the behavior I want is on the firefox addons home
  pagehttps://addons.mozilla.org/en-US/firefox/?application=firefox

  At the top, there is a pane for viewing the content of three items at
  a time with a back and forward button to scroll through.
  I need a similar way to slide one item at a time.

  On Aug 26, 10:16 am, W. Young wayland.yo...@docupak.com wrote:

  I have a container div with two inner divs.  I have one inner div
  visible taking up 100% of the visible area and another hidden div.  I
  want the visible div to slide to the left while simultaneously sliding
  the other div in from the right.  This works fine except that while
  the right div is sliding in, it appears below the left div.

  How can this be done?

  Here is the code:

  script type=text/javascript src=js/jQuery/jquery.js/script
  script type=text/javascript src=js/jQuery/effects.core.js/
  script
  script type=text/javascript src=js/jQuery/effects.slide.js/
  script

  script type=text/javascript
          $(document).ready(function() {
                  $(#slide).click(function() {
                          $(#leftDiv).hide('slide', { direction: 'left'
  }, 1000);
                          $(#rightDiv).show('slide', { direction: 'right'
  }, 1000);
                          return false;
                  });
          });
  /script

  div id=container style=height: 100px; 
          div id=leftDiv style=float: left; border: solid 1px black;
  height: 100px; width: 100%;
                  spansome text to slide out left/span
          /div
          div id=rightDiv style=float: left; display: none; border:
  solid
  1px black; height: 100px; width: 100%;
                  spansome text to slide in right/span
          /div
  /div
  div style=clear: both; height: 100px;
          input id=slide type=button value=Slide /
  /div

 --

 Thanks,
 Anoop

[jQuery] Re: slide one div out left while sliding one in right

2009-08-29 Thread W. Young 

A good example of the behavior I want is on the firefox addons home
page https://addons.mozilla.org/en-US/firefox/?application=firefox

At the top, there is a pane for viewing the content of three items at
a time with a back and forward button to scroll through.
I need a similar way to slide one item at a time.

On Aug 26, 10:16 am, W. Young wayland.yo...@docupak.com wrote:
 I have a container div with two inner divs.  I have one inner div
 visible taking up 100% of the visible area and another hidden div.  I
 want the visible div to slide to the left while simultaneously sliding
 the other div in from the right.  This works fine except that while
 the right div is sliding in, it appears below the left div.

 How can this be done?

 Here is the code:

 script type=text/javascript src=js/jQuery/jquery.js/script
 script type=text/javascript src=js/jQuery/effects.core.js/
 script
 script type=text/javascript src=js/jQuery/effects.slide.js/
 script

 script type=text/javascript
         $(document).ready(function() {
                 $(#slide).click(function() {
                         $(#leftDiv).hide('slide', { direction: 'left' }, 
 1000);
                         $(#rightDiv).show('slide', { direction: 'right' }, 
 1000);
                         return false;
                 });
         });
 /script

 div id=container style=height: 100px; 
         div id=leftDiv style=float: left; border: solid 1px black;
 height: 100px; width: 100%;
                 spansome text to slide out left/span
         /div
         div id=rightDiv style=float: left; display: none; border: solid
 1px black; height: 100px; width: 100%;
                 spansome text to slide in right/span
         /div
 /div
 div style=clear: both; height: 100px;
         input id=slide type=button value=Slide /
 /div

[jQuery] Re: slide one div out left while sliding one in right

2009-08-29 Thread Charlie 





there are lots of plugins to do this

look for carousel or scroll in a plugin search

jCarousel and scrollable are 2 excellent ones that come to mind as well
as scrollto

W. Young wrote:

  A good example of the behavior I want is on the firefox addons home
page https://addons.mozilla.org/en-US/firefox/?application=firefox

At the top, there is a pane for viewing the content of three items at
a time with a back and forward button to scroll through.
I need a similar way to slide one item at a time.

On Aug 26, 10:16am, "W. Young" wayland.yo...@docupak.com wrote:
  
  
I have a container div with two inner divs. I have one inner div
visible taking up 100% of the visible area and another hidden div. I
want the visible div to slide to the left while simultaneously sliding
the other div in from the right. This works fine except that while
the right div is sliding in, it appears below the left div.

How can this be done?

Here is the code:

script type="text/_javascript_" src=""/script
script type="text/_javascript_" src=""/
script
script type="text/_javascript_" src=""/
script

script type="text/_javascript_"
$(document).ready(function() {
$("#slide").click(function() {
$("#leftDiv").hide('slide', { direction: 'left' }, 1000);
$("#rightDiv").show('slide', { direction: 'right' }, 1000);
return false;
});
});
/script

div id="container" style="height: 100px; "
div id="leftDiv" style="float: left; border: solid 1px black;
height: 100px; width: 100%;"
spansome text to slide out left/span
/div
div id="rightDiv" style="float: left; display: none; border: solid
1px black; height: 100px; width: 100%;"
spansome text to slide in right/span
/div
/div
div style="clear: both; height: 100px;"
input id="slide" type="button" value="Slide" /
/div

[jQuery] Re: slide one div out left while sliding one in right

2009-08-29 Thread Anoop kumar V 

You can also try to use animate which is part of jquery core. Look up
some examples on the jquery website, there are quite simple.

-Anoop

On 8/29/09, Charlie charlie...@gmail.com wrote:
 there are lots of plugins to do this

 look for carousel or scroll in a plugin search

 jCarousel and scrollable are 2 excellent ones that come to mind as well as
 scrollto

 W. Young wrote:

 A good example of the behavior I want is on the firefox addons home
 page https://addons.mozilla.org/en-US/firefox/?application=firefox

 At the top, there is a pane for viewing the content of three items at
 a time with a back and forward button to scroll through.
 I need a similar way to slide one item at a time.

 On Aug 26, 10:16 am, W. Young wayland.yo...@docupak.com wrote:


 I have a container div with two inner divs.  I have one inner div
 visible taking up 100% of the visible area and another hidden div.  I
 want the visible div to slide to the left while simultaneously sliding
 the other div in from the right.  This works fine except that while
 the right div is sliding in, it appears below the left div.

 How can this be done?

 Here is the code:

 script type=text/javascript src=js/jQuery/jquery.js/script
 script type=text/javascript src=js/jQuery/effects.core.js/
 script
 script type=text/javascript src=js/jQuery/effects.slide.js/
 script

 script type=text/javascript
         $(document).ready(function() {
                 $(#slide).click(function() {
                         $(#leftDiv).hide('slide', { direction: 'left'
 }, 1000);
                         $(#rightDiv).show('slide', { direction: 'right'
 }, 1000);
                         return false;
                 });
         });
 /script

 div id=container style=height: 100px; 
         div id=leftDiv style=float: left; border: solid 1px black;
 height: 100px; width: 100%;
                 spansome text to slide out left/span
         /div
         div id=rightDiv style=float: left; display: none; border:
 solid
 1px black; height: 100px; width: 100%;
                 spansome text to slide in right/span
         /div
 /div
 div style=clear: both; height: 100px;
         input id=slide type=button value=Slide /
 /div








-- 

Thanks,
Anoop