Develop Reference

CSS hover no longer working when changing CSS properties through JS

I have this piece of code:
function dropdown() {
let dropdownText = document.querySelector(".dropdown-button");
let item = document.querySelector(".dropdown-items").getElementsByTagName("div")[0];
var aux = dropdownText.innerHTML;
dropdownText.innerHTML = item.innerHTML;
item.innerHTML = aux;
document.querySelector(".dropdown-items").style.display = "none";
}
.btn {
width: 150px;
height: 30px;
border-radius: 5px;
border: none;
box-shadow: 0 3px 1px 0 black;
text-align: center;
line-height: 30px;
color: black;
font-family: Consolas, monaco, monospace;
}
.dropdown {
margin: 0 50px 0 50px;
position: relative;
}
.dropdown-items {
display: none;
position: absolute;
}
.dropdown:hover .dropdown-button {
background: red;
}
.dropdown:hover .dropdown-items {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.dropdown-button {
background: orange;
font-size: 15px;
color: white;
}
.dropdown-button:hover {
cursor: pointer;
}
.dropdown-items div {
margin-top: 5px;
transform: scaleX(90%);
height: 20px;
line-height: 20px;
background: lightgray;
padding: 5px 0 5px 0;
text-align: center;
}
.dropdown-items div:hover {
cursor: pointer;
background: gray;
}
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn" onclick="dropdown();">Interrupt</div>
</div>
</div>
As you can see, I am trying to make a dropdown. I also want to make it so that when I click an option in the dropdown, the dropdown items stop showing as the option has been selected. That's why I added the line document.querySelector(".dropdown-items").style.display = "none"; in the JS file as I thought the .dropdown:hover .dropdown-items part of my CSS would change back the display of those elements to visible when hovering again, but when hovering again after the first click, the dropdown does not show anymore. Why is happening and how can I fix this?

Inline styles override any stylesheet styles, as they have maximum CSS specificity.
Instead of working with inline styles (el.style.display = "none"), work with a CSS class open that you toggle. Also don't make use of inline event listeners like onclick. Those are insecure and widely considered bad practice for a whole bunch of reasons. Use addEventListener instead.
// get all the dropdowns in a NodeList
const dropdowns = document.querySelectorAll('.dropdown');
// iterate over the list
for (const dropdown of dropdowns) {
// for each dropdown, add a mouseenter and mouseleave listener
dropdown.addEventListener('mouseenter', function(event) {
dropdown.classList.add('open');
});
dropdown.addEventListener('mouseleave', function(event) {
dropdown.classList.remove('open');
});
// Now add a click listener to each <div class="dropdown-items">
// that transfers the text and closes the dropdown
dropdown.querySelector('.dropdown-items').addEventListener(
'click',
function(event) {
this.previousElementSibling.textContent = this.textContent;
dropdown.classList.remove('open');
}
);
}
.btn {
width: 150px;
height: 30px;
border-radius: 5px;
border: none;
box-shadow: 0 3px 1px 0 black;
text-align: center;
line-height: 30px;
color: black;
font-family: Consolas, monaco, monospace;
}
.dropdown {
display: inline-block;
position: relative;
}
.dropdown-items {
display: none;
position: absolute;
}
.dropdown:hover .dropdown-button {
background: red;
}
.dropdown.open .dropdown-items {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.dropdown-button {
background: orange;
font-size: 15px;
color: white;
}
.dropdown-button:hover {
cursor: pointer;
}
.dropdown-items div {
margin-top: 5px;
transform: scaleX(90%);
height: 20px;
line-height: 20px;
background: lightgray;
padding: 5px 0 5px 0;
text-align: center;
}
.dropdown-items div:hover {
cursor: pointer;
background: gray;
}
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Interrupt</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Whatever</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Another one</div>
</div>
</div>
<div class="dropdown">
<button class="btn dropdown-button" type="button">Terminate</button>
<div class="dropdown-items">
<div class="btn">Here we go</div>
</div>
</div>

Inconsistent distance between links in navigation bar

I've been working on a simple horizontal navigation bar using html, css and javascript. The navigation bar contains a dropdown menu (named More). Clicking on the More menu causes hidden links to be shown (vertically) beneath the More heading, and clicking again causes the links to be hidden again.
I set the margin for all links in the navigation bar to be 2px (in the css file), but the distance between the links doesn't appear consistent. Specifically, after clicking on More, the distance between Options 4 and 5, and the distance between Options 5 and 6, is different to the distances between the other links. Do you know what causes this problem?
function clickMoreMenu() {
var x = document.getElementById("hiddenlinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
#navbar {
display: block;
width: 425px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.navoption {
text-align: center;
display: block;
float: left;
}
#moremenu {
display: block;
}
#hiddenlinks {
display: none;
position: absolute;
z-index: 1;
margin-top: 0px;
}
#navbar a {
display: block;
text-align: center;
text-decoration: none;
padding-top: 10px;
padding-bottom: 10px;
width: 100px;
color: Blue;
background: Yellow;
border-style: solid;
border-color: Blue;
border-width: 1px;
margin: 2px;
}
#navbar a.currentpage {
color: DarkBlue;
background: Gold;
}
#navbar a:hover {
background: Blue;
color: Yellow;
}
h1 {
color: blue;
text-align: center;
}
.clearleft {
clear: left;
}
<h1>Distance Test</h1>
<nav id="navbar">
<div class="navoption">
Index
</div>
<div class="navoption">
Option 2
</div>
<div class="navoption">
Option 3
</div>
<div class="navoption" id="moremenu">
More...
<div id="hiddenlinks">
Option 4
Option 5
Option 6
</div>
</div>
</nav>
<div class="clearleft">Some text.</div>

