We Keep Coding

onClick jumping to top of page

I am coding a simple website with a JS side navbar. When I resize the window to develop at different widths I noticed that the page would jump to the top.
I then noticed that when I click the hamburger icon the page also jumps to the top.
I've looked into it and it appears to be the onClick that is the issue. I have tried to use return false but the issue is still the same.
I have used the code/tutorial provided on w3 schools.
Thanks for any help
Here is my code
HTML:
<nav id="mySidenav" class="sidenav">
×
<img class="sidenavbar-logo-img" src='<?php echo get_template_directory_uri(); ?>/img/logo-NO.png'>
<?php wp_nav_menu( array( 'theme_location' => 'sidenav-menu' ) ); ?>
<div class='sidebar-nav-info'>
<p>Lower Trinity St,
Birmingham,
B9 4AG</p>
<p>Facebook Instagram</p>
</div>
</nav>
<!-- Use any element to open the sidenav -->
<span class="hamburger" onclick="openNav(); return false;">
<i class="fas fa-bars"></i>
</span>
CSS
/* The navigation menu links */
.sidenav ul {
list-style-type: none;
margin-left: 0;
}
.sidenav ul li {
margin: 0;
}
.sidenav a {
padding: 8px 8px 8px 0px;
text-decoration: none;
font-weight: 700;
font-size: 18px;
color: #f1f1f1;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #818181;
text-decoration: none;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
.sidebar-nav-info {
padding: 30px;
position: absolute;
bottom: 0;
left: 0;
width: 200px;
color: #E2E2E2;
font-size: 12px;
}
/** HAMBURGER ICON **/
span.hamburger {
position: sticky;
top: 30px;
left: 30px;
font-size: 30px;
font-weight: 800;
cursor: e-resize;
}
JS
<script>
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "300px";
document.getElementById("main").style.marginLeft = "300px";
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
</script>

As you have suspected, this is caused by the href= in the a tag. By default, a tags navigate the page somewhere, so having either href=# or as yours is written, will just navigate to top of page.
The return false should do the trick, but it is likely not in the correct place. Try putting it inside the closeNav function, as the final statement. Else, you might need to create an event listener for a tags and just respond with the return false. You can also try event.preventDefault() instead of return false (but return false should work - it does more than preventDefault.
Update:
One thing that helps is to avoid using inline javascript (that is, where the js is on the tag itself: onclick="closeNav();return false;"). Instead, create an event listener and do your js there. Here is a technical discussion regarding inline-javascript versus event listeners (the prevailing wisdom being that inline-javascript is more fraught and less desirable, particularly with respect to event bubbling, which is what you are dealing with here.) Here is a more simple article.
So, switch to an event listener structure, like this (untested):
var cbel = document.getElementsByClassname("closebtn");
cbel.addEventListener("click", closeNav, false);
var opel = document.getElementsByClassname("hamburger");
opel.addEventListener("click", openNav, false);
/* Set the width of the side navigation to 250px and the left margin of the page content to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "300px";
document.getElementById("main").style.marginLeft = "300px";
return false;
}
/* Set the width of the side navigation to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
return false;
}
Final point: I would also recommend that you look into jQuery, because:
1) You are using bootstrap, which uses jQuery itself, so it is already loaded
2) It is much less typing
3) Most people (myself included) find it much simpler. for example, the above code in jQuery would look like this:
$(function(){
$('.closebtn').click(function(){
$("#mySidenav").css('width', '300px');
$("#main").css('margin-left', '300px');
});
});//END document.ready

JS print - CSS text color not showing

I'm making an invoice in HTML & CSS. The goal is that after filling in, the invoice gets printed. But for some reason it doesn't print the CSS color of text. All text is black.
All other CSS styling works, like font-family, font-size, font-weight ...
This is the original in HTML & CSS :
And this is what is printed :
The printing is done with js: window.print();
Does anyone know why CSS color isn't working?
EDIT:
the title is placed in a table with id 'factuur':
<td id="factuurTitel">Stukadoorwerken Vanhees Frank</td>
The title has this CSS:
#factuurTitel {
font-weight: bold;
font-size: 30px;
color: #194197;
text-align: center;
vertical-align: middle;
font-family: 'Carrois Gothic SC', Calibri, sans-serif;
}
I have this #media print :
#media print {
body * {
visibility: hidden;
}
#factuur, #factuur * {
visibility: visible;
}
#page {
margin: 0;
}
}
I've tried adding #factuurTitel { color: #194197; } to the #media print.

Usually JS Print only handles html content alone if you want to give stylings to print, Use separate media query print in your css file:
#media print
{
/* your css goes here */
}

#factuur, #factuur * {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
This works in webkit browsers and the latest firefox updates, otherwise there's no other known solution.
I had the same problem myself.

Responsive Design and onclick events

I have a mobile menu button (only viewable with display:block by using media queries). When the button is clicked, my main "mobile" menu appears - I do this using simple javascript code (see below).
The problem ... if I click the button to expand the menu (changing the inline style from display:none to display:block), and then increase the browser size ... my menu doesn't disappear anymore. So, the inline style doesn't recognize the media query...
Below is the script that expands my menu...
<!-- Menu Expander / Toggle Visibility -->
<script type="text/javascript">
function toggle_menu(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
</script>
Here are some of the styles.... you'll see the menu-mobile (which is the actual menu) and the mobile-menu-but (which is the button) is hidden (with display:none). When the browser window is reduce, the button appears (with display:block in the media query), but the menu is still hidden. Then when you click the javascript button, the inline style display:block is added to set for the mobile-menu.
#mobile-menu-but, #menu-mobile { display:none; }
#menu a, #menu a:link { padding: 15px 16px 12px 16px; }
#media (max-width: 790px) {
/* Switch to Mobile Menu when too long */
#menu { display:none; } /* Hide Main Menu */
#mobile-menu-but { display:block; float:right; margin:0 20px 0 0; height:50px; padding:5px 0; }
#mobile-menu-but a { float:right; }
.menu-txt { margin:10px 10px 0 0; float:right; }
#menu-mobile { width:100%; background-color:#000; text-transform:uppercase;
font-size:16px; font-family:"AvantGarde", "Helvetica Neue", Arial, Helvetica, sans-serif; } }

