Develop Reference

Cursor continues to display - despite it being set to none, and only when over a div. Angular2/Javascript

So I'm having a really strange issue with the cursor. Basically, my menu allows keyboard navigation, so whenever a key is pressed, it will hide the cursor.
This works great (left screenshot) but when I have the mouse immediately over the menu itself, the cursor does not hide, despite the body showing inline style of cursor: none.
http://i.imgur.com/1VvS3H2.png
Here is the code that hides the cursor:
onKey(event: KeyboardEvent) {
var key = event.keyCode;
//User hit an arrow key, so we can assume they want to navigate using the arrows.
//Remove the mouse, until the mouse is moved again.
if (key == 38 || key == 40 || key == 8 || key == 13)
{
document.body.style.cursor = 'none';
this.mouseHidden = true;
}
...
}
Here is the code that returns it:
onMouseMove()
{
if (this.mouseHidden) {
this.mouseHidden = false;
document.body.style.cursor = 'default';
}
}
And here is my menu template:
<div id="menuContainer" *ngIf="!this.displaySplash" (mousemove)="onMouseMove($event)">
<div id="menu" class="cl-effect-1">
<div id="menuHeader">
<h1>{{gameName}}</h1>
</div>
<div id="menuContents" #menuContainer>
<div id="homeMenu" *ngIf="this.displayHome" #homeMenu>
<button class="mainmenu-button" id="play-button" (click)="pressedPlay()" (mouseover)="onMouseEnter($event)">Play</button>
<button class="mainmenu-button" id="music-button" (click)="pressedMusic()" (mouseover)="onMouseEnter($event)">Music</button>
<button class="mainmenu-button" id="credits-button" (click)="pressedCredits()" (mouseover)="onMouseEnter($event)">Credits</button>
<button class="mainmenu-button" id="exit-button" (click)="pressedBack()" (mouseover)="onMouseEnter($event)">Exit</button>
</div>
<div id="soundMenu" *ngIf="displaySound" #soundMenu>
<button class="mainmenu-button" id="mute-button" (click)="pressedMute()" (mouseover)="onMouseEnter($event)">Mute</button>
<button class="mainmenu-button" id="volUp-button" (click)="pressedVolUp()" (mouseover)="onMouseEnter($event)">Volume +</button>
<button class="mainmenu-button" id="volDown-button" (click)="pressedVolDown()" (mouseover)="onMouseEnter($event)">Volume -</button>
<button class="mainmenu-button" id="back-button" (click)="pressedBack()" (mouseover)="onMouseEnter($event)">Back</button>
</div>
<div id="creditsMenu" *ngIf="displayCredits" #creditsMenu>
<p class="mainmenu-text">Author: Kilo Mike Software</p>
<p class="mainmenu-text">License: Open Source</p>
<p class="mainmenu-text">Music License: Public Domain</p>
<button class="mainmenu-button" id="back-button" (click)="pressedBack()" (mouseover)="onMouseEnter($event)">Back</button>
</div>
</div>
</div>
I'm not sure what else to include, because I honestly have no idea as to why this is happening.
Any help would be much appreciated!
Cheers.
Edit: Oh, you can view the problem here: https://steamboatt.github.io/gravity/
Source Code: https://github.com/Steamboatt/gravity

You seem to be wanting to hide the cursor in your entire website.
I'd like to start by outlining this is regarded, in general, as a poor design decision, in terms of usability and accessibility. First of all, this can be done entirely with CSS and it is the recommended way to go about it. So, first, please remove all scripts related to hiding the cursor as they will most likely interact with the method I'm about to propose, rendering it ineffective.
body {
cursor: none;
}
should do the trick, in theory.
But most browsers, exactly for the reasons outlined above, have stronger rules applying to html elements designed for pointer interaction, when it comes to the cursor property. Namely, for <button>s. This is why you will need a stronger CSS rule applying. As in:
body *, body button {
cursor: none !important;
}
If you don't want this applying on all your elements, feel free to replace body with a more specific selector.

Looks like you need some CSS:
body.hide-cursor * {
cursor: none;
}
document.body.className = 'hide-cursor';
//or
document.body.className = '';

Pure JavaScript replacement for :hover

My goal, essentially, is to have the CSS :hover replaced by JavaScript. The reason is that I need a loop to be executed on a variable number of divs that will be nested inside the parent div that should react upon :hover.
The problem, however, is that I have no idea how to target just the div being hovered over without hard-coding in specific IDs - something that I will not be able to do once applied to my project, a tumblr theme.
HTML
<div id="motherbox">
<div class="middlebox">
<div class="childbox">One</div>
<div class="childbox">Two</div>
<div class="childbox">Three</div>
</div>
</div>
<div id="motherbox">
<div class="middlebox">
<div class="childbox">One</div>
<div class="childbox">Two</div>
<div class="childbox">Three</div>
<div class="childbox">Four</div>
<div class="childbox">Five</div>
</div>
</div>
CSS
#motherbox {
width:30%;
height:100px;
margin:100px auto;
background-color:gray;
}
JavaScript
document.getElementById("motherbox").onmouseenter = function(){
this.style.backgroundColor = 'blue';
};
document.getElementById("motherbox").onmouseleave = function(){
this.style.backgroundColor = "gray";
};
JSFiddle
My question is - how do I cause divs with the same class or id to react individually (or, rather, not all at once) on hover using javascript, rather than CSS?
Thank you for your time.

