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);
});
});
Related
So i have this little drop down arrow <div> that i want to move up when it's clicked, which works. But there's another animation on it which changes its opacity and uses the jQuery function .stop(). The problem is that whenever i hover over it during the sliding animation, the element stops dead in its tracks and doesn't finish the animation.
How do i solve this?
PS: if anyone has any suggestions on how to toggleclick two functions, i'd love to hear them, the one for hover seems a lot more convenient. Adding an attribute just for that is kind of lame.
EDIT: usable example: http://plnkr.co/edit/swuKbS3uM8G6stFnUT8U?p=preview
$(document).ready(function () {
console.log("ready for action!");
// Dropdown icon hover
$("#dropdownIcon").hover(function () {
$(this).stop(true).fadeTo(500, 1);
console.log("hovering");
}, function () {
$(this).stop(true).fadeTo(500, 0.3);
console.log("no longer hovering");
});
// Clicking on dropdown icon
$("#dropdownIcon").on("click", function () {
$(this).find("i").toggleClass("fa-chevron-down fa-chevron-up");
console.log("i clicked on the thing!");
if ($(this).attr("data-click-state") == 1) {
$(this).attr("data-click-state", 0);
$(this).animate({bottom:"0"},1000);
console.log("clicked once");
} else {
$(this).attr("data-click-state", 1);
$(this).animate({bottom:"50%"},1000);
console.log("clicked again");
}
});
});
HTML
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="CSS/normalize.css" />
<link type="text/css" rel="stylesheet" href="CSS/main.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<title>Rmonik</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>
RMONIK
</h1>
<div id="dropdownIcon" data-click-state="0">
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</div>
</header>
<nav></nav>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="Javascript/main.js"></script>
</body>
</html>
You can define mouseover, mouseleave events as named functions; use .off(), complete function of .animate() to re-attach mouseover, mouseleave events to element
$(document).ready(function() {
console.log("ready for action!");
// Dropdown icon hover
function handleMouseOver() {
$(this).fadeTo(500, 1);
}
function handleMouseLeave() {
$(this).fadeTo(500, 0.3)
}
function handleAnimationComplete() {
$(this).on("mouseover", handleMouseOver)
.on("mouseleave", handleMouseLeave)
}
$("#dropdownIcon").on("mouseover", handleMouseOver)
.on("mouseleave", handleMouseLeave);
// Clicking on dropdown icon
$("#dropdownIcon").on("click", function() {
$(this).find("i").toggleClass("fa-chevron-down fa-chevron-up");
console.log("i clicked on the thing!");
if ($(this).attr("data-click-state") == 1) {
$(this).attr("data-click-state", 0);
$(this).off("mouseover mouseleave")
.animate({
bottom: "0"
}, 1000, handleAnimationComplete);
console.log("clicked once");
} else {
$(this).attr("data-click-state", 1);
$(this).off("mouseover mouseleave")
.animate({
bottom: "-200px"
}, 1000, handleAnimationComplete);
console.log("clicked again");
}
});
});
plnkr http://plnkr.co/edit/qpZM7qRJIjcMebvSs7mB?p=preview
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>
I have a question regarding mouse events in the jQuery library.
I have a simple javascript function as following:
$(function() {
var xpos;
var ypos;
$("#pic1").mousedown(function() {
$("#pic1").mousemove(function(e) {
xpos = e.pageX;
ypos = e.pageY;
$("#pic1").css({'left': xpos, 'top': ypos});
});
});
});
It makes it so you can click an image and it follows the mouse around. I'm trying to make it stop following by using the mouseup function, but it seems like it can't break the "repaint" method, where it updates the css coordinates.
HTML:
<img id="pic1" src="img/test.jpg" alt="">
CSS:
#pic1 {
position: absolute;
}
Would there be an easier way to accomplish this?
The way you've set this up the mousemove trigger is bound on mouse down. To drop the element you would need to either unbind the trigger (http://api.jquery.com/unbind/) or set up a condition in the move handler so that the element's position is only updated if a condition is met and then make sure that mouse down/up turn that condition on/off. The former seems simpler but even simpler might be to use the jquery ui: http://jqueryui.com/draggable/
good luck
If you don't want to use the jquery ui draggable, your structure would look something like this:
$(function() {
$("#pic1").on('mousedown', function() {
$(this).on('mousemove', function(e) {
$(this).css({'left': e.pageX, 'top': e.pageY});
});
}).on('mouseup', function() {
$(this).off('mousemove');
});
});
Here's a little refactor using jQuery .on() and .off():
$(function() {
var xpos,
ypos,
$pic = $('#pic1');
$pic.on('mousedown', function() {
$pic.on('mousemove', function(e) {
xpos = e.pageX;
ypos = e.pageY;
$pic.css({'left': xpos, 'top': ypos});
});
});
$pic.on('mouseup',function(){
$pic.off('mousemove');
});
});
Demo: http://jsfiddle.net/tYpKL/1/
.off() is a pretty useful method that allows you to unbind methods set with .on().
I think you should consider using a library to handle this functionality because, as you can tell from the demo, you aren't even close to a solid user-experience. :)
Good luck!
There is a much easier solution.
HTML:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
#pic1 { width: 100px; height: 100px; padding: 1px; }
</style>
<script>
$(function() {
$("#pic1").draggable();
});
</script>
</head>
<body>
<div id="pic1" class="ui-widget-content">
<img src="pic1.jpg" alt="Image 1">
</div>
</body>
</html>
Here is a link (http://api.jqueryui.com/draggable/) that will explain all the details of the API used for the draggable function.
resizable not working from 2nd click can you explain me why?
In the below code, actually i am trying to add shirt and pant to the div. and when they are added, I have to resize them so i have even added resize button. Resize is working for the first time and when ever we try to add another shirt or pant. resize is not working. May i know the reason and help me out in finishing this project.
<html lang="en">
<head>
<title>Outfit Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
$(document).ready(function() {
// sets draggable the elements with id="shirt"
$('#shirt').draggable({
cursor: 'move', // sets the cursor apperance
containment: '#leftpanel' // sets to can be dragged only within its parent
});
// sets draggable the paragraph inside #trousers
$('#trousers').draggable({
cursor: 'move',
containment: '#leftpanel' // sets to can be dragged only within its parent
});
$('#btn').click(function() {
// removes all LI with class="cls" in OL
$('#shirt').resizable({
cursor: 'move',
containment: '#leftpanel' // sets to can be dragged only within its parent
});
$('#trousers').resizable({
cursor: 'move',
containment: '#leftpanel' // sets to can be dragged only within its parent
});
});
});
var shirt;
var pant;
function selectshirt(src)
{
shirt = src;
path = "<img src=\""+src+"\" height=\"100%\" width=\"100%\"/>";
invisible("middlepanel");
visible("rightpanel");
document.getElementById("shirt").innerHTML=path;
document.getElementById("cart").style.visibility="visible";
}
function selectpants(src)
{
pant = src;
path = "<img class=\"pic1\" src=\""+src+"\" height=\"100%\" width=\"100%\"/>";
document.getElementById("trousers").innerHTML=path;
}
function addtocart()
{
alert("Shirt:"+shirt+"\npant:"+pant);
}
function changeshirt()
{
visible("middlepanel");
invisible("rightpanel");
}
function changepant()
{
visible("shirtcontainer");
invisible("pantcontainer");
}
function visible(containername)
{
document.getElementById(containername).style.visibility="visible";
}
function invisible(containername)
{
document.getElementById(containername).style.visibility="hidden";
}
</script>
</head>
<body>
<div id="leftpanel" style="width:800px;height:600px;border:1px solid black;">
<div id="shirt" style="left:0;height:300px;width:300px;"></div>
<div id="trousers" style="left:0;height:300px;width:300px;" ></div>
</div>
<div style="left:0;height:70%;" id="cart">
<button onclick="changeshirt()">Change Shirt</button>
<button onclick="addtocart()">Add to cart</button>
<button id="btn">Resize</button>
</div>
<div id="middlepanel" style="width: 100%; height: 100%; position:absolute;right:0;top:0;width:33%;overflow:auto;">
<div id="shirtcontainer">
<img src="images/shirts/shirt.jpg" height="300px" width="300px" onclick="selectshirt(this.src)"/>
</div>
</div>
<div id="rightpanel" style="width: 100%; height: 100%; position:absolute;right:0;top:0;width:33%;overflow:auto;">
<div id="pantcontainer">
<img src="images/pants/pant.jpg" height="300px" width="300px" onclick="selectpants(this.src)"/>
</div>
</div>
</body>
<script>
invisible("rightpanel");
invisible("cart");
</script>
</html>
Please help me in this and make rezizable working from 2nd click also.
First of all I'm sorry because I'm on my iphone and it's quite hard to read your code.
However there could be some problems:
1)you don't refresh the resizable element,may try to reinitalize the plugin function
2) you are trying to resize a duplicated id.
3) if you are adding to append something and you want to use a click function or similar you have to bind it with $(document).on(event,element,function(){})
Brutal Solution
Destroy and reinitalize the element
#Dheed Thanks for the solution. As you said , i have tried destroying it and reinitialized
$("#shirt").resizable("destroy");
$("#shirt").resizable({
cursor: 'move',
containment: '#leftpanel' // sets to can be dragged only within its parent
});
This worked for me.
Thank you so much Dheed
Hey there guys, Im good with HTML and CSS but have only jsut started to scratch the surface of jQuery. I'm looking to make 3 divs fade in on page load one after another.
So far I have this
<script type="text/javascript">
$('#1').hide().fadeIn(1500);
$('#2').hide().fadeIn(1500);
$('#3').hide().fadeIn(1500);
</script>
I heard that to use css to set the display to none is a nightmare for anyone with a non JavaScript browser so I used the hide function to initially hide the divs.
But this only fades them in all at once.
Any ideas?
You can .delay() each so the one before fades in at the right time, for example:
$("#1, #2, #3").hide().each(function(i) {
$(this).delay(i*1500).fadeIn(1500);
});
This fades them in...in the same order they occur in the page which is usually what you're after, the first is delayed 0 so it's instant, the second is delayed 1500ms (so when the first finishes, etc). In the .each() callback i is the index, starting with 0 so you can use that to quickly calculate the right delay here.
Another advantage here is this approach is much easier to maintain, give them a class for example then you can just do:
$(".fadeMe").hide().each(function(i) {
$(this).delay(i*1500).fadeIn(1500);
});
Then you require zero maintenance on the JavaScript side to add additional <div> elements to fade.
The fade in command contains a call back function, see documentation. This means you could chain the events.
<script type="text/javascript">
$('#1, #2, #3').hide();
$('#1').fadeIn(1500, function(){ $('#2').fadeIn(1500, function(){$('#2').fadeIn(1500)})});
</script>
<script type="text/javascript">
$('#1').hide().fadeIn(1500, function(){
$('#2').hide().fadeIn(1500, function(){
$('#3').hide().fadeIn(1500);
});
});
</script>
Using the Delay function as following:
<script type="text/javascript">
$('#1').hide().fadeIn(1500);
$('#2').hide().delay(1500).fadeIn(1500);
$('#3').hide().delay(3000).fadeIn(1500);
</script>
Here is a cleaner and generic way to achieve this effect:
check it out on http://jsfiddle.net/BztLx/20/
Logic trick relies on the callback functionality of the fadeIn and using .eq() as an iterator over the selected elements.
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function sequentialFadeIn(selectorText, speed, display, callBack) {
display = typeof display !== 'undefined' ? display : "block";
var els = $(selectorText), i = 0;
(function helper() {
els.eq(i++).fadeIn(speed, helper).css("display", display);
if (callback && i === els.length) callback();
})();
}
sequentialFadeIn(".toBeFaddedIn", "slow", "inline-block", function() {
console.log("I am just an optional callback");
});
});
</script>
</head>
<body><style media="screen" type="text/css">
.hello {
background-color: blue;
height:50px;
width: 50px;
display: none;
}
</style>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
<div class="hello toBeFaddedIn"></div>
</body></html>