With some modifications on your css you can use this.
Note: remove in the css 1 of the 2 options!
function clickMoreMenu() {
var x = document.getElementById("hiddenlinks");
if (x.style.display == "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
#navbar {
display: block;
width: 425px;
margin: 0px auto 20px auto;
}
.navoption {
display: block;
float: left;
/* next line relative because #hiddenlinks is absolute */
position: relative;
text-align: center;
}
#hiddenlinks {
display: none;
position: absolute;
top: 100%;
left: 0%;
z-index: 1;
}
#navbar a {
box-sizing: border-box; /* keep padding & border in the button */
display: block;
width: 100px;
margin: 2px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid blue;
text-align: center;
text-decoration: none;
color: blue;
background: yellow;
}
/* option 1: all submenu items small gaps */
#navbar > div:last-child > a {
margin-bottom: 0;
}
/* OR option 2: all submenu items same gap as topmenu */
#navbar #hiddenlinks a {
margin-bottom: 4px;
}
#navbar a.currentpage {
color: darkblue;
background: gold;
}
#navbar a:hover,
#navbar a:active {
background: blue;
color: yellow;
}
h1 {
color: blue;
text-align: center;
}
.clearleft {
clear: left;
}
<h1>Distance Test</h1>
<nav id="navbar">
<div class="navoption">
Index
</div>
<div class="navoption">
Option 2
</div>
<div class="navoption">
Option 3
</div>
<div class="navoption" id="moremenu">
More...
<div id="hiddenlinks">
Option 4
Option 5
Option 6
</div>
</div>
</nav>

Swappable CSS theme with jQuery event handler

I'm trying to create a simple swappale CSS theme with a jQuery event handler.
As you can see, I was able to modify .outer but I don't know how to style the spans. The default theme doesn't need further customization, but I would like to change the color/size of the spans and apply a hover effect, etc. for 'mytheme'.
The HTML shouldn't be changed but the JS can be edited.
Any input is highly appreciated. How can I use [data-theme="mytheme"] with other elements?
Here's the JSFiddle
This is the HTML:
<div class="outer" data-theme="default">
<ul class="list">
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>0</span></li>
</ul>
<input type="button" value="Swap Theme" id="btnSwapTheme" />
</div>
JS:
$(document).ready(function() {
//Swap Theme event handler
$('#btnSwapTheme').on('click', function(evt) {
var theme = $('div.outer').attr('data-theme');
if (theme == 'default') {
$('div.outer').attr('data-theme', 'mytheme');
} else {
$('div.outer').attr('data-theme', 'default');
}
});
});
CSS:
.outer {
text-align: center;
}
.outer input {
margin: 0.5em;
}
.outer[data-theme="default"] {
background-color: #c0c0c0;
}
.outer[data-theme="mytheme"] {
background-color: red;
}
ul.list {
width: 13em;
margin: 0;
margin-left: auto;
margin-right: auto;
text-align: center;
padding: 0;
list-style-type: none;
text-align: center;
}
ul.list li {
display: inline-block;
font-weight: bold;
border: 1px solid blue;
margin: .5em;
}
ul.list li span {
display: inline-block;
height: 3em;
width: 3em;
line-height: 3em;
cursor: pointer;
}

