Lost user click while updating a div using jquery - javascript

I've got a somewhat "big" div (containing almost my whole page) and every second I do a
mydiv.empty() and then I rebuild it entirely.
I know it's not efficient at all but for now this will have to do for my code :/ The issue is that some inner div of "mydiv" have click event attached to them. And sometime, when the use click, the input is lost and never taken ito consideration by the inner div.
I tried to catch all click on my page with a document.click(). It did catch some lost click but many of them are still lost.
It seems those clicks occurs somewhere between the mydiv.empty() and the big mydiv.append() that re-creates all its content. I can't find a solution to grab these lost clicks. Any idea?
PS : I know I could probably get away by restructuring my whole page and updating more specific part of my div instead of recreating it but for now i'd like to find a faster/cheaper solution before redoing all this :)
Cheers !
EDit : as requested :
when (timer > 1 sec)
{
mydivContent = "lots of things here, including a small inner div"
mydiv.empty()
mydiv.append(mydivContent)
innerdiv.click(function..)
}
The lower the timer is, the more clicks are not registered by the innerdiv.click() event

Related

toggle divs so only one is open at a time, but be able to close them all as well javascript

I have these divs that I can toggle onclick to scale larger one at a time. It works perfectly except that once one is enlarged, one is always enlarged. I am using toggleOpen for this. I am looking to be able to make it so that it can do what it already does, but then onclick of the enlarged div have it go back to its original size without having to toggle with another div. In other words, I need a way to make the page go back to a state where all the divs are in original size. I have tried else statements to no avail as well as adding another function to remove class. I only want a js solution - no jquery or anything else please. Here is the JS portion of it.
const event = document.querySelectorAll('.eventsBorder')
function toggleOpen() {
let opened = document.getElementsByClassName('large')[0];
if(opened!=undefined)
opened.classList.toggle('large');
this.classList.toggle('large');
}
event.forEach(eventsBorder => eventsBorder.addEventListener('click', toggleOpen));
Here is my codepen
Thanks in advance for any help!
The opened variable gives you back a list of all the HTML elements which have the large class, and when you click again on an already enlarged div that automatically satisfied this criteria. So, what happens is that if you click on the same item twice, your toggleOpen function first removes the large class from that item and then adds it again because of the following line in your code-
this.classList.toggle('large');
The best way to achieve what you want would be to make sure that in addition to opened not being undefined, you should also make sure opened is not the same item as the one you clicked on. You can accomplish that using-
if(opened != undefined && opened != this)
Here is a link to the updated codepen to see it in action.
So it looks like you are using querySelectorAll to select all elements with the class "large", then you're toggling the class. If you toggle the class, it will no longer be a part of that query selection, as it no longer has that class applied, so it will not be able to remove it.
const event = document.querySelectorAll('.eventsBorder')
event.forEach(eventsBorder =>
eventsBorder.onclick = () =>
eventsBorder.classList.toggle('large'));
This seems to accomplish what you'd like.

Consecutive mouseenter functions do not work

My code is the following
$("#hammock").mouseenter(function(){
$("#changingtext").replaceWith("<p>My text goes here</p>")
$("#changingtitle").replaceWith("<h2>Making The Site Easy to Use</h2>")
});
$("#pointer").mouseenter(function(){
$("#changingtext").replaceWith("<p>my text goes here</p>")
$("#changingtitle").replaceWith("<h2>Do Not Click The Wrong Button</h2>")
});
If I hover over #hammock it will work but if I then go to #pointer nothing changes. Though if reloading the page, #pointer will work if I mouseover it first.
How do I get it so that after hovering over #hammock I can hover over #pointer and it will change the text?
This:
$('#changingtext').replaceWith("<p>my text goes here</p>");
completely obliterates the element formerly known as "changingtext". Subsequently, your attempts to locate it and update the text will fail.
However, you can replace it with content that shares its "id":
$('#changingtext').replaceWith("<p id=changingtext>my text goes here</p>");
It's always a good idea to do some experimentation with your code, either by taking advantage of the browser debugger or by simply adding console.log() calls to your code. In this case that would have shown you that your "mouseenter" handlers are indeed both working.

How to make a div with dynamic content automatically scroll to the bottom?

