Develop Reference

How to add/remove class on mouse hover in JavaScript?

I want to add class as I hover over an item and remove it as soon as the hover is removed in JavaScript. For now, my code is not removing the class until I hover over that item again.
myChart.on('mouseover', function(params){
var collapseItem = params.name + "-content"
var toCollapse = document.getElementById(collapseItem)
var collapseHeading = toCollapse.previousElementSibling
collapseHeading.classList.toggle("active")
})

is this you want?
var myChart = document.getElementById("tt");
myChart.onmouseover = function(event){
var collapseItem = event.target.tagName + "-content";
var toCollapse = document.getElementById(collapseItem);
var collapseHeading = toCollapse.previousElementSibling;
collapseHeading.classList.toggle("active");
}
#tt{
height: 40px;
width: 40px;
background-color: red;
}
.active{
height: 50px;
width: 50px;
background-color: green;
}
<div id="tt">
<div id="prev">
</div>
<div id="DIV-content">
</div>
</div>

you can listen to mouseout event (taken from this post)
function toggleActiveClass(params){
var collapseItem = params.name + "-content"
var toCollapse = document.getElementById(collapseItem)
var collapseHeading = toCollapse.previousElementSibling
collapseHeading.classList.toggle("active")
}
myChart.on('mouseover', toggleActiveClass);
myChart.on('mouseout', toggleActiveClass);

You need to use "mouseover" as well as "mouseout" to make the toggle or class addition/removal work properly. Currently when your cursor leave there no function to remove the class.
function toggleActiveClass(params) {
var collapseItem = params.name + "-content"
var toCollapse = document.getElementById(collapseItem)
var collapseHeading = toCollapse.previousElementSibling
collapseHeading.classList.toggle("active")
}
myChart.on('mouseover', toggleActiveClass);
myChart.on('mouseout', toggleActiveClass);

Delete button works only for last item

I just started working with Javascript and I am trying to make my first "Todo App".
The problem is, that my delete button which should be related to specific div is deleting only last div.
To better understaing check out my code on Codepen:
https://codepen.io/anon/pen/QVPxmG
or here:
var books = ["Bang-1","Bang-2","Bang-3","Bang-4"];
var wrapper = document.querySelector(".wrapper");
var element_div = document.querySelector(".element_div");
var load_button = document.querySelector(".load");
load_button.addEventListener("click", function(){
for(var x=0;x<books.length;x++){
var div = document.createElement("div");
div.setAttribute("class","element_div " + "element_div"+x);
wrapper.appendChild(div);
var element = document.createElement("p");
div.appendChild(element);
element.setAttribute("class", "element"+x);
element.innerHTML = books[x];
var del = document.createElement("button");
del.setAttribute("class", "delete"+x);
div.appendChild(del);
del.innerHTML = 'Delete';
del.addEventListener("click", function(){
div.remove();
},false);
}
},false);
var clear = document.querySelector(".clear");
clear.addEventListener("click", function(){
wrapper.innerHTML = "";
},false);
What Should I change to delete proper div?
Thanks, Mike.

The problem in your case come because of closure,you have declared all your variables using var which will belong to the functional scope and hence when you click on delete, the div that is deleted is the last div since that is what div variable points to after the for loop iteration.
Changing everything to let will work, since let is block scoped and the declaration will be limited to within the for loop
for(let x=0;x<books.length;x++){
let div = document.createElement("div");
div.setAttribute("class","element_div " + "element_div"+x);
wrapper.appendChild(div);
let element = document.createElement("p");
div.appendChild(element);
element.setAttribute("class", "element"+x);
element.innerHTML = books[x];
let del = document.createElement("button");
del.setAttribute("class", "delete"+x);
div.appendChild(del);
del.innerHTML = 'Delete';
del.addEventListener("click", function(){
div.remove();
},false);
}
},false);
Working codepen

You have to use "this" instead of "div" in click event. Something like this:
this.parentElement.remove();

