Develop Reference

How to target only current hovered element in Vanilla Javascript

I am building a web page for homework. I am trying to figure out how to make a child div appear whenever I hover over the parent div at the bottom, sort of like a dropdown menu. The thing is that the child div has a class and I want only the element that is hovered to show the child div from the parent div. More specifically, the parent div I am talking about is <div class="inside-box" onMouseOver="showDDContent();" onMouseOut="hideDDContent();> and the child div I am talking about is <div class="dropdown-content">. I want to use Vanilla Javascript (preferred) or CSS (not preferred).
TLDR: How do I target only current hovered element from HTML/CSS class in Vanilla Javascript?
How do I do that?
I got this far:
HTML
<!--Lab 1-->
<!--Each individual box.-->
<div class="box">
<!--The box inside each individual box. Think of it as like bubble wrap inside a box.-->
<div class="inside-box" onMouseOver="showDDContent();" onMouseOut="hideDDContent();">
<!--The div with an image in it. Top one inside the box div.-->
<div>
<a href="Lab_01/LB1_WeiJianZhen_DD.html">
<!--Get an image with 300px width by 200px height. Make it responsive.-->
<img src="../../../Visual Content/placeholder.jpg" alt="Under Contruction" class="imgGrids">
</a>
</div>
<!--The div that contains the heading or title of the lab.-->
<div class="txtBar">
<h3>Lab 1</h3>
</div>
<!--The div that drops down to explain the lab with some text.-->
<div class="dropdown-content">
<p>My first website ever made in an HTML file! Describes a bit about the process of making a very basic website like mine.</p>
</div>
<!--End of inside box div.-->
</div>
<!--End of box div.-->
</div>
CSS
/*Creates the styling of the dropdown box.*/
.dropdown-content {
display: none;
position: relative;
background-color: #62ff36;
box-shadow: 0px 8px 16px 0px rgba(56, 255, 42, 0.8);
padding: 12px 0px;
z-index: 1;
}
JavaScript
function showDDContent() {
document.getElementsByClassName("dropdown-content").style.display = "block";
}
function hideDDContent() {
document.getElementsByClassName("dropdown-content").style.display = "none";
}

The easiest, most performant and overall definitely best way to solve this problem clearly is using CSS.
.inside-box:hover .dropdown-content { display: block; }
If for whatever reason you insist go with Javascript (which I do explicitly not recommend), you are going to have to add 2 listeners to each .inside-box, one for mouseenter, the other for mouseleave:
document.querySelectorAll('.inside-box').forEach(insideBox => {
insideBox.addEventListener('mouseenter', () => insideBox.querySelector('.dropdown-content').style.display = 'block');
insideBox.addEventListener('mouseleave', () => insideBox.querySelector('.dropdown-content').style.display = 'none');
})
Using inline event listeners like you suggested is considered very bad practice, so don't try that.

Darken/color a selected element (content-box) and add a check-mark-icon AngularJS

My question is related I think to jquery, angularjs and bootstrap.
I am rendering information that is coming from the backend and is presented on the front end in the form of several boxes. I am trying to get an "element selection effect" that when someone clicks on one or more of the boxes the entire box gets darker (or preferably blue with some level of transparency) and an ok-checkmark appears on it. The element is actually a bootstrap Well with some content inside.
I currently have an onClick event that colors the background, but it is not enough. Unlike an image, that can be entirely darkened when changing the background color, with a well (or any content box) it just colors the background and the content is still visible. I also want to add that green checked-mark icon inside the box when clicked, but I do not know how to add elements on the fly after onClick event.
Here is my relevant pieces of code (simplified objects, no backend):
var app = angular.module('myApp', []);
app.controller('SelectCtrl', function($scope) {
$scope.collections = [
{text:'content collection1'},
{text:'content collection2'}];
$scope.selectBox = function(collection){
collection.isclicked =! collection.isclicked;
$("#well").click(function(){
if (collection.isclicked){
//$("div").append('<span class="glyphicon glyphicon-ok pull-right"></span>');
}
});
}
});
.well:hover{
cursor:pointer;
cursor:hand;
color: #555;
text-decoration: none;
background-color: #C0C0C0;
}
.well {
border-color:#8CC63F;
float:left;
margin-right: 20px;
}
.well-active {
background-color:#3399ff;
}
.well-active:hover {
background-color:#3399ff;
}
<div data-ng-controller="SelectCtrl">
<div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
<div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
<div>{{collection.text}}</div>
</div>
</div>
</div>
So as I mentioned, the way it works now is that the selected wells change their background color, but that's it. How do I darken/color the entire well, including the content, and how do I add an icon on top of that background (inside the well) after mouse-click?

