Develop Reference

Hide div permanently once closed regardless of page reload

I am after some help if at all possible.
I would like it so that once someone has clicked the X it wont re show the parent div when the page is reloaded or the user navigates to another page with the same popup.
I have the code below for where I started and hope I am only a little off!
Thanks in advance for any help :)
$(".banner-cta-close").click(function() {
$("body").addClass("header-banner-hide");
});
$(document).ready(function() {
if (sessionStorage["PopupShown"] != 'yes') {
ShowDialog(true);
e.preventDefault();
}
});
$("#btnClose").click(function(e) {
HideDialog();
e.preventDefault();
sessionStorage["PopupShown"] = 'yes'; //Save in the sessionStorage if the modal has been shown
});
function ShowDialog(modal) {
$('#div_with_text').hide(); // this or use css to hide the div
$('#div_with_text').delay(5000).slideDown('slow');
if (modal) {
$("#div_with_text").unbind("click");
} else {
$("#div_with_text").click(function(e) {
HideDialog();
});
}
}
function HideDialog() {
$("#div_with_text").hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div_with_text">
<div class="container">text
<div class="bannerbuttonhover" style="background: #2f358f;
color: #fff;
padding: 6px 12px;
display: inline-block;
margin-left: 20px;
border-radius: 2px;
cursor: pointer;">Sign Up now</div>
<div class="banner-cta-close">X</div>
</div>
</div>

If you have an App Server, you could send a message back to the server to tell the server not send the code for the dialog on reload. But if not, you could use localStorage (shown here)
$(document).ready(function() {
if (!window.localStorage || !window.localStorage.getItem('NoPopup')) {
ShowDialog(true);
e.preventDefault();
}
});
$("#btnClose").click(function(e) {
HideDialog();
e.preventDefault();
if (window.localStorage) window.localStorage.setItem("NoPopup","true");
});

As #ControlAltDel mentioned , you can avoid sending its code from the server.
Otherwise, If you want to do it in the front-end you can simply use cookies ... You can find how to do it with javascript in here.
Depending on the cookie value, you can either show this div or not.

Change css site-wide on click

What I'm trying to do is display two different menus based on an option that is selected.
In my snippet you can see I have option a and option b
.option-a, .option-b {
text-transform: uppercase;
display: inline-block;
}
.option-a:hover, .option-b:hover {
text-decoration: underline;
}
.option-a-content {
display: block;
}
.option-b-content {
display: none;
}
<div class="option-a">
Option A
</div>
<div class="option-b">
Option B
</div>
<br>
<br>
<div class="option-a-content">
This is the contents of A
</div>
option-a-content is set to display: block and option-b-content is set to display: none;
I want to make it so when you click 'Option B' it changes the css of option-a-content to display: none and it to display: block
Edit: for clarification, my issue is that I can get the css to change on click, however when I navigate away from the page, it reverts back to default.

Here's a simple example of storing the state in localstorage:
$(function(){
$(".option-toggle").on("click", function(){
//get the href of the clicked item. This is the id of the element we wish to show
var selectedOptionID=$(this).attr("href");
//hide all option-content elements
$(".option-content").attr("aria-hidden",true);
//show the one we want
$(selectedOptionID).attr("aria-hidden",false);
//remember the active one in localstorage
localStorage.setItem("selectedOptionID", selectedOptionID);
});
//onload, read from local storage and trigger a click on the appropriate option:
var selectedOptionIdFromStorage = localStorage.getItem("selectedOptionID");
if(selectedOptionIdFromStorage){
//trigger a click on the select-option having a href equal to selectedOptionIdFromStorage:
$(".option-toggle[href='"+selectedOptionIdFromStorage+"']").trigger("click");
}
});
https://jsfiddle.net/jvsnphmn/3/

Remove class from <a> button after pressing another <a> button

I'm trying to create a site, on which you can download a file by pressing an button. The thing is, that I want people to click another button first to subscribe to a youtube channel and THEN to be able to download the file. So, I have to get rid of the disabled class on the download button after pressing the subscribe button. Here below is my code, what am I doing wrong?
EDIT: Tried all the answers now, none did work. I'm getting this error, what does that mean?
Uncaught ReferenceError: $ is not defined
at index.html:23
Line 23 is
$('#sub').on('click',function(event){
$('#sub').on('click',function()){
$('#dl').removeClass('disabled');
});
.disabled {opacity: 0.8; cursor: not-allowed;}
.size-3 {font-size: 16px;}
.btn {
font: 100%/1.1 "Quicksand", sans-serif;
background-color: rgba(0,0,0,0.3);
border: 2.2px solid #ecf0f1;
color: #ffffff;
padding: 12px 62px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: none;
font-size: 20px;
margin: 3px 6.9px;
cursor: pointer;
transition-duration: 0.4s;
}
<a id="sub" href="#" class="btn size-3">Subscribe to ZERO</a>
<a id="dl" href="#" class="btn size-3 disabled">Download Exyther</a>

jsFiddle: https://jsfiddle.net/qrc3qm2e/
I have added extra code to check if the button shouldn't be clickable, if you need a jQuery answer please follow this link https://jsfiddle.net/qrc3qm2e/1/
Javascript
var subElement = document.getElementById("sub");
var dlElement = document.getElementById("dl");
subElement.onclick = function(event)
{
dlElement.classList.remove('disabled');
dlElement.removeAttribute('disabled');
};
dlElement.onclick = function(event)
{
if(dlElement.className.indexOf('disabled') > -1)
{
event.preventDefault();
return;
}
};
HTML
<a id="sub" href="#" target="blank" class="btn size-3">Subscribe to ZERO</a>
<a id="dl" href="#" target="blank" class="btn size-3 disabled" disabled="disabled">Download Exyther</a>

This makes your code an error: function()) << double close
correct JS
$('#sub').on('click',function(event){
event.preventDefault();
$('#dl').removeClass('disabled');
});

https://codepen.io/jacobweyer/pen/JNzgJE?editors=1111
Here's a codepen of the issue
$('#sub').on('click', function(event){
if (event.preventDefault) {
event.preventDefault();
}
$('#dl').removeClass('disabled');
});
You didn't close the function, but also you can add event into the function. This will pass the click event into your jquery.
With the click event you can actually prevent the page from jumping moving as well by preventing the default action on the a tag.

You can help by keeping your example really really simple. We don't need to know about your font for example. : )
You probably want to use a disabled property - or that AND style that a bit with CSS. here's how to do that. - if you want to use a link - then the download will be its default behaviour - so you shouldn't have to prevent it - but see #JacobW 's about that. You'd likely not want the URL in the markup - if you are really trying to dissuade them from getting the file until subscribing. If you can't switch out the button for the link - and see the concept, I'm sure you will at some later date. : ) Good Luck!
JavaScript - and disabled property
https://jsfiddle.net/sheriffderek/3t0pn6gv/
markup
<button class='one'>one</button>
<button class='two' disabled>two</button>
style
button:disabled {
opacity: .3;
}
script (not jQuery for #Canvas)
var signupButton = document.querySelector('button.one');
var downloadButton = document.querySelector('button.two');
signupButton.addEventListener('click', function() {
downloadButton.disabled = false;
});
with jQuery and CSS class - (not actually disabled... but looks so)
https://jsfiddle.net/sheriffderek/wyx1od9g/
markup
<button class='one'>one</button>
<button class='two disabled'>two</button>
style
.disabled{
opacity: .2;
}
script
$('button.one').on('click', function() {
$('button.two').removeClass('disabled');
});

How do I make the dropdown menu not being down when you enter the website?

When you enter my website (goerann.com) the dropdown register-box is down by default.
If I click in Register, the register-box toogles it visibility as I want, but it doesn't start hidden by default.
$(document).ready(function() {
$('#signup').click(function() {
$('.signupmenu').slideToggle("fast");
});
});
I want it to only show when you click on it. How can I make this happen?
Here's my jsfiddle (http://jsfiddle.net/bdv2doxr/)

Since you're already using the $(document).ready event, you can hide the menu there:
$(document).ready(function() {
$('.signupmenu').hide();
$('#signup').click(function() {
$('.signupmenu').slideToggle("fast");
});
});
And here is your fiddle updated.

You need to make two changes, both involving the removal of display: block. When you toggle this div, it will make the display block. Therefore, you can initialize it as display: none.
Change this:
<div class="signupmenu" style="display: block;">
to this:
<div class="signupmenu">
And also change this:
.signupmenu {
background-color: #FFF;
display: block;
...
to this:
.signupmenu {
background-color: #FFF;
display: none;
...
Updated fiddle here

Click Propagation failing in Jquery

For part of the site I'm working on, I have a set of sidebars that can pull out. To have them hide when the users are done with them, I've set up a div with a click event (see below) so that whenever the user clicks somewhere outside of the sidebar, the sidebar closes. The problem that I'm running into, however, is that the click event handler is grabbing the event, running its method, and then the click event seems to stop. I've tried using return true and a few other things I've found around here and the internet, but the click event just seems to die.
$('.clickaway').click(function() {
$('body').removeClass(drawerClasses.join(' '));
return true;
});
EDIT: Here is a fiddle with an example: https://jsfiddle.net/2g7zehtn/1/
The goal is to have the drawer out and still be able to click the button to change the color of the text.

The issue is your .clickaway layer is sitting above everything that's interactive, such as your button. So clicking the button, you're actually clicking the layer.
One thing you could do is apply a higher stacking order for elements you want to interact with, above the .clickaway layer. For example, if we apply position: relative, like this:
.show-drawerHotkey .ColorButton {
position: relative;
}
The element will now be in a higher stacking order (since it comes after the clickaway, and we've applied no z-index to clickaway)
Here's a fiddle that demonstrates: https://jsfiddle.net/2g7zehtn/5/

Using this somewhat famous SO answer as a guide, you can bind to the $(document).mouseup(); event and determine whether certain "toggling" conditions apply:
[EDIT] - Example updated to illustrate clicking a link outside of the containing div.
// Resource: https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it
var m = $('#menu');
var c = $('#menuContainer');
var i = $('#menuIcon');
i.click(function() {
m.toggle("slow");
});
$(document).mouseup(function(e) {
console.log(e.target); // <-- see what the target is...
if (!c.is(e.target) && c.has(e.target).length === 0) {
m.hide("slow");
}
});
#menuIcon {
height: 15px;
width: 15px;
background-color: steelblue;
cursor: pointer;
}
#menuContainer {
height: 600px;
width: 250px;
}
#menu {
display: none;
height: 600px;
width: 250px;
border: dashed 2px teal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm a link outside of the container
<div id="menuContainer">
<div id="menuIcon"></div>
<div id="menu"></div>
</div>