For example like this:
.outer[data-theme="mytheme"] span {
background-color: green;
}
.outer[data-theme="mytheme"] span:hover {
background-color: coral;
}
Demo: http://jsfiddle.net/6kyhbhus/1/
You just need to prefix any selector with .outer[data-theme="mytheme"] since this is wrapping container for your elements.

central div moves around the website when I resize the browser window

My central block keeps on moving to the left when I resize the browser window
normal:
http://imgur.com/b2AVkUx
after resizing browser window:
http://imgur.com/mJq6AuO
so i managed to figure out how to keep the navi and footer relatively undisruptive during resizing, but I just can't seem to figure out how to deal with the body, help please?
HTML:
<html>
<head>
<title>Line After Line</title>
<link type = "text/css" rel = "stylesheet" href = "stylesheet.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id = "top">
<div id = "opening">
<a href = "index.html">
<h1 id = "logo"> Line After Line </h1>
</a>
</div>
<div id = "navi">
<ul>
<li> Read </li>
<li> Write</li>
<li> Review </li>
<li> Donate </li>
</ul>
</div>
</div>
<div id = "updates">
<h4>Updates</h4>
<ul>
<li> number one blah blah blah blah blah hahahahaahah </li>
</br>
<li>number two blah blah blah </li>
</ul>
</div>
<div id = "story">
<a href = "blockOne.html">
<div class = "storyblocks" id = "blockOne" >
<p> Hello I this is a test block </p>
</div>
</a>
<div class = "storyblocks" id = "blockTwo"></div>
<div class = "storyblocks" id = "blockThree"></div>
<div class = "storyblocks" id = "blockFour"></div>
<div class = "storyblocks" id = "blockFive"></div>
<div class = "storyblocks" id = "blockSix"></div>
</div>
<div id = "footer">
<ul>
<li> Home </li>
<li> A Message From Chung</li>
<li> Contributors </li>
<li> About </li>
<li> Contact </li>
</ul>
</div>
</body>
CSS:
*{
margin: 0px;
padding: 0px;
}
ul{
list-style-type: none;
}
body{
background-color: white;
}
body a {
text-decoration: none;
}
#top{
background-color: black; /*use to see div area*/
height:75px;
margin-bottom: 1.5%;
padding: 5px;
}
/*div surrounding the Logo */
#opening{
margin-left: 100px;
width: 300px;
}
#logo{
color: white;
font-family: verdana;
float:left;
margin-top: 15px;
}
#navi{
/*background-color: red;*/
width: 1100px;
left: 200px;
margin-top: 20px;
margin-right: 100px;
position: relative;
}
#navi ul li {
font-weight: bold;
color: white;
display: inline;
text-decoration: none;
font-family: Calibri;
font-size: 26px;
margin: 0px 60px 0px 60px;
}
#updates{
/*background-color: blue; /* use to see div area */
color: #6D8582 ;
font-family: verdana;
margin-left: 5%; /*100px*/
margin-bottom: 10px;
height: 600px;
width: 300px;
border-right: thick solid #6D8582;
float: left;
position: relative;
}
#updates h4 {
text-align: center;
padding: 10px;
}
#updates ul {
margin-left: 20px;
list-style-type: none;
}
#story , #mainStory{
/*border: thin solid black;*/
/*background-color: red;*/
float: right;
margin-left: 27%;
margin-bottom: 10px;
position: absolute;/* relative*/
width: 1145px;
height: 600px;
overflow: auto;
border-radius: 5px;
}
#mainStory {
background-color: #F7F9FA;
width: 1050px;
margin-right: 4.5%;
}
#mainStory p {
color: black;
font-family: Calibri;
font-size: 18px;
padding-left: 50px;
padding-right: 50px;
text-indent:50px;
}
#mainStory h2{
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.storyblocks{
color:black;
display:inline-block;
line-height: 50px;
margin: 5px;
width: 200px;
height: 200px;
border-radius: 5px;
text-align: center;
vertical-align: top;
opacity: 0.6;
}
#blockOne{
/*border: thick solid blue; /*delete later*/
background-color: #2A9BB5;
}
#blockTwo{
/*border: thick solid green; /*delete later*/
background-color: #17EB0C;
}
#blockThree{
/*border: thick solid yellow; /*delete later*/
background-color: #F0F035;
}
#blockFour{
/*border: thick solid red; /*delete later*/
background-color: #F02E4E;
}
#blockFive{
/*border: thick solid purple; /*delete later*/
background-color: #DA41E8;
}
#blockSix{
/*border: thick solid green; /*delete later*/
background-color: #FC62B2;
}
#footer {
background-color: black;
text-align:center;
position: absolute;
clear: left;
height:34px;
bottom: 0;
width:100%
}
#footer ul li {
color: white;
text-decoration: none;
display: inline;
font-family: Calibri;
font-size: 16px;
margin-left:50px;
margin-right:50px;
}

