We Keep Coding

JavaScript Submenu Not Persisting

I'm creating an additional tab on a menu dynamically (let's call this new tab, Watch), and all was going pretty well including the submenu that showed up once the new tab was hovered over. I looked at articles on event bubbling and took a look at other examples, but couldn't find a solution to my issue.
Whenever I hover over Watch, the submenu appears, but when I try to hover from Watch to its submenu, the submenu disappears. I need the submenu to persist when a user hovers over Watch or the submenu, and the submenu should only disappear once the user hovers out of either. Just to note, I cannot use CSS for my solution. I've attached my current code below with comments:
//PREPEND AS FIRST CHILD
var prependChild = function(parent, newFirstChild) {
parent.insertBefore(newFirstChild, parent.firstChild)
}
//DECLARING VARS
var navMenu = document.getElementsByClassName('navGlobal-list')[0];
categoryExplorer = document.getElementsByClassName('categoryExplorer')[0];
//CREATING NEW TAB
var exploreTab = document.createElement('li');
exploreTab.className = 'navGlobal-category';
//CREATING NEW SEARCH FORM
var searchHtml = ['<div class="searchProgram searchProgram--categoryExplorer">',
'<div class="searchProgram-container">',
'<input type="search" class="form-control form-control--light form-control--searchProgram" placeholder="Search programs" value="">',
'</div>',
'</div>'].join('');
//CREATING NEW WATCH CATEGORY EXPLORER CONTENT
var watchCategoryExplorerContent = document.createElement('div');
watchCategoryExplorerContent.className = 'categoryExplorer-content target-watch-content';
watchCategoryExplorerContent.innerHTML = searchHtml;
prependChild(categoryExplorer, watchCategoryExplorerContent)
var watchLink = document.createElement('a');
watchLink.setAttribute('href','/watch');
watchLink.innerHTML = 'watch'.toUpperCase();
exploreTab.appendChild(watchLink);
navMenu.appendChild(exploreTab); //ADDED 'WATCH' TO THE NAVIGATION
//CHANGE CLASSES ON HOVER
exploreTab.addEventListener("mouseover", function() {
exploreTab.className = 'navGlobal-category navGlobal-category--open';
categoryExplorer.className = 'categoryExplorer categoryExplorer--open';
watchCategoryExplorerContent.className = 'categoryExplorer-content categoryExplorer-content--open target-watch-content';
}, false);
exploreTab.addEventListener("mouseleave", function() {
exploreTab.className = 'navGlobal-category';
categoryExplorer.className = 'categoryExplorer';
watchCategoryExplorerContent.className = 'categoryExplorer-content target-watch-content';
}, false);

A potential (layout-dependent) way to keep the menu open would be to make it a child of the tab - that way, provided there is no space between the tab and the hover menu, you can hover from one to the other without creating a mouseleave event on the tab.
Another solution that is not layout-dependent would be to add some delay between the initial mouseleave event and the submenu closing. I've done something like this using jQuery before, but the same thing should be possible without it.
$('.navGlobal-category').mouseleave(function(){
setTimeout(
function(){
if(!isHovered($('.navGlobal-category')[0])){
exploreTab.className = 'navGlobal-category';
categoryExplorer.className = 'categoryExplorer';
watchCategoryExplorerContent.className = 'categoryExplorer-content target-watch-content';
}
}, 200);
});
function isHovered(e){
return ((e.parentNode.querySelector(":hover") ||
e.querySelector(":hover")) === e);
}
Credit to zb' for the isHovered solution: https://stackoverflow.com/a/14800287/5403341

