I know there's several other threads with similar questions answered although I believe my question is slightly different.
Within my navigation the page you are currently on has a bottom border on the nav link. I'm trying to use Jquery to make it so that when you hover over any of the other links all borders are removed except for a new border on the hovered link. So within the example in JSFiddle when I hover over "About" the underline on "Home" would be replaced with an underline on "About" and then returned to "Home" when the mouseleaves.
http://jsfiddle.net/6Ucmq/
Anybody have any suggestions? All help greatly appreciated!
$(document).ready(function() {
$(".navigation a").hover(
function() { $(this).removeClass("hoverEffectSelect"); }
function() { $(this).addClass(".hoverEffect"); },
function() { $(this).removeClass(".hoverEffect"); }
);
});
Try
$(document).ready(function () {
var $home = $(".navigation a.hoverEffectSelect");
$(".navigation a").hover(function () {
$home.removeClass("hoverEffectSelect");
$(this).addClass("hoverEffectSelect");
},function () {
$(this).removeClass("hoverEffectSelect");
$home.addClass("hoverEffectSelect");
});
});
Demo: Fiddle
No jQuery necessary: JSFiddle
The idea is to apply the border-bottom to the active element and to the hovered one, but when the entire navigation is hovered over it should hide the border from the active element.
HTML:
<div class="headingTop">
<div class="navigation">
<a class="hoverEffect active" href=".html">HOME</a>
<a class="hoverEffect" href=".html">ABOUT</a>
<a class="hoverEffect" href=".html">PROJECTS</a>
<a class="hoverEffect" href="r.html">CONTACT</a>
</div><!-- DIV navigation -->
</div><!-- DIV headingTop -->
CSS:
.navigation a {
color: black;
text-decoration: none;
font-size: 20px;
font-family: 'Roboto Condensed', 'Alef', sans-serif;
margin-left: 20px;
border-bottom: 0px solid transparent;
}
.hoverEffect {
transition: border-bottom 300ms linear;
}
.navigation:hover>.active {
border-bottom: 0px solid transparent;
}
.hoverEffect.active, .navigation>.hoverEffect:hover {
border-bottom: 2px solid #EBCD37;
}
Try:
$(".navigation a").hover(function() {
$(".navigation a").css('border-width', '0');
$(this).css('border', '3px solid black');
});
In this case you will remove the borders first, then set it as you want.
You can do like this:
$(document).ready(function () {
var index = $('a.hoverEffectSelect').index();
$(".navigation a").hover(function () {
$(".navigation a").removeClass("hoverEffectSelect");
$(this).addClass("hoverEffect");
}, function () {
$(this).removeClass("hoverEffect");
$('.navigation a').eq(index).addClass('hoverEffectSelect');
});
});
Fiddle Demo
Try this
$(document).ready(function () {
var olda = $('.navigation a.hoverEffectSelect').index();
$(".navigation a").hover(function (olda) {
$('.navigation a').removeClass("hoverEffectSelect");
$(this).addClass("hoverEffect");
}, function () {
$('.navigation a:eq(' + olda + ')').addClass("hoverEffectSelect");
});
});
DEMO
Related
so i have a menu and i add a font awesome icon on each parent menu.
and if they click the icon it will show slide down animation to show their child menu.
currently my code is like this
on css
li {
a {
border-bottom: solid thin $color-green;
#include font-size(1.2);
padding: 5px 0px;
}
.sub-menu {
display: none;
list-style: none;
padding: 0;
a {
padding: 5px 20px;
display: block;
}
}
&.menu-item-has-children {
a {
&::after {
content: '\f055';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
float: right;
}
&::before{
content: '\f056;';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
float: right;
}
}
}
}
on my php file( im using wp)
<div id="navbar-main-menu" class="collapse navbar-collapse">
<?php
if (has_nav_menu('primary_navigation')) :
wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav top-menu ']);
endif;
?>
</div>
<!--/.nav-collapse -->
i want to jquery active only on max resolution 767, so my script is like this.
but i dont know how to target the after and make specifict code so when i click 1 parent link it didnt trigger the other parent link to show their child menu.
var resizeTimer;
$(window).resize(function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if ($(window).width() <= 767) {
$('.menu-item-has-children a::after').click(function() {
$('a').slideToggle();
});
} else {
}
});
});
this is my progress now
please help
Use this keyword instead of targeting a element.
var resizeTimer;
$(window).resize(function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if ($(window).width() <= 767) {
$('.menu-item-has-children a').click(function() {
$(this).slideToggle();
});
} else {
}
});
});
On a separate note why are you using a timer to check the width. I am not sure if this is hindering with your code or not. If the above code doesn't work, please create a JSfiddle and share the link so that I can have a better look.
Update
Pseudo element doesn't work with jquery selector. Updated the code for the same. But this may not be complete solution OP is looking for.
I have a code to make bs nav, but I don't understand how to make submenu always open without clicking menu name.
This is the code:
http://jsfiddle.net/6hrmodok/2/
and please answer this question with the new code.
To make the submenu always open in bootstrap navbar, you just need to add a class "open" like this <li class="dropdown open"> this will make your bootstrap's navbar submenu always open and it will toggle also.
.gw-nav-list>li.always-active>a,
.gw-nav-list>li.always-active>a:hover,
.gw-nav-list>li.always-active>a:focus,
.gw-nav-list>li.always-active>a:active {
background-color: #fff;
color: #2574A9;
font-weight: bold;
font-size: 13px;
}
.gw-nav-list>li.always-active:before {
display: inline-block;
content: "";
position: absolute;
left: 0px;
top: -1px;
bottom: 0;
z-index: 1;
border: 2px solid #2574A9;
border-width: 0 0 0 5px;
}
.always-active .gw-submenu,
.gw-nav-list>li.always-active .gw-submenu {
display:block;
}
And for JavaScript;
$('.gw-nav > li:not(.always-active) > a').click(function () {
....
Updated fiddle
you can open the submenu on page load with simple jquery code as below in your script file.
var pageload = function()
{
$(".gw-nav > li").each(function ()
{
var checkElement = $(this);
var ulDom = checkElement.find('.gw-submenu')[0];
if (ulDom != undefined) {
checkElement.addClass('active');
checkElement.find('ul').slideDown(300);
return;
}
});
}();
check the fiddler here.
http://jsfiddle.net/o1jw4txg/
Three elements need to be activated when hovered. These elements are also used in different divs and share the same elements and classes. I am using JavaScript to achieve this.
The problem is when hovering over div 1, it also activates div 2 and 3. Probably because they share the same elements.
How can I activate them individually when hovering?
$(function() {
$(".link")
.hover(
function() {
$(".link").css('color', 'red', 'text-decoration', 'none');
$(".box").css('border-bottom', '4px solid #183c94');
$("span").css('opacity', '1');
},
function() {
$("link").css('color', '#000000');
$(".box").css('border-bottom', '4px solid #cfcfcf');
$("span").css('opacity', '0');
});
});
.box {
width: 300px;
height: 30px;
background: #f1f1f1;
text-align: center;
}
span {
height: 10px widtth: 10px;
background: #c3c3c3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>
<div class="box">
<h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>
<div class="box">
<h4><a class="link" href="#">hover</a><span>+</span></h4>
</div>
View on JSFiddle.
You need to use this to "find" the elements:
$(function () {
$(".link")
.hover(
function () {
$(this).css('color', 'red', 'text-decoration', 'none');
$(this).closest(".box").css('border-bottom', '4px solid #183c94');
$(this).next("span").css('opacity', '1');
},
function () {
$(this).css('color', '#000000');
$(this).closest(".box").css('border-bottom', '4px solid #cfcfcf');
$(this).next("span").css('opacity', '0');
});
});
DEMO
Also in CSS:
span {
height: 10px widtth: 10px;
background: #c3c3c3;
}
Should be:
span {
height:10px; width:10px;
background: #c3c3c3;
}
Use the jQuery $(this) key word
$(function () {
$(".link").hover(function () {
$(this).css('color', 'red', 'text-decoration', 'none');
$(".box").css('border-bottom', '4px solid #183c94');
$("span").css('opacity', '1');
},
function () {
$(this).css('color', '#000000');
$(".box").css('border-bottom', '4px solid #cfcfcf');
$("span").css('opacity', '0');
});
});
I updated your fiddle I didnt know how you handle box or span elements on hover.
I am trying to delay or stop the menu from slideUp action when a user hover off the menu by accident and then hovering again. I am trying to prevent the menu from sliding up when a user unintentionally rolls off the hover area. I want the user to hover back within a split second and not have the menu to slide up.
I used the delay function below as this does not prevent the menu from sliding up. Thanks.
$(document).ready(function() {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(250);
},
function () {
//hide its submenu
$('ul', this).delay(1000).slideUp(500);
}
);
});
Demo: http://jsfiddle.net/D3A5g/
Here is a suggestion Nelson posted. It work on jsfiddle but not on my pages. Can anyone tell me what is preventing from working on my page?
Working Demo: http://jsfiddle.net/xwAdG/6/
Below code does not work when I test it. Any ideas why it's not working?
<html>
<head>
<style type="text/css">
#nav {
padding: 40px;
border: solid #999 1px;
}
#nav ul {
margin: 0;
padding: 0;
display: none;
background-color: #CCC;
}
#nav ul li {
margin: 0;
list-style: none;
list-style-type: none;
padding: 5px;
width: 40px;
}
#nav a {
color: black;
text-decoration: none;
padding: 5px;
}
#nav a:hover {
text-decoration: none;
background-color: yellow;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<script>
var config = {
over: function () { //onMouseOver callback (REQUIRED)
$('ul', this).slideDown(250);//show its submenu
},
timeout: 500, // milliseconds delay before onMouseOut (default 0)
out: function () { // function = onMouseOut callback (REQUIRED)
$('ul', this).slideUp(500); //hide its submenu
}
};
$('#nav li').hoverIntent(config);
</script>
</head>
<body>
<ul id="nav">
<li >Main
<ul>
<li>AAAAA</li>
<li>BBBBB</li>
<li>CCCCC</li>
<li>DDDDD</li>
<li>FFFFF</li>
</ul>
</li>
</ul>
</body>
</html>
UPDATE: I found out that I needed to wrap the code with $(document).ready. By doing this, it worked in a html page.
<script>
$(document).ready(function() {
var config = {
over: function () { //onMouseOver callback (REQUIRED)
$('ul', this).slideDown(250);//show its submenu
},
timeout: 500, // milliseconds delay before onMouseOut (default 0)
out: function () { // function = onMouseOut callback (REQUIRED)
$('ul', this).slideUp(500); //hide its submenu
}
};
$('#nav li').hoverIntent(config);
});
</script>
I recommend you the hoverIntent plugin for that, I've use it in some projects and very happy so far.
Your posted code would be used with the plugin like this:
var config = {
over: function () { //onMouseOver callback (REQUIRED)
$('ul', '#nav li').slideDown(250);//show its submenu
},
timeout: 0, // milliseconds delay before onMouseOut (default 0)
out: function () { // function = onMouseOut callback (REQUIRED)
$('ul', '#nav li').slideUp(500); //hide its submenu
}
};
$('#nav li').hoverIntent(config);
I am trying to output the link's "alt" on hover. (Text is showing up in #container div).
This is what i have been trying so far (it doesnt work):
If you have any better ideas, please suggest.
HTML
<div>Icon</div>
<div>Icon</div>
<div>Icon</div>
<div>Icon</div>
<div id="container"></div>
JS:
$('.container').hover(function() {
var hero = $(this).attr('alt');
$('#container').text(hero);
}, function() {
$('#container').text("");
});
JSFIDDLE: http://jsfiddle.net/XDky6/
$('.heroes').hover(function() {
var hero = $(this).attr('alt');
$('#container').text(hero);
}, function() {
$('#container').text("");
});
hover should be called on $('.heroes'), not $('.container').
You misstyped your code.
You are reffering to the wrong class.
It should be .heroes but it's .container.
Fixed code :
$('.heroes').hover(function() {
var hero = $(this).attr('alt');
$('#container').text(hero);
}, function() {
$('#container').text("");
});
$('.heroes').hover(
function() {
var hero = $(this).attr('alt');
$('#container').text(hero);
},
function() {
$('#container').text("");}
});
Working demo http://jsfiddle.net/RdSCV/1/
Wrong class was passed i.e. correct class is .heroes
code
$('.heroes').hover(function() {
var hero = $(this).attr('alt');
$('#container').text(hero);
}, function() {
$('#container').text("");
});
If you can accept the alt text appearing next to the link, then:
<style>
a:hover:after {
content: attr(alt);
position: absolute;
background: #fff;
padding: 2px;
border: 1px solid #999;
box-shadow: 1px 1px 5px #bbb;
}
</style>
The initial selector is incorrect. Change .container to .heroes