Turning divs into functions click, mouseover, and mouseout - javascript

this might be a very stupid question. I want to access different divs and interact with one another without using buttons functions, so I am trying to turn a normal div into a function when it hovers and then when out it does another animation and when clicked it should do something else.
https://jsfiddle.net/Lshp4ofw/67/
var BaseGraph = document.getElementById("BaseGraphic");
var BaseGraph = BaseGraphAct;
var BaseGraphAct = function(){
if(BaseGraph){
BaseGraph.addEventListener("mouseover", function(event) {
event.InteraBase = document.getElementById("InteractionBase");
InteraBase.classList.remove("dead");
});}
}

Here is example how you can change state of div with class 'dead' from another div:
var BaseGraph = document.getElementById("BaseGraphic");
var IB = document.getElementById("InteractionBase");
BaseGraph.addEventListener("mouseover", function(event) {
IB.classList.remove('dead');
});
BaseGraph.addEventListener("mouseout", function(event) {
IB.classList.add('dead');
});

Related

How can i target appended items one by one in javascript?

I created a simple new tab page similar to web browsers, but when I create a new tab and press the x icon to triger closetab() it closes all the tabs and does not delete them in order one by one. How do i make each of appended items unique?
JS:
function addTab() {
var img = document.createElement("img");
img.src = "resources/img/delete-icon.svg";
img.className = 'deleteicon';
img.id = "deletetab";
img.onclick = closeTab;
var ulLocation = document.getElementsByClassName('abc')[0];
var whereTab = document.getElementById('listid');
var addTab = document.createElement('li');
addTab.className = 'first-tab';
addTab.id = "listid";
addTab.className = 'active';
addTab.innerHTML = "mozilla-firefox/newtab";
addTab.appendChild(img2);
ulLocation.appendChild(addTab);
addTab.appendChild(img);
}
function closeTab() {
var whereTab = document.getElementById('listid');
if (whereTab.style.display == 'block') {
whereTab.style.display = 'none';
} else {
whereTab.style.display = "none";
}
}
You have at least 2 options. One is to target the active tab and close it when the X is clicked. This is assuming you only have one active tab at a time (denoted by an active class for example).
function closeTab(event) {
document.querySelector('li.tab.active').remove();
}
Another option is to reference the tab relative to the close icon, which you can reference in the event argument of your click listener. Since you're adding these dynamically, you can just remove them with the delete click rather than hide. Something like:
function closeTab(event) {
event.target.closest('li.tab').remove();
}
In these examples, you have set a className for your tab containers to be tab

make an absolute div hidden when something outside of it is clicked

I have some code for the function that runs when a button is clicked in my site:
function shadow() {
document.getElementById("overlay").style.visibility="visible";
document.getElementById("dim").style.visibility="visible";
document.getElementById("dim").onclick="document.getElementById('dim','overlay').style.visibility='hidden'";
}
With overlay being the overlay div that I want to be re-hide-able, and dim being the lower z-index dimmer over the entire page when the function runs.
The third line is my attempt at making it so that when an area outside of the overlay is clicked, the dim and overlay go away - help on that would be great!
The onclick property expects a function reference, not a string. In addition, the getElementById method only accepts a single id parameter, which means that only the first element id that you passed to it would be selected.
Based on the code you provided, it looks like you want something like this (live example):
function shadow() {
var overlay = document.getElementById('overlay');
var dim = document.getElementById('dim');
overlay.style.visibility = 'visible';
dim.style.visibility = 'visible';
dim.onclick = function() {
overlay.style.visibility = 'hidden';
dim.style.visibility = 'hidden';
};
}
Alternatively, you could also add a click event listener to document and then determine whether event.target is the #overlay element.
For instance, the following would work (live example):
document.addEventListener('click', function (event) {
var overlay = document.getElementById('overlay');
var dim = document.getElementById('dim');
if (event.target !== overlay && !event.target.closest('#overlay')) {
overlay.style.visibility = 'hidden';
dim.style.visibility = 'hidden';
}
});

dynamically added button on click not working

