I've implemented the accepted answer to Change div content based on mouse hover on different divs across a lot of links, so I don't really want to go with another solution if it can be avoided. I'm trying to figure out one more piece of the puzzle though...
I can't seem to get it to where it defaults back to the original text of the content div when not hovering over an item.
<div id="content">
Stuff should be placed here.
</div>
<br/>
<br/>
<br/>
<ul>
<li onmouseover="hover('Apples are delicious')">Apple</li>
<li onmouseover="hover('oranges are healthy')">Orange</li>
<li onmouseover="hover('Candy is the best')">Candy</li>
</ul>
<script>
function hover(description) {
console.log(description);
document.getElementById('content').innerHTML = description;
}
</script>
You need to store the original text and bring it back when the mouse leaves.
var element = getElementById('content'),
storedText;
function hover(description) {
console.log(description);
storedText = element.innerHTML;
element.innerHTML = description;
}
function leave() {
element.innerHTML = storedText;
}
<div id="content">
Stuff should be placed here.
</div>
<br/>
<br/>
<br/>
<ul>
<li onmouseover="hover('Apples are delicious')" onmouseleave="leave()">Apple</li>
<li onmouseover="hover('oranges are healthy')" onmouseleave="leave()">Orange</li>
<li onmouseover="hover('Candy is the best')" onmouseleave="leave()">Candy</li>
</ul>
It is generally recommended to add event listeners in the JS code and not in the HTML, but put that aside for now.
i dont think in your code there was anything to make the content to go back to the default but i have made the least changes in your code to make the content to go back to default and i have used onmouseout event for that.
<div id="content">
Stuff should be placed here.
</div>
<br/>
<br/>
<br/>
<ul>
<li onmouseover="hover('Apples are delicious')" onmouseout="hover('Stuff should be placed here.')">Apple</li>
<li onmouseover="hover('oranges are healthy')" onmouseout="hover('Stuff should be placed here.')">Orange</li>
<li onmouseover="hover('Candy is the best')" onmouseout="hover('Stuff should be placed here.')">Candy</li>
</ul>
<script>
function hover(description) {
console.log(description);
document.getElementById('content').innerHTML = description;
}
</script>
You can achieve the same without any Javascript:
li::before { content: attr(data-text); }
li:hover::before { content: attr(data-text-hover); }
<ul>
<li data-text-hover="Apples are delicious" data-text="Apple"></li>
<li data-text-hover="Oranges are healthy" data-text="Orange"></li>
<li data-text-hover="Candy is the best" data-text="Candy"></li>
</ul>
Related
So essentially I want to keep this as simple as possible, meaning no jquery or bootstrap etc... just straight javascript, HTML and CSS. This is what I have so far
Javscript:
var menuOptions= document.getElementsByClassName("nav");
var hamburger= document.getElementById("nav-btn");
function myFunction() {
hamburger.onclick= menuOptions.style.visibility= 'visible';
}
HTML:
<HTML>
<button onclick="myFunction()">
<span id="nav-btn">
<image src="Menugreen.png" alt="collapsable menu"/>
</span>
</button>
<div class="nav">
<ul>
<li id="Programs"> Programs </li>
<li> T-Shirts </li>
<li id="About"> About </li>
</ul>
</div>
</HTML>
CSS:
.nav {
visibility: hidden;
}
Besides just giving me a solution I would highly appreciate it if you could explain why my current method does not work and why yours does. Thanks in advance!
Two problems:
getElementsByClassName() returns a list, not a single element (though the list may contain just a single element), and that list doesn't have a .style property. You can use menuOptions[0] to access the first (and in this case only) element in the list.
You don't want to say hamburger.onclick= inside your function, because that would be assigning a new onclick handler but your function is already being called from the onclick attribute of your button. (Also, if you were trying to assign a new click handler you'd want hamburger.onclick = function() { /* something */ }.)
So the minimum change to your existing code to get it to work would be to change this line:
hamburger.onclick= menuOptions.style.visibility= 'visible';
...to this:
menuOptions[0].style.visibility = 'visible';
In context:
var menuOptions= document.getElementsByClassName("nav");
var hamburger= document.getElementById("nav-btn");
function myFunction() {
menuOptions[0].style.visibility = 'visible';
}
.nav {
visibility: hidden;
}
<HTML>
<button onclick="myFunction()">
<span id="nav-btn">
<image src="Menugreen.png" alt="collapsable menu"/>
</span>
</button>
<div class="nav">
<ul>
<li id="Programs"> Programs </li>
<li> T-Shirts </li>
<li id="About"> About </li>
</ul>
</div>
</HTML>
If you want repeated clicks on the button to toggle the menu display on and off then you can test the current visibility:
menuOptions[0].style.visibility =
menuOptions[0].style.visibility === 'visible' ? '' : 'visible';
Expand the following to see that working:
var menuOptions= document.getElementsByClassName("nav");
var hamburger= document.getElementById("nav-btn");
function myFunction() {
menuOptions[0].style.visibility =
menuOptions[0].style.visibility === 'visible' ? '' : 'visible';
}
.nav {
visibility: hidden;
}
<HTML>
<button onclick="myFunction()">
<span id="nav-btn">
<image src="Menugreen.png" alt="collapsable menu"/>
</span>
</button>
<div class="nav">
<ul>
<li id="Programs"> Programs </li>
<li> T-Shirts </li>
<li id="About"> About </li>
</ul>
</div>
</HTML>
There are a few reasons why your current setup does not function:
Document#getElementsByClassName returns a collection, and you are treating the result like a DOM element. You need to access an index like [0] to get an actual element.
Your toggle button only works one way, because visibility is set to visible but never set back to none when clicked again.
In myFunction, hamburger.onclick should not be assigned to the expression you chose. I am not sure why you tried to assign another click handler, but in order to make that work you would have needed to set it to a function () { ... }.
Now for my advice:
Use CSS classes to control whether the menu is hidden or not, rather than messing around with the style property in your JS. You can use the classList property of DOM elements to .add(), .remove(), and .toggle() a specific class when myFunction is run. I have chosen to use toggle because I think that most suits your use case.
Use element.addEventListener instead of HTML attributes like onclick.
Snippet:
var menuOptions = document.getElementsByClassName("nav")[0]
var hamburger = document.getElementById("nav-btn")
hamburger.parentNode.addEventListener('click', function myFunction() {
menuOptions.classList.toggle('hidden')
})
.nav.hidden {
visibility: hidden;
}
<button>
<span id="nav-btn">
<img src="Menugreen.png" alt="collapsable menu"/>
</span>
</button>
<div class="nav hidden">
<ul>
<li id="Programs"> Programs </li>
<li> T-Shirts </li>
<li id="About"> About </li>
</ul>
</div>
I'm trying to get the company I'm at a Help Centre set up, using Zendesk.
I've managed to implement a sidenav, but I'm struggling to make it show different anchor links depending on the category of the Help Centre the user is on. Zendesk only allows you to edit the HTML of the category page template, and I'm unable to dynamically load in the links.
Can anyone please advise on how to show DIV_1, only if the page contains <li title="Using ProductName">? I've searched but can't seem to find anything relevant.
From there I'll do the same for the other sections in the same way (e.g. only show DIV_2 if the page contains <li title="Developer Portal".
For reference, I have access to the category's HTML template, the CSS and JS.
Thanks in advance!
<div class="container">
<nav class="sub-nav">
<ol class="breadcrumbs">
<li title="Help Centre">
Help Centre
</li>
<li title="Using ProductName">
Using ProductName
</li>
</ol>
<div id="DIV_1">
<ul id="UL_2">
<li id="LI_1">
Admin and Settings
</li>
<li id="LI_1">
Getting Started
</li>
<li id="LI_1">
Content Types and Sources
</li>
<li id="LI_1">
Content Management
</li>
<li id="LI_1">
Content Publishing
</li>
<li id="LI_1">
Apps
</li>
<li id="LI_1">
Analytics
</li>
<li id="LI_1">
Troubleshooting
</li>
</ul>
</div>
</div>
</div>
You can use the built-in DOM query methods to accomplish this. In this case, you'd want to combine an if condition with the query, something like so:
if (document.querySelector('li[title="Using ProductName"]')) {
// make #DIV_1 visible however you please here
document.querySelector('#DIV_1').display = 'block';
}
If the li with the title Using ProductName does not exist, #DIV_1 will stay invisible; if it does, it will be shown.
You can do a quick for loop check:
var items = document.getElementsByTagName('li');
for (var i = 0; i < items.length; i++) {
if (items[i].title == titleToCheckFor) { showElement(); }
}
You can fill in titleToCheckFor with the title you're looking for ("Using _____") and the showElement function would display the div, or you could just show the div right in the loop.
Using DOM query method querySelector you can search the target element, by default we set all div's hidden, and then we show only the required.
<style>
.module {
display:none;
}
</style>
<script>
// by default we show MODULE A else show module B
var module = "DIV_1";
if (document.querySelector('li[title="Developer Portal"]')) {
module = "DIV_2";
}
// we show the respective DIV
document.querySelector('.' + module).display = 'block';
</script>
<div class="module DIV_1" id="DIV_1">
...
</div>
<div class="module DIV_2" id="DIV_2">
....
</div>
You can achieve this via CSS classes.
SOLUTION 1:
This being the sample HTML:
<div id="Div_1" class="menu-div using-productname">
</div>
<div id="Div_2" class="menu-div help-centre">
</div>
<div id="Div_3" class="menu-div other-tab">
</div>
Now you should setup your css like:
.menu-div {
display: none;
}
So all menu divs are hidden by default when the page loads
Now when you move to some tab suppose "Using ProductName", all you need to do is
var title = "Using ProductName"; //Get the title
var className = title.split(" ").join("-").toLowerCase(); //Convert it to the correct class which matches with your Divs in the menu
document.querySelector(".menu-div").style.display = "none"; //Set all menu divs to hidden
document.querySelector("." + className).style.display = "block"; //Show the desired menu div
SOLUTION 2:
This being the sample HTML:
<div class="parent-div">
<div id="Div_1" class="menu-div">
</div>
<div id="Div_2" class="menu-div">
</div>
<div id="Div_3" class="menu-div">
</div>
Now you should setup your css like:
.parent-div .menu-div {
display: none;
}
.parent-div.using-productname #Div_1 {
display: block;
}
.parent-div.help-centre #Div_2 {
display: block;
}
.parent-div.other-tab #Div_3 {
display: block;
}
Now when you move to some tab suppose "Using ProductName", all you need to do is
var title = "Using ProductName"; //Get the title
var className = title.split(" ").join("-").toLowerCase(); //Convert it to the correct class which you will add to the parent
document.querySelector(".parent-div").className = "parent-div " + className; //Set the parent div class to the className - the css will take care of the rest!
NOTE - Also you should use different ids on your different LIs and A tags.
You can use jQuery in Zendesk Help Centers so
var test = $('.breadcrumbs').children(':contains(amy)')
if(test.length > 0) {
do something here like
$('#LI_1').hide();
}
It's kind of simple brute force, but it works.
I'm a beginner when it comes to javascript and I'm trying to write a script to hide a class when I hover over another class. I've written this piece of code however it isn't working as I'd like it to.Could someone give me some pointers as to why this code isn't working and some advice on how to get it to achieve the results I'm looking for.
$(document).ready( function () {
"use strict";
document.getElementsByClassName('nav-bar').onmouseover = function(){
document.getElementsByClassName('site-title').style.display="none";
};
document.getElementsByClassName('nav-bar').onmouseout = function(){
document.getElementsByClassName('site-title').style.display="inline";
};
});
edit
#Jonas
$(document).ready( function () {
"use strict";
document.getElementsByClassName('nav-bar').forEach(function(el){el.onmouseover = function(){
document.getElementsByClassName('site-title').forEach(function(el){el.style.display="none";}
);
};
}
);
document.getElementsByClassName('nav-bar').forEach(function(el){el.onmouseout = function(){
document.getElementsByClassName('site-title').forEach(function(el){el.style.display="inline";});
};});
});
this is your adapted code. I'm not sure why it isn't working have i done it correctly?
edit 2
<body>
<Header>
<div class="navigation-wrap">
<div class="logo"><img src="../images/logo2.jpg" alt="Lewis Banks Logo" title="Lewis Banks & Sons Ltd"></div>
<div class="navigation">
<nav class="nav-menu">
<ul class="clearfix" >
<li class="nav-button"><a class="nav-bar" href="../index.html">Home</a></li>
<li class="nav-button">
<a id="product-button">Products</a>
<ul id="product-list">
<li class="menu-dropdown2"> AC
<ul id="AC-sublist">
<li class="dropdown-content"><a href="../CSW1-Switch.html">CSW1 Switch (15mm)<a>
</li>
<li class="dropdown-content"><a href="../CSW2-Switch.html">CSW2 Switch (20mm)<a>
</li>
<li class="dropdown-content"><a href="../CSW10-Switch.html">CSW10 Switch (30mm)<a>
</li>
</ul>
</li>
<li class="menu-dropdown2"><a href="../DC-Products.html" >DC</a>
<ul id="DC-sublist">
<li class="dropdown-content"><a href="../Cartridge-Brush-Holders.html">Cartridge Brush Holders<a>
</li>
<li class="dropdown-content">Brush Holder Caps
</li>
<li class="dropdown-content">Extruded Brush Holders
</li>
<li class="dropdown-content">Pressed Brass Brush Holders</li>
<li class="dropdown-content">Aluminium Brush Rockers
</li>
<li class="dropdown-content">Pressed Brass Brush Rockers</li>
<li class="dropdown-content">Tachometer Brush Rocker
</li>
<li class="dropdown-content">Carbon Brushes
</li>
<li class="dropdown-content">Constant Force Springs
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-button"><a class="nav-bar" href="../Applications.html">Applications</a></li>
<li class="nav-button"><a class="nav-bar" href="../Old-and-New.html">Old & New</a></li>
<li class="nav-button"><a class="nav-bar" href="../About-Us.html">About Us</a></li>
</ul>
</nav>
</div>
</div>
</Header>
<div class="site-title">
<h1>Lewis Banks & Sons</h1>
<h3><q>Labor Omnibus Unus</q></h3>
<h4><i>Company motto since 1916</i></h4>
</div>
</body>
This is my html code, I apologize in advanced for the confusing state it is in this is the first website i've ever tried to to make and I've had to do a lot of trial and error and other acts of desperation when i came unstuck.
I have a top menu bar which has submenu's. I managed to do that using CSS.
The problem i have is as i hover over the sub-menus they overlap with the site title which makes the page look ugly. I don't want to move the site titel down so instead i'd like to remove it whenever you hover over the initial menu buttons. I want to to do this whilst maintaining the page structre (ie there's whitespace where the tite was).
It seems you are using jQuery. Why not use jQuery selectors and methods to achieve your goal. It is easier to read and understand. Take a look at the following pages for more information:
http://api.jquery.com/on/
https://api.jquery.com/mouseover/
https://api.jquery.com/mouseout/
Try this for example:
$(document).ready( function () {
$(document).on('mouseover', '.nav-bar', function() {
jQuery('.site-title').css('display', 'none');
});
$(document).on('mouseout', '.nav-bar', function() {
jQuery('.site-title').css('display', 'inline-block');
});
});
GetElementsByClassName returns a HTMLCollection. You need to loopover, and add to each:
document.getElementsByClassName('nav-bar').forEach(function(el){el.onmouseover = function(){
document.getElementsByClassName('site-title').forEach(function(el){el.style.display="none";});
};});
Like Dais mentioned in his answer, it looks like you are using jQuery so why not use the built in jQuery mouse events. Either that or you copied your code from somewhere and didn't realize that $ is a shortcut for jQuery and for your javascript to work you need to include jQuery. To include jQuery you need a statment similar to below in your html. This will include jQuery from google's content delivery network (CDN). There are other CDN's available including ones directly from jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
https://api.jquery.com/category/events/mouse-events/
Below is a working example using jQuery events and selectors.
$(document).ready(function() {
"use strict";
$('#site-title').mouseover( function() {
$('#site-title').hide(500);
});
$('#nav-bar').mouseleave( function() {
$('#site-title').show(500);
});
});
#site-title {
position:absolute;
background:red;
width:100%;
height:50px;
}
#nav-bar {
position:absolute;
background:green;
width:100%;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav-bar">I am the nav bar
<button>Nav1</button>
<button>Nav2</button>
<button>Nav3</button>
</nav>
<header id="site-title">I am the site title</header>
I have this html code
<div id="left-container" class="w3-container w3-left">
<div class="wordDiv w3-container w3-pale-green w3-leftbar w3-border-green w3-hover-border-red">
<h1>Give</h1>
<h3>Selected Definition:</h3>
<ul style="display:none;">
<li> offer in good faith </li>
<li> inflict as a punishment </li>
<li> afford access to </li>
</ul>
</div>
<div class="wordDiv w3-container w3-pale-green w3-leftbar w3-border-green w3-hover-border-red">
<h1>Up</h1>
<h3>Selected Definition:</h3>
<ul style="display:none;">
<li> to a higher intensity </li>
<li> to a later time </li>
<li> used up </li>
</ul>
</div>
</div>
<div id="right-container" class="w3-container w3-right"></div>
I want the user, once he click on one of the wordDiv's, to be able to see the potential definitions of that word in the right container (which are found in the "ul" element of each "wordDiv"), select one of the definitions, then I want to display the selected definition in the original wordDiv in the left-container.
You can found Jsfiddle Demo Here
A solution using jQuery. Updated Fiddle
$(function() {
$('.wordDiv').click(function() {
var txt = $(this).find('ul').html();
$('#right-container').html('<ul>' + txt + '</ul>')
})
})
Please check this fiddle
I have added li elements to another div based on the div which you are selected.
You can use the jQuery this variable in the click function, here is a working jQuery example of your request Updated Fiddle
It puts the li elements in the right div AND adds the onclick listener, which has the knowlege of its origin ;)
$('h1').click(function(){
var origin=$(this);
$(this).siblings('ul').children().click(function(){
$(this).parent().hide();
$(origin).parent().append(this);
$(this).replaceWith($('<div>' + this.innerHTML + '</div>'))
})
$(this).siblings('ul').show();
$("#right-container").append($(this).siblings('ul'));
})
$('ldi').click(function(){
$(this).parent().hide();
$(this).parent().parent().append(this);
$(this).replaceWith($('<div>' + this.innerHTML + '</div>'))
})
I have to make a dynamic menu in javascript, so I use onMouseOver and onMouseOut, but the problem is when I focus my mouse on line space, the menu dissapear because it think I'm no more in the div!
<script type="text/javascript">
function cacherSousMenu(menu)
{
if(menu == "ajout")
{
document.getElementById('sousMenuAjout').style.display = document.getElementById('sousMenuAjout').style.display=='none'?'block':'none';
document.getElementById('imgPlusMoinsAjout').src = document.getElementById('sousMenuAjout').style.display=='none'?'images/plus.gif':'images/moins.gif';
}
else if(menu == "inscrire")
{
document.getElementById('sousMenuInscrire').style.display = document.getElementById('sousMenuInscrire').style.display=='none'?'block':'none';
document.getElementById('imgPlusMoinsInscrire').src = document.getElementById('sousMenuInscrire').style.display=='none'?'images/plus.gif':'images/moins.gif';
}
}
<nav>
<ul>
<div id="ajouter" onmouseover="cacherSousMenu('ajout');">
<li class="titre">Ajouter <img src="images/plus.gif" id="imgPlusMoinsAjout" alt="Image Plus Moins"></li>
</div>
<div id="sousMenuAjout" onmouseout="cacherSousMenu('ajout');">
<ul>
<li>Un établissement</li>
<li>Une filière</li>
<li>Une UE</li>
</ul>
</div>
<div id="inscrire" onmouseover="cacherSousMenu('inscrire');">
<li class="titre">Inscrire <img src="images/plus.gif" id="imgPlusMoinsInscrire" alt="Image Plus Moins"></li>
</div>
<div id="sousMenuInscrire" onmouseout="cacherSousMenu('inscrire');">
<ul>
<li>Un nouvel étudiant</li>
<li>Un étudiant à une UE</li>
</ul>
</div>
<li class="titre">Afficher tous les étudiants</li>
<li class="titre">Aide</li>
<ul>
</nav>
So, how to correct that, maybe with CSS?
Thank!
I can't help but wonder if you should post a question (or look for one) on https://ux.stackexchange.com/ about menu behaviour, and in particular, hover states (which don't exist on pads and phones which are becoming more prolific). But to solve your technical issue...
It takes a lot more than just mouse over and mouse out to make a menu behave nicely. Most good menus allow a grace period for user error, meaning the mouse can leave the menu briefly. Again, to simply solve your technical issue of the menu flashing when you move your mouse:
You have DIVs and list items mixed up a little. I've added some bright colours to help clarify the elements, and converted the DIVs to list items for simplicity. I also refactored your JavaScript method to make it slightly less tightly coupled with your markup. I hope you find it useful.
<!doctype HTML>
<html>
<head>
<style>
.titre {background-color:red;}
.menuItemWrapper {background-color:green;}
</style>
</head>
<body>
<nav>
<ul id="ajouter" onmouseover="showMenu('sousMenuAjout','imgPlusMoinsAjout',true);" onMouseOut="showMenu('sousMenuAjout','imgPlusMoinsAjout',false);">
<li class="titre">Ajouter <img src="images/plus.gif" id="imgPlusMoinsAjout" alt="Image Plus Moins"></li>
<ul id="sousMenuAjout" class="menuItemWrapper" onMouseOut="hideMenu('sousMenuAjout');">
<li>Un établissement</li>
<li>Une filière</li>
<li>Une UE</li>
</ul>
</ul>
<ul id="inscrire" onmouseover="showMenu('sousMenuInscrire','imgPlusMoinsInscrire',true);" onMouseOut="showMenu('sousMenuInscrire','imgPlusMoinsInscrire',false);">
<li class="titre">Inscrire <img src="images/plus.gif" id="imgPlusMoinsInscrire" alt="Image Plus Moins"></li>
<ul id="sousMenuInscrire" onmouseout="cacherSousMenu('inscrire');" class="menuItemWrapper">
<ul>
<li>Un nouvel étudiant</li>
<li>Un étudiant à une UE</li>
</ul>
</ul>
<li class="titre">Afficher tous les étudiants</li>
<li class="titre">Aide</li>
</ul>
</nav>
<script type="text/javascript">
function showMenu(menuId, menuIconId, visible) {
var displayStyle, imageName;
if (visible) {
displayStyle = 'block';
imageName = 'images/moins.gif';
} else {
displayStyle = 'none';
imageName = 'images/plus.gif';
}
document.getElementById(menuId).style.display = displayStyle;
document.getElementById(menuIconId).src = imageName;
}
showMenu('sousMenuAjout', 'imgPlusMoinsAjout', false);
showMenu('sousMenuInscrire', 'imgPlusMoinsInscrire', false);
</script>
</body>
</html>
You can see this live on jsbin (doesn't work in jsFiddle for some reason):
http://jsbin.com/exakiz/2
PS. Sorry I switched some names to English; I don't speak or understand French. :(
It's hard to implement such menu using pure JS, because onmouseover/onmouseout events are fired when mouse move to the child element (in menu when your mouse moves from main element to submenu mouseout will fire). You should look for some implementation of mouseenter/mouseleave events.
But there is easier way - by using css only. Here is example: http://jsfiddle.net/ZjVGN/