Instead of directly manipulating element styles, you can add and remove class values in order to change element appearance. The rules for the class(es) can be affected by media queries because they'll go right into the stylesheet.
Modern browsers provide the .classList API:
function toggle_menu(id) {
var e = document.getElementById(id);
if (e.classList.contains("showing"))
e.classList.remove("showing");
else
e.classList.add("showing");
}
Now, in your CSS, you can have:
#menu { display: none; }
#menu.showing { display: block; }
If you only want to show the menu when the screen is big, add this after those lines above:
#media screen and (max-width: 700px) { /* or whatever size you want */
#menu.showing { display: none; }
}
(There are other strategies for arranging rules in media queries, depending on what you're trying to do.

Rather than add and remove the inline style with e.style.display , use
var e = document.getElementById("someID");
e.className = "someClass";
The problem you have is your inline style is overriding your CSS. Inline style will always have this priority (unless !important I guess - not sure about that).

Here's a trick you can use to avoid JavaScript altogether:
#menu {display:none}
#secret_checkbox {position: absolute; left:-9999px}
#secret_checkbox:checked + #menu {display: block}
<label for="secret_checkbox">Click to open/close menu</label>
<input type="checkbox" id="secret_checkbox" />
<div id="menu">Hello!</div>
The label can be anywhere, the important thing is for the "hidden" checkbox to be immediately before the element it affects. This can make it a lot easier to change how things behave in CSS, plus it has the added benefit of working even if the user has JavaScript disabled ;)

Change background color of div using conditional statement

