We Keep Coding

trigger a CSS :hover with javascript by scrolling

I am working on a Website with fixed menu at the top of the Site. If you hover over the navigationbar it moves down to reveal the links.
The hover is realised with css classes.
The navigation should be shown completely, when you enter the site or scroll to the top.
I am trying to realise it using a javascript method which uses with the scroll progress.
$(window).scroll(function() {
var wS = $(this).scrollTop();
if (wS > 200){
alert('you have scrolled to the h1!');
$document.getElementById('awning').addClass('awning:hover');
$document.getElementById('nav').addClass('awning:hover #nav');
}
});
Does it make sense or is there a better way to do it?
The alert doesn't even show up

You cannot assign pseudo-classes like this. A pseudo-class is used to define a style of element when special state occurs (for example hovering over element, link being already visited) or element is somehow special( first of kind, even etc.).
You will have to create additional class in css like this:
#awning.revealed{ /* notice there is no space between selectors */
/*your css code goes here (same as in :hover)*/
}
And then just add class to element like this:
$document.getElementById('awning').addClass('revealed');

Please use the code below and click on the 2nd value (200)
$('.wi').on( "click", function() {
console.log('clicked');
var temp = $('.wi');
if (temp.hasClass('wi-celsius')) {
alert("Current is 'Celsius'... updating it to 'Fahrenheit!'");
var convertedTemp = parseInt(temp.text()) * 9 / 5 + 32;
temp.text(convertedTemp);
temp.removeClass('wi-celsius');
temp.addClass('wi-fahrenheit');
}else {
alert("Current is 'Fahrenheit'... updating it to 'Celsius!'");
var convertedTemp = (parseInt(temp.text()) -32)/ (9/5);
temp.text(convertedTemp);
temp.removeClass('wi-fahrenheit');
temp.addClass('wi-celsius');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul id="list">
<li>100</li>
<li> <i class="wi wi-celsius">200</i></li>
<li>300</li>
</ul>
Is that what you need?

JavaScript, create div with link and then remove by clicking said div

I'm trying to create a vanilla javascript that creates one div or more when clicking on a specific link. When said div has appeared I want to be able to remove it by clicking on that div.
So far I've successfully made it so that a div is created when clicking a link.
The HTML:
<div class="content">
Click me!
<div id="target"></div>
</div>
And the JavaScript:
(function() {
'use strict';
var createTarget = document.getElementById('target');
var link = document.getElementById('create-div');
function createDiv() {
var content = '<div id="clickme"><div class="main"><div class="secondary"></div></div></div>';
createTarget.innerHTML = content;
}
link.addEventListener("click", function() {
createDiv();
});
})();
What I can't figure out is how to remove the div by clicking on it after it has been created? Bear in mind that I am new and trying to learn vanilla JavaScript for now. I know about jQuery and all the other libraries, but I'd rather just learn the basic JavaScript to begin with.
Through the power of Google I've found out about "removeChild" but I am yet to find out how to get it to work on a div by clicking it.
All help is appreciated!

Try this out :
createTarget.addEventListener("click", function() {
var elem = document.getElementById('clickme'); // to get the id of the div that dynamically created
elem.parentElement.removeChild(elem); // function removes specified child node of your specified element.
});
see this working FIDDLE

jQuery slideToggle for multiple divs

What I am trying to do is have four links that each will display and hide a certain div when clicked. I am using slideToggle and I was able to get it to work with really sloppy and repetitive code. A friend of mine gave me a script he used and I tried it out and finally was able to get something to happen. However, all it does is hide the div and wont redisplay. Also it hides all the divs instead of just the specific one. Here is a jsfiddle I made. Hopefully you guys can understand what I am trying to do and help! Thanks alot.
Here is the script I'm using.
$(document).ready(function () {
$(".click_me").on('click', function () {
var $faq = $(this).next(".hide_div");
$faq.slideToggle();
$(".hide_div").not($faq).slideUp();
});
});
http://jsfiddle.net/uo15brz1/

Here's a link to a fiddle. http://jsfiddle.net/uo15brz1/7/
I changed your markup a little, adding id attributes to your divs. The jquery, gets the name attribute from the link that's clicked, adds a # to the front, hides the visible div, then toggles the respective div. I also added e.preventDefault to stop the browser from navigating due to the hash change. As an aside, javascript don't require the $ prefix.
$(document).ready(function () {
$(".click_me").on('click', function (e) {
e.preventDefault();
var name = $(this).attr('name');
var target = $("#" + name);
if(target.is(':visible')){
return false; //ignore the click if div is visible
}
target.insertBefore('.hide_div:eq(0)'); //put this item above other .hide_div elments, makes the animation prettier imo
$('.hide_div').slideUp(); //hide all divs on link click
target.slideDown(); // show the clicked one
});
});

Welcome to Stack Overflow!
Here's a fiddle:
http://jsfiddle.net/uo15brz1/2/
Basically, you need a way to point to the relevant content <div> based on the link that's clicked. It would be tricky to do that in a robust way with your current markup, so I've edited it. The examples in the jquery documentation are pretty good. Spend some time studying them, they are a great way to start out.

History.js replaces the wrong content

I have the following initiation in my JavaScript; I’m always using the code shown in github by the way. The full code can be seen here
var
/* Application Specific Variables */
contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first',
$content = $(contentSelector).filter(':first'),
contentNode = $content.get(0),
$menu = $('#menu,#nav-sub,.nav,.nav-sub:first').filter(':first'),
activeClass = 'active selected current youarehere open',
activeSelector = '.active,.selected,.current,.youarehere, .open',
menuChildrenSelector = '> li,> ul > li',
/* Application Generic Variables */
$body = $(document.body),
rootUrl = History.getRootUrl(),
scrollOptions = {
duration: 800,
easing:'swing'
};
The problem lies in :
contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first',
and in:
$menu = $('#menu,#nav-sub,.nav,.nav-sub:first').filter(':first'),
When the menu clicked in .nav, has to change the .page-content.
When the menu is clicked in .nav-sub, the content has to be replaced in .tab-content
The problem is, both menu's change .page-content, instead of just either tab-content or page-content.
Any idea how to change this?

Fix your content select
Change from
contentSelector = '.tab-content,.page-content,article:first,.article:first,.post:first'
TO
contentSelector = '.tab-content, .page-content, .article:first, .post:first'

History.js isn't replacing the wrong content; ajaxify-html5.js (the script you are using) is doing exactly as it was designed:
If the user clicks on an internal link (and the link does not have the no-ajaxy class), then the script intercepts the click, stops the browser from loading the page, and initiates an Ajax request for the page.
Note that this includes all internal links on the page, not just ones in the menu.
When the Ajax request is complete, the script replaces the content on the current page with the content from the response (and does some other clever things like set the activeClass on the right menu item, update the page title and run scripts from the response).
The script uses the first element found with contentSelector as the "content" node. This does not depend on which link the user clicked on.
If you want to "ajaxify" only menu links, you can change (line 95):
$body.ajaxify();
to call .ajaxify() on your menu element instead.
If you want to update a different element with the new content, you can change (line 145):
$content.html(contentHtml).ajaxify().css('opacity',100).show(); /* you could fade in here if you'd like */
to update another element instead.

html background ad

I have seen a lot of websites which "wrapper" width is 960px. As a background image they have an image which is clickable (some kind of advertise) and the whole webpage is over that image, like on this site.
Can you give me tutorial or something on that ?

Tom's code was a huge help, but I needed pointer cursor for this type of ad, but not for all the site, so I came up with this solution:
$('body').bind('click', function(e) {
if ($(e.target).closest('#container').size() == 0) {
alert('click');
}
}).bind('mouseover', function(e) {
if ($(e.target).closest('#container').size() == 0) {
$(this).css('cursor','pointer');
} else {
$(this).css('cursor','default');
}
});

In the first place you put the ad image as the website background then basically you have to capture the click on the whole body and check if it was in-or-outside of the page content. To do that you have to check if the event target element have the content wrapper (or wrappers if there are multiple) as one of its parent nodes - if not it means the click was outside of the page content.
If you'd like to do it here on StackOverflow you could do it with this bit of code.
$('body').bind('click', function(e){
if(!$(e.target).closest('#content').length) {
alert('ad outside content clicked');
}
});
Feel free to try it in your javascript console - SO is using jQuery so it will work - when you will click outside of the content area (at the edges of the screen) you will get alert that ad was clicked.
You'd obviously have to replace the alert with any kind of callback you'd have for your commercial - opening a new web page or whatever
Hope that helps
Tom
ps.
Keep in mind that this example is using jQuery for simplicity not native JS so you'd need the library for it to work.