Sliding from right to left

Question

I am trying to move the panel to the right of the button to the left. Here is my css:

style.css:

.pToolContainer { position : absolute; right: 0; } .btn-pTool{ //display:block; position:absolute; right: 0; margin:0; padding:0; background-image: url(slide_button.png); background-repeat:no-repeat; } .btn-pToolName{ text-align: center; width: 26px; height: 190px; display: block; color: #fff; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 1em; line-height: 32px; } .pToolSlidePanel{ min-height: 185px; min-width: 185px; /*WIDTH OF HIDDEN SLIDE PANEL*/ display: none; /*THE ELEMENT WILL NOT BE DISPLAYED*/ border-right-width: 2px; /*ADDS RIGHT BORDER OF 2PX*/ border-left-width: 2px; /*ADDS LEFT BORDER OF 2PK*/ border-right-style: solid; /*MAKES RIGHT BORDER SOLID*/ border-left-style: solid; /*MAKES LEFT BORDER SOLID*/ border-right-color: #626262; /*RIGHT BORDER COLOR*/ border-left-color: #626262; /*LEFT BORDER COLOR*/ background-color: #949494; /*SLIDE PANEL BACKGROUND COLOR*/ border-bottom-width: 2px; /*ADDS BOTTOM BORDER OF 2PX*/ border-bottom-style: solid; /*MAKES BOTTOM BORDER SOLID*/ border-bottom-color: #626262; border-top-width: 2px; /*ADDS BOTTOM BORDER OF 2PX*/ border-top-style: solid; /*MAKES BOTTOM BORDER SOLID*/ border-top-color: #626262; /*BOTTOM BORDER COLOR*/ opacity: .8; /*SETS SLIDE PANEL BACKGROUND OPACITY TO 80%*/ margin: auto; /*CENTERS OUR SLIDE PANEL*/ position: fixed; //bottom: 50px; overflow:hidden; } 

test.html:

 <div class="pToolContainer"> <span class="btn-pTool"> <a class="btn-pToolName" href="#"></a> </span> <div class="pToolSlidePanel"></div> </div> 

I tried the following jquery statement, but it does not work:

 $(pToolSlidePanel).animate({width:'toggle'},2000); 

where pToolSlidePanel is an HTMLElement created in my javascript file using:

var pToolSlidePanel = document.createElement ("div");

I also tried the following tutorial http://www.learningjquery.com/2009/02/slide-elements-in-different-directions , but I keep getting an error message indicating that the HTMLElement does not have a css method

Answer 1

• DEMO: http://so.devilmaycode.it/sliding-from-right-to-left/

  $(function() { var iXS = 3, $slider = $('.panel-inner'), liW = $slider.find('li:first').width(), liFW = parseInt(liW * $slider.find('li').length); $slider.css('width', liFW + 'px'); $('.button a').click(function() { var left = (this.id == 'right') ? parseInt($slider.css('left').toString().replace('-', '')) : parseInt($slider.css('left')); var side = (this.id == 'right') ? (((left + (liW * iXS)) == liFW) ? 0 : -(left + liW)) : ((left < 0) ? -(parseInt(left.toString().replace('-', '')) - liW) : 0); rotate(side); return false; }); var rotate = function(leftY) { $slider.stop(true, true).animate({ left : leftY }, 500); } }); 

see the source code for a demo for complete code.

Answer 2

Try this one

 $(".pToolSlidePanel").animate({width:'toggle'},2000); 

For the pToolSlidePanel class , use $(".pToolSlidePanel")

and For example: id pToolSlidePanel use $("#pToolSlidePanel")

Answer 3

Edit: try this configuration here http://jsfiddle.net/TQZh5/50/

I removed some of the CSS to simplify it, but it should be trivial to add it back.

 $(pToolSlidePanel).animate({width:'toggle'},2000); 

Must be

$('.pToolSlidePanel').animate({width:'toggle'},2000) ;

Also, what are you binding the animation action to? Is jQuery wrapped in a ready () function so that it knows that the DOM is fully loaded?

Answer 4

Want to copy an item from position A (right) to B (left)?

HTML:

 <div class="pToolContainer"> <div class="pToolSlidePanel"> </div> </div> 

CSS

 .pToolContainer { width:400px; height:100px; background-color:#ccc; position:relative; } .pToolSlidePanel { position:absolute; right:0; top:0; width:100px; height:100px; background-color:#ffcc33; } 

Javascript (jQuery):

 $('.pToolSlidePanel').animate({ left: '-=200' }, 2000);