I am trying to write a script so that every time a specific button is pressed, I want to send out a warning message in a div tag. I decided to use the fadeTo because my div tag is inside a table and I dont want it to collapse. However, it seems like after the first press, any subsequent press will not work anymore. Does anyone know a workaround for this?
Here's my warning code:
$("#warning").html("The value is too low!").css('color','red').fadeTo(10000,0);
At the end of the fadeTo, the element's opacity is 0. To re-start, reset the opacity back to 100, since otherwise it's trying to animate from 0 to 0, which is...subtle to say the least. :-)
E.g.:
$("#warning")
.html("The value is too low!")
.stop() // <=== New bit: Stop the animation if it's running
.css({
'opacity': 1, // <=== New bit: Reset the opacity
'color': 'red'
})
.fadeTo(10000,0);
Live example | source (uses one second rather than ten)
You will have to show the div again:
$("#warning").show().html("The value is too low!").css('color','red').fadeTo(10000,0);
Another way is to use opacity animation instead:
$("#warning").html("The value is too low!").css({
color : 'red',
opacity : 1
}).stop().animate({
opacity : 0
}, 1000);
DEMO: http://jsfiddle.net/SDWmn/1/
Related
I'm having a problem where I'm making a function in JavaScript (JQuery):
$('.login').click( function() {
$('#login-container').animate({
left: 0
}, 300, "swing", function(){
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
});
Whereas "login" is a button and login-container is a big div which contains a form which people can use to login.
I'm trying to make the giant container that slides over the page only turn its background color to lower the website's exposure but it's working and as far as I know, the code is correct.
The first animation happens but the second one (referring to the backgroundColor) doesn't even start at all.
Thanks in advance
EDIT:
I've simplified my code to see if it was a problem of my syntax or JS simply not applying this animation:
$('.login').click( function() {
$('#login-container').animate({
backgroundColor: 'rgba(0,0,0,0.4)'
}, 2000, "swing");
});
And the element does not have its background-color applied, for some reason.
I don't actually get what you're trying to say here, but if you want to toggle that animation you can use $.toggle() of jquery after the user clicks.
If you want to animate this stuff, look at this documentation provided by jQuery
jQuery Animation
I'm modifying this script to have the overlay fade out completely when clicked. The problem is if the css is changed to display:none I can't get it to return to display:block.
Here is the bit in question (original)
if(dir)
$ei_image.animate({opacity:0}, 1000);
else
$ei_image.css({opacity:0.5});
and what I am attempting (in various ways) but doesn't work
if(dir)
$ei_image.fadeOut(500);
else
$ei_image.fadein(500);
Any ideas how I can get the div layer back when a new one is clicked?
EDIT **
I attempted to make a working jsfiddle for this, but even though all the code is there it isn't working. I can't figure out why. But at least the whole shebang is there for anyone who needs to put this bit in context.
I also tried this, which worked when fading out perfectly, but wouldn't turn the layer back on when navigating to a new column
if(dir)
$ei_image.animate({opacity:0}, 1000 , function () {
$(this).css({display:'none'});
})
else
$ei_image.css({display:'block'} , function () {
$(this).animate({opacity:0.5});
})
http://jsfiddle.net/BZzRT/
http://jsfiddle.net/fastasleep/srLVs/
Line 104 in the js:
$menuItemsPreview.stop()
.animate({opacity:0.5}, 1500);
Changed to:
.fadeTo(500,.5);
Line 119:
if(dir)
$ei_image.hide().fadeIn(500);
Changed to:
$ei_image.fadeOut(1000);
At line 119, the overlay div does a fadeOut which takes it from from .5 opacity to 0 then goes display:hidden. The part at 104 resets the closed divs, which can't animate just opacity if the div is hidden, so you have to do a fadeTo which unhides the div, then animates to .5 opacity to match the other closed divs.
Also changed your text to #fff so you could see it on the black bg. :)
fadeOut(500); means hide the element that's why you elements are hidden .
try doing
if(dir)
$ei_image.hide().fadeIn(500);
else
$ei_image.fadeOut(500);
Try changing the 0 to a 1 in the original .animate call.
if(dir)
$ei_image.animate({opacity:1}, 1000) ;
else
$ei_image.css({opacity:0.5});
Also, in your fiddle include jQuery in the drop down on the left and hit run.
I forked your fiddle
Is that what you were going for?
i have this code: http://jsfiddle.net/Ym4NP/2/ why the 'content' div does not move to up , move only to down ? and how i send $this ( selector ) to callback function ?
I would just use jQuery UI to do this effect.
See this fiddle:
http://jsfiddle.net/kEKtw/2/
With this code
$(document).ready(function() {
$('#main').effect("shake", {direction:'up', times:10}, 0);
});
Notes:
I changed the css to make the numbers add up or the UI code would have issues.
If you look at how jQUI implements shake you will see the "effects" stack is implemented as an array as I suggest below.
The reason positions should be an array:
What you really want to do is set up a sequence like this:
move up random amount
wait set time
move back to center
wait set time
move down random amount
However using positions as an object does not give ordering nor does it allow you to repeat commands (since ever command is an object property name which must be unique.)
If it was an array you could set up something like this to pass into the plugin:
positions: [
'U': -300,
'W' : 1000,
'C' : 0,
'W' : 1000,
'D': 300
],
Old answer
The code is complex, but your problem is simple.
At each "move" in the shake you change the relative location of the top or bottom to a new number from 1 to 300. This means the item will move between 1 and 300+object size. I believe what you want to do is move it between -300 and +300. To do this you will need to change the U command to set a value of -300 to 0 not 0 to 300
There is another error in the logic -- it does not reset the box to the center.
I would like to create a Mootools ajax tooltip with following script
new MooTooltips({
extra:{
0: {
'id':this.id,
'ajax':'http://www.fesn.cz/communities/tip.php',
'ajax_message': 'Loading... please wait.',
'position':1,
'sticky':false
}
},
ToolTipClass:'ToolTips', // tooltip display class
toolTipPosition:-1, // -1 top; 1: bottom - set this as a default position value if none is set on the element
sticky:false, // remove tooltip if closed
fromTop: 0, // distance from mouse or object
fromLeft: -55, // distance from left
duration: 300, // fade effect transition duration
fadeDistance: 20 // the distance the tooltip starts the morph
});
}
Script demo is here,
http://jsfiddle.net/kyathi/mHEjV/.
Idea behind is while mouseenter every tippable class will show an ajax tooltip. But script fails to call ajax script at first time when hover the div and it will involk thereafter.
Any idea to fix the error?
Thanks
I commet out the toolTipPosition:-1 And not its displaying the tooltip. But the alignment is out.
http://jsfiddle.net/mHEjV/1/
the $$ function return always an array.. you are adding the events on an array and not on the elements of the array. You need to do a loop or use the each() method:
$$('div.tippable').each(function(div){
div.addEvents({
mouseenter:function(){
...
http://jsfiddle.net/mHEjV/2/
And it wont work in jsfiddle since the ajax call uses a different domain.
http://en.wikipedia.org/wiki/XMLHttpRequest#Cross-domain_requests
Good Luck
I use the following snippet to make an element's background lightblue, then slowly fade to whiite over 30 seconds:
$("#" + post.Id).css("background-color", "lightblue")
.animate({ backgroundColor: "white" }, 30000);
Two questions.
First, instead of fading to white, is there a way to fade opacity to 100%? That way I don't have to change "white" if I choose to change the page's background color?
Second, about once out of every 10 or 15 times, the background stays lightblue and fails to fade to white. I'm using the latest versions of jQuery and the UI core. What could be going wrong?
EDIT: Bounty is for a solution to problem regarding second question.
EDIT2:
Apparently I got downvoted into oblivion because I said I rolled my own solution but didn't show it. My bad. I didn't want to be self-promoting. My code works 100% of the time and doesn't require jQuery. A demonstration and the code can be found at:
http://prettycode.org/2009/07/30/fade-background-color-in-javascript/
For your second question: in my experience this is usually because a Javascript error has occurred somewhere else on the page. Once there is one Javascript exception, the rest of the page stops running Javascript. Try installing Firebug (if you haven't already), then open up the "Console" tab and enable it. Then any javascript errors or exceptions will be printed to the console.
Another thing to try (which kinda contradicts my last statement...) is to disable all your browser plug-ins to see if you can recreate. Sometimes they interfere with scripts on the page (particularly GreaseMonkey.)
If you could provide a sample HTML snippet which reproduces this animation problem it would be a lot easier for us to help you. In the script I have pasted below, I can click it all day, as fast or slow as I like, and it never fails to animate for me.
For the first question: I know you said you'd found a workaround, but the following works for me (even on IE6) so I thought I'd post it, since it may be different from what you were thinking. (Note that setting CSS "opacity" property through jQuery.css() works on IE, whereas IE does not support the "opacity" property directly in CSS.)
<html>
<head>
<style>
body { background-color: #08f; }
#test { background-color: white; width: 100px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var myOpacity = 0.125;
$(function(){
$('#test').css('opacity', myOpacity);
$('a').click(function(){
myOpacity = 1.0 - myOpacity;
$('#test').animate({ opacity: myOpacity });
return false;
});
});
</script>
</head>
<body>
<p>Click me</p>
<div id="test">Test</div>
</body></html>
Dont forget the color plugin.
See here
When the color fails to animate to blue you could try to use the callback function to log a message to the console. You can then check that the event actually fired and completed. If it does then you could potentially use two animates. The first one to animate to a halfway house color then the use the callback to animate to white (so you get two bites of the cherry, if the outer fails but completes the callback has a second go)
It would be good if you could try to recreate the issue or give a url of the issue itself.
e.g
$("#" + post.Id).css("background-color", "lightblue")
.animate({ backgroundColor: "#C0D9D9" }, 15000, function(){
$(this).animate({ backgroundColor: "#ffffff" }, 15000)
});
You could always use something like this, avoiding the JQuery animate method entirely.
setTimeout(function() { UpdateBackgroundColor(); }, 10);
UpdateBackgroundColor() {
// Get the element.
// Check it's current background color.
// Move it one step closer to desired goal.
if (!done) {
setTimeout(UpdateBackgroundColor, 10);
}
}
Also, you may be able to remove the "white" coding by reading the background color from the appropriate item (which may involve walking up the tree).
It is possible to have jQuery change the Opacity CSS property of an item (as mentioned in another answer), but there's two reasons why that wouldn't work for your scenario. Firstly, making something "100% opaque" is fully visible. If the item didn't have any other modifications to its opacity, the default opacity is 100%, and there would be no change, so I'm guessing you meant fading to 0% opacity, which would be disappearing. This would get rid of the light blue background, but also the text on top of it, which I don't think was your intent.
A potentially easy fix for your situation is to change the color word "white" to "transparent" in your original code listing. The color plugin may not recognize that color word (haven't checked documentation on that yet), but setting the background color to "transparent" will let whatever color behind it (page background, if nothing else) shine through, and will self-update if you change your page background.
I'll answer your first question.
You can animate opacity like this:
.animate({opacity: 1.0}, 3000)
I think you can try using fadeOut/fadeIn too..
What about:
$("#" + post.Id).fadeIn( "slow" );
You could possibly have two divs that occupy the same space (using position: absolute; and position: relative; setting the z-index on one higher to make sure one is above and the other is below. the top one would have a transparent background and the one below would have a background color. then just fadeout the one below.
As for the second question:
If you think the default animation classes from JQuery are not properly working you could try Bernie's Better Animation Class. I have some good experiences with that library.
Animate only works for numbers. See the jquery docs. You can do opacity but you can't do background color. You can use the color plug in. Background-color uses strings like 'red', 'blue', '#493054' etc... which are not numbers.