You could do an ng-show/ng-hide in elements inside of the well div:
<div data-ng-controller="SelectCtrl">
<div data-ng-repeat="collection in collections" data-ng-init="collection.isclicked=false">
<div class="well" data-ng-click="selectBox(collection)" data-ng-class="{'well-active': collection.isclicked}">
<span ng-hide="collection.isClicked">{{collection.text}}</span>
<i ng-show="collection.isClicked" class="glyphicon glyphicon-ok"></i>
</div>
</div>
</div>
This will show the content if the collection is not checked, and a check mark if the collection is checked.

Hide specific div without css

If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.

You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/

There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...

You can do
document.getElementsByTagName("div")[0].style.display = 'none';

prevent inserting outside #textarea div

I have a contenteditable div with id="textarea" I also have a few buttons that insert different texts/symbols at a cursor position. The problem occurs when I click outside of the textarea div (the text inside of buttons, too); the text/symbol is being inserted outside of the div. How can I prevent this? Can I "force focus" onto that div? I have only one textarea although I may have more in future.
For insertion, I used the code suggested by Tim Down on another thread:
Insert html at caret in a contenteditable div
here is the code for my textarea and buttons.
<div id="textarea" contenteditable="true">
<style scoped>
#example-one { margin-bottom: 10px; }
[contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; }
[contenteditable="true"]:hover { outline: 3px dashed #0090D2; }
</style>
<p id="inside">
</p>
</div>
<div id="buttons">
<button type="button" onclick="pasteProjectionAtCaret()">Π</button>
</div>

document.getElementById('textarea').onblur=function(){
document.getElementById('textarea').focus();
};
This makes it so that whenever textarea loses focus, Javascript set the focus back immediately, thus not allowing the user to leave.

Simple jQuery fadeIn fadeOut animation - How to show / hide DIVS?

SCENARIO:
Have 2 links inside a list of ul, li: MY INFO and LOG IN
One link must show a box (with fadeIn animation ) with a form inside when used HOVER on the link.
Other link shows a button inside a box (with fadeIn animation) when you HOVER on the link.
The form must fadeOut when user MOUSEOUT of the link "LOG IN" OR mouseout of the form.
The box with button, must fadeOut when user MOUSEOUT of the link "MY INFO" OR mouseout the box.
PROBLEM (same for both):
The form disapears when MOUSEOUT link MY INFO.
The button inside the div disapears when MOUSEOUT link LOG IN.
NOTE:
1/The form MUST BE VISIBLE WHEN MOUSE IS ON THE LINK OR ON THE FORM
2/The box with button MUST BE VISIBLE WHEN MOUSE IS ON THE LINK OR ON BOX with button
REFERENCE:
check www.conforama.fr on the very-top of the screen, link is "Compte" with an icon, it has a class: "with-hover-menu" . When you mouseover it, the form appears. When you mouseout the link OR the form, the form disapears. I need the same but with fadeIn.
Right now you can look at the code below in this jsfiddle: http://jsfiddle.net/75HYL/19/ but it doesnt work at all. I don't know how to achieve this. Would like to understand and learn...!!
<ul class="links">
<li class="classA"><a><span>My info</span></a></li>
<li class="classB"><a><span>Log in</span></a></li>
</ul>
<div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE<br/>
<input type ="button" value="OKAY"/>
<div id="login" >
<div class="form">
<form>
<input type="textfield" value="enter your email"></input>
<input type="checkbox"><option>remember me? </option><input>
<input type="button" value="Click me"/>
</form>
</div>
</div>
</div>
<style>
.links li { display:inline-block;cursor:pointer; }
.links li { padding:0 4px 0 1px; }
.links li.classA {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
.links li.classB {width:147px; height:77px;background:url(../images/sprites01.png) no-repeat -226px 0px;}
.links li.classA span {}
.links li.classB span {}
.links li.classA:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
.links li.classB:hover {background:url(../images/sprites01.png) no-repeat -226px -80px;}
.links li.classA a {color:#fff;text-transform:uppercase;background:#00aaff;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
.links li.classB a {color:#00aaff;text-transform:uppercase;background:orange;padding:5px 5px 0 20px;margin:5px 0 0;font-size:1em;height:50px;display:block;}
#login {display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
#userInfo{display:none;width:250px;height:250px; background:#bbb;color:#000;border:1px solid red;}
</style>
<script>
$("li.classA").hover(function() {
$("#userInfo").fadeIn('fast').css('display', 'block');
});
$("#login, .classA").mouseleave(function() {
$("#userInfo").fadeOut('fast').css('display', 'none');
});
$("li.classB").hover(function() {
$("#login").fadeIn('fast').css('display', 'block');
});
$("#login, .classA").mouseleave(function() {
$("#login").fadeOut('fast').css('display', 'none');
});
</script>

This is what you want?
http://jsfiddle.net/WcUFe/3/
I've only altered the js, to be easier to see the differences. For an easier life the cssand/or html should be altered, and all the code could be put in a separate plugin, that will control the whole show.
Basically i use a timer to allow the user ~100ms to move the mouse from the LI element to the displayed container.... all the rest is cruft to maintain the state and to make sure we never have the 2 containers visible at any moment.

A bit like this? Cleaned up a few syntax errors and change logic a bit

Well your problem is that the mouse currently HAS to leave your links to get to the boxes. Therefore the boxes MUST dissapear for the functionality to work as you have stated above.
A few solutions come to mind (I'm not great with jQuery so there might be better options); 1 is to add a bool and some logic to say if the box has opened and then only listen for mouseout events on the box (rather than the link and the box). And another is to debounce the events so that there's a bit of a time delay before you listen for the mouseout event of the link.
looks like #AbstractChaos has cleared this up now, as I suspected there is a better option to my suggestions!
Hope this helps.

or
$("li.classA").hover(function() {
$("#login").css('display', 'none');
$("#userInfo").fadeIn('fast');
});
$("#userInfo").mouseleave(function() {
$("#userInfo").fadeOut('fast');
});
$("li.classB").hover(function() {
$("#userInfo").css('display', 'none');
$("#login").fadeIn('fast');
});
$("#login").mouseleave(function() {
$("#login").fadeOut('fast');
});

Try this:
http://jsfiddle.net/QR49h/
I moved the divs to be hidden/shown to inside the <li> elements:
<ul class="links">
<li class="classA"><a><span>My info</span></a>
<div id="userInfo">USER MUST BE ABLE TO CLICK THE BUTTON BELOW, SO THIS BOX MUST STAY VISIBLE
<br/>
<input type="button" value="OKAY" />
</div>
</li>
<li class="classB"><a><span>Log in</span></a>
<div id="login">
<div class="form">
<form>
<input type="textfield" value="enter your email" />
<input type="checkbox" />
<option>remember me?</option>
<input />
<input type="button" value="Click me" />
</form>
</div>
</div>
</li>
</ul>
I also fixed a bug in the js (ClassA vs ClassB) and fiddled the css slightly so the second <li> item can keep it's position when the first is expanded. Oh and fixed some element closing issues in the form div.