I'm building a function in my own image browser that creates and displays a delete button when the user hovers the cursor over a certain image's div and hides the button when the user hover the mouse out of the div.
this is the code:
function displayImages() {
//run through array of images
for (a = 0; a < images.length; a++) {
var container = document.createElement('div');
container.id = 'container'+images[a];
container.style.width = 120;
container.style.backgroundColor = '#e9e9e9';
container.style.height = 140;
container.style.margin = 5;
container.style.display = 'inline-block';
container.style.float = 'left';
var imageID = images[a];
container.onmouseover = function() {imageRollover(this)};
container.onmouseout = function() {imageMouseOut(this)};
}
}
function imageRollover(image) {
var trashcan = document.createElement('BUTTON');
trashcan.id = 'trash'+image.id;
trashcan.className = 'deleteButton';
trashcan.onclick = function() {deleteImage(image.id);};
document.getElementById(image.id).appendChild(trashcan);
}
function imageMouseOut(image) {
document.getElementById(image.id).removeChild(document.getElementById('trash'+image.id));
}
function deleteImage(image) {
alert(image);
}
My problem is, that when I click trashcan, it calls nothing. I already tried to add the onlick event normally:
trashcan.onclick = deleteImage(image.id);
But then, for some reason, is calls the function when I hover my mouse over the container.
How do I make sure that on click events for dynamically added rollover buttons work?
The function can de viewed on: http://www.imaginedigital.nl/CMS/Editor/ImagePicker.html or http://jsfiddle.net/f239ymos/
Any help would be highly appreciated.
You are forcing me to guess here(not giving a fiddle), and create a scenario of my own but from what I understand, you want a button to appear no hover, and when pressed to delete the image so here its a working fiddle
hover functionality
$((document.body).on('mouseenter', '.test', function(){
console.log('here');
$(this).children('.test .x_butt').show();
});
$(document.body).on('mouseleave', '.test', function(){
$('.test .x_butt').hide();
});
remove functionality
$(document.body).on('click', '.x_butt', function(){
$(this).parent().remove();
});
P.S. as for your dynamically added divs issue, the $(selector1).on('click','selector2', function() {...}); deals with it, as long as selector1 is not added dynamically. (selector2 would be the div you want the function to be on) demo with dynamically added elements ( click clone )
First change
window.onload = loadImages(); to window.onload = loadImages;
Then since you pass an object you can change
function imageMouseOut(image) {
document.getElementById(image.id).removeChild(document.getElementById('trash'+image.id));
}
to
function imageMouseOut(image) {
image.removeChild(image.childNodes[0]);
}
However why not just hide and show the trashcan? Much cleaner

choose image in array and continue

First time JavaScript coder here.
Trying to solve this so that an image is displayed when the appropriate button for that image is clicked and then the function continues to show the other image in the Array and loops.
For instance if the banner is displaying image 4 and the user clicks on the button for image 2, then the banner should display image 2 and then rotate to show image 3 and continue looping.
Here is the code:
var i = 0;
var baners = new Array();
baners.push('banner1.jpg');
baners.push('banner2.jpg');
baners.push('banner3.jpg');
baners.push('banner4.jpg');
baners.push('banner5.jpg');
function swapImage(){
var img = document.getElementById("banner");
img.src = baners[i];
if (i<(baners.length-1)){i++;
}else{
i=0;
}
setTimeout('swapImage()', 2000);
}
function button1 (){
var img = document.getElementById("banner");
img.src = baners[0]
}
I am unsure if it is possible to make one global function for the 5 buttons.
Thank you!
I am unsure if it is possible to make one global function for the 5 buttons.
Yes. Use something like this:
function buttonClicked(number) {
var img = document.getElementById("banner");
img.src = baners[number]
i = number; // set current loop position
}
then call buttonClicked(0) from button1, buttonClicked(1) from button2 and so on. If you want to automatically attach the handlers to the button using a for-loop, check out JavaScript closure inside loops – simple practical example.

How to avoid double click on a marker in google map?

I created a pop up box.When I single click on a marker on google map. The popup shows with a cancel button.Clicking on cancel button just hide this popup box.My problem is when I double clicked on this marker the popup boxes are generating and overlap one by one.So Cancel is not working. How to avoid this ?
Sample Code:
makeInfoWindowEvent(map, marker);
function makeInfoWindowEvent(map, marker) {
google.maps.event.addListener(marker, 'click', function() {
var markerPopup = document.createElement("div");
markerPopup.id = 'markerPopup';
markerPopup.className = 'markerPopup';
markerPopup.innerHTML = "This is a test message";
var cancel = document.createElement("div");
cancel.id = 'cancel';
cancel.className = 'cancel';
markerPopup.appendChild(cancel);
cancel.onclick= function () {
var divbg = document.getElementById('markerPopup');
divbg.style.visibility = "hidden";
}
document.getElementById('map-canvas').appendChild(markerPopup);
});
}
The events won't fire at the same time, so you can check for the presence of a markerPopup and return early if it is already there.
if (document.getElementById("markerPopup")) {
// they must have double clicked, so do nothing
return;
}
If you need more than one popup on the map at a time, then you will need to assign unique ids to each one that get created. You could then attach those ids as a property on the button, which would give a way to know which one to kill.

Categories

Resources