For the non-layout solution #B1SeeMore suggests you don't actually need a delay.
Here is a working demo: https://jsfiddle.net/jw22ddzk/
<div id="one" class="menuitem"></div>
<div id="two" class="menuitem" style="display: none;"></div>
var elems = document.getElementsByClassName("menuitem");
for (var i = 0; i < elems.length; i += 1) {
elems[i].addEventListener("mouseleave", function () {
console.log("leave", this.id);
document.getElementById("two").style.display = "none";
});
elems[i].addEventListener("mouseenter", function () {
console.log("enter", this.id);
document.getElementById("two").style.display = "";
});
}
The trick is that mouseenter fires for two even if mouseleave hides the element. Just remember to show the element again. A likey explanation is that the mouseenter and mouseleave events spawn in pairs. So mouseenter happens regardless of the effects of mouseleave.
Note that this only works if the elements are beside eachother with pixel accuracy.
Another note: I notice that you're using mouseover and mouseleave. I wouldn't recommend doing that. There are two event pairs for detecting hovers: mouseenter/leave and mouseover/out. They are different events. They differ specifically in that mouseover/out will trigger also for child elments. My recommendation is that you don't interchange the pairs or you might get unexpected behaviour.

Javascript: Display clickable images at the end of each paragraph

$(document).ready(function(){
function createPopup(event){
$('<div class="popup"><img src="mysrc.jpg" img style="opacity=0.5; width:50px; height:50px;"></img></div>').appendTo('body');
positionPopup(event);
};
function positionPopup(event){
var tPosX = 950;
var tPosY = event.clientY+25;
$('div.popup').css({'position': 'absolute', 'top': tPosY, 'left':tPosX});
$('#test').attr('ydown', parseInt(tPosY)+ parseInt(add));
};
var elements = document.getElementsByTagName('cposs');
for(var i = 0; i < elements.length; i++){
var imagetest = document.createElement("img");
imagetest.src = "mysrc.jpg";
elements[i].onmouseover = function(){
this.style.background = 'Green';
createPopup(event);
}
elements[i].onmouseout = function(){
this.style.background = '';
}
var ycoor= $('#test').attr('ydown');
$( "#test" ).append( "<a href=http://www.google.com><img src='mysrc.jpg'</img></a>" );
}
});
</script>
<div id="test" ydown="<?php echo $ydown; ?>" xdown="<?php echo $xdown; ?>">
There is then multiple paragraphs with <cposs></cposs> tags and this allows the text to be highlighted when the mouse is hovered over and creates a popup image to the right of the paragraph. I also have for each counted <cposs></cposs> an image that is displayed in the test div.
There is a couple things I was hoping I would be able to accomplish:
On page load, I would like an image to be displayed at the end of each <cposs></cposs> text. Instead of fixed coordinates.
I would like these images to execute a function when clicked on.(Tried adding the "onclick" attribute but said the function was not defined)
Eventually, I would like the clickable images to cause the text between the cposs tags to highlight. Similar to what I have now, but instead of mouse over, its a click event.
EDIT:
I have tried to add an onclick attribute to the appended image but once the image is clicked, says the function is not defined.
I am unsure on how to get the coordinates of the cposs tags. I am confused on if I am able to use offset and or position function in javascript. I have attempted to use both and have not succeeded.
I guess all I really need to know if how to get the end coordinates of the cposs tags and how to give each displayed image a clickable function
I am a big fan of jsfiddle!
Any sort of help is greatly appreciated!
Thanks in advance.

Here's a jsFiddle example: https://jsfiddle.net/sn625r3z/14/
To make freshly added elements clickable you should be using jQuery's ".on" function and pass an event to it. Something like this:
$('img.new-image').on('click', function(){
$(this).parent().css({background: 'green'});
});
In the jsFiddle example I positioned images with CSS. But if you want to get the coordinates to position the image at the end of the block I would do it like this:
$('cposs').each(function(){
var el = $(this);
var width = el.width();
var height = el.height();
var newElement = $('<img class="new-image" src="'+imagetest.src+'" />');
el.append(newElement);
newElement.css({top: height+"px", left: width+"px"});
});
Hope this helps.

execute a jQuery slideUp event when screen width exceeds a certain value

