Develop Reference

Hide Element when hover Element Javascript

I have a DIV that needs to be displayed/hide whenever i hover a menu item.
Here it is my website: Website
The Blug light section should be displayed only when I hover the Photo Booths menu on the header.
I have tried the following code on JSFiddle which it works but when i use it on my site it doesn't work
<script>
let test = document.getElementByClassName(".menu-item.menu-item-7912");
test.addEventListener("mouseover", function( event ) {
document.getElementById('test2').style.display = 'none';
});
test.addEventListener("mouseleave", function( event ) {
document.getElementById('mega-menu-customized').style.display = 'block';
});
</script>
I have tried using getElementByClassName but without success. Any ideas of how to make it work?

Are you getting DOM node in test variable, one problem I can see in your code is:
let test = document.getElementsByClassName(".menu-item.menu-item-7912");
Should be:
let test = document.getElementsByClassName("menu-item, menu-item-7912");
We do not use dot before class name and multiple classes can be separated by comma like:
let test = document.getElementsByClassName("class1, class2, class3");

Your issue is in the header element. On scroll, the style property of the document header is changing. Look:
sorry for the bad quality, upload size is maxed at 2MB
Without getting into too much detail, one thing that I see is that the height of the header is being reduced to only contain the main header. When the larger blue subheader is visible, part of that is because the style.height of the header is made to be much larger. Additionally, the first child of the header is a div with id 7905, and that seems to be what you need to target to modify the opacity of the larger blue header. You need to target that div:
const blueBannerContainer = document.getElementById('7905')
But your event handlers will also need to account for the height of the header element. display: block won't really help you here.

jQuery remove or hide all svg on the canvas

I want to remove or hide the svg I double click on.
var draw = SVG('output').size(1000, 500);
var table = draw.circle(50)
.fill('#00ff0000')
.stroke('black')]
.center(50, 50);
table.attr("class", "table");
$("svg").on('dblclick',function(event){
$(".table").hide();
});
var desk = draw.rect(50,50)
.fill('green')
.stroke('black')
.move(100,0);
desk.attr("class", "desk");
$("svg").on('dblclick',function(event){
$(".desk").hide();
});
var chair = draw.rect(50,50)
.fill('green')
.stroke('black')
.move(200,0);
desk.attr("class", "chair");
$("svg").on('dblclick',function(event){
$(".chair").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
<div id="output"></div>
I want to hide the one that I double click on, but now the result is that, all of them are hidden if I double click any one of them. Even if I double click the blank space of canvas, all of the SVG images are also hidden.

When you write $("svg"), that targets every single svg element on the page.
When this code runs $("svg").on('dblclick',function(event){ $(".table").hide(); }); for example,
every SVG on the page gets the "dblclick" event to hide ".table". To solve this, instead of globally selecting all svg elements, use CSS selectors https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors to only grab the svg related to the class you give it (e.g. maybe you want $("svg.table").on('dblclick') or something like that)

Getting raw HTML and re-rendering it as HTML

I'm creating a script to rewrite the local version of the ETrack system my college uses as it's horrific, and I have a bit of an issue with formatted text. You see, there's a div on this system with the class .visitFeedback, and in this Div it has loads of <p> tags. I want to move these paragraphs into a scrollable div due to the paragraphs overflowing normally. The only issue is, these paragraphs have HTML styling within them (<strong> etc.). I want to reserve this formatting and just add it into a scrollable Div. So far I've managed to move it over, but all the methods I've tried so far return stuff like [object HTMLParagraph] instead of the text I want. So far I've tried .get(), .html(), .text(), and a few others. Can you please help? The relevant stuff is below:
var feedbackTxt;
$('.visitFeedback p').each(function(){
if ($(this).hasClass('info'))
{
}
else
{
feedbackTxt += $(this).text();
$(this).remove();
}
});
$('.visitFeedback').append('<div style="overflow-y: scroll;">' + feedbackTxt + '</div>');

Why not add overflow-y: scroll to elements with the .visitFeedback class?
$('.visitFeedback').css('overflow-y', 'scroll');

javascript click image display

What I'm trying to do is, when one of six divs is clicked, a separate div will have 3 specific divs appear in it. Each of the original six divs have three similar but different divs related to it.
http://jsfiddle.net/petiteco24601/hgo8eqdq/
$(document).ready(function () {
$(".talkbubble").mouseout(function(){
$(".sidebar").show();
});$
$(".talkbubble").click(function(){
$
How do I make it so that when you click a "talkbubble" div, a different "sidebar" div appears with all its contained elements, and when you mouseout, the first talkbubble div automatically activates?

Here is a demo of how to do this: http://jsfiddle.net/n1xb48z8/2/
The main part of this example is some javascript that looks like this:
$(document).ready(function(){
showSideBar(1);
$('.expander').click(function(){
var sidebarIndex = $(this).data('sidebar-index');
showSideBar(sidebarIndex);
});
$('#Container').mouseleave(function(){
showSideBar(1);
});
});
function showSideBar(index){
$('.sidebarContent').hide();
$('.sidebarContent[data-index="' + index + '"]').show();
}
.data('some-name') will get you the attribute data-some-name="" on the specific element, this is a html 5 attribute and if you do not want to use it you can instead give each of the elements their own class names such as:
<div class="sidebarContent subBarContent_1">
<!-- content -->
</div>
and use the '.subBarContent_1' as your jquery selector instead. You would then also have to have some sort of data attached to your clickable divs to identify which one you wanna show, you could use a hidden field to do that like:
<input type="hidden" class="subContentSelector" value="subBarContent_1" />
The javascript for that looks like this:
$(document).ready(function(){
showSideBar(1);
$('.expander').click(function(){
var sidebarSelector = $(this).find('.subContentSelector').val();
showSideBar(sidebarSelector );
});
$('#Container').mouseleave(function(){
showSideBar('subBarContent_1');
});
});
function showSideBar(selector){
$('.sidebarContent').hide();
$('.sidebarContent.' + selector).show();
}
Ps. the overflow:hidden css is because chrome was messing up the placement of the sidebar content otherwise... oh chrome, you silly goose

How to dynamically add text to title when mouse is over?

I have map with poly areas, lots off them and every area has title when my mouse pointer is over. How to dynamically add text to title ?
Can I fetch title before show by default and append new text ?
Explanation:
Add to hardcoded title inside html new random text.

If you mean the title attribute. You can change it dynamically this way:
$('div').hover(function () {
this.title = 'new title';
});
DEMO
However, if you are modifying the title while it's already shown by the browser, you will notice that the tooltip message will not update. I have tried different ways including swapping the current element with a cloned element (that has a different title) and programmatically trigger mouse events but it's seems there's no way to make it refresh.

$('.class_of_title').hover( function(){
$(this).append('added title');
});
Probably you are looking for Hover Jquery Function

You can use CSS pseudoelement
.myDiv {
//whatever
}
.myDiv:hover:after {
content: "some added text";
display: inline-block;
}