div will have the content after for loop ends. You should capture the correct div for every iteration like below, using pure javascript's immediately invoking function
var books = ["Bang-1", "Bang-2", "Bang-3", "Bang-4"];
var wrapper = document.querySelector(".wrapper");
var load_button = document.querySelector(".load");
load_button.addEventListener("click", function() {
for (var x = 0; x < books.length; x++) {
var div = document.createElement("div");
(function(div) { // Immediately invoking function - IIFE
div.setAttribute("class", "element_div " + "element_div" + x);
wrapper.appendChild(div);
var element = document.createElement("p");
div.appendChild(element);
element.setAttribute("class", "element" + x);
element.innerHTML = books[x];
var del = document.createElement("button");
del.setAttribute("class", "delete" + x);
div.appendChild(del);
del.innerHTML = 'Delete';
del.addEventListener("click", function() {
div.remove();
}, false);
})(div);
}
}, false);
var clear = document.querySelector(".clear");
clear.addEventListener("click", function() {
wrapper.innerHTML = "";
}, false);
* {
margin: 0;
padding: 0;
}
.container {
width: 300px;
height: 250px;
position: relative;
}
.container .wrapper {
width: 300px;
height: 200px;
padding: 10px;
background: aqua;
position: relative;
}
.container .wrapper .element_div {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.container .load {
position: absolute;
bottom: 0px;
}
.container .clear {
position: absolute;
bottom: 0px;
right: 10px;
}
<div class="container">
<div class="wrapper" id="wrapper">
<div class="element_div">
<p class="element">Bang</p>
<button class="delete">Delete</button>
</div>
</div>
<button class="load">LOAD</button>
<button class="clear">CLLEAR</button>
</div>

tooltip made via javascript not working perfectly [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
Javascript code:
var tooltip = document.createElement('div');
var value = document.getElementsByClassName('tooltips');
var tooltip_val = document.getElementsByClassName('tooltips').item(attr).getAttribute('title');
var attr;
for (attr = 0; attr < value.length; attr ++){
value.item(attr).getAttribute('title');
}
document.getElementsByClassName('tooltips').item('attr').onmouseover = function(){ mouseOver() };
document.getElementsByClassName('tooltips').item('attr').onmouseout = function(){ mouseOut() };
function mouseOver(){
document.body.appendChild(tooltip);
tooltip.setAttribute('class', 'tooltip');
tooltip.innerHTML = tooltip_val;
document.getElementsByClassName('tooltips').item('attr').removeAttribute('title');
}
function mouseOut(){
document.body.removeChild(tooltip);
document.getElementsByClassName('tooltips').item('attr').setAttribute('title', tooltip_val);
}
I want this tooltip code to work on this HTML code:
show tooltip
show tooltip1
show tooltip2
How can I do that?

EDIT
I made several changes in your code, it works now - but you'll still need to position the tooltip
var tooltip = document.createElement('div');
var objs = document.getElementsByClassName('tooltips');
for(var i = 0; i < objs.length ; i++){
objs[i].onmouseover = mouseOver;
objs[i].onmouseout = mouseOut;
};
function mouseOver(e){
document.body.appendChild(tooltip);
tooltip.setAttribute('class', 'tooltip');
var tooltip_val = e.target.getAttribute('title');
tooltip.innerHTML = tooltip_val;
e.target.removeAttribute('title');
}
function mouseOut(e){
var tooltip_val = tooltip.innerHTML;
document.body.removeChild(tooltip);
e.target.setAttribute('title', tooltip_val);
}

hope it may helps
$(".tooltip").mouseleave(function () {
$("#tooltip").html("");
});
$(".tooltip").mouseover(function () {
var tooltip_msg = $(this).attr("title");
$("#tooltip").html(tooltip_msg);
});

var elements = document.getElementsByClassName('tooltip');
for (var i = 0; i < elements.length; i++) {
elements[i].onmouseout = function () { mouseOut() };
elements[i].onmouseover = function () { mouseOver(this) };
}
function mouseOut() {
document.getElementById("tooltip").innerHTML = "";
}
function mouseOver(obj) {
console.log(obj);
document.getElementById("tooltip").innerHTML = obj.title;
}

Here is a solution implementing a reusable, extensible Tooltip component with OODK-JS and native DOM API
<html>
<head>
<style>
.tooltip{
position:absolute;
top: 0;
left: 0;
border: 1px solid black;
padding: 5px;
background: black;
color: white;
margin-top: 5px;
}
.tooltip2{
position:absolute;
top: 0;
left: 0;
border: 1px solid red;
padding: 5px;
background: red;
color: white;
margin-top: 5px;
}
</style>
<script src="../src/oodk.js"></script>
<script>
OODK.config({
'path': {
'oodk': '../src',
'workspace': 'workspace'
}
});
OODK(function($, _){
// Tooltip component
// display a tooltip on elements matching
// the given className
$.class(function Tooltip($, µ, _){
// the tooltip element
$.protected('el');
// the className to apply tooltip on
$.protected('prtEl');
$.protected('cls');
$.protected('attrs');
$.public(function __initialize(prtEl, cls, attrs){
µ.el = document.createElement('div');
Object.keys(attrs).forEach(function(name){
µ.el.setAttribute(name, attrs[name]);
});
µ.prtEl = prtEl;
µ.cls = cls;
µ.attrs = attrs;
});
// bind all elements matching the cls property
$.public(function bind(){
var tooltips = µ.prtEl.getElementsByClassName(µ.cls);
var self = this;
//define listeners here to avoid polluting the global namespace
function mouseenter(evt){
self.show(evt.target);
}
function mouseleave(evt){
self.hide();
}
Object.keys(tooltips).forEach(function(value, index){
var el = tooltips[index];
//unbind listeners in case of reinitialization
el.removeEventListener('mouseenter', mouseenter);
el.removeEventListener('mouseleave', mouseleave);
// move the title attribute to data
el.dataset.title = el.title;
el.removeAttribute('title');
// bind listeners
el.addEventListener('mouseenter', mouseenter);
el.addEventListener('mouseleave', mouseleave);
});
});
$.public(function show(el){
document.body.appendChild(µ.el);
µ.el.innerHTML = el.dataset.title;
µ.moveBottomLeft(el);
});
$.protected(function moveBottomLeft(el){
var position = el.getBoundingClientRect();
µ.el.style.top = (position.top + (position.bottom - position.top) + 'px');
µ.el.style.left = (position.left + 'px');
});
$.public(function hide(){
document.body.removeChild(µ.el);
});
});
window.onload = function(){
var tooltip1 = $.new(_.Tooltip, document.getElementById('tooltipable-1'), 'tooltips', {'class': "tooltip"});
tooltip1.bind();
document.getElementById('bindTooltip2').addEventListener('click', function(evt){
var tooltip2 = $.new(_.Tooltip, document.getElementById('tooltipable-2'), 'tooltips2', {'class': "tooltip2"});
tooltip2.bind();
});
}
});
</script>
</head>
<body>
<h4>Tooltip 1</h4>
<p id="tooltipable-1">
show tooltip
show tooltip1
show tooltip2
</p>
<h4>Tooltip 2</h4>
<p id="tooltipable-2">
show tooltip
show tooltip1
show tooltip2
</p>
<h4>No Tooltip</h4>
<p>
show tooltip
show tooltip1
show tooltip2
</p>
<p>
<button id="bindTooltip2">Bind tooltip 2</button>
</p>
</body>
</html>

How to change style under div with onclick on button

I've searched for similar question for quite a long time but all my searches gone in vain. Here is my code
<div class="footer-sidebar container" style="height:40px;"></div>
<button class="button">Click</button>
Now if someone clicks on button then my .container height should increase to 400px and if someone clicks on the same button it must back to 40px.
Edit: (Added CSS)
.footer-sidebar {
position: fixed;
z-index: 1500;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
overflow: hidden;
}
Thanks

You could do that by adding a class to your div like this:
$('.button').on('click', function(){
$('.container').toggleClass('open');
}
Inline styles for this should be avoided. Use your css file and add something like this to it:
.container {
height: 40px;
}
.container.open {
height: 400px;
}

Javascript version (opposed to the previously added JQuery option):
Using booleans (tested):
var fullSize = false; // Used for toggling
var button = document.getElementsByClassName("button")[0]; // Get button
var div = document.getElementsByClassName("footer-sidebar")[0]; // Get div
button.onclick = function() {
if(fullSize) { div.style.bottom = 0 + "px"; fullSize = false; } // If div is already 400px...
else { div.style.bottom = -360 + "px"; fullSize = true; } // If div is already 40px...
};
Fiddle
Using classes (untested):
CSS:
.open {
height: 400px;
}
.closed {
height: 40px;
}
Javascript:
var button = document.getElementById("button"); // Get button
var div = document.getElementsByClassName("footer-sidebar container")[0]; // Get div
button.onclick = function() {
if(div.className = "closed") { div.className = "open" }
else if(div.className = "open") { div.className = "closed" }
else { div.className = "open" }
}
Hope this helps.

DIV POP UP containing clickable images using javascript

I have an image button which changes images with a click of a button . This is the following code
function changeImg(thisImg)
{
var altImg = "http://ww1.prweb.com/prfiles/2011/10/12/8875514/star_white.jpg";
var tmpImg = null;
function changeImg(thisImg) {
tmpImg = thisImg.src;
thisImg.src = altImg;
altImg = tmpImg;
}
this is the fiddle http://jsfiddle.net/pUbrv/ which I did previously for clickable images
<img alt="" src="http://www.gettyicons.com/free-icons/136/stars/png/256/star_gold_256.png" id="imgClickAndChange" onclick="changeImg(this)" />
Instead of just chnaging the image by click of a button , I want to pop up a div which contains clickable images after I click the image in the div , the image choud change . Can please anybody help me?

Here is simple Javascript solution.
DEMO
HTML
<body>
<img alt="" src="http://www.gettyicons.com/free-icons/136/stars/png/256/star_gold_256.png" id="imgClickAndChange" onclick="myfunction(this)" />
</body>
SCRIPT
var altImg = "http://ww1.prweb.com/prfiles/2011/10/12/8875514/star_white.jpg";
var tmpImg = null;
function changeImg(thisImg) {
tmpImg = thisImg.src;
thisImg.src = altImg;
altImg = tmpImg;
}
function myfunction(ele) {
var pop=new myPop();
pop.popOut(ele);
}
function myPop() {
this.square = null;
this.overdiv = null;
this.popOut = function(ele) {
tmpImg = ele.src;
//filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
this.overdiv = document.createElement("div");
this.overdiv.className = "overdiv";
this.square = document.createElement("div");
this.square.className = "square";
this.square.Code = this;
var msg = document.createElement("div");
msg.className = "msg";
msg.innerHTML = '<img alt="" src="'+altImg+'" id="imgClickAndChange" />';
altImg = tmpImg;
this.square.appendChild(msg);
var closebtn = document.createElement("button");
closebtn.onclick = function() {
this.parentNode.Code.popIn();
}
closebtn.innerHTML = "Close";
this.square.appendChild(closebtn);
document.body.appendChild(this.overdiv);
document.body.appendChild(this.square);
}
this.popIn = function() {
if (this.square != null) {
document.body.removeChild(this.square);
this.square = null;
}
if (this.overdiv != null) {
document.body.removeChild(this.overdiv);
this.overdiv = null;
}
}
}
CSS
div.overdiv { filter: alpha(opacity=75);
-moz-opacity: .75;
opacity: .75;
background-color: #c0c0c0;
position: absolute;
top: 0px;
left: 0px;
width: 100%; height: 100%; }
div.square { position: absolute;
top: 200px;
left: 200px;
background-color: Menu;
border: #f9f9f9;
height: 200px;
width: 300px; }
div.square div.msg { color: #3e6bc2;
font-size: 15px;
padding: 15px; }

Pollisbly the jQuery UI dialog can help you.
Since the changing of images you have already implemented, you just need to put the images in the dialog.
Also you may like the modal functionality of the dialog.
Edit
If you don't want to use jQuery UI, then here is what you can do:
Create a new div.
Initially make it hidden or set its display property to none.
When user clicks on the image, make this div visible.
Set its position to absolute and set its left and top corrdinates as you want.
Add the image this div,
and finally add the event handler to this div for changing the images.