Basically you can select elements having a particular class using getElementsByClassName.
Here is a working demo.
var elements = document.getElementsByClassName('childbox');
for(var i=0; i<elements.length; i++) {
elements[i].onmouseleave = function(){
this.style.backgroundColor = "blue";
};
}

So use instead of getElementById this:
http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
And provide classess for your divs, where you want have that event.

javascript how to paste "as plain text" in multiple fields or elements

I try to paste text into multiple fields, but the formatting is only cleared on the first element, not the second etc.
I found this question https://stackoverflow.com/a/12028136/3955607 which works fine, but again, on multiple elements it doesnt work.
So I got this HTML
<div style="color:red">Some <em>rich</em> <span style="font-size:2em">HTML</span></div>
<br />
<div style="border:1px solid red" contenteditable></div>
<br />
<div style="border:1px solid red" contenteditable></div>
and this javascript:
document.querySelector("div[contenteditable]").addEventListener("paste", function(e) {
e.preventDefault();
var text = e.clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, text);
});
I have this fiddle http://jsfiddle.net/tdjuc8es/
just copy and paste the Some rich HTML- text and see what happens
Someone who can help me out?

document.querySelector yields one element. You want to use document.querySelectorAll to get all matching elements, and then iterate over that collection.
var editors = document.querySelectorAll('div[contenteditable]');
for(var i = 0, l = editors.length; i < l; i++) {
editors[i].addEventListener('paste', myCustomPasteFunction);
}
Fiddle

If you're used to jQuery, you might think that document.querySelector() fulfils the same kind of function; however, it only returns the first element that matches the selector; instead you should have used document.querySelectorAll() and then used iteration to add your event handlers.
Since you've tagged it as jquery, you could also consider this:
$("div[contenteditable]").on("paste", function(e) {
e.preventDefault();
var text = e.originalEvent.clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, text);
});
div[contenteditable] {
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="color:blue">Some <em>rich</em> <span style="font-size:2em">HTML</span></div>
<br />
<div style="border:1px solid red" contenteditable></div>
<br />
<div style="border:1px solid red" contenteditable></div>
I'm using e.originalEvent here because the one that jQuery passes you in the event handler is a wrapper object.

It is beacause the document.querySelector only return the first matched element.
You can use document.querySelectorAll instated.
Wish it can help you.

Button remains active when re-added to DOM

I've been experiencing a really bizarre issue with IE9 and IE10 (Win7 only).
If an HTML element (button, span, anchor) has an attached click listener which removes itself (or it's container) from the DOM--and then at a later point some other event (e.g: reset) adds the element back, the element still remains in ':hover' state, even without the mouse hovering on the element.
WHY does IE 9 & IE10 (Win7) do this? Also, is there a workaround, without resorting to some setTimeout async call?
Take a look at this JSBin: IE hover/active on remove/add
Code from JSBin
<div id="outer" style="border: 2px solid green; padding: 10px;">
<div id="container" style="border: 2px solid black; padding: 5px;">
<button id="button">Hide Me</button>
</div>
</div>
<button id="reset" style="margin-top: 20px">Reset</button>
And the JS:
var outer = document.getElementById('outer');
var container = document.getElementById('container');
var button = document.getElementById('button');
button.addEventListener('click', function() {
outer.removeChild(container);
}, false);
var reset = document.getElementById('reset');
reset.addEventListener('click', function() {
outer.appendChild(container);
}, false);

I'm leaning towards this being a bug in IE were if the element is removed from the DOM the styles aren't being refreshed correctly. However it seems that if you remove the container div as per below the :hover issue is fixed in IE.
I know you said without the use of setTimeout, but I haven't been able to make something else work.
button.addEventListener('click', function() {
window.setTimeout(function() {
outer.removeChild(container);
}, 1);
}, false);

replace onclick in a string

I have a textarea that contains several images. All images have an id and I want to loop through all of those images and check if the need an onclick event (depends on id)
If the do not need a onclick event I need to check if the have one and remove it. If the need I I still need to remove it and add another (because the value of the onclick could be changed)
How can I do this?
<img id="slideShowImage_3" style="border: 1px solid black; cursor: pointer;" title="3" onclick="loadSlideShow('7','open','3','','2')" src="uploads/nieuws/7/1363788115.jpg" alt="3" />
<img id="slideShowImage_3" style="border: 1px solid black; cursor: pointer;" title="3" src="uploads/nieuws/7/1363788115.jpg" alt="3" />
http://jsfiddle.net/wmrqk/4/

Try this:
function cleanCode() {
var container = $('<div>' + $('#text1').val() + '</div>');
container.find('img').removeAttr('onclick');
$('#text2').html(container.html());
}
Demo

May not be cool, but you can do something like
function cleanCode() {
var els = $($('#text1').val());
els.each(function(i, v){
var $this = $(this);
if($this.attr('id') == 'slideShowImage_1'){
$this.removeAttr('onclick')
}
});
console.log($('<div></div>').append(els).html())
}
Demo: Fiddle

For a very simple HTML like the one you have here you could do this :
$('#text2').html($('#text1').html().replace(/onclick="[^"]*"/g,''));
But be very careful : parsing HTML in regex fails in general cases so you can only do that if you know where your HTML comes from and what it is like.
If your HTML is well formed, you can also do this :
var e = $('<div>'+$('#text1').val()+'</div>');
e.find('img').attr('onclick','');
$('#text2').html(e.html());
Demonstration
In any case, be aware that this couldn't be used as a security measure.