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>

Masonry/Isotope.js not working correctly

I'm developing an wordpress theme and I'm using Isotope or Masonry for the masonry layout. Also I'm using Visual Composer to insert custom elements that i mapped to Visual Composer. I have a container which has no styles and all these items have a div with a class "overlay" that's absolutely positioned and has 100% width and height. It's purpose is to position the white box ( class "content" ) inside of it. Isotope has been giving me a hard time in a previous wordpress theme.. I have no idea why. Here's the image.
Here's the markup for an item:
<div class="masonry-item">
<img/>
<div class="overlay">
<div class="content">
<!-- Just some text here
</div>
</div>
</div>
ANY suggestions are more than welcome, because I can't seem to get it to work in ANY way. Most of the layout methods just end up overlapping all of the items in the most top left corner of the container. Yes, I've tried using ImagesLoaded.js, and it hasn't made a difference.
Masonry JS:
$(".masonry-grid").isotope({
itemSelector: '.masonry-item'
});
.masonry-item CSS:
.masonry-item {
position: relative;
margin-bottom: 30px;
}
It would seem that if they ALL have equal width like 50% it will work flawlessly. Like Deepak Thomas noted in the comments. But as soon as i put a random style for each element, like 30, 40, 50, 60, 70% width it starts to break. In some cases it would put elements next to each other, most of the time leaving a gap between them if they are not in the first row, and the other times it would just stack them one on top of another even though the two items can clearly be put side to side and still have room to spare.
EDIT: Tried removing the image. No difference.
Thanks in advance!

try this :
var $post_masonry = $('.masonry-grid');
$(document).ready(function () {
if ($post_masonry.length) {
$post_masonry.isotope({
itemSelector: '.masonry-item',
layoutMode: 'masonry',
percentPosition: true,
masonry: {
columnWidth: '.masonry-item'
}
});
}
});
Recommended to use imagesloaded.pkgd.min.js to apply isotope when images already loaded.
var $post_masonry = $('.masonry-grid');
$(document).ready(function () {
if ($post_masonry.length) {
var $masonry = $post_masonry.imagesLoaded(function() {
$masonry.isotope({
itemSelector: '.masonry-item',
layoutMode: 'masonry',
percentPosition: true,
masonry: {
columnWidth: '.masonry-item'
}
});
});
}
});
if ($post_masonry.length) --> is optional. Usually applied with dynamic ajax.

From the code you shared, it seems masonry does not provide default sizes to its items.
For every masonry-item, give an additional class
E.g:
.half { width: 50% }
.full { width: 100% }
.pad { padding: 15px }
And use this on the items as you find them apt.
E.g:
<div class="masonry-item half">
<div class="pad">
<img src="xyz" />
<div class="overlay">
<div class="content">I'm the overlay content</div>
</div>
</div>
</div>
That should solve it.

The problem is that the first masonry item is being taken as the columnWidth option for isotope. So just make sure that the first time is the smallest one of your columns.

Vertically center divs with jQuery

I'm setting up a one page website, I want to vertically center a containing div within a div with 100% viewport height, currently I have -
function vertmiddle() {
var height = $('.vertmiddle').height();
var windowheight = $(window).height();
var vertmiddle = ((windowheight) - (height)) / 2;
vertmiddle = parseInt(vertmiddle) + 'px';
$(".vertmiddle").css('margin-top',vertmiddle);
}
$(document).ready(function() {
vertmiddle();
$(window).bind('resize', vertmiddle);
});
Edit, Here is an example of the HTLM I'm using as well -
<section id="community" class="full">
<div class="container">
<div class="vertmiddle">
content
</div>
</div>
</section>
It's working fine but all of my containing divs are getting the same margin amount because they all use the same class and it's just using the first div on the pages height.
How can I set it up so each containing div has the correct margin. I can probably make this work with unique classes and just repeat the script but I'm sure there's a cleaner way to do it.
Sorry if I'm unclear I'm new posting here.
thanks

Use this
function vertmiddle() {
$('.vertmiddle').css({
'position' : 'absolute',
'left' : '50%',
'top' : '50%',
'margin-left' : -$(this).width()/2,
'margin-top' : -$(this).height()/2
});
}
Or may be you try this
$('.vertmiddle').css({
position:'absolute',
left: ($(window).width() - $('.vertmiddle').outerWidth())/2,
top: ($(window).height() - $('.vertmiddle').outerHeight())/2
});

Here is a solution that works, but you will need to add id attributes to your HTML. I have found trying to call jQuery methods that measure window objects using classes to be very buggy, where the same methods used on ids never give me any problems. Anyway, here is one approach...
<section id="community" class="full">
<div id="container" class="container">
<div id="content" class="vertmiddle">
content
</div>
</div>
</section>
function vertMiddle(){
var element_height = $('#content').height();
var element_offset = (window.innerHeight - element_height) / 2;
$('#content').css('margin-top', element_offset +'px');
}
$(document).ready( function(){
vertMiddle();
$(window).on('resize', vertMiddle);
});
Here is a working JSFiddle example

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/

css3/Jquery animation/transition/: How to make image move vertically and back?

I want to do this effect in my image (button)
http://osc4.template-help.com/wt_32608/index.html#
I want to make this animation whatever the method CSS3, HTML5 canvas , JS
If I will use Hover property , how can I make the image slide and back when roolout

First, make a < div > that will contain the animation.
<div id="image_holder"></div>
Then, place the < img > inside.
<div id="image_holder_1" class="image_holder">
<img id="image_1" class="image" ..... />
</div>
Next, add some CSS styling to the < div > like so:
.image_holder {
overflow: hidden;
}
And also some CSS to the < img >:
.image {
position: relative;
}
Now, animate the image with jQuery. Specifically, you will be animating the "top" CSS attribute for the image:
$('#image_holder_1').hover( function() {
$('#image_1').animate({
top: '-' + $(this).height() + 'px'
});
}, function() {
$('#image_1').animate({
top: '0px'
});
});
See it in action here: http://jsfiddle.net/trusktr/7hTDu/
Alternatively, you can do it with CSS3 animations. Do a search for "CSS3 transitions" on google: http://www.google.com/search?btnG=1&pws=0&q=CSS3+transitions

something like this.
$(".items").each(function() {
$(this).mouseover(function(){
$(this).find(".inner").slideDown();
});
$(this).mouseout(function(){
$(this).find("inner").slideUp();
});
});
but it would be better if you give us some code of your html struct, and something aboute your idea.

The easiest way is probably to position the images absolutely and then manipulate the top, something like this:
<img id="myimage" style="position: absolute" src="whatever"/>
<script>
$('#myimage').animate({top: '<whatever>px' },someDuration);
</script>
Read the jQuery animate docs here: http://www.google.dk/search?sourceid=chrome&ie=UTF-8&q=jquery+animate
It should not be that hard to figure out :)

If just an animated background to a button you want, why not use background-image and animate the background-position with jQuery?