I want add <p> with text when my form have some error. I write some js code, but it does not work now.
My question is: how can i add text, if i have error, show it 1800 ms, add then remove this text?
$(document).ready(function () {
........................
error: function () {
$('form').append("<p class='er-msg'></p>").text('Maximum upload size 50MB. Please try again');
$('.er-msg').animate({ opacity: 0} , 1800);
$('.er-msg').remove(); //don't work
}
};
....................
});
I hope someone help me.
Now your animation takes 1800ms and, from what I understand, you want a delay of that time before you hide the message. So you should start with a setTimeout like this
setTimeout(function () {
$('.er-ms').animate({ opacity: 0} , 1800);
}, 1800);
jQuery animate takes a 3rd parameter, which is a function that will be called after the animation is over. Then you can add this, to make the message disappear.
setTimeout(function () {
$('.er-ms').animate({ opacity: 0} , 1800, function () {
$(this).hide().remove();
});
}, 1800);
When you put this in the error callback, after the append line, and get rid of the last two, you should be good to go.
The append of <p> is not working that's why you can't remove it.
Try it this way:
$(document).ready(function () {
........................
error: function () {
$('form').append("<p class='er-msg'></p>");
$('.er-ms').text('Maximum upload size 50MB. Please try again');
$('.er-ms').animate({ opacity: 0} , 1800);
$('.er-ms').remove();
}
};
....................
});
Is the actual append even happening?
I suspect it is not because you are appending <p> dynamically.
In order to successfully bind to this, you will be need to target its wrapper.
for example:
$('form').on(eventname, targetElement, function(){
....the behavior you want
});
you can check out this blog post for more info: http://blog.ning-xia.com/accessing-dynamically-created-elements-with-jquery/
Another way to do is it to create the <p> and set it to display: none then you can just toggle it as needed.
html:
<p class='er-msg'>Maximum upload size 50MB. Please try again</p>
CSS:
.er-msg {
display: none
}
jQuery:
error: function () {
$('.er-msg').fadeIn("slow");
setTimeout(function(){
$('.er-msg').fadeOut("slow");
}, 1800);
}
As a personal suggestion, I would make the timer slightly higher to accommodate people that don't read fast. This way your error message is effective for anyone that happens to see it.
JSFIDDLE DEMO
Simple solution
Here is an example how you could do this:
var errorMessage = 'test message';
$('#question-header').append(
$(
'<p class="er-msg">' +
errorMessage +
'</p>'
).animate(
{opacity: 0},
1800,
function(){
$(this).remove();
}
)
);
You can call a function inside animate that runs after animation is complete. Try to run this on this page in your console. Note that with this multiple error can be thrown in different orders and they will all show the correct behavior. You couple the animation and the removal to all your unique error messages in a simple way.
Your code does not work because text should be called on that created element not the element your appending it to.
Proper way:
$('form').append($('<p class="er-msg"></p>').text('Maximum uplo...'));
But I think the example above is a lot more readable, abstract and more performant.
Related
I have 36 boxes where you hover over the title and it slides up to show the hidden text below it, whilst it works as expected the problem is all 36 boxes slide up at the same time instead of just the one you moused over here is the script I am using:
$(document).ready(function() {
$('.caption').mouseenter(function(){
$('.caption').stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$('.caption').stop().animate({height: "8%"}, 1000, function() {
});
});
});
Now after much reading I found that I need to use "this" so I tried this:
$(document).ready(function() {
$('.caption').mouseenter(function(){
$('.caption', this).stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$('.caption', this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
However that just disables the animation altogether, I tried using ".next" also and many other combinations that just resulted in the animation being disabled also.
In short, I have 36 boxes and I only want the actual one you mouse over to slide up not all of them at the same time.
I am a total jQuery novice and have searched for hours but cannot find a working example of exactly what I wish to achieve. Help is greatly appreciated.
Try taking the .caption out of your animate function and just use the reference to this like this
$(document).ready(function() {
$('.caption').mouseenter(function(){
$(this).stop().animate({height: "60%"});
});
$('.box').mouseleave(function(){
$(this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
The this object when used with a jquery even is a reference to the specific element the event was called on.
Ah I got it !
$(document).ready(function() {
$('.caption').mouseenter(function(){
$(this).stop().animate({height: "60%"});
});
$('.caption').mouseleave(function(){
$(this).stop().animate({height: "8%"}, 1000, function() {
});
});
});
Just changed .box to .caption and its working, Thank you guys for you help !
I am going to mark yours as correct though since your answer did put me in the right direction and I only had to make that small change.
I have a little jQuery function in my Asp.Net MasterPage that fades an image out after 3 seconds. It works fine, but I'm having difficulty getting it to fade back in. I've tried several things as I'm new using jQuery, and I know there's something I'm doing or not doing. I can't put my finger on it. Here's what I have:
<script src="/Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (){
setTimeout(function (){
$('#Image1').fadeOut('slow', function(){
$('#Image1').remove();
});
}, 3000);
});
var fadeBack = function () {
$('#Image1').fadeIn();
};
fadeBack();
</script>
Like I said, it fades out with no problem, but I cannot find the right code structure to bring it back in. I'm thinking maybe an If statement block about the opacity is needed?
The real trick is that I want alternate images in 3 boxes I have as seen here:
I have about 12 images total, and just want them to fade one image out, and bring another in. Being more specific, I mean the following:
Column (1): Image1.FadeOut(); Image2.FadeIn(); Image2.FadeOut(); Image3.FadeIn(), and etc.
So for now, I just need help with how to do this in Column One, and I'll see if can string something together to make the other Columns 2 and 3 follow up. The timing would be 3 second for each.
Lastly, could I use an array to store other images which aren't in the Column One box already and call them into the slideshow fade sequence? I appreciate you help for this knowledge, so I can lock this in mind. Thanks.
Use this code, it will hide the image after 3 seconds and after that 1 sec, it will show image back.
$(document).ready(function (){
setTimeout(function (){
$('#Image1').fadeOut('slow');
}, 3000);
setTimeout(function (){
$('#Image1').fadeIn('slow');
}, 4000);
});
if you want like a slideshow use this code
<div class="yourimg_container">
<img src="http://localhost/app/img/off.png" id="Image1"/>
</div>
/* make an array containing your images path (you can fetch images from database using asp.net/php query)*/
var ss= ["http://localhost/app/img/off.png",
"http://localhost/app/img/on.png",
"http://localhost/app/img/slider.png"];
window.setInterval(function(){
slideshow();
}, 3000);
function slideshow(){
var im=$("#Image1").attr("src");
for(i=0;i<ss.length;i++){
if(ss[i]==im){
if(i==ss.length-1) $('#Image1').attr("src",ss[0]);
else $('#Image1').attr("src",ss[i+1]);
}
}
}
additionally you can use other effects like this
function slideshow(){
var im=$("#Image1").attr("src");
for(i=0;i<ss.length;i++){
if(ss[i]==im){
if(i==ss.length-1) {
$('#Image1').fadeOut(500);
$('#Image1').attr("src",ss[0]);
$('#Image1').fadeIn(700);
}
else {
$('#Image1').fadeOut(500);
$('#Image1').attr("src",ss[i+1]);
$('#Image1').fadeIn(700);
}
}
}
}
Your fadeBack() is launched immediately whereas the fadeOut has 3 sec delay. Set a timer for your fadeBack grater than 3 sec and the img will appear.
There is a function $('#Image1').remove(); Applied. It mean once fade over, the html block will be removed. Then you can't access the object. Because fade in and fade out accessing same id #Image1. So comment the line. It may work.
On a click of a button, i'm trying to fadeOut an image, and while it is fading out i'm changing the source of the image. And then i'm using the fadeIn to show the new image. This works fine in Chrome, and firefox. However, in ie10, the image fades out, fades in, and then the new image appears. I can't find a a fix for it. I've tried to prolong the duration of fadeOut, fadeIn. I've tried using setTimeout function. i've tried using promise().done() function. I've tried using Jquery UI's hide/show w/ slide effect, and same issues are appearing. Nothing seems to be working. I'd really appreciate any help. Thanks
me.$el.find('#printable-detail-static-imageRight').fadeOut('fast', function(){
me.$el.find('#printable-detail-static-imageRight').attr('src', me.options.samplePrints[k+i]);
me.disableNext();
});
me.$el.find('#printable-detail-static-imageRight').fadeIn('slow')
I'm pretty sure you need to put the .fadeIn method inside the callback function in order for it to be affected by the callback function. In fact, I'd add another callback function to the .attr method to make sure that it fades back in only after the src has been changed.
Here's a jsFiddle I wrote to illustrate what I mean.
i am on a mac, but does this code works in ie ? jsFiddle
.html
<div id="content">Promises</div>
<button id="click">start animation</button>
.js
$("#click").on("click", function () {
$('#content').fadeOut({
duration: 1000,
// run when the animation is complete
complete: function () {
$("#content").append($("<div>").addClass("fakeimg"));
},
// run when the animation is complete +
//it's promise is resolved
done: function () {
$('#content').fadeIn(1000);
}
});
});
this works:
me.$el.find('#printable-detail-static-imageRight').animate({
opacity:0
}, {
duration: 700,
step: function(now, fx){
if(fx.pos > 0.40 && fx.pos < 0.5){
$(this).attr('src', me.options.samplePrints[k+i]);
me.disableNext();
}
if (fx.pos ==1) {
$(this).animate({
opacity:1
}, 200);
}
}
});
How to make display none all error message after 2s after the error message are displayed commonly?
Something like
$(document).ready(function () {
$('#error_message').show().delay(2000).fadeOut('slow');
});
So that whenever a error message is displayed, error message want to persist 2s after it want to display out.
It is difficult to change this inside every node. So I want to write the code commonly, which will have effect in every page.
So where ever error message is displayed , it want to be displayed out in 2 seconds.
Is it possible ?
If you do this on document.ready it will be executed once, not everytime you display an error message.
Implement the delayed fadeOut with an function to display the error.
function display_error(message) {
$('#error_message').html(message);
$('#error_message').show().delay(2000).fadeOut('slow');
}
If this doesn't work or is not suitable, you can also bind it to an event and trigger the event on display.
Sample
http://jsfiddle.net/28XTM/
use ajaxError event handler for show the error of all ajax calls in your project. Just paste this code to your layout page:
$(function(){
$(".error_message").ajaxError(function (event, xhr, status, error) {
$(this).html(error).show().delay(2000).fadeOut('slow');
});
});
By using setTimeout:
<div id="error_message">
Put your error message here
</div>
<button id="btn_error">Show error</button>
<script>
// Init sample
$('#error_message').hide();
function display_error(message) {
$('#error_message').html(message);
$('#error_message').show();
setTimeout(function () {
$('#error_message').hide();
}, 2000);
}
$("#btn_error").click(function() {
display_error("Show this test message");
});
</script>
To hide error using '#error_message' as id but if you have more than one elements then you should use '.error_message' as a class instead of id.
$(document).ready(function () {
$('#error_message').delay(2000).fadeOut('slow'); // For id and use $('.error_message') for class
//Or
setTimeout(function(){
$('#error_message').fadeOut('slow'); // For id and use $('.error_message') for class
}, 2000)
});
A fiddle is here.
Never use id $("#someId") for more than one element, it should be unique instead use class $(".someClass") when you have something like that
<div class="someClass">This is an error.</div>
<div class="someClass">This is an error.</div>
I’m having a setTimeout problem similar to this one. But that solution doesn't help me since I can’t use php in my file.
My site has a slider with a list of images that move every 8 seconds.However, when I have opened a few tabs in the browser and then switch back again, it goes nuts.
The slider proceeds to move the images one after the other immediately without the 8 second timedelay.
I'm only seeing it in Chrome and the latest Firefox.
**EDIT: I checked with console.log() and the setTimeout returns the same number before and after the clearTimeout. Not sure why. Maybe that also has something to do with it? **
EDIT 2: I added a fiddle: http://jsfiddle.net/Rembrand/qHGAq/8/
The code looks something like:
spotlight: {
i: 0,
timeOutSpotlight: null,
init: function()
{
$('#spotlight .controls a').click(function(e) {
// do stuff here to count and move images
// Don't follow the link
e.preventDefault();
// Clear timeout
clearTimeout(spotlight.timeOutSpotlight);
// Some stuff here to calculate next item
// Call next spotlight in 8 seconds
spotlight.timeOutSpotlight = setTimeout(function () {
spotlight.animate(spotlight.i);
}, 8000);
});
// Select first item
$('#spotlight .controls a.next:first').trigger('click');
},
animate: function(i)
{
$('#spotlight .controls li:eq(' + (spotlight.i) + ') a.next').trigger('click');
}
}
From the jQuery documentation:
Because of the nature of requestAnimationFrame(), you should never
queue animations using a setInterval or setTimeout loop. In order to
preserve CPU resources, browsers that support requestAnimationFrame
will not update animations when the window/tab is not displayed. If
you continue to queue animations via setInterval or setTimeout while
animation is paused, all of the queued animations will begin playing
when the window/tab regains focus. To avoid this potential problem,
use the callback of your last animation in the loop, or append a
function to the elements .queue() to set the timeout to start the next
animation.
I finally found my answer and it’s not at all what I was expecting.
It seems the culprit is jQuery’s .animate(), which I use to move the images in the slider.
I calculate and move my images positions with this:
$('.spotlight-inner')
.animate(
{ left: scrollToVal },
{duration: 'slow'}
)
;
Now the problem seems to be that in some browsers, after you switch to a new tab and back, jQuery’s .animate() saves up the animations and fires them all at once. So I added a filter to prevent queueing. That solutions comes from CSS-Tricks.com :
$('.spotlight-inner')
.filter(':not(:animated)')
.animate(
{ left: scrollToVal },
{duration: 'slow'}
)
;
The first slide you see when you go back can act a little jumpy but it’s better than the superspeed carousel from before.
Fiddle with the full code here
There is an easier way using the jquery animate queue property:
$(this).animate({
left: '+=100'
}, {duration:500, queue:false});
I don't know if this will help you, but it helped me with my slideshow. What I did was everytime I called an animation that was supposed to happen at a set interval because of the setTimeout, I called clearQueue() which would get rid of any other animations that had been set to happen. then i'd call the animation. That way when you come back to that tab, you don't have all these animations queued up and it goes crazy. at max you'll only have one set up.
So something like this:
spotlight.timeOutSpotlight = setTimeout(function () {
spotlight.clearQueue(); // get rid of other instances of the animation
spotlight.animate(spotlight.i);
}, 8000);
It may not work in all cases (depending on timing), but I hope that helps somebody!
You must also think you use clearTimeout.
As you call setTimeout function it returns an ID you can save this ID in a variable like
timeoutID = setTimeout(function () {
spotlight.animate(spotlight.i);
}, 8000);
and before setting a new timeout you can call the function like
clearTimeout(timeoutID)
My suspicion is that the browser queues input events like 'click' but only fires them when the tab where the event occurs actually has focus.
Perhaps you should try calling your click callbacks directly instead of using trigger('click').
Something like this:
spotlight: {
i: 0,
timeOutSpotlight: null,
clickFunc: function(element) {
// do stuff here to count and move images
// Clear timeout
clearTimeout(spotlight.timeOutSpotlight);
// Some stuff here to calculate next item
// Call next spotlight in 8 seconds
spotlight.timeOutSpotlight = setTimeout(function () {
spotlight.animate(spotlight.i);
}, 8000);
},
init: function()
{
$('#spotlight .controls a').click(function (e) {
// Don't follow the link
e.preventDefault();
spotlight.clickFunc(this);
});
// Select first item
spotlight.clickFunc($('#spotlight .controls a.next:first'));
},
animate: function(i)
{
var element = $('#spotlight .controls li:eq('+spotlight.i+') a.next');
spotlight.clickFunc(element);
}
}
What version of jQuery are you running? Apparently this problem was 'fixed' for version 1.6.3 - they reverted the change that caused this to happen. Discussions here and here.
Though this issue will likely have to be addressed in the future, it seems as though we're off the hook for now.