i wanna create a HOVER event for meta "a" in this code in order to change its background color but it doesnt seem to work, i dont really know what im missing, here it is:
document.addEventListener("DOMContentLoaded", function() {
$("#admin_symbol").hover(function(){
$("#header_div2").css("background-color","black");
},
function(){
$("#header_div2").css("background-color","#222222");
}
);
$("#sub_menu_admin").hide();
$("#admin_symbol").click(function(){
$("#sub_menu_admin").slideToggle();
})
<!-- i create it here -->
$(".class_admin").hover(function(){
$(this).css("background-color","#cccccc");
}
,
function(){
$(this).css("background-color","white");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header">
<div id="header_div1">
Quảng trị hệ thống
</div>
<div id="header_div2">
<ul>
<li id="admin_symbol"><span id="admin_welcome"> Xin chào: Admin</span></li>
<ul id="sub_menu_admin">
<li id ="admin_prolife"><a class="class_admin" id ="admin_a1" href="#"><img id="admin_prolife_symbol" src="https://cdn3.iconfinder.com/data/icons/user-with-laptop/100/user-laptop-512.png">  Prolife</a></li>
<li id="admin_changepw"><a class="class_admin" id ="admin_a2" href="#"><img id="admin_changepw_symbol" src="http://simpleicon.com/wp-content/uploads/setting2.png">   Đổi mật khẩu</a></li>
<li id="admin_logout"><a class="class_admin" id ="admin_a3" href="#"><img id="admin_logout_symbol" src="https://cdn4.iconfinder.com/data/icons/basic-ui-elements/700/012_power-512.png">  Log out</a></li>
</ul>
</ul>
</div>
</div>
In Case this could help :
+My full project: https://jsfiddle.net/HiepNguyen/do7nsyr5/93/
i did try create a hover event with CSS but no luck.
i appreciate every help.
[Update]: i have figured out that when i use my code on jsfiddle it runs fine, but when i run it on local, the sub menu items will not change its background color as i want, still dont know why.
Related
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>
This question already has answers here:
How to disable HTML links
(16 answers)
Closed 6 years ago.
I have a simple bootstrap wizard. I want to disable the next navigation link based on some condition. Can someone please tell me how to do it using jQuery or CSS or any other method.
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search</li>
<li>Item Details</li>
<li>Add SPR</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display: none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
Thanks
the below code should work.
Basically it detects when the tab has changed, then it removes any disabled attribute that might exist. Then depending on the tab clicked there is an if statement that sets if the link can be clicked. After that if a disabled link is clicked, simply do nothing.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href");
$(".wizard a").removeAttr("disabled");
if(target == "#tab3"){
$(".next").attr("disabled","disabled");
}
else if(target == "#tab1"){
$(".previous").attr("disabled","disabled");
}
});
$(".wizard a").on("click", function(event){
if ($(this).is("[disabled]")) {
event.preventDefault();
}
});
Update: Use .prop('disabled',true) instead of .attr('disabled','disabled')
without seeing the rest of your code it's challenging to give an ideal answer for your situation, but you should be able to set a Boolean and check that before allowing the Next button.
You can also apply some CSS to make the button LOOK disabled as well.
var nextOK = true;
$('#mybutt').click(function(){
$('#nextA').prop('disabled',true).css({'color':'red'}); //display:none, or whatever.
nextOK = false;
});
$('#nextA').click(function(e){
if (nextOK) window.location.href = 'http://google.com';
else alert('Button disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search
</li>
<li>Item Details
</li>
<li>Add SPR
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First
</li>
<li class="previous">Previous
</li>
<li class="next last" style="display: none;">Last
</li>
<li class="next"><a id="nextA" href="#">Next</a>
</li>
</ul>
</div>
<button id='mybutt'>Disable Next Button</button>
With javascript in the browser, you need to wait before the Document Object Model has completely loaded before calling some functions that manipulate the HTML.
You can achieve that by adding a simple document.ready function.
You can then add your condition in the function direcly, or any other code manipulating the HTML.
And lastly, by adding an id to the element you want to use, it would make your life much more easier.
Here is a sample of what it could look like:
document.ready = function() {
//Your condition
if(42 >= 1){
//Select the element and make it point to a void
$('#nextLink').attr('href', 'javascript:void(0)');
}
}
Using javascript:void is a really cross browser solution and works of on older versions (like good old IE).
I create a menu with ajax load. I have 4 zones and each zone have states. What i want is on hover on zone, i need to display all states in that zone. I write following code
HTML
<ul class="zoneLevel">
<li id="1" onmouseover="get_states_list(this.id);">East Zone
<span id="stateContainer" style="display:none;">States</span>
</li>
<li id="2">West Zone</li>
<li id="3">North Zone</li>
<li id="4">South Zone</li>
</ul>
JAVASCRIPT
<script>
function get_states_list(zone_id) {
//alert(zone_id);
var last_slug_a1 = $(".homeLeftContainer .single:last").attr("id");
$('span#stateContainer').html('<img src="img/loader.gif">');
$.post("modules/frontend/ajax/load_state.php?action=get&zone_id="+zone_id,
function(data){
if (data != "") {
$("span#stateContainer").html(data);
}
});
$(".stateContainer").css("display", "block");
$(".stateHederMenu").css("display", "block");
}
</script>
everything's good.
Problem started when i mouse hover to state (which i get with ajax file), it again call get_states_list(this.id) function. Can you please point the error.
It's because again you are hovering the li, the actual span is inside the li and hence the function is triggered again. So just use another tag maybe <a>,<p>,<span> or anything after li and close the word. so it wont trigger again unless you mouse over to the word.
<ul class="zoneLevel">
<li id="1" >
<a onmouseover="get_states_list(this.id);">East Zone</a>
<span id="stateContainer" style="display:none;">
States
</span>
</li>
<li id="2">West Zone</li>
<li id="3">North Zone</li>
<li id="4">South Zone</li>
</ul>
Example with jQuery
$('.zoneLevel li').one('mouseover',function (){
get_states_list($(this).attr('id'));
})
And fiddle for this situation fiddle
I am really stuck on this. I have a dropdown menu called "Example" that contains 2 submenus "submenu1" and "submenu2". When either of the 2 is clicked, it will contain an image thumb which will be displayed in lightbox style. But as of now both thumbs are displayed and this is not what I want because the final web page will contain hundreds of images. Is there a way to make the images appear only when one sub-menu is clicked, according to the code below. Thanks
<!DOCTYPE html>
<head>
</head>
<body>
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">CATEGORIES</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle"
>BAPTISM
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
BOY CLOTHING
<ul class="dropdown-menu">
<li><a href="#filter" data-option-
value=".boy" tabindex="-1">Clothing</a></li>
</ul>
</li>
<li class="dropdown-submenu">
GIRL CLOTHING
<ul class="dropdown-menu">
<li><a href="#filter" data-option-
value=".girl" tabindex="-1">Clothing</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</nav>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- gallery starts here -->
<li class="item-thumbs span3 boy"><!-- Fancybox - Gallery Enabled
- Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="boy"
title="" href="_include/img/work/full/boy_clothing.jpg">
<span class="overlay-img"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/boy_clothing.jpg" alt="">
</li>
<li class="item-thumbs span3 girl">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="girl"
title="" href="_include/img/work/full/girl_clothing.jpg">
<span class="overlay-img"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/girl_clothing.jpg"
alt="">
</li>
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
</body>
</html>
WOW I can't believe I found the solution after so many days by adding just a simple word. Didn't have to mess with javascript at all. Actually in the external .js file of the website I was told by a code developer to add the following: filter: '.foobar' See the final result below $container.isotope({
// options
animationEngine: 'best-available',
itemSelector : '.item-thumbs',
filter: '.foobar',
layoutMode : 'fitRows'
});
Here is what I would do:
I try and keep the logic simple, then you can just use something similar on your site :)
(Please S.O. Correct me if I am wrong here!)
CSS:
Give your submenus an ID
JavaScript:
// 2 event listeners that will run a function when the submenu is clicked:
var sub_menu_1 = document.getElementById( "submenu1" );
sub_menu_1.addEventListener("click", DISPLAY_menu_1 , false);
var sub_menu_2 = document.getElementById( "submenu2" );
sub_menu_2.addEventListener("click", DISPLAY_menu_1 , false);
function DISPLAY_menu_1 () {
// Do whatever CSS you need here, I simply make the entire DIV 'visible':
sub_menu_1.style.visibility = 'visible';
// For good measures, lets make submenu2 'invisible':
sub_menu_2.style.visibility = 'hidden';
}
function DISPLAY_menu_2 () {
// Same in Reverse
sub_menu_2.style.visibility = 'visible';
sub_menu_1.style.visibility = 'hidden';
}
EDIT:
Whew! This took a while.. Sorry about that!
Check out this example:
I basically made 3 versions for you to try out.
Simply click the Edit this Pen button to check the code!
Example
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/