I have googled around and found a few solutions to this problem, but none of them seem to work in my situation. I have tried hidden inputs to scroll to, that stay at the bottom
document.getElementById('scrollToMe').scrollIntoView();
I have tried
$("#postbox").scrollTop($("#postbox")[0].scrollHeight);
and a few others. Here is my situation
I have a chat room (http://novaplasm.topiacloud.com/Chat). When you type anything, it enters it into the div "postbox" using Knockout. Every time you enter new content, it appends it. I want to make it so you can always see the latest message, without having to scroll yourself. I can't seem to do this for the life of me. Thanks in advanced!
First get a reference to your postbox and chat message div
var pbox = $('#postbox');
var chat_div = $('<div></div>').attr('class', 'chat_msg').text(msg);
Here msg is your chat message
Then you have to scroll down using the 'animate' method like this
chat_div.appendTo(pbox);
var height = pbox.scrollTop() + pbox.height() + $('#postbox').filter('.chat_msg:last').scrollTop();
pbox.animate({'scrollTop' : height}, 1000);
Here the animation is happening over 1 sec.
Refer jQuery documentation for more detailed explanations on jQuery methods.
Live fiddle example

Removing CSS class not yielding expected results with javascript

I have a web site that exists on one page: index.html. There is a lot of content on the site (that appears to be on many "pages") but via javascript and CSS, all the info is contained on index.html.
So there exists a "home" position and an "inside" position (like a home page and inside page), and I need some links to behave differently when the user is on an inside page vs the home page. So the way I have it set up, once an "inside" link is clicked, I remove a class from a div that I think should cause the links within that div to behave differently. But they are not behaving as I expect.
The page, very dumbed down for this example, is here:
http://littleduck.com/ns_sample/index.html
On this example, there is just the home page and the "Services" page. You can link back and forth between them.
If you mouseover those grey links on the left (which are called "balloons" in the code), you will see that they have a hover color, and a popup graphic appears. I ONLY want this to happen when the page is in the "home" position. I have a class called "popup_yes" that allows this hover/popup action to happen. It appears when index.html is loaded, and if I remove it or change its name in the code, the hover/popup does not work. So I know that class is doing something. Now, I REMOVE that class when "Services" is clicked. I can see by inspecting the element in Chrome that "popup_yes" DOES in fact get removed. HOWEVER ... the hover/popup action still happens when you mouseover the balloons.
And when I inspect the element, even though you can see in the code that "popup_yes" is gone, it is still being utilized by Chrome. Here is a screenshot of what Inspect Element looks like on the "home" and "inside" pages:
http://i.stack.imgur.com/p1ZP7.jpg
So, please tell me where my brain is derailing. How can I get the hover/popup action to NOT WORK when I'm on the "Services" page? Thank you incredibly much for any help you can provide.
The issue is in your mouseover/out code
$(".popup_yes .balloon_1").mouseover(function() {
$("#popup_1").show(400);
$(".balloon_1").addClass("hover");
});
When the page loads, the mouseover event is binding to that span, so that action is already established, if you add the check in the function
$(".popup_yes .balloon_1").mouseover(function() {
if ($('#balloons').hasClass('popup_yes') ){ //<--here
$("#popup_1").show(400);
$(".balloon_1").addClass("hover");
}
});
it should work as expected
I have modified the javascript that you are using and could make it work. Here are the changes that i made.
First of all when u removed the class when the services page is clicked I specified the class to be removed.
$('#balloons').removeClass("popup_yes");
After this when you click back the Home page the class has to be added back so i included this line after you animate the $('#buttons') div.
$("#balloons").addClass("popup_yes");
Now comes the changing of the hover effect on each of the balloons. I'll show the change I did to the first balloon element you can reproduce the same for the others.
$(".balloon_1").mouseover(function() {
if($(this).closest('#balloons').attr("class")=="popup_yes"){
$("#popup_1").show(400);
$(".balloon_1").addClass("hover");
}
});
$(".balloon_1").mouseout(function() {
if($(this).closest('#balloons').attr("class")=="popup_yes"){
$("#popup_1").hide(400);
$(".balloon_1").removeClass("hover");
}
});
What I modified is instead of checking for both the class for hovering I just checked the balloon_1 class and then I made the effect only if the closest element to it with an id balloons has the class popup_yes.
I tried it in chrome. Hope it works well in other browsers as well.

JQuery: Why is hoverIntent not a function here?

I'm modifying some code from a question asked a few months ago, and I keep getting stymied. The bottom line is, I hover over Anchors, which is meant to fade in corresponding divs and also apply a "highlight" class to the Anchor. I can use base JQuery and get "OK" results, but mouse events are making the user experience less than smooth.
I load JQuery 1.3 via Google APIs.
And it seems to work. I can use the built in hover() or mouseover(), and fadeIn() is intact... no JavaScript errors, etc. So, JQuery itself is clearly "loaded". But I was facing a problem that it seemed everyone was recommending hoverIntent to solve.
After loading JQuery, I load the hoverIntent JavaScript. I've triple-checked the path, and even dummy-proofed the path. I just don't see any reasonable way it can be a question of path.
Once the external javascripts are (allegedly) loaded in, I continue with my page's script:
var $old=null;
$(function () {
$("#rollover a").hoverIntent(doSwitch,doNothing)
});
function doNothing() {};
function doSwitch() {
var $this = $(this);
var $index = $this.attr("id").replace(/switch/, ""); //extract the index number of the ID by subtracting the text "switch" from its name
if($old!=null) $old.removeClass("highlight"); //remove the highlight class from the old (previous) switch before adding that class to the next
$this.addClass("highlight"); //adds the class "highlight" to the current switch div
$("#panels div").hide(); //hide the divs inside panels
$("#panel" + $index).fadeIn(300); //show the panel div "panel + number" -- so if switch2 is used, panel2 will be shown
$old = $this; //declare that the current switch div is now "old". When the function is called again, the old highlight can be removed.
};
I get the error:
Error: $("#rollover a").hoverIntent is not a function
If I change to a known-working function like hover (just change ".hoverIntent" to ".hover") it "works" again. I'm sure this is a basic question but I'm a total hack when it comes to this (as you can see by my code).
Now, for all appearances, it SEEMS like either the path is wrong (I've zillion-checked and even put it on an external site with an HTTP link that I double-checked; it's not wrong), or the .js doesn't declare the function. If it's the latter, I must be missing a few lines of code to make the function available, but I couldn't find anything on the author's site. In his source code he uses a $(document).ready, which I also tried to emulate, but maybe I did that wrong, too.
Again, the weird bit is that .hover works fine, .hoverIntent doesn't. I can't figure out why it's not considered a function.
Trying to avoid missing anything... let's see... there are no other JavaScripts being called. This post contains all the Javascript the page uses... I tried doing it as per the author's var config example (hoverIntent is still not a function).
I get the itching feeling I'm just missing one line to declare the function, but I can't for the life of me figure out what it is, or why it's not already declared in the external .js file. Thanks for any insight!
Greg
Update:
The weirdest thing, since I'm on it... and actually, if this gets solved, I might not need hoverIntent solved:
I add an alert to the "doNothing" function and revert back to plain old .hover, just to see what's going on. For 2 of my 5 Anchors, as soon as I hover, doNothing() gets called and I see the alert. For the other 3, doNothing() correctly does NOT get called until mouseout. As you can see, the same function should apply for any Anchor inside of "rollover" div. I don't know why it's being particular.
But:
If I change fadeIn to another effect like slideDown, doNothing() correctly does NOT get called until mouseout.
when using fadeIn, doNothing() doesn't get called in Opera, but seems to get called in pretty much all other browsers.
Is it possible that fadeIn itself is buggy, or is it just that I need to pass it an appropriate callback? I don't know what that callback would be, if so.
Cheers for your long attention spans...
Greg
Hope I didn't waste too many people's time...
As it turns out, the second problem was 2 feet from the screen, too. I suspected it would have to do with the HTML/CSS because it was odd that only 2 out of 5 elements exhibited strange behaviour.
So, checked my code, dug out our friend FireBug, and discovered that I was hovering over another div that overlapped my rollover div. Reason being? In the CSS I had called it .panels instead of .panel, and the classname is .panel. So, it used defaults for the div... ie. 100% width...
Question is answered... "Be more careful"
Matt and Mak forced me to umpteen-check my code and sure enough I reloaded JQuery after loading another plugin and inserting my own code. Since hoverIntent modifies JQuery's hover() in order to work, re-loading JQuery mucked it up.
That solved, logic dictated I re-examine my HTML/CSS in order to investigate my fadeIn() weirdness... and sure enough, I had a typo in a class which caused some havoc.
Dumb dumb dumb... But now I can sleep.

Categories