moving div right left continously in jquery - javascript

I am trying to move a div continuously left and right on page load. But what I did is moving on click. And that's what I don't want. Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
left | right
<br /><br />
<div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>
<script>
$('.right').click(function(e) {
e.preventDefault();
$('#foo').css({ 'right': '0px', 'left': '' }).animate({
'right' : '30px'
});
});
$('.left').click(function(e) {
e.preventDefault();
$('#foo').css({ 'right': '', 'left': '0px' }).animate({
'left' : '30px'
});
});
</script>


You can do this with CSS animation
#foo {
background: red;
width: 100px;
height: 100px;
position: absolute;
left: 0;
animation: leftRight linear 3s infinite alternate;
}
#keyframes leftRight {
to {
left: 100%;
transform: translateX(-100%);
}
}
<div id="foo"></div>


The auto values are not correctly automatically assigned by jQuery or the browser.
Use something like this:
$('.right').click(function(e) {
e.preventDefault();
$('#foo').css({ 'right': window.innerWidth - $('#foo').position().left - $('#foo').width(), 'left': 'auto' }).animate({
'right' : '30px'
});
});
$('.left').click(function(e) {
e.preventDefault();
$('#foo').css({ 'left': $('#foo').position().left, 'right': 'auto' }).animate({
'left' : '30px'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
left | right
<br /><br />
<div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>
As your question says, if you want it to automatically do either, on page load, do this:
$(function () {
function a() {
$('#foo').css({ 'right': window.innerWidth - $('#foo').position().left - $('#foo').width(), 'left': 'auto' }).animate({
'right' : '30px'
}, function () {
$('#foo').css({ 'left': $('#foo').position().left, 'right': 'auto' }).animate({
'left' : '30px'
}, a);
});
}
a();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<br /><br />
<div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>

Related

jquery touchstart on checkbox can't trigger an overlay

I'm new to jQuery and html (only react before).
Right now I want to trigger an overlay when I touch a checkbox on touch devices.
Actually I have had finished this function(worked perfectly), but after some operation(like git commit or something else I dont know), the function suddenly couldn't work at all(the overlay cant show up).
I have spent the whole night to trying to debug. I think it must be some small mistake I made(like a wrong closing tag or something like this), but I cant find out.
Here is my code:
$(function(){
$('div.touch-checkbox').on('click touchstart', function(e) {
// e.stopPropagation();
if (console && console.log) console.log('hi');
$('.paulund_modal').paulund_modal_box();
});
});
//the modal
(function($){
$.fn.paulund_modal_box = function(prop){
var options = $.extend({
height : "250",
width : "300",
title:"Please select your time",
description: "",
top : ($(window).outerHeight() / 4) + 'px',
left : (($(window).width() - 300) / 2) + 'px',
},prop);
if (console && console.log) console.log($(window).width());
return this.click(function(){
//this line of console log didn't run
if (console && console.log) console.log('hi11');
add_block_page();
add_popup_box();
add_styles();
$('.paulund_modal_box').fadeIn();
});
function add_styles(){
$('.paulund_modal_box').css({
'position':'absolute',
'left':options.left,
'top':options.top,
'display':'none',
'height': options.height + 'px',
'width': options.width + 'px',
'border':'1px solid #fff',
'box-shadow': '0px 2px 7px #292929',
'-moz-box-shadow': '0px 2px 7px #292929',
'-webkit-box-shadow': '0px 2px 7px #292929',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px',
'background': '#f2f2f2',
'z-index':'50',
});
$('.paulund_modal_close').css({
'position':'relative',
'top':'0px',
'left':'20px',
'float':'right',
'font-size':'20px',
'display':'block',
'height':'50px',
'width':'50px',
});
$('.paulund_modal_close').html(
'<i class="fa fa-times"></i>'
);
/*Block page overlay*/
var pageHeight = $(document).height();
var pageWidth = $(window).width();
$('.paulund_block_page').css({
'position':'absolute',
'top':'0',
'left':'0',
'background-color':'rgba(0,0,0,0.6)',
'height':pageHeight,
'width':pageWidth,
'z-index':'10'
});
$('.paulund_inner_modal_box').css({
'background-color':'#fff',
'height':(options.height - 50) + 'px',
'width':(options.width - 50) + 'px',
'padding':'10px',
'margin':'15px',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px'
});
}
function add_block_page(){
var block_page = $('<div class="paulund_block_page"></div>');
$(block_page).appendTo('body');
}
function add_popup_box(){
var pop_up = $('<div class="paulund_modal_box"><div class="paulund_inner_modal_box"><h3>' + options.title + '</h3><p>' + options.description + '</p> <div><p>hello</p></div></div></div>');
$(pop_up).appendTo('.paulund_block_page');
$('.paulund_modal_close').click(function(){
$(this).parent().fadeOut().remove();
$('.paulund_block_page').fadeOut().remove();
});
}
return this;
};
})(jQuery);
.touch-checkbox{
z-index:3;
height:11px;
cursor: pointer;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="description" content="First time using jQuery">
<meta name="viewport" content="width=device-width, initial-scale=1.0001">
<link href="style/screen.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></scrip\
t>
<script type="text/javascript" src="js/checkbox-touch-device.js"></script>
</head>
<body>
<div id="portrait">
<div class="paulund_modal"></div>
<p>hello</p>
<div class="touch-checkbox">
<input id="sun12am" type="checkbox"> <label for="sun12am"></label>
</div>
</div>
</body>
</html>
As you can see, I want to give class .touch-checkbox a on click trigger(I only use touchstart with media query in my local dev environment, use click here for Code Snippets.).
the code until if (console && console.log) console.log($(window).width()); in JS file is useful, but cant return the overlay.
I guess there is something wrong with return this.click(function() in the JS file.
I'm sure this code did work at the beginning, I just wonder why it can't work at all without modifying(maybe I modified it by mistake but I didn't recognized)......
Can someone help me? thank you sooooo much.

I don't think there is a need of return. Remove the return statement and run $('.paulund_modal_box').fadeIn()
The return statement stops the execution of a function and returns a
value from that function.
See here for more explanation
$(function() {
$('div.touch-checkbox').on('click touchstart', function(e) {
// e.stopPropagation();
if (console && console.log) console.log('hi');
$('.paulund_modal').paulund_modal_box();
});
});
//the modal
(function($) {
$.fn.paulund_modal_box = function(prop) {
var options = $.extend({
height: "250",
width: "300",
title: "Please select your time",
description: "",
top: ($(window).outerHeight() / 4) + 'px',
left: (($(window).width() - 300) / 2) + 'px',
}, prop);
if (console && console.log)
console.log($(window).width());
//this line of console log didn't run
if (console && console.log) console.log('hi11');
add_block_page();
add_popup_box();
add_styles();
$('.paulund_modal_box').fadeIn();
function add_styles() {
$('.paulund_modal_box').css({
'position': 'absolute',
'left': options.left,
'top': options.top,
'display': 'none',
'height': options.height + 'px',
'width': options.width + 'px',
'border': '1px solid #fff',
'box-shadow': '0px 2px 7px #292929',
'-moz-box-shadow': '0px 2px 7px #292929',
'-webkit-box-shadow': '0px 2px 7px #292929',
'border-radius': '10px',
'-moz-border-radius': '10px',
'-webkit-border-radius': '10px',
'background': '#f2f2f2',
'z-index': '50',
});
$('.paulund_modal_close').css({
'position': 'relative',
'top': '0px',
'left': '20px',
'float': 'right',
'font-size': '20px',
'display': 'block',
'height': '50px',
'width': '50px',
});
$('.paulund_modal_close').html(
'<i class="fa fa-times"></i>'
);
/*Block page overlay*/
var pageHeight = $(document).height();
var pageWidth = $(window).width();
$('.paulund_block_page').css({
'position': 'absolute',
'top': '0',
'left': '0',
'background-color': 'rgba(0,0,0,0.6)',
'height': pageHeight,
'width': pageWidth,
'z-index': '10'
});
$('.paulund_inner_modal_box').css({
'background-color': '#fff',
'height': (options.height - 50) + 'px',
'width': (options.width - 50) + 'px',
'padding': '10px',
'margin': '15px',
'border-radius': '10px',
'-moz-border-radius': '10px',
'-webkit-border-radius': '10px'
});
}
function add_block_page() {
var block_page = $('<div class="paulund_block_page"></div>');
$(block_page).appendTo('body');
}
function add_popup_box() {
var pop_up = $('<div class="paulund_modal_box"><div class="paulund_inner_modal_box"><h3>' + options.title + '</h3><p>' + options.description + '</p> <div><p>hello</p></div></div></div>');
$(pop_up).appendTo('.paulund_block_page');
$('.paulund_modal_close').click(function() {
$(this).parent().fadeOut().remove();
$('.paulund_block_page').fadeOut().remove();
});
}
return this;
};
})(jQuery);
.touch-checkbox {
z-index: 3;
height: 11px;
cursor: pointer;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<div id="portrait">
<div class="paulund_modal"></div>
<p>hello</p>
<div class="touch-checkbox">
<input id="sun12am" type="checkbox"> <label for="sun12am"></label>
</div>
</div>

move box from right to left continously using jquery

i want to move box right then left and again right left continously but it make only one cycle
$(document).ready(function() {
function a() {
$('#foo').css({
'right': window.innerWidth - $('#foo').width(),
'left': 'auto'
}).animate({
'right': '0px'
}, 9000, function() {
$('#foo').animate({
'left': '0px'
}, 9000, a);
});
}
a();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="background: red; width: 100px; height: 100px; position: absolute" ></div>
any help ??

Yes, it works without any problem.
$(document).ready(function() {
function a() {
$('#foo').css({
'right': window.innerWidth - $('#foo').width(),
'left': 'auto'
}).animate({
'right': '0px'
}, 9000, function() {
$('#foo').animate({
'left': '0px'
}, 9000, a);
});
}
a();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="background: red; width: 100px; height: 100px; position: absolute" ></div>
https://jsfiddle.net/n7u7q42d/
Probably you have loaded multiple libraries. Could you post errors please?

Your code already does what you are asking for:
$(document).ready(function() {
function a() {
$('#foo').css({
'right': window.innerWidth - $('#foo').width(),
'left': 'auto'
}).animate({
'right': '0px'
}, 9000, function() {
$('#foo').animate({
'left': '0px'
}, 9000, a);
});
}
a();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo" style="background: red; width: 100px; height: 100px; position: absolute" ></div>
But, you can also accomplish the same thing with much better performance if you use use CSS animations:
#foo {
background: red;
width: 100px;
height: 100px;
position: absolute;
left:0px; /* This is the property that will be animated */
animation:9s leftRight infinite; /* configure the animation */
}
#keyframes leftRight {
0% {
left:0;
}
50% {
left:calc(100% - 100px);
}
100% {
left:0;
}
}
<div id="foo"></div>

How to ask jquery to apply on one div when other div have the same class

The problem here is that when i hover the specific div, the jquery script applys on every div with the same class. I'd like the script works only on the hovered element even if other divs have the same class. I don't have css ID's in this to make it easier.
Here is my jQuery code :
jQuery(".enprod_grille .isotope-container").hover(function() {
// do this on hover
jQuery('.enprod_grille .post-thumb').animate({
'marginRight': '0px',
'opacity': '0.4'
}, 'fast');
jQuery('.enprod_grille .post-title').animate({
'paddingLeft': '0px',
'opacity': '1'
}, 'fast');
jQuery('.enprod_grille .entry-content').animate({
'paddingLeft': '0px',
'opacity': '1'
}, 'fast');
},function() {
// do this on hover out
jQuery('.enprod_grille .post-thumb').animate({
'marginRight': '45px',
'opacity': '1'
}, 'fast');
jQuery('.enprod_grille .post-title').animate({
'paddingLeft': '20px',
'opacity': '0'
}, 'fast');
jQuery('.enprod_grille .entry-content').animate({
'paddingLeft': '20px',
'opacity': '0'
}, 'fast');
});
Here is the link of the website, it appears in "En production" column on the bottom right : http://mwww.fr/fullhouse/?lang=fr

Target the current div using this like:
jQuery(".enprod_grille .isotope-container").hover(function() {
// do this on hover
jQuery(this).find('.post-thumb').animate({
'marginRight': '0px',
'opacity': '0.4'
}, 'fast');
jQuery(this).find('.post-title').animate({
'paddingLeft': '0px',
'opacity': '1'
}, 'fast');
jQuery(this).find('.entry-content').animate({
'paddingLeft': '0px',
'opacity': '1'
}, 'fast');
}, function() {
// do this on hover out
jQuery(this).find('.post-thumb').animate({
'marginRight': '45px',
'opacity': '1'
}, 'fast');
jQuery(this).find('.post-title').animate({
'paddingLeft': '20px',
'opacity': '0'
}, 'fast');
jQuery(this).find('.entry-content').animate({
'paddingLeft': '20px',
'opacity': '0'
}, 'fast');
});

Change your code to
jQuery(".enprod_grille .isotope-container").hover(
function() {
var cont=jQuery(this).closest('.enprod_grille');
// do this on hover
cont.find('.post-thumb').animate({
'marginRight': '0px',
'opacity': '0.4'
}, 'fast');
cont.find('.post-title').animate({
'paddingLeft': '0px',
'opacity': '1'
}, 'fast');
cont.find('.entry-content').animate({
'paddingLeft': '0px',
'opacity': '1'
}, 'fast');
}
,
function() {
var cont=jQuery(this).closest('.enprod_grille');
// do this on hover out
cont.find('.post-thumb').animate({
'marginRight': '45px',
'opacity': '1'
}, 'fast');
cont.find('.post-title').animate({
'paddingLeft': '20px',
'opacity': '0'
}, 'fast');
cont.find('.entry-content').animate({
'paddingLeft': '20px',
'opacity': '0'
}, 'fast');
}

Try:
$('.divname')[0]
$('.divname').get(0)
or of course:
$('.divname:first-child')

just try this example replace img background with image.
<!DOCTYPE html>
<html>
<head>
<title>Que</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
.parent{
height: 100px;
width: 100px;
margin: 20px 20px 20px 20px;
}
.text{
position: absolute;
height: 100px;
width: 100px;
text-align: center;
opacity : 0;
}
.img{
position: absolute;
height: 100px;
width: 100px;
background: red;
}
</style>
</head>
<body>
<div class="parent">
<div class="img"></div>
<div class="text"><span>a</span></div>
</div>
<div class="parent">
<div class="img"></div>
<div class="text"><span>b</span></div>
</div>
<div class="parent">
<div class="img"></div>
<div class="text"><span>c</span></div>
</div>
<div class="parent">
<div class="img"></div>
<div class="text"><span>d</span></div>
</div>
<script>
$('.text').on('mouseover', function(){
$(this).animate({
'margin-left' : -20,
'opacity' : 1,
},300);
$(this).closest('.parent').find('.img').animate({
'margin-left' : 40,
'opacity' : 0.2,
},300);
});
$('.text').on('mouseout', function(){
$('.text').animate({
'margin-left' : 0,
'opacity' : 0
},300);
$('.img').animate({
'margin-left' : 0,
'opacity' : 1
},300);
});
</script>
</body>
</html>

DIVs dynamic position with jQuery

I'm working on a project to create a website in which I need 3 divs to appear/disapear when ticking some checkboxes (one per div). I made an exemple here : http://jsbin.com/okevuy/1/edit
My problem (quite complicated to explain) is that I want the first ticked DIV appears at the top (no matter which one is triggered first) and the next ticked DIV below the first. If the first is hidden by unticking the checkbox, the second one moves to the top, and the next ticked appears below, etc...
Can some one help in doing that and show me how to ?
Thanks a lot !

How this http://jsbin.com/okevuy/5/
example code
$('#red_div').animate({
'height': '50',
'opacity': '1',
'margin-left': '0px'
}, 300);
else $('#red_div').animate({
'height': '0',
'opacity': '0',
'margin-left': '-80px'
}, 300);
});

try this
markup: Add a wrapper around the boxes
<div id="mianwrapper" >
<div id='red_div' class='divs'></div>
<div id='blue_div' class='divs'></div>
<div id='green_div' class='divs'></div>
</div>
script:
$(document).ready(function () {
$('#checkbox_red_div').click(function () {
if ($(this).is(':checked')){ checkPosition("red_div"); $('#red_div').show(10); $('#red_div').animate({
'opacity': '1',
'margin-left': '0px'
}, 300)}
else $('#red_div').animate({
'opacity': '0',
'margin-left': '-80px',
"display":"none"
}, 300 , function(){$('#red_div').fadeOut(100)});
});
$('#checkbox_blue_div').click(function () {
if ($(this).is(':checked')) { checkPosition("blue_div"); $('#blue_div').show(10); $('#blue_div').animate({
'opacity': '1',
'margin-left': '0px'
}, 300 )}
else $('#blue_div').animate({
'opacity': '0',
'margin-left': '-80px',
}, 300 , function(){$('#blue_div').fadeOut(100)} );
});
$('#checkbox_green_div').click(function () {
checkPosition("green_div");
if ($(this).is(':checked')){ $('#green_div').show(10); $('#green_div').animate({
'opacity': '1',
'margin-left': '0px'
}, 300)}
else $('#green_div').animate({
'opacity': '0',
'margin-left': '-80px',
}, 300 , function(){$('#green_div').fadeOut(100)});
});
function checkPosition(getBox)
{
$("#"+getBox).appendTo("#mianwrapper");
}
});
Css:
Small change in css
#red_div{
border:solid 1px red;
width:100px;
height:50px;
opacity:1;
float:left;
clear:left;
}
#blue_div{
border:solid 1px blue;
width:100px;
height:50px;
opacity:1;
float:left;
clear:left;
}
#green_div{
border:solid 1px green;
width:100px;
height:50px;
opacity:1;
float:left;
clear:left;
}

I've edit your example: http://jsbin.com/okevuy/7/edit. Check it. What have been changed: "height: 50px" if div visible, height:0px otherwise.
Hope it will solve your issue.

It is still taking spaces since you are just moving them instead of hiding them. You can try hide/show the div when animate is complete:
if ($(this).is(':checked')) $('#red_div').show().animate({
'opacity': '1',
'margin-left': '0px'
}, 300);
else $('#red_div').animate({
'opacity': '0',
'margin-left': '-80px'
}, 300, function(){ $(this).hide();});
});
http://jsfiddle.net/WqbH4/

Stop animation on mouseleave

I was looking around SO and couldn't really find a good concrete answer. My problem is that when the .mouseenter(function(){ }) is fired and the .mouseleave(function(){ }) is fired right after it completes both animation, instead I want the .mouseleave(function(){ }) to stop the .mouseenter(function(){ }) from finishing it's animation.
Here' a jsfiddle of how I currently have it.
HtML:
<div id="header">
<div id="header-align">
</div>
</div>​
CSS:
#header {
width: 100%;
height: 200px;
position: fixed;
top: -170px;
}
#header #header-align {
width: 400px;
height: 100%;
border: 1px dotted #000;
margin: 0 auto 0;
}
jQuery
​$("#header").mouseenter(function(){
$(this).animate({ top: -20 }, {
duration: 'slow',
easing: 'easeOutBack'
})
});
$("#header").mouseleave(function(){
$(this).animate({ top: -170 }, {
duration: 'slow',
easing: 'easeOutBack'
})
});
I was thinking something like bind(function(){ }) or something like .stopPropagation() but couldn't find a good answer

Did you try adding in a .stop()?
$(this).stop().animate({ top: -170 }, {
duration: 'slow',
easing: 'easeOutBack'
})
jsFiddle
You may also consider using .hover().
​$("#header").hover(function(){
$(this).stop().animate({ top: -20 }, {
duration: 'slow',
easing: 'easeOutBack'
})
},
function(){
$(this).stop().animate({ top: -170 }, {
duration: 'slow',
easing: 'easeOutBack'
})
});

Categories

Resources