jquery touchstart on checkbox can't trigger an overlay - javascript

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>

Related

How to rotate a pie chart by progressbar plugin counterclockwise?

I use an open-source plugin in github, here is the link:
https://github.com/yxfanxiao/jQuery-plugin-progressbar
Please see the codes below:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Progress Bar</title>
<link rel="stylesheet" href="jQuery-plugin-progressbar.css">
<script src="jquery-1.11.3.js"></script>
<script src="jQuery-plugin-progressbar.js"></script>
</head>
<body>
<div class="progress-bar position"></div>
<div class="progress-bar position" data-percent="60" data-duration="1000" data-color="#ccc,yellow"></div>
<div class="progress-bar position" data-percent="20" data-color="#a456b1,#12b321"></div>
<input type="submit" value="加载">
<script>
$(".progress-bar").loading();
$('input').on('click', function () {
$(".progress-bar").loading();
});
</script>
</body>
</html>
JS:
;
(function ($) {
$.fn.loading = function () {
var DEFAULTS = {
backgroundColor: '#b3cef6',
progressColor: '#4b86db',
percent: 75,
duration: 2000
};
$(this).each(function () {
var $target = $(this);
var opts = {
backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
};
// console.log(opts);
$target.append('<div class="background"></div><div class="rotate"></div><div class="left"></div><div class="right"></div><div class=""><span>' + opts.percent + '%</span></div>');
$target.find('.background').css('background-color', opts.backgroundColor);
$target.find('.left').css('background-color', opts.backgroundColor);
$target.find('.rotate').css('background-color', opts.progressColor);
$target.find('.right').css('background-color', opts.progressColor);
var $rotate = $target.find('.rotate');
setTimeout(function () {
$rotate.css({
'transition': 'transform ' + opts.duration + 'ms linear',
'transform': 'rotate(' + opts.percent * 3.6 + 'deg)'
});
},1);
if (opts.percent > 50) {
var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';
$target.find('.right').css({
animation: animationRight,
opacity: 1
});
$target.find('.left').css({
animation: animationLeft,
opacity: 0
});
}
});
}
})(jQuery);
CSS:
.position {
float: left;
margin: 100px 50px;
}
.progress-bar {
position: relative;
height: 100px;
width: 100px;
}
.progress-bar div {
position: absolute;
height: 100px;
width: 100px;
border-radius: 50%;
}
.progress-bar div span {
position: absolute;
font-family: Arial;
font-size: 25px;
line-height: 75px;
height: 75px;
width: 75px;
left: 12.5px;
top: 12.5px;
text-align: center;
border-radius: 50%;
background-color: white;
}
.progress-bar .background {
background-color: #b3cef6;
}
.progress-bar .rotate {
clip: rect(0 50px 100px 0);
background-color: #4b86db;
}
.progress-bar .left {
clip: rect(0 50px 100px 0);
opacity: 1;
background-color: #b3cef6;
}
.progress-bar .right {
clip: rect(0 50px 100px 0);
transform: rotate(180deg);
opacity: 0;
background-color: #4b86db;
}
#keyframes toggle {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Note that you can download a zip-file from the link provided including those codes. As to be seen, originally the pie charts are rotating clockwise. All I need is to make them rotate counterclockwise. That was looking easy but I could not manage to do it for hours unfortunately. Any help or advise would be so appreciated! Thanks!!
Edit: Please note that the starting point (origin) of the animation should not be changed, should start from the top (north).
You should start by multiplying your rotate value by its minus value; -3.6 instead of 3.6. You'd also have to update the CSS accordingly as otherwise it will start animating from bottom contrary to original version where it starts from top.
You can trick it via swapping left and right components, but that will affect the progress values less than 50%, thus you should add an else statement to handle that as well.
Hence final JS file becomes like below;
JS:
;
(function ($) {
$.fn.loading = function () {
var DEFAULTS = {
backgroundColor: '#f00',
progressColor: '#adadad',
percent: 75,
duration: 2000
};
$(this).each(function () {
var $target = $(this);
var opts = {
backgroundColor: $target.data('color') ? $target.data('color').split(',')[0] : DEFAULTS.backgroundColor,
progressColor: $target.data('color') ? $target.data('color').split(',')[1] : DEFAULTS.progressColor,
percent: $target.data('percent') ? $target.data('percent') : DEFAULTS.percent,
duration: $target.data('duration') ? $target.data('duration') : DEFAULTS.duration
};
$target.append('<div class="background"></div><div class="rotate"></div>'+
'<div class="left"></div>'+
'<div class="right"></div><div class=""><span>' +
+ opts.percent + '%</span></div>');
$target.find('.background').css('background-color', opts.backgroundColor);
$target.find('.left').css('background-color', opts.backgroundColor);
$target.find('.rotate').css('background-color', opts.progressColor);
$target.find('.right').css('background-color', opts.progressColor);
var $rotate = $target.find('.rotate');
setTimeout(function () {
$rotate.css({
'transition': 'transform ' + opts.duration + 'ms linear',
'transform': 'rotateZ(' + -opts.percent * 3.6 + 'deg)'
});
},1);
if (opts.percent > 50) {
var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';
$target.find('.left').css({
animation: animationRight,
opacity: 1
});
$target.find('.right').css({
animation: animationLeft,
opacity: 0
});
}
else {
var animationRight = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-end';
var animationLeft = 'toggle ' + (opts.duration / opts.percent * 50) + 'ms step-start';
$target.find('.left').css({
animation: animationRight,
opacity: 0
});
$target.find('.right').css({
animation: animationLeft,
opacity: 1
});
}
});
}
})(jQuery);

