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>

Replacing and restoring div html with jquery

I have a couple of functions, the first replaces the contents of a div the second restores the original div. The problem is because I'm using the replaceWith method, the second div no longer exists if I try to call it a second time. Is there a better way to do this? I've experimented creating a variable that stores the contents of the second div so I can resuse it, but could not get it to work.
The code that I have is:
$(document).ready(function() {
$('#trigger_adults').click(function() {
var mainClone = $("#main-content").clone();
$('#main-content').fadeOut('fast', function() {
$('#main-content').replaceWith($('#adults'));
$('#slider-sec').slideUp('slow');
$('#adults').fadeIn('fast');
$(window).scrollTop(0);
});
$('#return').click(function() {
$("#adults").replaceWith(mainClone.clone());
$('#adults').fadeOut('fast');
$('#slider-sec').slideDown('slow');
});
});
});
Thanks in advance!

You could have both contents in the same div and toggle the visibility of their parent divs. Use javascript just to toggle the wrapper's class.
$('#toggle').click(function() {
$('#wrapper').toggleClass('init-state new-state');
});
#wrapper {
border:1px solid #d8d8d8;
}
.init-state #new,
.new-state #init { display:none; }
.inner {
padding:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="wrapper" class="init-state">
<div id="init" class="inner">Initial Content</div>
<div id="new" class="inner">New Content</div>
<button id="toggle" type="button">Toggle</button>
</div>

From the docs
The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page
you either need to manually set the display style property back to its original value, or call jQuery's .fadeIn() function which will do the opposite of .fadeOut()

Adjust Width of Dynamically added Divs

![enter image description here][1]![My Image][2]
HTML
<div id ="data">
<div>DIV1</div>
</div>
Jquery
$(function(){
$("#button").click(function(){
$("#Data").append('<div id="mySecondDiv"></div>');
});
});
As you can See on the Image... I have one button that is adding the Divs to my Div id ="data". I just want that by default I have only one div , whose width is 100% at start, and now when I click the button it will add another and now the width of both divs will be adjusted automatically to 50%, and the functionality is goes so on
How can I achieve the adjustment of the width of the Divs?

With CSS you can use this properties:
#data {
width:100%;
display:table;
}
#data > div {
display:table-cell;
width:1%;
}
Check this Demo Fiddle

Try with this jquery:
$(function(){
var i = 1;
$("#button").click(function(){
percent = ((1/i)*100) + '%';
$("#Data").append('<div class="hello" style="width:'+ percent +'"></div>');
$('.hello').css('width',percent);
i++;
});
});

Set parent div height to content that is not overflowing

I have a slider that's in place on my website.
The basic way that it works is depicted in this jsfiddle -
http://jsfiddle.net/6h7q9/15/
I've written code to set the parent's height to the height of the content div. This worked fine, until I introduced some content that did not have a fixed height and whose height might increase while it was being shown on the page. Is there a way, I can dynamically change the height of this parent div whenever content inside it increases or decreases it's height.
HTML -
<div id="slider_container">
<div id="slider">
<div id="slide1">
Has content that might increase the height of the div....
</div>
<div id="slide2">
Has content that might increase the height of the div....
</div>
<div id="slide3">
Has content that might increase the height of the div....
</div>
</div>
</div>
<input type="button" value="Next" id="btnNext">
<input type="button" value="Previous" id="btnPrev">
<input type="button" value="Add text" id="btnAddText">
<div class="footer">
I appear after the largest container, irrespective of which one is present....
</div>
JavaScript -
var currSlider = 1;
$('#btnNext').click(function(){
debugger;
var margin = $('#slider').css('margin-left');
if(parseInt(margin) <= -400) {
return;
}
currSlider++;
// Moving the slider
$('#slider').css('margin-left', parseInt(margin) - 200 + 'px');
// Resetting the height...
$('#slider').height($('#slide' + currSlider).height());
});
$('#btnPrev').click(function(){
debugger;
var margin = $('#slider').css('margin-left');
if(parseInt(margin) >= 0) {
return;
}
currSlider--;
// Moving to the previous slider
$('#slider').css('margin-left', parseInt(margin) + 200 + 'px');
// Resetting the height...
$('#slider').height($('#slide' + currSlider).height());
});
$('#btnAddText').click(function() {
$('#slide' + currSlider).text('Hello World'.repeat(100));
});
String.prototype.repeat = function(times) {
return (new Array(times + 1)).join(this);
};

