I am trying to use jquery's html() to move around an element. Please see the example below.
HTML:
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="myDiv"></div>
Jquery:
//on some event (for example, onclick, onmouseover, onkeydown....), the code below will be triggered
var $myDiv = $("#myDiv");
$("#div1").html($myDiv);
//after some other event, the code below will be triggered
$("#div5").html($myDiv);
//after some other event, the code below will be triggered
$("#div4").html($myDiv);
//etc....
Basically, I am trying to move $myDiv among div1-5 using the method html() above.
But I want to have transition too when $myDiv moves from one div to another div
I tried the following css but it didn't work.
CSS:
#myDiv {
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
I don't know the size of all the divs and the size might change, so I can't really use transition on top and left.
Hope someone can have a good solution.
Thanks
You can use the jQuery sortable plugin.
You can give each draggable div an in of sortable, then use the following jQuery:
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
Remember you will need to include jQuery UI:
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Related
(I am 9 weeks into a boot camp, so I apologize for the potentially rudimentary nature of this...)
I am appending an element to the DOM (a button) within a conditional:
$('.buttonsAndInputs').append(`<button id="clearHistoryButton">Clear All</button>`);
When this button is clicked, it runs through a series of functions to empty an array and clear some other content off the DOM. I would like to use the .fadeOut method of jQuery to remove THE BUTTON.
I have this in a subsequent function:
$('#clearHistoryButton').remove();
I would like to:
$('#clearHistoryButton').fadeOut(1000);
...so that it disappears in a fancy fashion.
It's not working - it simply waits one second and then - POOF - is gone.
This is my first question. This community has been ESSENTIAL in my growth in this realm and, as always, I appreciate all of you so very much.
Did you try transition: opacity 1s in your CSS ?
Advantage:
Hardware accelerated (GPU), i.e. it doesn't bother your main processor (CPU) with this task, whereas jQuery's fadeOut() function is software based and does take CPU resources for that effect.
Steps:
Add transition: opacity 1s to your CSS rules of the desired button element
here: ( #clearHistoryButton )
Add a CSS rule with button.fadeMeOut with opacity: 0
Add a simple jQuery function to add the class ".fadeMeOut" at click
Then remove button with setTimeout(function(){$('#clearHistoryButton').remove()},1000)
Run code snippet
$(function() { // Shorthand for $( document ).ready()
$("#clearHistoryButton").on( "click", function() {
// first: fade out the button with CSS
$(this).addClass("fadeMeOut");
// then: after fadeOut effect is complete, remove button from your DOM
setTimeout(function(){
$('#clearHistoryButton').remove();
},1000);
});
});
button {
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
button.fadeMeOut {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="clearHistoryButton">Press to hide me</button>
I want to fade the image on hover.
Why does this not work?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#lightbulb").hover(function(){
$("#lightbulb").fadeOut('fast');
},function(){
$("#lightbulb").fadeIn();
});
});
</script>
Other jQuery methods like CSS styling and changing image sources are working.
You cannot place the fadeOut() effect at the same element you add the hover() to.
fadeOut() sets the Element to "display: none;" and removes it from the DOM.
So a $fadeIn() effect can never take place, because the element with the $hover() targeted is gone.
You need to target a parent container with hover() and fadeIn() and fadeOut() the inner elements. That should work.
$("#parentbulb").hover(function(){
$("#lightbulb").fadeOut('fast');
},function(){
$("#lightbulb").fadeIn();
});
You could use css instead of jQuery if that works. When you fadeOut the element, the hover exit event is fired, so it will just keep toggling between the states the way you have it. Here is a fiddle with an example of hiding/showing on hover. Basically you do like
#elem {
opacity: 1;
transition: opacity: 0.2s;
}
#elem:hover {
opacity: 0;
}
on whichever element you want to hide.
I am working on a site that only shows many items (images) that you can drag & drop. So far so good my JS is:
<script type="text/javascript">
$(function() {
$( ".draggable" ).pep();
});
</script>
The HTML is:
<img class="draggable" id="item_1" onload="this.width/=2;this.onload=null;" src="http://www.cyrill-kuhlmann.de/img/01.png"/>
And the CSS is:
#item_1 {
position: fixed;
left: 300px;
top: 150px;
z-index: 2;
}
That's the way I handle all the objects on the site… But if I want to add a fadeIn() to every item, so that they fadeIn one after the other… the JS does not care about my CSS positioning anymore… It fades in all objects at "left: 0px; top: 0px" …Why is that? How can I fix that?
That's my JS code with that fadeIn():
<script type="text/javascript">
$(function() {
$(".draggable").hide();
$(".draggable").each(function(index) {
$(this).delay(800).delay(50*index).fadeIn(400);
});
});
$(function() {
$( ".draggable" ).pep();
});
</script>
Here you can get an impression:
http://www.cyrill-kuhlmann.de/play.html
Thank you for any help!
The latest version of jquery.pep.js has a startPos option, or it will auto-detect the left and top css properties. Either way, all you need is an upgrade to the plugin.
http://jsfiddle.net/mblase75/haskbkqz/1/
I am not sure if you can change the behavior of the fadeIn function.
What I would recommend instead is using CSS Transitions. You can set the default opacity to opacity: 0 and then set a transition with transition: opacity 200ms.
Now you just need to apply a class to each of your element with a short delay in between, like this: jsFiddle.
trying to animate a divs opacity when hovering some other element. First I tried it with display none/block, but it read somewhere it's impossible to make a transition for that.
This is a little complicated, because this is supposed to work on each element of the same type with a different id the same. (Picture gallery with a caption to appear on the bottom of the img element when the picture is hovered.)
The HTML structure is like this:
<article id="{PostID}">
<div class="post-content">
<a><img></a>
<div class="post-content--padded">
<p>Caption of the picture.</p>
</div>
</div>
</article>
First I went with a mouseover, mouseout approach added to the post-content div which looked like this:
onmouseover="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='1.0';" onmouseout="document.getElementById('{PostID}').getElementsByClassName('post-content--padded')[0].style.opacity='0.0';"
That worked, but there was no transition. I've set the CSS up with transition handlers to apply to all the css changes within post-content--padded like so:
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
This doesn't seem to affect the mouseover, mouseout opacity change I do, so I tried adding .animate() to that, without much success. Well I got post-content to fade in and out, but not post-content--padded
Different approach
That all didn't work so much. So I tried using the JQuery function hover().
Long story short I added this above the html in question:
<script type="text/javascript">
$(document).ready(function(){
$('#{PostID}.post-content').hover(
function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '1'}, 'slow');},
function(){ $('#{PostID}.post-content.post-content--padded').stop().animate({'opacity': '0'}, 'slow');}
);
});
</script>
This just doesn't want to work though. Endless browsing of stackoverflow and other sources didn't seem to help me with this. Being stuck on this for over an hour I decided to simply ask. It cannot be that hard to add a hover > opactiy transition.
Hope I've not been clear and people understand my issue here.
you can do it just using css if you need only on hover
.post-content--padded{
opacity: 0;
-webkit-transition: all 2s;
-moz-transition: all 2s;
transition: all 2s;
}
.post-content:hover .post-content--padded{
opacity: 1;
-webkit-transition: all 2s;
-moz-transition: all 2s;
transition: all 2s;
}
see demo HERE
and if you want to use Jquery
$('.post-content--padded').hide();
$('.post-content').hover(function(){
$(this).find('.post-content--padded').fadeToggle(2000);
});
see demo HERE
I also worked on combining hover with animate and it worked like that:
in CSS opacity for "a" = 0
and in jQuery:
$("#classy").hover(function(){
$("#classy").animate({
opacity:"1"
},200);
}, function(){
$("#classy").animate({
opacity:"0"
},200);
});
Here is a jQuery method that works:
HTML
<div id='hover-me'>hover over me</div>
<div id='change-me'>I change opacity</div>
CSS
.hide {
opacity:0;
}
JS
$('#hover-me').hover( function() {
if ($('#change-me').hasClass('hide')) {
$('#change-me').removeClass('hide', 'slow');
} else {
$('#change-me').addClass('hide', 'slow');
}
});
jsFiddle Demo
*This is with jQueryUI included
I am working on css in which when mouse hovers on images, it gets bigger. e.g.
#image-div img { width:100px; height:100px;}
#image-div:hover img { width:200px; height:200px;}
Now i want it to be animated a little. Like it shall zoom in slowly, and on mouse out, it shall zoom out slowly. Please help.
Note: I am not very well familiar with javascript.
These animations are typically done with Javascript. Rather than writing the Javascript by hand, it is probably easier to use the jQuery library, which includes the ".animate()" method. The animate method requires you give the destination css properties as parameters, like so:
(Since you wrote you are not familiar with Javascript, I've included everything you need to include the jQuery library)
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.6.4");</script>
<script type="text/javascript">
$(document).ready(function(){
$("#image-div img").live({mouseenter:myfin,
mouseleave:myfout});
});
function myfin () {
$(this).animate({height: 200, width: 200},1000); //1000 = 1 second animation
}
function myfout () {
$(this).animate({height: '', width: ''},1000); //1000 = 1 second animation
//setting the height and width to '' will clear the inserted style, leaving you with your original style
}
</script>
Then all you should need is to set the height and width to 100px in your CSS, and remove the #image-div:hover definition.
If you would like to animate using class definitions in your CSS file, you can do so using a jQuery plug-in. See the following question for help on that:
jQuery.animate() with css class only, without explicit styles
If you don't need to support older browsers you could use the CSS3 transition attribute. It does not require any javascript and works on Safari, Firefox, and Opera. http://www.w3schools.com/css3/css3_transitions.asp
#image-div img {
width:100px;
height:100px;
transition:all 1s ease-in-out
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
}
#image-div:hover img {
width:200px;
height:200px;
}
Look into the .animate() method and pair it with .hover(). This will allow you to apply a specific transition when the mouse is hovered over a specific element, in this case zoom, as desired.