I have 2 divs side by side and by default one is hidden and one is visible.
I have a jQuery function which, when mouseenter the visible div, the hidden one shows. And when mouseenter again, it becomes hidden again. (This is for a login box)
However - I want the always visible div (the mouseenter target) to change color depending on what state the toggled div is in. So far, I can get it to change color upon first mouseenter but it won't change again after that.
Here is the code I have so far:
<script>
$(document).ready(function () {
$("#loginBox").hide();
$("#sideBar").show();
$('#sideBar').mouseenter(function () {
$("#loginBox").toggle("slide");
if ($('#loginBox').is(":visible")) {
$("#sideBar").css("background-color","blue");
} else if ($('#loginBox').is(":hidden")) {
$("#sideBar").css("background-color","yellow");
}
});
});
</script>
So it starts off in its default color (grey by the style sheet) and when mouseenters it loginBox becomes visible and the sideBar turns blue. But when mouseenters again, even though loginBox becomes hidden, the sideBar remains blue.
JSFiddle

You can put the check in the complete function of toggle
$(document).ready(function() {
$("#aside").hide();
$("#asidebar").show();
$('#asidebar').mouseenter(function() {
$("#aside").toggle("slide", function() {
var onOrOff = $('#asidebar').css("background-color");
if ($('#aside').is(":visible")) {
$("#asidebar").css("background-color", "blue");
} else if ($('#aside').is(":hidden")) {
$("#asidebar").css("background-color", "yellow");
}
});
});
});
#asidebar {
float: right;
/* top: -205px; */
position: relative;
/*
Editing purposes */
background-color: rgba(120, 120, 120, 0.5);
width: 25px;
/*min height of container */
height: 400px;
margin: 5px;
padding: 1px;
font-family: helvetica;
}
#aside {
float: right;
/* top: -205px; */
position: relative;
/*
Editing purposes
background-color: blue; */
width: 250px;
border-left-style: dashed;
border-color: rgba(120, 120, 120, 0.5);
/*min height of container */
margin: 5px;
padding: 0;
font-family: helvetica;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="asidebar">Mouse Over</div>
<div id='aside'>Slide box</div>

You are better off putting the styles on a class and toggling that instead. Something like
...
$('#sideBar').mouseenter(function () {
$("#loginBox").toggle("slide");
$("#sideBar").addClass("semanticallyNamedClassForBlue");
$("#sideBar").toggleClass("semanticallyNamedClassForYellow");
});
...
CSS:
#sideBar.semanticallyNamedClassForBlue {background: blue}
#sideBar.semanticallyNamedClassForYellow {background: yellow}
as per this jsfiddle adapted from user3787555's http://jsfiddle.net/3rQNb/3/
Explanation:
On load the sidebar is grey.
on first hover both the yellow and blue classes are added to the element, but as the yellow class is last in the css source, it wins the cascade.
on next hover, the yellow class is removed, so the blue now wins.
I added the id to the css rule to get the specificity up enough - as you know a #id beats a .class in the cascade
If you want to learn more, A List Apart's CSS articles and Remy Sharp's JQuery for designers may give you some joy. If you want to learn more on specificity look at star wars specificity super awesome

Dynamically positioning element on scroll

Goal
To have the page navigation positioned lower on the page when initially loaded. So that it looks like pictured below.
Background
I created a navigational element that is using Headroom.js to control its position. The point of the library is that it moves the desired navigational item out of view when a user is scrolling down so that you can see more content. Then the item shows up when you scroll back up to make it convenient to click on a link if that is what you needed to do.
Current State
I have this current demo on codepen.
That navigational item is at the top of the page but on a lower z-index. So not initially visible.
when you scroll down the element is out of view.
But when you scroll up, it is where it needs to be
Code
HTML
<nav id="page-menu" class="link-header header--fixed slide slide--reset" role="banner">
<ul>
<li>Products</li>
<li>Features</li>
<li>Testimonials</li>
<li>Cases</li>
</ul>
</nav>
CSS
#page-menu {
background-color: #BA222B;
list-style-type: none;
width: 100%;
z-index:10;
}
#page-menu ul {
list-style-type: none;
margin: 0;
position: absolute;
bottom: 5px;
right: 10px;
}
#page-menu ul li {
display: inline-block;
margin-left: 10px;
}
#page-menu ul li a {
text-decoration: none;
color: #fff;
}
.link-header {
background-color:#292f36;
height: 100px;
}
.header--fixed {
position:fixed;
z-index:10;
right:0;
left:0;
top:0px;
}
jQuery
(function() {
new Headroom(document.querySelector("#page-menu"), {
tolerance: 5,
offset : 150,
classes: {
initial: "slide",
pinned: "slide--reset",
unpinned: "slide--up"
}
}).init();
}());
Full demo on codepen.