It is because you have a fixed width and float right. Your div with the boxes is trying to stay aligned with the right hand side of the browser window, and because you won't let it resize it moves over. Either make the width a percentage, or don't float right and have a margin left 300px

Actually you have a problem with responsive design. If you do not have any of items ( sidebar or content) fixed you can use precentage on both of them, like :
#nav {
width:27%;
display:inline-block;
vertical-align:top;
padding-right:1%;
margin-right:1%;
border-right:1px solid #ccc;
}
#content {
width:70%;
display:inline-block;
vertical-align:top;
}
If you have something fixed ( let say sidebar ) you have to use css media queries and create some "patterns" for certain intervals of resolution ( width ).
You have an example which uses precentage sizes of both sides : http://jsfiddle.net/7Qpw6/

how to make the menu sticked and don't be moved when changing the browser or the zoom

Q:
I have a navigation menu ,i notice that every time i change the browser zoom. its position changed.how to make the menu fixed in its place.
the .css:
ul#topnav
{
margin-left:0;
margin-bottom:50px;
margin-top:5px;
padding: 0;
float: right;
width: 800px;
list-style: none;
position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
font-size: 1.2em;
background:#CC6A11; /*url(topnav_stretch.gif) repeat-x;*/
}
ul#topnav li
{
float: right;
margin: 0;
padding: 0;
border-right: 1px solid #555; /*--Divider for each parent level links--*/
}
ul#topnav li a
{
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover
{
background: #1376c9 url(../images/topnav_active.gif) repeat-x;
}
ul#topnav li span
{
float: right;
padding: 10px 0;
position: absolute;
left: 0;
top: 35px;
display: none; /*--Hide by default--*/
width: 800px;
background: #1376c9;
color: #fff; /*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 5px;
-khtml-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px; /*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span
{
display: block;
}
/*--Show subnav on hover--*/
ul#topnav li span a
{
display: inline;
}
/*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover
{
text-decoration: underline;
}
.aspx
<div style=" margin-right:20%" >
<ul id="topnav">
<li>الرئيسية</li>
<li>النشاط التعليمي <span>العبأ التدريسي
| الأنشطة التعليمية | <a href="frm_EducationalActivitiesDirectly.aspx">
الأنشطة التعليمية المباشرة</a> </span></li>
<li>النشاط العلمي <span><a href="frm_ScientificActivity.aspx">النشاط
العلمي 1</a> | النشاط العلمي 2 | <a href="frm_ScientificActivity3.aspx">
النشاط العلمي 3</a> </span></li>
<li>النشاط الاداري</li>
<li>االاشتراك في أنشطة طلابية</li>
<li>التقييم العام</li>
<li>خروج</li>
</ul>
</div>
I use this menu

You just have to do two things, and it will solve your question !
1) Remove margin right from div.
Previous :<div style=" margin-right:20%" >
Modified: <div>
2) Update your topnav css as below :
ul#topnav {
background: none repeat scroll 0 0 #CC6A11;
float: right;
font-size: 1.2em;
list-style: none outside none;
margin-bottom: 50px;
margin-top: 15px;
padding: 0;
position: relative;
text-align: left;
}
Hope this will solve your problem!!!!!

It is going to zoom but you can make it stick by replacing:
<div style=" margin-right:20%; width:100%" >
with
<div style="position:absolute; top: 0px; left: 20px;" >

Ensuring that you have your meta viewport tag in your HTML files should help, and
setting the 'position' attribute to 'fixed' in your menu's CSS will make it sticky/float.