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.

Attribute selectors ineffective in displaying element in "inline-block" - what's wrong?

I have a group of LinkedIn share buttons (supplied via LinkedIn) throughout my blog pages, that I am trying to align horizontally inline with other share buttons. I have tried most everything so far, and have decided to - ineffectively - try attribute selectors to make the buttons do what I want. Here is the button code:
<script src="//platform.linkedin.com/in.js" type="text/javascript">
<span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block; text-align: center;">
And the attempted CSS:
span[class="IN-widget"] { display: inline-block; }
Can anyone tell me if I'm misstepping here? To my knowledge, every share button has this common class as part of its source code, so this should do the trick in introducing the desired styling. Any help would be much appreciated!

Edit
Second Edit: .IN-widget is dynamically generated and doesn't exist in markup. So use 'script[type^=IN]' as your selector see edited code below
Having one per page and using the id would be inefficient, so we need to use JavaScript/jQuery instead of CSS. One major limitation of CSS is it's inability to control a selected element's parent and ancestors.
Details are commented in demo
Demo
/* The selector means:
|| Find a <script> tag that has a [type] attribute
|| that's value begins ^= with the string of "IN"
*/
/* The .closest() method will find the ancestor closest
|| to the targeted selector. So here it's saying:
|| (Previous comment here)
|| Find the closest ancestor of the selected element
|| which has the classes .sqs-block, .code-block,
|| and .sqs-block-code.(grandma)
|| Use .css() method to change grandma's styles.
|| The extra style top:3px is just to push the icon down
|| down so that it is inline with FB and Twit icons.
*/
$('script[type^=IN]').closest('.sqs-block.code-block.sqs-block-code').css({
'display': 'inline-block',
'top': '3px'
});
$('.fb-share-button').closest('.sqs-block.code-block.sqs-block-code').css('display', 'inline-block');
$('.twitter-share-button').closest('.sqs-block.code-block.sqs-block-code').css('display', 'inline-block');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sqs-block code-block sqs-block-code">
<div class="sqs-block-content">
<div class="fb-share-button fb_iframe_widget"><span style="vertical-align: bottom; width: 58px; height: 20px;"><iframe width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" src="https://www.facebook.com/v2.8/plugins/share_button.php?app_id=&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2F0F7S7QWJ0Ac.js%3Fversion%3D42%23cb%3Df836e17d67a66%26domain%3Dtylercharboneauprofessional.com%26origin%3Dhttps%253A%252F%252Ftylercharboneauprofessional.com%252Ff23efc0724f4838%26relation%3Dparent.parent&container_width=39&href=https%3A%2F%2Fwww.tylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election%2F&layout=button&locale=en_US&mobile_iframe=false&sdk=joey" style="border: none; visibility: visible; width: 58px; height: 20px;" class=""></iframe></span>
</div>
</div>
</div>
<div class="sqs-block code-block sqs-block-code">
<div class="sqs-block-content">
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-share-button twitter-share-button-rendered twitter-tweet-button" style="position: static; visibility: visible; width: 60px; height: 20px;" src="https://platform.twitter.com/widgets/tweet_button.5b6375bb17bd9edb2f4e7f8f12971999.en.html#dnt=true&id=twitter-widget-0&lang=en&original_referer=https%3A%2F%2Ftylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election&size=m&text=Your%20Guide%20to%20the%20French%20Presidential%20Election%2C%20and%20Why%20it%20Matters%20%E2%80%94%20Tyler%20Charboneau&time=1495223324688&type=share&url=https%3A%2F%2Ftylercharboneauprofessional.com%2Finternational-pulse%2Fyour-guide-to-the-french-election"></iframe>
</div>
</div>
<div class="sqs-block code-block sqs-block-code">
<div class="sqs-block-content">
<span class="IN-widget" style="line-height: 1; vertical-align: baseline; display: inline-block; text-align: center;"><span style="padding: 0px !important; margin: 0px !important; text-indent: 0px !important; display: inline-block !important; vertical-align: baseline !important; font-size: 1px !important;">
<span><a href="javascript:void(0);"><span>in</span><span><span></span><span>Share</span></span>
</a>
</span>
</span>
</span>
<script type="IN/Share"></script>
</div>
</div>
Each share button has been stripped of ids and are as generic as they could be for demonstration purposes. On each page, include the jQuery inside <script> tags and place that <script> block before the closing </body> tag. Any other modification to HTML is unnecessary. A better way is to use an external script and have each page point to that .js file. To save a http request you could add that those 3 lines to an existing .js script but you'll need to be familiar with jQuery/JavaScript to do so safely.
Explination
This template (like all templates of this nature, Squarespace, Word-Press, etc.) is a cluster-fu## of HTML. If you find a particular element and you need to actually move it, or behave in layout, or adhere to a flow, you'll need to move up the DOM hierarchy until you find the ancestor that has siblings. For example:
<div class='great-great-great-aunt'>
<!--Many levels of cousins-->
<span class='fb'>Facebook I need to liked!</span>
<!--...</div>...-->
</div>
<div class='great-great-grandma'>
<div class='great-grandma'>
<div class='grandma'>
<div class='mom'>
<span class='linkedIn'>Hey I'm a corporate clone! How about you?</span>
</div>
</div>
</div>
</div>
The target element in this example is .linkedIn (Note the . preceding the className, that is the proper syntax for a class selector in CSS and jQuery.) On the surface, that is the element you see in the browser. It's "cousin" icon is .fb, meaning that as far as relations go they are not siblings as it appears so when rendered in browser. They do not share the same parents as siblings would so styles that concern position, flow, layout, etc. will not affect a cousin. Cousins are isolated from each other because they are nested within their own parent element as well as any ancestor elements. Therefore you must find the ancestor of .linkedIn that has a sibling that is the ancestor of .fb. Confused? Me too.
Solution
Here is grandma:
#block-yui_3_17_2_1_1493318168221_183886
A # means id which is by far the easiest and most accurate way of locating a specific element. The reason id is the best means of selecting an element is because an id is unique on any given document (i.e. single webpage).
This is the ruleset that should bring that linkedIn icon inline with the Twitter and Facebook icons:
#block-yui_3_17_2_1_1493318168221_183886 { display: inline-block; top:3px}