I hope this "answer" gets you going in the right direction. Since i don't have the time to fully look this up right now, i hope to send you in the right direction. if you do find out how to do this properly, please shoot me a message, since i would really like to know ^_^
http://www.w3.org/TR/DOM-Level-3-Events/#legacy-event-types
An example on how to use: (DOMSubtreeModified didn't work in IE from what i read. Therefor the propertchange event)
$('#slide1').on('DOMSubtreeModified propertychange', function() {
console.log('test',this);
});
Another option is by using the MutationObserver:
http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers
https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers
Updated 6-8-2014 15:00 CET
Since i totally misread the original post, this answer was useless to say the best. But since the problem is actually really easy to solve (or... at least i hope i understand the problem this time), i thought i'd post an answer that worked for the situation: a slider with content of different heights.
What was the problem with the original slider? You moved the content out of the container, which made it hidden. However, the container would still pick up the height of it, since it only had a fixed width. The fixed height on the '#slider' did not prevent the container of picking up the height from the '#slide-*'. Had you set the height for the container... all would be fine :-)
Here's the outline of the hidden slide, moved 'off canvas': http://i.gyazo.com/f2404e85263a7209907fdbc8f9d8e34e.png
I did not fix your fiddle by completing your code. I just rewrote it to provide you with an easier to maintain slider. Here's a fiddle with a working slider where you can add and remove stuff in the slides: http://jsfiddle.net/3JL2x/3/

Just remove the height properties in the .slide1, 2 and 3 and add min-height instead.
Like that :
#slider > div {
min-height:200px;
float:left;
width : 200px;
}
#slide1 {
background-color : red;
}
#slide2 {
background-color: green;
}
#slide3 {
background-color: blue;
}
Live example
http://jsfiddle.net/6h7q9/27/

Background should adapt to content height using JQuery on window resizing

The content of a div will be set dynamically. The div #background, should adapt to the height that (separate) div will have. The background also should adapt to resizing of the div when the browser is resized. So the action should happen when the page loads, or when the browser is resized.
<div id="wrapper">
<div id="background"></div>
<div id="content">
<p>This content will be set dynamically.
<br>The div #background should adapt to this height.
<br><br><br><br><br><br>
<br>This should happen when the page loads,
<br>or when the browser is resized.
<br>At this moment, it only works when
<br>the page loads.
<br>
</p>
<!-- end #content -->
</div>
<!-- end #wrapper -->
At this moment, it only works when the page loads eventhough I added this code:
$(window).resize(function () {
$("#background").css({
height: ($("#wrapper").height() + 50) + 'px'
});
});
How can I get the resizing bit working? Thanks.
here is a jsfiddle to test this

Your resize handler is working as intended, but the issue is that #wrapper won't change height unless you give it height, so right now you're simply updating the height on #background to the same value each time resize is fired:
$(window).resize(function () {
$("#background").css({
height: ($("#wrapper").height() + 50) + 'px'
// ^^^^^^^^^^^^^^^^^^^^^^ this value never changes
});
});
Here's an updated demo where I've added
html, body, #wrapper { height: 100%; }

Demo
use display: inline-block.
$(window).resize(function () {
$("#background").css('display': 'inline-block');
});

You should use .on():
$(window).on("resize load", function () {
$("#background").css({
height: ($("#wrapper").height() + 50) + 'px'
});
});
does that work for you?

Trigger it on load.
$(window).resize(function () {
$("#background").css({
height: $("#wrapper").height() + 50
});
}).trigger("resize");
http://api.jquery.com/trigger/
http://jsfiddle.net/dzdH5/