I have a quick question. I am trying to trigger an event when two 'container' divs no longer have any divs inside them.
My Script so far is as follows:
if (($('#Summary2 div').length) + ($('#Summary3 div').length)) == 0) {
alert("hello");
}
My problem is -how do I get this piece of code to trigger? I think what happens is that it gets read once and then sits there idle as nothing triggers it.
Kind regards and thank you,
G
I would suggest you to check for div on specific time let us say every 1 hour then you can use setinterval as shown below :-
setInterval(
function(){
if ($('#Summary2 div').length + $('#Summary3 div').length == 0) {
alert("hello");
}
}, 60 * 60 * 1000);
Try this code. On "remove" event may trigger.
$("#Summary2 div, #Summary3 div").on("remove", function () {
if (($('#Summary2 div').length) + ($('#Summary3 div').length)) == 0) {
alert("hello");
}
});
Related
In my code the button .getmore gets clicked on scroll down. It loads data from database.Works fine. I need to make it disable for 5 sec after every click. How can I set this delay timer?
Or is it possible to disable this function for 5 sec once it fires? Disable the button or disable the function anything will work for me.
$(window).scroll(function(){
if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
// Here how can i set a delay time of 5 sec before next click
$('.getmore').click();
}
});
You can use setTimeout() function of jQuery.
$('.getmore').prop('disabled', true);
setTimeout(function() {
$('.getmore').prop('disabled', false);
}, 5000);
One solution is to use setTimout and disable the button with javascript using document.getElementById("yourButtonID").disabled = true;
You could use a flag inside the clickHandler:
var clickHandler = () => {
if (clickHandler.running)
return
clickHandler.running = true
setTimeout(() => { clickHandler.running = false }, 5000)
console.log(new Date())
}
$('#getmore').click(clickHandler)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='getmore'>more</div>
U can use setTimeout() n after that, put ur disable button function inside it.
setTimeout(document.getElementById('ur_button_id').style.display = 'none', 500);
I'm trying to make an exit popup and I could do that using the following code.
Whenever the user's mouse move out of the browser area, this gives a popup. But it is quite annoying when the popup comes everytime. I want to limit it to just a single time.
Can somebody help me with this?
jQuery(document).ready(function () {
jQuery(document).mousemove(function(e) {
jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2));
jQuery('#exitpopup').css('top', (window.innerHeight/2 - jQuery('#exitpopup').height()/2));
if(e.pageY <= 5)
{
// Show the exit popup
jQuery('#exitpopup_bg').fadeIn();
jQuery('#exitpopup').fadeIn();
}
});
});
Use jQuery's one() function: http://api.jquery.com/one/
jQuery(document).ready(function () {
jQuery(document).one('mousemove', function(e) {
jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2));
jQuery('#exitpopup').css('top', (window.innerHeight/2 - jQuery('#exitpopup').height()/2));
if(e.pageY <= 5)
{
// Show the exit popup
jQuery('#exitpopup_bg').fadeIn();
jQuery('#exitpopup').fadeIn();
}
});
});
Insert this:
e.stopPropagation();
just at the first list of the mousemouve function.
....
jQuery(document).mousemove(function(e) {
e.stopPropagation();
jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2));
...
(function($) {
$(document).ready(function () {
var leftPage = false;
$(document).mousemove(function(e) {
if(e.pageY <= 5)
{
if (!leftPage) {
var exitPopup = $('#exitpopup');
exitPopup.css('left', (window.innerWidth/2 - exitPopup.width()/2));
exitPopup.css('top', (window.innerHeight/2 - exitPopup.height()/2));
$('#exitpopup_bg').fadeIn();
exitPopup.fadeIn();
}
leftPage = true;
} else {
leftPage = false;
}
});
});
})(jQuery);
"If the user leaves the page AND they have not already left THEN set popup. Next mark that they have left the page (leftPage = true)"
"Do not try and set the popup again until they are back in the page"
Couple of extras:
Instead of calling jQuery all the time we wrap the whole thing in a function wrapper so you can use $.
Instead of doing this everytime $('#exitpopup'); we CACHE it to a variable exitPopup so it doesn't have to do the lookup every time (inefficient)
A few things here. First, for form's sake, you should move your CSS alterations inside the if block, because you really don't need those to run every time the user moves their mouse, just right before you show the popup:
if(e.pageY <= 5)
{
// Alter CSS as appropriate
jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2));
jQuery('#exitpopup').css('top', (window.innerHeight/2 - jQuery('#exitpopup').height()/2));
// Show the exit popup
jQuery('#exitpopup_bg').fadeIn();
jQuery('#exitpopup').fadeIn();
}
Second, you'll probably want to avoid showing it a second time by detaching the event handler. I'd recommend you use the jQuery .on() and .off() syntax instead of the shorthand .mousemove() because it'll be easier to read and maintain. I also recommend you use namespaces on your events so you can ensure that you're not detaching events that might have been set in other scripts.
jQuery(document).on('mousemove.yourNamespace', function (e) {
if(e.pageY <= 5)
{
// Alter CSS as appropriate
jQuery('#exitpopup').css('left', (window.innerWidth/2 - jQuery('#exitpopup').width()/2));
jQuery('#exitpopup').css('top', (window.innerHeight/2 - jQuery('#exitpopup').height()/2));
// Show the exit popup
jQuery('#exitpopup_bg').fadeIn();
jQuery('#exitpopup').fadeIn();
// now detach the event handler so it won't fire again
jQuery(document).off('mousemove.yourNamespace');
}
}
Lastly, if you wrap all of this code in an IIFE, you won't have to write out jQuery every time, and you still won't have to worry about possible conflicts with $ in the global namespace.
(function ($) {
$(document).on('mousemove.yourNamespace', function (e) {
if(e.pageY <= 5)
{
// Alter CSS as appropriate
$('#exitpopup').css('left', (window.innerWidth/2 - $('#exitpopup').width()/2));
$('#exitpopup').css('top', (window.innerHeight/2 - $('#exitpopup').height()/2));
// Show the exit popup
$('#exitpopup_bg').fadeIn();
$('#exitpopup').fadeIn();
// now detach the event handler so it won't fire again
$(document).off('mousemove.yourNamespace');
}
}
})(jQuery);
jQuery docs for .on(), .off(), and event.namespace for reference.
When all 8 divs are clicked I want the remaining red divs to display well done. It doesn't appear to be working, I am trying to get class by using the hideous document.getElementsByClassName but I want something simpler that works. Please Help!
var score;
$(document).ready(function () {
$('.b').click(function () {
$(this).fadeOut("slow");
});
});
function click() {
score += 1;
if (score === 8) { document.getElementsByClassName(a).innerHTML += 'Well Done';
}
}
http://jsfiddle.net/clarinetking/BbSMW/8/ (JSFiddle)
A few things:
-score was never given a default value, was resulting in NaN when trying to add 1 each time
-You never call click()
-You have to iterate over your div's and apply the innerHTML -- I just used jQuery since you already had it going for you:
var score = 0;
$(document).ready(function () {
$('.b').click(function () {
$(this).fadeOut("slow");
click();
});
});
function click() {
score += 1;
if (score === 8) { $(".a").text('Well Done');
}
console.log(score);
}
Demo: http://jsfiddle.net/BbSMW/10/
An alternative solution to your code could be to check if any of the elements with class b are still visible:
$(document).ready(function () {
$('.b').click(function () {
$(this).fadeOut("slow", function() {
if($(".b:visible").length === 0) {//fading out element is still technically visible ;)
$(".a").text("Well done");
}
});
});
});
Update to code to handle race condition mentioned in comments.
Updated Fiddle (im dumb)
$(".className").text("Well Done")
Put the above in your click handler.
I have an element by clicking on which some function is called by jQuery .click method. There is a condition in the body of the function. When I click on an element one time at a time everything runs smoothly, but if I click two times quickly the condition, which is supposed to stop a function, doesn't run, and the function is executed two times instead of one. So it is as if clicks are being accumulated. How can I prevent this behaviour of a .click method?
$(".collections_pager_right").click(function() {
if (collections_wrapper_left > 0 - collections_wrapper_width + 770) {
$(".collections_slider_wrapper").animate({left: "-=770"}, 400);
};
});
Try to add a attribute like running="false" in your element, so after that you can check it.
$(".collections_pager_right").click(function() {
if($(this).attr('running') == 'false'){
$(this).attr('running','true');
if (collections_wrapper_left > 0 - collections_wrapper_width + 770) {
$(".collections_slider_wrapper").animate({left: "-=770"}, 400, function(){
$(this).attr('running','false');
});
};
}
});
I have javascript in my page and I use there the click event. The problem is that in ie the clicking doesnt't hapen right away, but only after the hole javascript has gone through.
Then it fires that click event!
I would need it to hapen right away, before the other javascript-code!
$(document).ready(function() {
// sorting the list
var myLink = document.getElementById('header3');
myLink.click();
// scrolling the list to where the modified row is
if ('${rowId}') {
var row = $('#row-${rowId}');
row.addClass("highlight");
var scrollParent = ((jQuery.browser.msie) ? row.parent().parent().parent()[0] : row.parent()[0]);
row[0].scrollIntoView(false);
if (scrollParent.scrollTop > 0)
scrollParent.scrollTop = scrollParent.scrollTop + (scrollParent.clientHeight / 2);
}
}
That sorting should happen before scrolling! In ie the clicking happens after scrolling and then the scrolling is in wrong place.
In Firefox this works!
Can you help me on this?
Assuming (never a good thing) that the code that is executing before the click event code is the code you enter here below the click() call, why don't you refactor that to a function and make it part of the code that happens when you call the click() code?
Try this. Place your code in a separate function and trigger that function within the click.
$(function(){
function yourfunction(event)
{
//code to be executed after the click
// scrolling the list to where the modified row is
if ('${rowId}') {
var row = $('#row-${rowId}');
row.addClass("highlight");
var scrollParent = ((jQuery.browser.msie) ? row.parent().parent().parent()[0] : row.parent()[0]);
row[0].scrollIntoView(false);
if (scrollParent.scrollTop > 0)
scrollParent.scrollTop = scrollParent.scrollTop + (scrollParent.clientHeight / 2);
}
return false;
}
});
$(document).ready(function() {
// sorting the list
$('#header3').click(yourfunction);
});
Hope it helps,
Cumps