I am making a responsive site in which I add event listeners to blocks to slide down. If I resize my browser window to become wider I want to execute a slideUp to this blocks so that they're all neatly slided up. Does anyone know how to achieve this?
My jquery function:
function mobileFunctions(){
if($(window).width() < 600){
$(".replace-url").attr('href', '#');
$(".list-categories li").removeClass('click');
categoryActive();
}
}
function categoryActive(){
$(".title-click").click(function(){
var e = $(this).parent("li");
var i = ".list-categories li";
var c = "active";
var d = ".content-category";
if(!$(e).hasClass(c)){
$(i).removeClass(c);
$(i).children(d).slideUp("slow");
}
$(e).children(d).slideDown("slow");
$(e).addClass(c);
});

I believe you are looking for this?
$('window').resize(function() {
var someValue = 1024;
if ($('window').width() > someValue) {
// function here...
}
});

Why is my image not loading?

At http://blajeny.com I have:
jQuery('body').click(function(event_object)
{
spark(event_object.pageX, event_object.pageY);
});
function spark(x, y)
{
console.log('Spark called.');
var image_object = new Image();
image_object.onLoad = function()
{
image_object.style.position = 'absolute';
image_object.style.zIndex = 1;
image_object.style.top = y;
image_object.style.left = x;
}
image_object.src = '/img/spark.png';
}
The intended effect, at this stage, is to load an image at the X and Y where the user clicked. (I want to do other things as well, like animate it, but right now I'm trying to get the image to show up where the user clicked.)
The javaScript console shows that the handler is being called, however I am not seeing what I expect, a hazy blue circle immediately below and to the right of the point where the mouse was clicked.
What can/should I do differently so it loads a fresh image below and to the right of the clicked coordinates?
Thanks,

As far as I know, the onLoad should be onload
var image_object = document.createElement('img');
image_object.onload = function() { // Note the small onload
// your code
}
// Also, append the image_object to DOM
document.body.appendChild(image_object);

I don't see you appending the image to DOM that's probably why you're not seeing it
$('body').append($(image_object));

I agree, first create an element with the "img" tag, assign the src value to it, and append it to the current div (in this case its the body), like so
var imgTag = document.createElement("img");
imgTag.src = '/img/spark.png';
document.body.appendChild(imgTag);
Hope this helps.

You never append the image to the DOM, that's why you can't see it.
You can do
document.body.appendChild(image_object);
You must also replace onLoad by onload and specify the top and left position with an unit :
image_object.onload = function() {
image_object.style.position = 'absolute';
image_object.style.zIndex = 1;
image_object.style.top = '100px';
image_object.style.left = '100px';
}
Demonstration

initialize mousemove event only after click

I am writing a plugin that creates a select marquee box when the mouse is clicked on a canvas div. So far i've written the plugin with the click() and mousemove() events adjacent to each other in the code (i dont know of any way to embed events inside other events). But this becomes a problem when the mouse moves over the canvas before a click. Does anyone know how to initialize a mousemove handler with a click?
Here is the code i have written so far:
$.fn.createBox = function(id) {
$(id).css({
cursor:'crosshair'
});
$(id).click(function(e) {
var clickLocX = e.pageX;
var clickLocY = e.pageY;
$('<div>').attr({
'class':'newBox',
'ctr':'on'
})
.css({
top:clickLocY,
left:clickLocX
})
.appendTo(id);
});
//Mousemove must be initialized only AFTER the click. HOW TO DO THIS?
$(id).mousemove(function(e){
var XpageCoord = e.pageX;
var YpageCoord = e.pageY;
window.Xloc = XpageCoord;
window.Yloc = YpageCoord;
var boxOffset = $('.newBox').offset();
var boxHeight = YpageCoord - boxOffset.top;
var boxWidth = XpageCoord - boxOffset.left;
$('.newBox').css({
height:boxHeight + 'px',
width:boxWidth + 'px'
});
});
}

Just set the mousemove handler from within the click handler and use a flag to determine whether or not it has already been set to avoid adding it multiple times.
EDIT: An example
assignedMoveHandler = false;
$(id).click(function(e) {
// other stuff...
if(!assignedMoveHandler) {
$(id).mousemove(function(e) {
// mouse move handling code...
});
assignedMoveHandler = true;
}
}
I use a global here which you may or may not care about, I lookup the jquery object twice, etc., so it could be cleaned up a bit, but this is the general idea. When the click handler fires you check to see if you've assigned a mousemove handler yet. If not, assign it.