Delay onmouseover javascript - javascript

im new to most web dev stuff so im kindly asking you for some support.
i have an image map in which i have assigned several areas triggering different contents in a separate div. i would now like to add a delay to the onmouseover trigger so that the content in the div is only updated if the user positions the curser on the area instead of accidentally hovering over it.
this is the js i use for toggling the div contents:
function showHideDivs(indx){
hideDivs();
oShowHideDivs[indx].style.display = 'block';
}
function hideDivs(){
for(i=0; i < oShowHideDivs.length; i++){
oShowHideDivs[i].style.display = 'none';
}
}
window.onload=function(){
oShowHideDivs = document.getElementById('container').getElementsByTagName('div');
var oMap = document.getElementById('myMap');
for(i=0; i < oMap.areas.length; i++){
oMap.areas[i].indx = i;
oMap.areas[i].onmouseover=function(){
showHideDivs(this.indx);
}
}
}
so how do i implement the delay and where? thx in advance!
jan
EDIT:
i used this approach now:
oMap.areas[i].onmouseover=function(){
var area=this;
var delay=setTimeout(function(){showHideDivs(area.indx);},100);
area.onmouseout=function(){clearTimeout(delay);};
}
seemed the easiest to me. thx for the hint!

The easiest way is to include a timeout on mouseover, and clear it on mouseout.
oMap.areas[i].onmouseover=function(){
var area=this;
var delay=setTimeout(function(){showHideDivs(area.indx);},100);
area.onmouseout=function(){clearTimeout(delay);};
}
For more complex scenarios, use a plugin like hoverintent.

You need to use setTimeout() to call your function showHideDivs() after a certain delay. And you stop this function from being called if the user moves its mouse before the end of your delay.
Look here for a concrete example : https://stackoverflow.com/a/6231142/1606729

Related

How to use JavaScript to click a div like button on an HTML page?

I'm currently trying to automate a game called Lyrics Training (https://www.lyricstraining.com/) and I am able to get the words that are from the button through some other code but I am currently struggling with clicking the "button" because it is for some reason classified as a in the HTML code. I was wondering whether there was a way or a function that would allow me to click it so I could finish the automation? Thanks!
So far I have this code that would work if the button was an actual button:
let firstChoice = document.getElementsByClassName("slot s1")[0];
let secondChoice = document.getElementsByClassName("slot s2")[0];
let thirdChoice = document.getElementsByClassName("slot s3")[0];
let fourthChoice = document.getElementsByClassName("slot s4")[0];
// the click function isn't working
for(let i = 0; i < click_order.length; i++){
let word = click_order[i];
if(firstChoice.innerHTML === word){
firstChoice.click();
}else if(secondChoice.innerHTML === word){
secondChoice.click();
}else if(thirdChoice.innerHTML === word){
thirdChoice.click();
}else if(fourthChoice.innerHTML === word){
fourthChoice.click();
}
}
This is how the "buttons" look like in the HTML code of the website:
Any help would be appreciated! Thanks!
If I am not misinterpreting anything, then it sounds like you are trying to automate a game on some website. I'm not sure exactly how they coded the game, but there is a chance the code doesn't actually listen for "click" events.
It seems like your code only works if the website's code responds to click events such as:
div.addEventListener("click", somefunction);
//or
btn.addEventListener("click", somefunction);
In this case, your code would still work on divs.
However, they could be responding to mousedown events:
div.addEventListener("mousedown", somefunction);
If this is the case, you might want to read up on invoking specific events: https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events
But please keep in mind that many websites have code preventing this stuff.
Give the button div element an attribute of role="button". This should work fine.

Javascript code for addEventListener not working!? (open enlarged img when clicked)

Whenever an image is clicked, the image should be displayed alone in a new window. It should be done completely in javascript (so no onclick functions in the HTML should be used) and with no jquery. I´ve done some research and have managed to get this far:
Javascript
var img = document.getElementsByTagName("img");
for(var i=0; i < img.length; i++) {
img[i].addEventListener("click", enlarge);
}
function enlarge() {
window.open(this.src);
}
Unfortunately, nothing happens when any image is clicked and I can´t figure out why. Can anyone help me solve this problem of mine?
Thank you in advance!
your code should work fine check https://jsfiddle.net/3hgkaxgv/1/
The possible causes for your issue are:
Either browser compatibility or you already have something attached or catching click event.
Edit:
try the new changes if click registered was logged then you probably have popup disabled or something like that.
Try this instead of your code.
var img = document.getElementsByTagName("img");
for(var i=0; i < img.length; i++) {
img[i].onclick = enlarge;
}
function enlarge() {
console.log('click registered ');
window.open(this.src);
}
I found the solution!
The reason no clicks registrered (which turned out to be the issue as to why my code didn´t work for me) was because I put the <script src="inlamning6.js" type="text/javascript"> </script> first in the HTML-document, namely right after the <body> tag. It should be last in the HTML-document, right before the <body>tag is closed. I moved it accordingly, and everything works fine now!
I thought that this could be valuable information if anyone else ever gets stuck on the same problem as I did here.

