I was playing around with the code from the w3schools editor which illustrates a jQuery animate function.
I want to try and make this movement reversible though, so I added an if/else statement to allow the div to move back if it had already been clicked.
Here is my code for between the script tags:
var clicked = false;
$(document).ready(function(){
$("button").click(function(){
if (clicked == false){
$("div").animate({
left: amount,
opacity: '0.5',
height: '150px',
width: '150px'
});
clicked = true;
} else {
$("div").animate({
right: amount,
opacity: '0.5',
height: '150px',
width: '150px'
});
clicked = false;
}
});
});
I am aware there is probably a better way of doing this, but I am fairly new to jQuery. In any case seeing as jQuery is just extended JavaScript it seems strange that this doesn't work.
--- update: corrected amount not being set and included full page code ---
Here is my new code. The div still doesn't move back when clicked again.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var clicked = false;
$(document).ready(function(){
$("button").click(function(){
if (clicked == false){
$("div").animate({
left: '250px'
});
clicked = true;
} else {
$("div").animate({
right: '250px'
});
clicked = false;
}
});
});
</script>
</head>
<body>
<button>Start Animation</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 style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
It's failing because you're not setting amount!
var clicked = false;
var amount = 0;
$(document).ready(function(){
//more code that calls `amount`
})
Check this JSFiddle to see it in action: http://jsfiddle.net/1xt58q0a/1/
New JSFIddle to match updated question: http://jsfiddle.net/1xt58q0a/5/
You can use the .toggle() function.
$(document).ready(function(){
$("button").toggle(
function(){
$("div").animate({
left: amount,
opacity: '0.5',
height: '150px',
width: '150px'
});
},
function(){
$("div").animate({
right: amount,
opacity: '0.5',
height: '150px',
width: '150px'
});
}
);
});
I assume you have set amount to a value in advance.
The div doesn't change because the opacity, height and width are set the same in both options.
Embarrassing, but my mistake was a misunderstanding of CSS, not JS.
Here is the corrected - and functioning - code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var clicked = false;
$(document).ready(function(){
$("button").click(function(){
if (clicked == false){
$("div").animate({
marginLeft: '250px'
});
clicked = true;
} else {
$("div").animate({
marginLeft: '0px'
});
clicked = false;
}
});
});
</script>
</head>
<body>
<button>Start Animation</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 style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
Related
I tried to add a slowdown effect while returning the element to its original size with resizable.
The slowdown would only have to occur on the turn (when the "Click-me" button was pressed), never while handling the element with the mouse.
I tried add transition property in jQuery .css():
'transition': '1s ease-in-out'
My code is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<style>
.box {
border: 2px solid #008cba;
margin-top: 10px;
}
</style>
<script>
$(function() {
$('.box').resizable();
$('#btn').click(function() {
$('.box').resizable().css({
'width': 'auto',
'heigth': 'auto',
'transition': '1s ease-in-out'
});
});
});
</script>
</head>
<body>
<button id='btn' type='button'>
Click-me
</button>
<div class='box'>
<h1 class='el1'>
CSS transition element
</h1>
</div>
</body>
</html>
I tried adding the 1 second slow effect when the element was getting back to its normal size.
It’s not possible to do thing.animate({ "height": "auto" });.You
essentially clone the element, remove the fixed heights currently
inflicting the element, and measure/save the value. Then you animate
the real element to that value.
As you are using jQuery You can use this function to animate it:
jQuery.fn.animateAuto = function(prop, speed, callback){
var elem, height, width;
return this.each(function(i, el){
el = jQuery(el), elem = el.clone().css({"height":"auto","width":"auto"}).appendTo("body");
height = elem.css("height"),
width = elem.css("width"),
elem.remove();
if(prop === "height")
el.animate({"height":height}, speed, callback);
else if(prop === "width")
el.animate({"width":width}, speed, callback);
else if(prop === "both")
el.animate({"width":width,"height":height}, speed, callback);
});
}
Then use function as :
$(function() {
$('.box').resizable();
$('#btn').click(function() {
$(".box").animateAuto("both", 1000);
});
});
I want something like this:
One button triggers the script and then when it's done, the same button would do the script in reverse (toggle)
(Im learning javascript / jquery right now, so im a complete beginner)
Example:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate(
{height: '250px'},
function(){ $("#hidden_txt").fadeIn(1000); } );
});
});
</script>
<button>Start</button>
<div style="background:#98bf21; height:100px; width:100px; position:absolute;">
<span id="hidden_txt" style="display: none">Hey, just checking !</span>
</div>
I found the solution with css class toggle, but:
When it's closing, the css classes need to be turned off in reverse order, so first fade out and then div going back to 100px height
In IE9 and IE8 css transitions doesn't work :/
( jquery 1.12.4 )
Use the following JS:
<script>
var clicked=0;
$(document).ready(function(){
$("button").click(function(){
if(clicked==0){
$("div").animate(
{height: '250px'},
function(){ $("#hidden_txt").fadeIn(1000, function(){
clicked=1;
}); } );
}else if(clicked==1){
$("#hidden_txt").fadeOut(1000, function(){
$("div").animate(
{height: '100px'},
function()
{
clicked=0;
});
});
}
});
});
</script>
I guys,
So I have a sidebar that I want to slide in and out when a user clicks a button. When that sidebar slides out, I want the body of the page to add a padding so that the sidebar doesn't hide the page content. I have it working, it's just the animation is very jumpy. Any suggestions. Here is what I have.
var userQueueVis = false
$(document).on('click', '#user-queue-button', function() {
if (userQueueVis == false) {
$('.user-queue').show('slide', {direction: 'right'}, { duration: 200, queue: false });
$(".main").animate({ 'padding-right' : '200px' }, { duration: 200, queue: false });
$("#user-queue-button").addClass("active-button");
userQueueVis = true;
} else {
$('.user-queue').hide('slide', {direction: 'right'}, { duration: 200, queue: false });
$(".main").animate({ 'padding-right' : '0px' }, { duration: 200, queue: false });
$("#user-queue-button").removeClass("active-button");
userQueueVis = false;
}
});
My snippet is not complete according to your needs but it gives you hit points what to do next, it toggle (show and hide) the sidebar (background red) along with adding padding to the specified parent div (#main). Hope this help.
$(document).ready(function(){
$('button').click(function(){
$("#sidebar").toggle("slide",function(){
$("#main").toggleClass("padding_10px");
});
});
});
#main{border:1px solid blue;}
#sidebar{
height:100vh;
width:250px;
background-color:red;
}
.padding_10px{padding:10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
<button>Click me!</button>
<div id="sidebar">
</div>
</div>
How to get "onclick" after click on div in link on jquery?
<a href="#">
<img src="some.jpg" />
<div class="cont" onclick="showDiv()"></div>
</a>
img {
position: relative;
}
.cont {
position: absolute;
top: 0px;
right: 0px;
}
I want that when you click on region ".cont"occurred an event that I can handle. I tried this:
$(document).ready(function() {
function showDiv() {
alert("test");
}
});
my js
$('#tmp').justifiedGallery({
rowHeight: 350,
maxRowHeight: '100%'
}).on('jg.complete', function () {
$(this).find('a').colorbox({
maxWidth : '90%',
maxHeight : '90%',
opacity : 0.2,
transition : 'elastic',
current : ''
});
});
You defined the showDiv() function within the the document.ready handler, so it is out of scope of the onclick attribute. You need to define the function at the lower level:
<head>
<script type="text/javascript">
function showDiv() {
alert("test");
}
$(document).ready(function() {
// jquery code here...
});
</script>
</head>
A better solution entirely would be to use Javascript to attach your events, as it is a better separation of concerns and removes the outdated onclick attribute:
<a href="#">
<img src="some.jpg" />
<div class="cont"></div>
</a>
$(document).ready(function() {
$('.cont').click(function() {
alert('test');
});
});
You cant write a function like this in $(document).ready(function()
try this
$(document).ready(function(){
$(".cont").click(function(){
alert("test");
});
});
or
$(document).ready(function(){
showDiv();
});
function showDiv() {
alert("test");
}
There are two ways to do this.
The way I'd do this:
$('.cont').on('click', function(){
alert('qwerty');
});
That way you wouldn't need the onclick="showDiv()" in your HTML which would make your HTML cleaner.
The way that uses you onclick of the element:
function showDiv(){
alert('zxcvb');
}
Sample at CodePen
can anyone help me fix this, what am I missing?
<script type="text/javascript">
$('#loginButton').click(function() {
$('#toplogin').animate({
height: '0px'
});
});
</script>
The onClick doesn't even execute!
The div I want the onClick event to work on is here:
<div id="loginButton">Login »</div>
The div I want the animation to affect is here:
div id="toplogin"> <!-- more stuff --> </div>
Remove the semicolon after height: '0px' to make your JavaScript valid.
<script type="text/javascript">
$('#loginButton').click(function() {
$('#toplogin').animate({ height:'0px' });
});
</script>
However, unless you have overflow:hidden set for #toplogin the element will still be visible, even though it's height is 0px. An easier way is just using slideUp().
<script type="text/javascript">
$('#loginButton').click(function(){ $('#toplogin').slideUp(); });
</script>
try this:
$('#loginButton').click(function() {
$('#toplogin').animate({
height: 0
},
function() {
$(this).css('display', 'none');
});
});
you should wrap your code in following construction to make it valid as jQuery code:
$(document).ready(function(){
your code;
})