Using bounce animation on a scaled element

What is the best way to have something scale and then perform a bounce animation at that scale factor before going back to the original scale factor. I realize I could do something like scaling it to 2.2, then 1.8, then 2.0, but I'm looking for a way where you just have to perform the bounce animation on the scale factor because my scale factor will change. Here is my example. Basically I want to combine the two to work like I said but as you can see the bounce animation performs based off the div size prior to scaling. P.S I want this done in one action, the two buttons were just for the example.
function myFunction() {
var image = document.getElementById('test');
image.style.WebkitTransform = ('scale(2,2)');
}
function myFunction2() {
var image = document.getElementById('test');
image.classList.remove('bounce');
image.offsetWidth = image.offsetWidth;
image.classList.add('bounce') ;
}
div#test {
position:relative;
display: block;
width: 50px;
height: 50px;
background-color: blue;
margin: 50px auto;
transition-duration: 1s;
}
.bounce {
animation: bounce 450ms;
animation-timing-function: linear;
}
#keyframes bounce{
25%{transform: scale(1.15);}
50%{transform: scale(0.9);}
75%{transform: scale(1.1);}
100%{transform: scale(1.0);}
}
<div id='test'> </div>
<button class = 'butt' onclick = 'myFunction()'>FIRST</button>
<button class = 'butt' onclick = 'myFunction2()'>SECOND</button>
Just a series of jquery animations that change by a set number of pixels should do the trick. You could always use something like parseInt($('#test').css('width')) in the math for how much to change if you want scaled-up objects to bounce more/less
function scaleUp() {
var image = document.getElementById('test');
image.style.WebkitTransform = ('scale(2,2)');
}
function bounce() {
$('#test').animate({
'width': "-=20",
'height': "-=20"
}, 150);
$('#test').animate({
'width': "+=30",
'height': "+=30",
}, 150);
$('#test').animate({
'width': "-=20",
'height': "-=20",
}, 150);
$('#test').animate({
'width': "+=10",
'height': "+=10",
}, 150);
}
div#test {
position:relative;
display: block;
width: 50px;
height: 50px;
background-color: blue;
margin: 50px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'> </div>
<button class = 'butt' onclick = 'bounce()'>Bouncey</button>
<button class = 'butt' onclick = 'scaleUp()'>Scale up bouncey</button>
Here's them combined into one with an animation for growing / shrinking:
function scaleUp() {
var image = document.getElementById('test');
image.style.WebkitTransform = ('scale(2,2)');
}
function bounce() {
const width = parseInt($('#test').css('width'));
const height = parseInt($('#test').css('height'));
$('#test').animate({
'width': parseInt($('#test').css('width'))*2.2,
'height': parseInt($('#test').css('height'))*2.2
}, 300);
$('#test').animate({
'width': "-=20",
'height': "-=20"
}, 150);
$('#test').animate({
'width': "+=30",
'height': "+=30",
}, 150);
$('#test').animate({
'width': "-=20",
'height': "-=20",
}, 150);
$('#test').animate({
'width': "+=10",
'height': "+=10",
}, 150);
$('#test').animate({
'width': width,
'height': height
}, 300);
}
div#test {
position:relative;
display: block;
width: 50px;
height: 50px;
background-color: blue;
margin: 50px auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'> </div>
<button class = 'butt' onclick = 'bounce()'>Bouncey</button>

requestAnimationFrame with multiple independent objects

