Develop Reference

animate jquery working only once

I am trying to use a simple animation feature of jquery. In my application, I have two button " Slide Right" and "Slide Left". When we click on these buttons, these move the box to left or right respectively. My move right button is working perfectly but my move right button is working only once. What's wrong with my code? Here's my code:
$(document).ready(function() {
$("#slideRightButton").click(function() {
$("#boxToBeMoved").animate({
left: '+=10%'
});
});
$("#slideLeftButton").click(function() {
$("#boxToBeMoved").animate({
right: '+=10%'
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="slideRightButton">Slide Right</button>
<button id="slideLeftButton">Slide Left</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div id="boxToBeMoved" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
The above code is just an extension of the jquery tutorial by W3Schools which can be found here

You are changing the left and right property of the box, It looks like the right property is taking precedence and preventing the left from doing anything.
If you make both use the same property, one adding to it and the other subtracting, it should work.
$("#slideRightButton").click(function(){
$("div").animate({left: '+=10%'});
});
$("#slideLeftButton").click(function(){
$("#boxToBeMoved").animate({left: '-=10%'});
});

Updated to include author's request to not exceed the maximum width.
To accomplish this, I included a wrapper div with a fixed width.
When sliding to the right, it checks if the value will be bigger than parent's width and, if positive, returns.
Same when sliding to the left, but it returns if the value is negative, preventing the box to slide outside the limits of the parent div.
$(document).ready(function() {
const slideVal = 30; // slide value (in pixels)
$("#slideRightButton").click(function() {
var box = $("#boxToBeMoved");
if (parseInt(box.css("left")) + slideVal > parseInt(box.parent().width())) return;
box.animate({
left: '+=' + slideVal
});
});
$("#slideLeftButton").click(function() {
var box = $("#boxToBeMoved");
if (parseInt(box.css("left")) - slideVal < 0) return;
box.animate({
left: '-=' + slideVal
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="slideRightButton">Slide Right</button>
<button id="slideLeftButton">Slide Left</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div id="wrapper" style="width: 200px">
<div id="boxToBeMoved" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</div>

makes sticker div stop just above the footer on scroll - document.outerHeight give wrong results

css
.stick{position: fixed !important;}
sticker div with id="summary-div"
<div class="col-sm-8"><!-- this Div has 4 accordions div--></div>
<div class="col-sm-4">
<div>
<div>
<div>
<div id="order_summary">
<div id="summary-div"></div>
</div>
</div>
</div>
</div>
</div>
footer
<div class="container-fluid" id="stickEndPlace"></div>
The below jquery code is making it stick and unstick but the stickermax which is calculated dynamically to determine the css property top to stick it or unstick right above footer. BUT, the problem is; I have to give some static values for some of the scenarios for the "stickermax" variable to be pretty fit above footer otherwise, it is coming sometimes little below or little above the footer having id of "stickEndPlace". Please, help. Thanks
var s = $("#summary-div");
var pos = s.position();
var stickermax = $(window).outerHeight() - $("#stickEndPlace").outerHeight() - s.outerHeight();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top && windowpos < stickermax) {
$("#summary-div").addClass("stick"); //stick it
$("#summary-div").css("top",""); //kill top css property which sets while unsticking
} else if (windowpos >= stickermax) {
$("#summary-div").removeClass("stick"); //un-stick
$("#summary-div").css({top: stickermax + "px"}); //set sticker right above the footer
} else {
$("#summary-div").removeClass("stick"); //top of page
}
});
problem
The actual problem coming is from this line of code.
var stickermax = $(window).outerHeight() - $("#stickEndPlace").outerHeight() - s.outerHeight();
This "stickermax" value is not coming correctly so the Scroll Div sometimes go below inside footer and sometimes stops above footer.
How to fix that "stickermax" because it is the dynamic "top" css property which is making the sticker DIV positioning.

Jquery clickable resize animation. Maximizing div over others

I can't come up with solution to my problem.
So I've got cool idea to make fancy looking user panel but can't figure out how to
make jquery work right ;). Here's the thing:
html:
<div id="content">
<div id="containerleft">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
<div id="box5" class="box"></div>
<div id="box6" class="box"></div>
</div>
</div>
JS:
$(".box").click(function(){
$(this).css({'position' : 'absolute'}).animate({
width: '100%',
height : '100%'},300);
});
Here is how it work with css:
http://jsfiddle.net/85mJN/1/
What I'm trying to achieve is resize div from his position, to size of parent div, growing effect I would call.
As you can see, after .click div is moving to the left top corner, and then its fiting to parent, also its ruing whole thing by moving other guys. I've tried to mess around with .css('z-index': '999') for animated div, but that was a miss. Main goal is to expand div from his original position, above other div's, without moving them.
~ sandman

$(".box").click(function(){
var clone = $(this).clone().addClass('active');
var parent = $(this).parent();
var pos = $(this).position();
$(this).append(clone);
clone.css({'position' : 'absolute', left: pos.left + 'px', top: pos.top + 'px'}).animate({
width: '100%',
height : '100%',
top: 0,
left: 0
},300);
});
http://jsfiddle.net/85mJN/3/
Note that your box element should have static position so the appended box absolute position will be wrapped from the container.
UPDATE:
Added close on click while a box is active.
http://jsfiddle.net/85mJN/4/
ALSO i still think the best way to use CSS3 transition with toggleClass. It requires less code, it's much failsafe and it's smoother when your using complex divs as it's hardware accelerated. I would not worry about older browser, they won't animate but show the big box...

The movement shown in your example is a product of removing the clicked on div from the flow and then the other divs readjusting since they are floated.
A simple solution is to make the #containerleft{ overflow:hidden; ... }
However if that doesn't satisfy your needs making a clone works as well:
$('#containerleft').on("click", ".box", function(){
var $this = $(this);
console.log($this.css('position'));
if($this.css('position') === 'absolute'){
$this.animate({width:'0px',height:'0px'},300);
//$this.remove();
}
else {
$this.clone().appendTo($this.parent()).css({'position' : 'absolute'}).animate({
width: '100%',
height : '100%'},300);
}
});
http://jsfiddle.net/e4NG5/2/

How to scroll to specific item using jQuery?

I have a big table with vertical scroll bar.
I would like to scroll to a specific line in this table using jQuery/JavaScript.
Are there built-in methods to do this?
Here is a little example to play with.
div {
width: 100px;
height: 70px;
border: 1px solid blue;
overflow: auto;
}
<div>
<table id="my_table">
<tr id='row_1'><td>1</td></tr>
<tr id='row_2'><td>2</td></tr>
<tr id='row_3'><td>3</td></tr>
<tr id='row_4'><td>4</td></tr>
<tr id='row_5'><td>5</td></tr>
<tr id='row_6'><td>6</td></tr>
<tr id='row_7'><td>7</td></tr>
<tr id='row_8'><td>8</td></tr>
<tr id='row_9'><td>9</td></tr>
</table>
</div>

Dead simple. No plugins needed.
var $container = $('div'),
$scrollTo = $('#row_8');
$container.scrollTop(
$scrollTo.offset().top - $container.offset().top + $container.scrollTop()
);
// Or you can animate the scrolling:
$container.animate({
scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop()
});​
Here is a working example.
Documentation for scrollTop.

I realise this doesn't answer scrolling in a container but people are finding it useful so:
$('html,body').animate({scrollTop: some_element.offset().top});
We select both html and body because the document scroller could be on either and it is hard to determine which. For modern browsers you can get away with $(document.body).
Or, to go to the top of the page:
$('html,body').animate({scrollTop: 0});
Or without animation:
$(window).scrollTop(some_element.offset().top);
OR...
window.scrollTo(0, some_element.offset().top); // native equivalent (x, y)

I agree with Kevin and others, using a plugin for this is pointless.
window.scrollTo(0, $("#element").offset().top);

I managed to do it myself. No need for any plugins. Check out my gist:
// Replace #fromA with your button/control and #toB with the target to which
// You wanna scroll to.
//
$("#fromA").click(function() {
$("html, body").animate({ scrollTop: $("#toB").offset().top }, 1500);
});

You can use scrollIntoView() method in javascript.
just give id.scrollIntoView();
For example
row_5.scrollIntoView();

You can use the the jQuery scrollTo plugin plugin:
$('div').scrollTo('#row_8');

Scroll element to center of container
To bring the element to the center of the container.
DEMO on CODEPEN
JS
function scrollToCenter() {
var container = $('.container'),
scrollTo = $('.5');
container.animate({
//scrolls to center
scrollTop: scrollTo.offset().top - container.offset().top + scrollTo.scrollTop() - container.height() / 2
});
}
HTML
<div class="container">
<div class="1">
1
</div>
<div class="2">
2
</div>
<div class="3">
3
</div>
<div class="4">
4
</div>
<div class="5">
5
</div>
<div class="6">
6
</div>
<div class="7">
7
</div>
<div class="8">
8
</div>
<div class="9">
9
</div>
<div class="10">
10
</div>
</div>
<br>
<br>
<button id="scroll" onclick="scrollToCenter()">
Scroll
</button>
css
.container {
height: 60px;
overflow-y: scroll;
width 60px;
background-color: white;
}
It is not exact to the center but you will not recognice it on larger bigger elements.

You can scroll by jQuery and JavaScript
Just need two element jQuery and this JavaScript code :
$(function() {
// Generic selector to be used anywhere
$(".js-scroll-to-id").click(function(e) {
// Get the href dynamically
var destination = $(this).attr('href');
// Prevent href=“#” link from changing the URL hash (optional)
e.preventDefault();
// Animate scroll to destination
$('html, body').animate({
scrollTop: $(destination).offset().top
}, 1500);
});
});
$(function() {
// Generic selector to be used anywhere
$(".js-scroll-to-id").click(function(e) {
// Get the href dynamically
var destination = $(this).attr('href');
// Prevent href=“#” link from changing the URL hash (optional)
e.preventDefault();
// Animate scroll to destination
$('html, body').animate({
scrollTop: $(destination).offset().top
}, 1500);
});
});
#pane1 {
background: #000;
width: 400px;
height: 400px;
}
#pane2 {
background: #ff0000;
width: 400px;
height: 400px;
}
#pane3 {
background: #ccc;
width: 400px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>
<!-- example of a fixed nav menu -->
<ul class="nav">
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>

Not sure why no one says the obvious, as there's a built in javascript scrollTo function:
scrollTo( $('#element').position().top );
Reference.

I did a combination of what others have posted. Its simple and smooth
$('#myButton').click(function(){
$('html, body').animate({
scrollTop: $('#scroll-to-this-element').position().top },
1000
);
});

Contrary to what most people here are suggesting, I'd recommend you do use a plugin if you want to animate the move. Just animating scrollTop is not enough for a smooth user experience. See my answer here for the reasoning.
I have tried a number of plugins over the years, but eventually written one myself. You might want to give it a spin: jQuery.scrollable. Using that, the scroll action becomes
$container.scrollTo( targetPosition );
But that's not all. We need to fix the target position, too. The calculation you see in other answers,
$target.offset().top - $container.offset().top + $container.scrollTop()
mostly works but is not entirely correct. It doesn't handle the border of the scroll container properly. The target element is scrolled upwards too far, by the size of the border. Here is a demo.
Hence, a better way to calculate the target position is
var target = $target[0],
container = $container[0];
targetPosition = $container.scrollTop() + target.getBoundingClientRect().top - container.getBoundingClientRect().top - container.clientTop;
Again, have a look at the demo to see it in action.
For a function which returns the target position and works for both window and non-window scroll containers, feel free to use this gist. The comments in there explain how the position is calculated.
In the beginning, I have said it would be best to use a plugin for animated scrolling. You don't need a plugin, however, if you want to jump to the target without a transition. See the answer by #James for that, but make sure you calculate the target position correctly if there is a border around the container.

For what it's worth, this is how I managed to achieve such behavior for a general element which can be inside a DIV with scrolling (without knowing the container)
It creates a fake input of the height of the target element, and then puts a focus to it, and the browser will take care about the rest no matter how deep within the scrollable hierarchy you are. Works like a charm.
var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');
$scrollTo.prepend(inputElem);
inputElem.css({
position: 'absolute',
width: '1px',
height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

I did this combination. its work for me. but facing one issue if click
move that div size is too large that scenerio scroll not down to this
particular div.
var scrollDownTo =$("#show_question_" + nQueId).position().top;
console.log(scrollDownTo);
$('#slider_light_box_container').animate({
scrollTop: scrollDownTo
}, 1000, function(){
});
}

JQuery Scrolling/Paging Tabs

I am trying to create a simple tab bar for a site that has the ability to scroll for tabs that do not fit on the page. This is quite simple and does not need to have any ajax or dynamically loaded content...it simply displays all the tabs, and when you click one, it takes you to another page.
I have scoured the internet and can not seem to find anything other than:
http://www.extjs.com/deploy/dev/examples/tabs/tabs-adv.html
however this is very heavy and complicated...I am looking for a lightweight example in jquery. If anyone can help I would be grateful!

I ended up writing it myself with a div who's overflow is set to hidden. Then used the jquery below to move the tabs in the div.
$(document).ready(function()
{
$('.scrollButtons .left').click(function()
{
var content = $(".tabs .scrollable .content")
var pos = content.position().left + 250;
if (pos >= 0)
{
pos = 0;
}
content.animate({ left: pos }, 1000);
});
$('.scrollButtons .right').click(function()
{
var content = $(".tabs .scrollable .content")
var width = content.children('ul').width();
var pos = content.position().left - 250;
//var width = content.width();
if (pos <= (width * -1) + 670)
{
pos = (width * -1) + 600;
}
content.animate({ left: pos }, 1000);
});
});
My Html looked like this:
<div class="tabs">
<div class="scrollable">
<div class="content">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
<li>Tab5</li>
</ul>
</div>
</div>
<div class="scrollButtons">
<ul>
<li>
<div class="left">
</div>
</li>
<li>
<div class="right">
</div>
</li>
</ul>
</div>
</div>

I have just created a plugin myself:
Project home: http://jquery.aamirafridi.com/jst

Could you simply wrap the tabs in a DIV with overflow-x: auto set in the CSS?

I always use JQuery UI tabs as a starting point for tabs. You can customize the JQuery UI download in the download section of the website. This method should be lighter than any other implementation, if you are already using JQuery on your website.
Out of the box, the JQuery UI tabs will not give you the scrolling you desire. This I believe could be achieved by altering the CSS, but more than likely will be easier if you alter the navigation of your site (i.e. create more levels, use shorter titles).
Hope this helps