Linkedin Share Example Check this jsfiddle: https://jsfiddle.net/wrahvvr2/
JS:
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-counter="top"></script>
CSS(this should target the share button):
span[class="IN-widget"] {
display: inline-block;
background: red;
}
BTW:
You have an open script tage:
<script src="//platform.linkedin.com/in.js" type="text/javascript">
You should close it:
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>

- CSS bootstrap, divs skip row how get neatly in a row dispite height difference -

The problem occurred on other projects, but then I made all the divs the same size. I made a print screen of my problem.
As you can see the the third div is a little longer then the others (and yes I want to keep this). My css or bootstrap wants to skip a row.
html
<div ng-repeat="work in myWork" class="col-lg-3 col-md-3 col-xs-12" id="myWorkHolders">
css
#myWorkHolders{
margin: 0px;
display: inline-table;
padding: 0px;
border: solid 1px #F4F4F4;
}
Problem
DIVS skip a row when the div above is not the same size as the others.
Question
what Css terms can I use so the divs will display under each other despite different sizes.

you can add an extra class with min-height to every div, just match the height of ur largest div and put that into css class.
<style>
.yourclass {
min-height:Xpx; //replace X with the height of your largest div.
}
</style>
and now just put this class into every div as:
<div class="col-md-3 yourclass">.col-md-3</div>

I have run into this problem before; I'm curious what other people say. Not sure if this is the best solution, but what I did that worked for me was assign a min-height to those divs. the min-height you assign will depend on the height of your largest div.
so:
#myWorkHolders{
margin: 0px;
display: inline-table;
padding: 0px;
border: solid 1px #F4F4F4;
/* the exact height specified will have to be experimented with */
min-height: 250px;
}

With bootstrap you need to use the row class to make sure the columns layout correctly no matter the height a particular column.
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
<div class="row">
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
<div class="col-md-3">.col-md-3</div>
</div>
So when creating your loop you need to think about how to add in the row container after every fourth column.

Two scrollbar using the same css

I'm using custom scrollbar, add one scrollbar is very easy, but if I want to add second they twice use one mCustomScrollbar.css I don't know how to change that second div. I was looking on code on demo custom scrollbar but this just fail.
JQUERY
(function($){
$(window).load(function(){
$(".suwak").mCustomScrollbar();
});
})(jQuery);
HTML
<link href="scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<div class="suwak"> content with first scrollbar </div>
<div class="suwak2"> content with second scrollbar </div>
Some simply CSS
.suwak{
position:relative;
width:475px;
height:300px;
background-color: #000e1b;
color: white;
overflow:hidden
margin-top:160px;
margin-left: 15px;
}

Just add another class on div with class="suwak", this will run your scrollbar and your second class will help override your first class. In css you are saying, if something has both classes, use new style. In css your selector would be .suwak.suwak2, no space between classes in css.
<div class="suwak"> content with first scrollbar </div>
<div class="suwak suwak2"> content with second scrollbar </div>
.suwak{
position:relative;
width:475px;
height:300px;
background-color: #000e1b;
color: white;
overflow:hidden
margin-top:160px;
margin-left: 15px;
}
.suwak.suwak2 {
/*new stile*/
}

Why don't you use second class as well? is it something that you don't know how many DIVs will be there to have same scrollbar?
If it is limited to 2 only, then try
(function($){
$(window).load(function(){
$(".suwak").mCustomScrollbar();
$(".suwak2").mCustomScrollbar();
});
})(jQuery);
Or you can mention same class for second DIV as well. I have suggested this as per my observation of the code you posted.

JQuery .append() - elements lose styling

I'm attempting to add elements to a div container however the elements ignore their css class.
JavaScript
$.each(jobs, function(i, job)
{
var option = '<div class="input"><div class="option">' + job.created +'</div></div>';
$('.options').append(option);
});
Html
<div class="options" style="overflow: scroll; width: 100%; height: 80%; background-color: White; text-align: left;">
<div class="input">
<div class="option">
Hunt Osama.
</div>
</div>
<div class="input">
<div class="option">
Execute without trial.
</div>
</div>
</div>
The elements are successfully appended to the div however the styling information is not acted upon.
EDIT: the classes input and option have no effect on the added elements.
Any hints?

I have tested your code on my machine and it works fine in IE & Firefox if I apply CSS to the children.
In my css file I have added the following declaration:
.option
{
font-weight:bold !important;
color: red;
}

This issue ended up being specific to WebKit/Qt on the windows mobile platform. It doesn't appear during a Android/WebKit example.
Sorry I have no further details on the cause of the problem.
Thanks for all the help.