enlarging a thumbnail onClick

I am trying to make a sort of image library where the user can view a series of thumbnails and click on them to view them in full size. I have managed to make this work but the way I have done it requires lots of repetitive code. Here is an example of what I have for each image:
script
function load1() {
document.getElementById('wup').src = document.getElementById('wop1').src
var myElement = document.querySelector("#wup");
myElement.style.visibility = "visible";
var myElementB = document.querySelector("button");
myElementB.style.visibility = "visible";
var myElementC = document.querySelector("#cover");
myElementC.style.visibility = "visible";
}
Pretty much what happens is every thumbnail (there are quite a lot) has one of these functions that runs when clicked. It makes a large image in the center of the screen appear, and the source of the image is whatever thumbnail was clicked. While this method does work, it requires lots of what feels like unnecessary repetition.
What I am looking for:
A simple and efficient way to do the same thing.
Any help would be much appreciated! Thanks.
Just create a function that does this for each element.
function showLargeImage(thumbnail) {
document.getElementById('wup').src = thumbnail.src
document.querySelector("#wup").style.visibility = "visible";
document.querySelector("button").style.visibility = "visible";
document.querySelector("#cover").style.visibility = "visible";
}
Then for each image just call the function onclick.
<img id="wop" src="foo.jpg" onclick="showLargeImage(this)"/>

How to hide an element on click instead of timeout using Clippy.js?

I found a neat little JS library called Clippy.js that lets you implement Microsoft Word's old virtual assistants in your browser. After playing around with it for a while I realized that the text balloon has a setTimeout() method and a time delay causing it to disappear.
hide:function (fast) {
if (fast) {
this._balloon.hide();
return;
}
this._hiding = window.setTimeout($.proxy(this._finishHideBalloon, this), this.CLOSE_BALLOON_DELAY);
},
_finishHideBalloon:function () {
if (this._active) return;
this._balloon.hide();
this._hidden = true;
this._hiding = null;
},
I don't want that. I want the balloon to disappear when a user clicks. I tried registering an event listener by replacing this._hiding = ... with this:
var clickToHide = document.getElementsByClassName('clippy-balloon');
this._hiding = clickToHide.addEventListener('click', function(){$.proxy(this._finishHideBalloon, this)});
...but all that it does is hide the balloon completely. Why does that not work? And how do I achieve the functionality I want?
I think the delay is caused by the variable CLOSE_BALLOON_DELAY.
Changing this.CLOSE_BALLOON_DELAY to 0 should do the trick.

Fade in an HTML element with raw javascript over 500 miliseconds

Once again I find myself stuck by something that I just don't understand. Any help would be appreciated.
I'm working on a modal window, you click something and the background is masked and a modal window shows some content.
I have a div with "display:none" and "opacity:0", and when the user triggers the modal, this div will overlay everything and have certain transparency to it.
In my mind, what I need to do is:
Set the opacity
Perform a "for" loop that will check if the opacity is less than the desired value.
Inside this loop, perform a "setInterval" to gradually increment the value of the opacity until it reaches the desired value.
When the desired value has been reached, perform an "if" statement to "clearInterval".
My code so far is as follows:
var showMask = document.getElementById('mask');
function fireModal(){
showMask.style.opacity = 0;
showMask.style.display = 'block';
var getCurrentOpacity = showMask.style.opacity;
var increaseOpacity = 0.02;
var finalOpacity = 0.7;
var intervalIncrement = 20;
var timeLapse = 500;
function fadeIn(){
for(var i = getCurrentOpacity; i < finalOpacity; i++){
setInterval(function(){
showMask.style.opacity = i;
}, intervalIncrement)
}
if(getCurrentOpacity == finalOpacity){
clearInterval();
}
}
fadeIn();
}
As you all can guess, this is not working, all it does is set the opacity to "1" without gradually fade it in.
Thanks in advance for your help.
You should use jquery, mootools or extjs for something like this.
But basically you need to do this:
var id = setInterval(function() {
showMask.style.opacity += .05;
if (showMask.style.opacity >= 1)
{
clearInterval(id);
}
},200)
This will fade in over 2 seconds.
Rack my up as another who strongly advises using jQuery. In my work environment I often face similar challenges due to corporate bosses who are basically afraid of any and all advancement, so I understand your predicament. But, that being said, my suggestion is instead of spending time re-writing the wheel, spend time figuring out how to use the proper solution, which is, in this case jQuery or other javascript framework. If you can write your own function, you can use jQuery.
<script>
document.write("<scr" + "ipt src='http://givemejquery'></scr" + "ipt>");
</script>

Categories

Resources