I am attempting to animate two different objects, a div formatted to look like a square and another formatted to look like a circle. I have a button for each object to start the animation which consists of just moving the object from left to right. I have included the code below. The issue I am having is that if I click on the Move Square button and then click on the Move Circle button, the square moves back to the left. What I am attempting to do is to move the objects independently of one another.
I am sure there is an object oriented solution for this but I have searched and have not found anything that makes sense to me. Any suggestions?
$(document).ready(function() {
var moveSquare = $('#moveSquare');
var moveCircle = $('#moveCircle');
var square = $('#square');
var squareText = $('#squareText');
square.css({
top: '100px',
left: '0px',
color: 'white',
position: 'fixed',
'text-align': 'center'
});
var pos_square = square.position();
squareText.html(pos_square.top + 'px' + '<br/>' + pos_square.left + 'px');
var circle = $('#circle');
var circleText = $('#circleText');
circle.css({
top: '300px',
left: '0px',
color: 'white',
position: 'fixed',
'text-align': 'center'
});
var pos_circle = circle.position();
circleText.html(pos_circle.top + 'px' + '<br/>' + pos_circle.left + 'px');
moveSquare.on('click', function() {
console.log('movesuqare here');
requestAnimationFrame(function(timestamp) {
starttime = timestamp;
move(timestamp, square, squareText, 800, 5000);
});
});
moveCircle.on('click', function() {
console.log('movecircle here');
requestAnimationFrame(function(timestamp) {
starttime = timestamp;
move(timestamp, circle, circleText, 800, 1000);
});
});
function move(timestamp, element, elementText, distance, duration) {
var runtime = timestamp - starttime;
var progress = runtime / duration;
progress = Math.min(progress, 1);
var leftPos = (distance * progress).toFixed(0) + 'px';
element.css({
left: leftPos,
position: 'absolute'
});
element.css({
'text-align': 'center'
});
var topPos = element.css('top') + '<br/>';
elementText.html(topPos + leftPos);
console.log(element.prop('id') + leftPos);
if (runtime < duration) {
requestAnimationFrame(function(timestamp) {
move(timestamp, element, elementText, distance, duration);
});
}
}
});
html {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
body {
font-family: 'Courier New';
color: black;
font-size: 15px;
width: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.container {
width: 100px;
height: 100px;
}
.square_css {
width: 100px;
height: 100px;
background-color: blue;
}
.circle_css {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
}
.shapeText {
padding-top: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="<?php echo URL; ?>views/index/css/index_Main.css" />
</head>
<body>
<div>
<input type="button" id="moveSquare" value="Move Square" />
</div>
<div>
<input type="button" id="moveCircle" value="Move Circle" />
</div>
<div id="square" class="square_css">
<div id="squareText" class="shapeText"></div>
</div>
<div id="circle" class="circle_css">
<div id="circleText" class="shapeText"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo URL; ?>views/index/js/index_main.js"></script>
</body>
</html>
The problems is caused by the two animations sharing a common variable starttime.
To fix, you need some way of each animation having its own starttime.
There's a number of ways you could do that, the simplest of which is to pass a start time to move() along with the other parameters, from the click handlers. And because move() calls itself, starttime needs to be passed on to the next call.
$(document).ready(function() {
var square = $('#square').css({
'top': '100px',
'left': '0px',
'color': 'white',
'position': 'fixed',
'text-align': 'center'
});
var circle = $('#circle').css({
'top': '300px',
'left': '0px',
'color': 'white',
'position': 'fixed',
'text-align': 'center'
});
var squareText = $('#squareText');
var circleText = $('#circleText');
var pos_square = square.position();
var pos_circle = circle.position();
squareText.html(pos_square.top + 'px' + '<br/>' + pos_square.left + 'px');
circleText.html(pos_circle.top + 'px' + '<br/>' + pos_circle.left + 'px');
$('#moveSquare').on('click', function() { // button
console.log('movesuqare here');
requestAnimationFrame(function(timestamp) {
move(timestamp, timestamp, square, squareText, 800, 5000);
});
});
$('#moveCircle').on('click', function() { // button
console.log('movecircle here');
requestAnimationFrame(function(timestamp) {
move(timestamp, timestamp, circle, circleText, 800, 1000);
});
});
function move(starttime, timestamp, element, elementText, distance, duration) {
var runtime = timestamp - starttime;
var progress = runtime / duration;
progress = Math.min(progress, 1);
var leftPos = (distance * progress).toFixed(0) + 'px';
element.css({
left: leftPos,
position: 'absolute'
});
element.css({
'text-align': 'center'
});
var topPos = element.css('top') + '<br/>';
elementText.html(topPos + leftPos);
console.log(element.prop('id') + leftPos);
if (runtime < duration) {
requestAnimationFrame(function(timestamp) {
move(starttime, timestamp, element, elementText, distance, duration);
});
}
}
});
html {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
body {
font-family: 'Courier New';
color: black;
font-size: 15px;
width: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.container {
width: 100px;
height: 100px;
}
.square_css {
width: 100px;
height: 100px;
background-color: blue;
}
.circle_css {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: green;
}
.shapeText {
padding-top: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="<?php echo URL; ?>views/index/css/index_Main.css" />
</head>
<body>
<div>
<input type="button" id="moveSquare" value="Move Square" />
</div>
<div>
<input type="button" id="moveCircle" value="Move Circle" />
</div>
<div id="square" class="square_css">
<div id="squareText" class="shapeText"></div>
</div>
<div id="circle" class="circle_css">
<div id="circleText" class="shapeText"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo URL; ?>views/index/js/index_main.js"></script>
</body>
</html>

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>

moving div right left continously in jquery

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>

Categories

Resources