Goal :
From what you are describing, you want the read navigation to appear as such on page load:
And move with the gray bar, but and down, as the user scrolls, until it cutoff point reaches the bottom of the gray bar. Then you want things to kick in, and have the red bar slide up and out of view, and then up and down depending on scroll. You want the transition to be smooth.
Method:
The thing to keep in mind for a smooth transition is that you have two states: A top state and a bottom state. You have to design both, you have to figure out the exact height to change over, and you have to make sure that they will be identical at that spot, so appear seamless.
Top State:
We don't need any sort of extra positioning here. We want it to be static in fact, as odd as that might sound.
Bottom State:
We want fixed positioning here. Since we want the changeover to occur right when the red bar touches the top of the window, your CSS in fixed-header is perfect already.
Changeover Height:
The header and the gray nav bar combined are 180px, so that number will be our change over.
Code:
1. Statechange
Lets work backwards and take the state change first. You will need to change from 150px to 180px in a lot of places. For example, your JS code:
Existing JS:
if ($(window).scrollTop() >= 150) {
...
(function() {
new Headroom(document.querySelector("#page-menu"), {
tolerance: 5,
offset : 150,
New JS:
if ($(window).scrollTop() >= 180) {
...
(function() {
new Headroom(document.querySelector("#page-menu"), {
tolerance: 5,
offset : 180,
And your header will need an updated height, or a removal of height entirely.
Existing CSS:
header {
height:150px;
position: relative;
z-index:30;
}
New CSS:
header {
position: relative;
z-index:30;
}
2. Top State
The big thing here messing you up is that for some reason the library you are using is applying .header--fixed and link-header on page load. I don't know how to prevent this, but we can just neutralize is by removing them from your CSS.
Remove This CSS:
.link-header {
background-color:#292f36;
height: 100px;
}
.header--fixed {
position:fixed;
z-index:10;
right:0;
left:0;
top:0px;
}
Second, we need to tweak the ul inside your red nav.
Existing CSS:
#page-menu ul {
list-style-type: none;
margin: 0;
position: absolute;
bottom: 5px;
right: 10px;
}
New CSS:
#page-menu ul {
list-style-type: none;
margin: 0 auto;
padding:0;
width:960px;
max-width:100%;
text-align:right;
}
3. Bottom State
Everything works really well here aleady, except that the fixed-header class is getting added to the gray nav as well. We need to tweak our jQuery selector bit.
Existing JS:
if ($(window).scrollTop() >= 180) {
$('nav#page-menu').addClass('fixed-header');
}
else {
$('nav#page-menu').removeClass('fixed-header');
}
NewJS:
if ($(window).scrollTop() >= 180) {
$('header nav').addClass('fixed-header');
}
else {
$('header nav').removeClass('fixed-header');
}
4. Misc Cleanup
Everything looks really good here, except that the lis inside our two navs don't line up. We need to fix some margin-right to bring them into line.
Existing CSS:
#page-menu ul li {
display: inline-block;
margin-left: 10px;
}
New CSS:
#page-menu ul li {
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
Finally, I noticed that there's a missing closing bracket in your HTML, in the gray nav. It's not hurting much, but it could:
<nav>
<ul>
<li>Dentists</li>
<li>Labs</li>
<li>Patients</li>
<ul> <--- ( Should be </ul> )
</nav>
End Result:
http://codepen.io/anon/pen/qIrhx