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.

Problems with ID anchors

I'm trying to use reload a page to go to an anchor, but the page don't reload or scroll to the anchor. The anchor is not shown till the link is hit.
$('.link').click(function() {
$('#box').css('display', 'block');
});
#box {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<h1>Title</h1>
<p>Description of the content.</p>
</div>
Go to #Box
This is the page in my blog: http://simulatorio.blogspot.com.br/p/politicas.html#cookies
For exemple:
I open http://simulatorio.blogspot.com.br/p/politicas.html in a small window (width of 500px, the content is shown).
I click in Menu (the content is hidden, the menu is shown).
I click in a link http://simulatorio.blogspot.com.br/p/politicas.html#cookies.
The page does nothing (it doesn't reload)!!!
What I want is to go to the page http://simulatorio.blogspot.com.br/p/politicas.html#cookies on itself.
PS.: It only works when the link is opened in a new window/tab.
It should be opened in a small screen because the problem is happening there (responsive page). Thanks!

If the anchor is display:none, it may as well not exist for the purpose of navigation. Try this styling instead:
#box {
width:0;
height:0;
overflow:hidden;
}
Or:
#box {
visibility:hidden;
}

Its because after refreshing the style is applied to #box so its hidden.
#box {
display: none;
}

Do you need something like this:
HTML:
<div id="box" class="boxContent">
<h1>Title</h1>
<p>Description of the content.</p>
</div>
Go to #Box
CSS:
.boxContent {
visibility:hidden;
}
JS:
$('.link').click(function() {
$('#box').toggleClass( "boxContent");
});
FIDDLE: http://jsfiddle.net/2TCy4/42/

Issue in displaying div using Colorbox

Good Day Professionals,
I'm using Colorbox plugin to display a certain div, but this issue appears.
the structure is as follow:
1- Hidden div to be displayed
2- Show btn to display the div
When I click the btn for the first time the div is displayed without any problems, but when I press ESC btn to close it and return the previous step again and click the btn the colorbox opens but without showing the div
This is the HTML code
<div class="to_be_show">
<!-- html structure is here -->
</div>
<p class="display">display</p>
This is the css style
.to_be_show{ width: 500px; height: 200px; background: red; display: none; }
This is the JS code
$('.display').click(function(){ $('.to_be_show').css('display','block'); });
$('.display').colorbox({opacity: 0.98,inline:true});
$(document).bind('cbox_closed', function() {$('.to_be_show').css('display','none'); });
So, What is the problem with my code ?!
-------- Update ----------
I know The problem but I don't know how to solve it !!!
I want to set the href attr of the display with Jquery as the content is loaded dynamically
and i use this and didn't work !!!
$('.show_album').colorbox({href:$(this).prev()});
Why ??!!

You can achieve this by creating inline color box
HTML Mark up
<div style="display:none">
<div class="to_be_show" id="to_be_show">
Element to be show
</div>
</div>
Display
css
.to_be_show {
width: 500px;
height: 200px;
background: red;
}
Js
$(document).ready(function () {
$(".inline").colorbox({
inline: true,
opacity: 0.98,
});
});
Here is working fiddle.
Don't forget to include
colorbox css & js
cheers!!!

creating an expandable area in a web page

I am new to CSS and Javascript. I want to create a specific area (I use the div tag) in the page where once a link is clicked within, the area will expand and an additional content would be displayed. I managed to create a code which does the job only partially: the new content is displayed after the click but this content is not displayed within the area border. In few words the area is not expanded, only a new content is displayed...any suggestion?

I really like this jQuery accordion method:
Live Demo: http://jsfiddle.net/kbZDv/1/
It's easy to use, style and looks good.
All you need to do is include the latest version of jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
Here is the HTML markup:
<p class="trigger">Click here to expand and reveal more information</p>
<div class="toggle_container">
<div class="block">
<p>Content goes here.</p>
</div>
</div>
The basic (yet to be styled) CSS:
p.trigger{
margin-bottom:7px;
margin-top:-5px;
}
.toggle_container{
margin-bottom:10px;
}
.toggle_container p{
margin:0px;
}
.toggle_container{
background:#f0f0f0;
clear: both;
font-size:100%;
}
And the all important jQuery to make it work:
$(".toggle_container").hide();
$("p.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
});

You could use a jquery plugin like div expand?
http://plugins.jquery.com/plugin-tags/div-expand
or perhaps a jquery exander plugin
http://plugins.learningjquery.com/expander/demo/index.html

Multiple buttons in the header

I'm trying to get the following effect in the jQuery Mobile framework:
|-------------------------------------------------|
|[button1] HeaderText/Image [b1] [b2] [b3] |
|-------------------------------------------------|
Where [b1], [b2] and [b3] are small image buttons in the Header.
Is this even possible currently?

just simple like this
<div class="ui-btn-right">
</div>

I have had troubles with this in the past. Trick is, force all of your links to be data-role="button" and wrap said links in a container with class="ui-btn-[left/right]" (respectively) This takes care of the traditional header button positioning and markup.
<div data-role="header">
<div class="ui-btn-left">
Button1
</div>
<h1>HeaderText/Image</h1>
<div class="ui-btn-right">
B1
B2
B3
</div>
</div>

Seems as if it is possible, check out this link:
Grouped buttons on the jQuerymobile Framework website.

This is how i did it. Some of the styling may not be necessary as the class used on the parent div should be enough.
<div data-type="horizontal" style="top:10px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right">
Team Call
Logout
</div>

In order to use your own image buttons on the right side you'll need to either float or position a div to the right, then add your buttons.
Then you'll need to override the jQuery mobile styles for those specific buttons to prevent them from getting the rounded, gradient button style that's automatically added by the library.
#header {
float: right;
}
#header .ui-btn-up-b,
#header .ui-btn-hover-b,
#header .ui-btn-down-b
#header .ui-btn-active {
border: 0px;
background: none;
}