I found this script for warning message here: http://www.red-team-design.com/cool-notification-messages-with-css3-jquery
In the script it is set to hide the warning message after the click function
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500);
});
So I added Timeout function in the hopes of closing it after x ms, but the 'timer' so to speak starts running as soon as the page is loaded.
setTimeout(function(){hideAllMessages()},5000);
I want the timeout function to work every time the form is submitted and the drop message becomes visible (I am using a hidden iframe to submit the form and it is for stock, so repeated submits will be done on the same page).
I set up a Demo Here jsfiddle
You want to add it in your showMessage function like this:
function showMessage(type)
{
$('.'+ type +'-trigger').click(function(){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
setTimeout(hideAllMessages,3000);
});
}
jsFiddle Demo
EDIT: As suggested by James Montagne in the comments, you can use clearTimeout() to prevent stocking timeouts if the user clicks around quickly.
Something like this (quick example, might not be production-ready):
var timeout = null;
function showMessage(type)
{
$('.'+ type +'-trigger').click(function(){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
if (timeout) clearTimeout(timeout);
timeout = setTimeout(hideAllMessages,3000);
});
}
jsFiddle Demo
Try to set the timeout after your animation is completed!
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500, function(){
setTimeout(function(){hideAllMessages()},5000);
});
});
Related
I have a page with a lot of elements (~1,500) of the same class on it, and when I execute
$(".pickrow").addClass("vis");
it takes a second or two for the page to reflect the changes. So that users aren't thinking the page was stuck, I'd like to pop-up a small message using:
$("#msgDiv").show();
$(".pickrow").addClass("vis");
$("#msgDiv").hide();
But the msgDiv never shows. If I remove the $("#msgDiv").hide(); the msgDiv appears simultaneously with the application of the added class (after the 1 or 2 seconds it took to add the class).
It seems like the jQuery functions get pooled and run together without any screen updates until they have all completed.
How can I get the msgDiv to appear while the $(".pickrow").addClass("vis"); is processing?
Here's a Demo
You probably want to delay the hide by a few seconds.
$("#msgDiv").show();
$(".pickrow").addClass("vis");
setTimeout(function(){ $("#msgDiv").hide(); },2000);
Or using jQuery's animations queue for timing:
$("#msgDiv").show();
$(".pickrow").addClass("vis");
$("#msgDiv").delay(2000).hide(1); //must make it at least 1 ms to go into the queue
You can go with this approach also
Working DEMO
$(document).on("click",".btn",function(){
$(".msg").show("fast",function(){
$(".pickrow").addClass("vis");
var interval = setInterval(function(){
var picLength = $(".pickrow").length;
var visLength = $(".vis").length;
if(picLength == visLength){
clearInterval(interval);
$(".msg").hide();
}
},500);
});
});
I think if you simplify the code, you would find that it is much more responsive and probably not require the loading message. In your code, you check every single element in an if statement. Rather than do that, you can check one value, then update all of them accordingly.
Here's a demo: http://jsfiddle.net/jme11/3A4qU/
I made a single change to your HTML to set the initial value of the input button to "Show Details". Then in the following code, you can just check whether the value is Show Details and remove the class that hides the .pickrow and update the value of the button to be "Hide Details" (which is better feedback for the user anyway). Likewise, you can add the .hid class to the pickrow if the button value is not "Show Details". This will also normalize all of the classes regardless if some were individually hidden or shown.
$('#showhide').on('click', function(){
if ($(this).val() === 'Show Details') {
$('.pickrow').removeClass('hid');
$(this).val('Hide Details');
} else {
$('.pickrow').addClass('hid');
$(this).val('Show Details');
}
});
Live site- http://www.uposonghar.com/test/test_popup.html
Reveal popup js page- http://www.uposonghar.com/test/jquery.reveal.js
Due to a lot of code on js page maybe that is not a good option to post all js code here.
I want to add 10 second delay on that popup so if anyone click on link then popup will appears after 10 second. I tried JavaScript settimeout but doesn't work, due to low knowledge of jQuery i don't know how to do that with jquery.
Also popup doesn't appears if i click on on second time, only appears on when i click on first time.
setTimout solves that beautifully.
Try that...
var tmrReveal = null;
$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
if (tmrReveal != null)
clearTimeout(tmrReveal);
tmrReveal = setTimeout(
function() {
$('#'+modalLocation).reveal($(this).data());
},10000);
});
Use setTimeout()
setTimeout(function() {
//code goes here
}, 10000);
$('#your-anchor-here').click(
function(){
setTimeout(
function(){
//popup logic here
},10000)
});
Good evening, I have a javascript function to set background color, etc when user onclick the table row. The function does not perform correctly unless it is called twice or when I press F12 for development tools, similar situation as Function doesn't correctly perform unless it is called twice.
I managed to handle it as below but the problem is that, when the user onclick the table row, it needs around 2-3 seconds for the background color to be change. How can I reduce the time for the function to perform twice?
JavaScript
<SCRIPT LANGUAGE="JavaScript">
setBackGroundColorOnIE (tableRowNumber) {
//........
//........
setBackGroundColorOnIE (tableRowNumber)//I need the function to perform twice in one call
}
</SCRIPT>
I know it is a bad practice, but I'm really have no idea on how to fixed the compability issues in IE9. So, I came out with something like this. Need some hints and advices, thanks in advanced.
you could add some condition to check if your function need to run again, like:
function setBackGroundColorOnIE (tableRowNumber) {
//check if your condition is met
if( some_condition) {
var timerId = setTimeout(function() {
setBackGroundColorOnIE (tableRowNumber);
}, 5000); //set to 5 seconds
}
else {
clearTimeout ( timerId );
}
}
//call the function
setBackGroundColorOnIE(some_value);
An easy solution would be to include jquery ui which would allow you to change the color and then have a callback when the color change is completed. Here is a JS fiddle with jquery and jquery ui. http://jsfiddle.net/kqMs9/
$(function(){
$('button').on('click', function(){
$('.background').animate({
backgroundColor: '#000'
}, 1500, function(){ alert('background-color changed!');});
});
});
In my application I have a script that tells when somebody comes online or goes offline. I put the text of if somebody goes online/offline via content = name+' went offline' or vice versa. I then put that text in a div at the end of my function call: $('#new').text(content);
The problem comes with the fade out, all in all it's not really working. I've been trying to play around with it. Here's what I have so far:
$('#new').text(content);
$('#new').fadeIn('slow', function() {
setTimeout($('#new').fadeOut('slow', function() {
$('#new').css('display', 'none');
}));
});
display:none inside the callback is unnecessary, fadeOut() automatically sets the display to none after concluding.
$('#new').text(content);
$('#new').fadeIn('slow', function() {
setTimeout("$('#new').fadeOut('slow');", 2000);
});
2000 is the number of miliseconds you'd like to delay it, change it to whatever value suits you better.
As #Pst commented, the function-object may be more consistent even though I personally have more issues with function-objects than code strings.
You may also use the function-object:
$('#new').text(content);
$('#new').fadeIn('slow', function() {
setTimeout(function(){ $('#new').fadeOut('slow'); }, 2000);
});
You need to remember to provide duration for which the setTimeout should wait before acting.
$("#hello")
.text(content)
.fadeIn("slow", function(){
setTimeout(function(){
$("#hello").fadeOut();
}, 2000);
});
2000 indicates 2 seconds. If you would like it to stay visible longer, increase this.
Functional Demo: http://jsbin.com/aciwon/edit#javascript,html
Are you using this inside a $(document).ready()? If not, place it like:
$(document).ready(function() {
$('#new')
.text(content)
.fadeIn('slow', function() {
setTimeout(function() { $('#new').fadeOut('slow'); }, 2000);
});
});
Also, be sure to initialize your element with a display: none and note I've removed part of the unecessary code.
Your setTimeout() code is wrong, you have to pass a function to it.
Why not just use delay?
$("#new").text(content).fadeIn("slow").delay(1000).fadeOut("slow");
I changed the bootstrab.js (just replaced click with hover):
$(function () {
$('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
Now i want the content-tab to close when you are not hovering over the tab or content.
How do i do this?
Update: something like the below
var timer;
$('tab_element').hover(
function(){ //hover
// clear timer first
clearTimeout(timer);
// then show the content
},
function(){ //unhovered, 1000 milliseconds
// set a timer to call the hide function
timer = setTimeout("hide_function", 1000);
}
);
$('content_tab_here').bind('mouseleave', function(){
// hide it, you can set a timer here too if you want
});
Here is the docs on timer http://www.w3schools.com/js/js_timing.asp
There are many options here but this will get you started, the jquery I used is old school so if you are using latest version of jquery you can change the code accordingly. I don't want to write out everything for you because then you won't be learning and I don't have that much time because I am at work. Good luck.