Adding a class to an element which is not selected/focused - javascript

I have a button, when it is hovered i want to add a CSS class to another element. However i have multiple elements and only want to add it to a specific one.
Currently i have :
$("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
var button = $('#loginButton');
button.hover(function (login) {
$("ul.navbar-nav li span").addClass("subhover");
}, function () { //On Hover Out
$("ul.navbar-nav li span").removeClass("subhover"); //On hover out, remove class "subhover"
});
This works, however it adds the class to all the elements.
<li>
<a id="loginButton">
<img class="IconStyle" src="Icons/loginIcon.ico"></img>
</a>
<ul class="subnav">
<li>
</li>
<li>
</li>
</ul>
<span class=""></span> // This is the element i want to add a class to.
The is what i would like to add the class to, however as i said there are 5 of these created programmatically

You could use toggleClass and in/out hover handler:
button.hover(function (login) {
$(this).closest('li').find('span').toggleClass("subhover");
});

Change your HTML to:
<li>
<a id="loginButton">
<img class="IconStyle" src="Icons/loginIcon.ico"></img>
</a>
<ul class="subnav">
<li>
</li>
<li>
</li>
</ul>
<span id = 'spanElement'></span>
and your JQuery to:
var button = $('#loginButton');
alert($("ul.navbar-nav li span").eq(1000000));
button.hover(function (login) {
$("#spanElement").addClass("subhover");
}, function () { //On Hover Out
$("#spanElement").removeClass("subhover"); //On hover out, remove class "subhover"
});

Related

How to add another check class to replace the current active class when user clicks to another link like a step by step menu?

I have added class active via jquery each time when user clicks on nav menus. How do I add another class check every time user performs menu clicks?
The behavior of my menus would be like a step by step menus. For example, when user clicks on test 1 it will set the li to active. And when user clicks to Test 2 it will set it to active and the previous menu will be replaced by the check class.
Like this example image above.
This is my jquery code. Does anyone has any idea how to alter the Jquery code to perform above?
HTML
<nav id="sidebar" class="get-qoute-sidebar">
<ul class="menus">
<li class="active">
<span>Test 1</span>
</li>
<li>
</i><span>Test 2</span>
</li>
<li>
<span>Test 3</span>
</li>
<li>
<span>Test 4</span>
</li>
<li>
<span>Test 5</span>
</li>
<li>
<span>Test 6</span>
</li>
<li>
<span>Test 7</span>
</li>
</ul>
</nav>
Jquery
$(document).ready(function () {
//load the functions
activeSideBar();
});
function activeSideBar() {
// set active classes on side bar nav li a
$("body").on("click", 'nav#sidebar.get-qoute-sidebar ul li a', function (e) {
$('nav#sidebar.get-qoute-sidebar ul li.active').removeClass('active');
var $parent = $(this).parent();
$parent.addClass('active');
e.preventDefault();
});
}
Please try this one:
function activeSideBar() {
// set active classes on side bar nav li a
$("#sidebar .menus li").on("click", function() {
$(this).siblings(".active").removeClass("active").addClass("check");
$(this).addClass("active").removeClass("check");
// Remove class of the next sibling when going a step back
$(this).next().removeClass("check");
// Remove class of all following siblings when going a few steps back
$(this).find("~ .check").removeClass("check");
// When user jumps directly to step5 mark all previous elements as checked
$(this).prevAll().addClass("check");
});
}

Get data-id of anchor element inside a li element

Html
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
My app got a list of things then after 5secs. it will automatically go to the next li.
but that is not the problem. the problem is with the click function I want to know the data-id of the li.
According to the OP's comments
Remove the onclick attribute.
Bind the click event using jQuery.
Use closest('li') to get the parent of your links.
function clickFunction(e) {
e.preventDefault(); // This is to prevent the execution of your links!
console.log($(this).closest('li').data('id'));
}
$('a').click(clickFunction);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-id="1">
1
</li>
<li data-id="2">
2
</li>
<li data-id="3">
3
</li>
<li data-id="4">
4
</li>
<li data-id="5">
5
</li>
</ul>
(1) Remove onclick attribute.
(2) Attach a .click handler to all your links
$(function () {
// attach an onclick event handler to your links
$('li a[data-id]').click(function (e) {
// prevent the link from going anywhere
e.preventDefault();
// get the parent li
var li = $(this).closest('li');
// get next li's link data id
console.log(li.next('li').find('a').data('id'));
});
});

Removing and adding Classes on Dropdown Menus on Hover

I have a Navigation built that have drop down menus,
HTML STRUCTURE LIKE SO
<li class="c-header__subnav-item c-header__subnav-item-is-hidden c-header__subnav-item-is-visible-md">
<a class="c-header__subnav-links u-caps js-c-header__subnav-trigger" href="#">
Action Review Review
<i class="fa fa-angle-down fa-lg c-btn__icon-right-sm"></i>
</a>
<ul class="c-header__subnav-dd">
<li class="c-header__subnav-dd-item">
<a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
Overview
</a>
</li>
<li class="c-header__subnav-dd-item">
<a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
Review Form
</a>
</li>
<li class="c-header__subnav-dd-item">
<a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
Performance Card
</a>
</li>
<li class="c-header__subnav-dd-item">
<a class="c-header__subnav-links c-header__subnav-links--dd" href="#">
Recent Recordings
</a>
</li>
</ul>
</li>
When You Hover On the a.js-c-header__subnav-trigger
It addes a class to its self as well as its sibling ul ( the dropdown menu)
This is perfect but since the hover is triggered on the 'a' element If I toggle the class when and I go to hover on the drop down menu it gets removed before I can because of hovering off the 'a' element.
If I just add the classes and do not use toggle how would I remove both classes once I hover off the A element or Dropdown menu.
What needs to be achieved is
1.) If main nav link is hovered add an active class to itself and drop down is triggered and can be seen. If you hover out WITHOUT engaging the dropdown both active and dropdown class are removed
2.) If main nav link is hovered add an active class to itself and if dropdown IS engaged by user keep both classes until dropdown is hovered out of or 'A' Element.
CURRENT JQUERY CODE
;(function($, window, document, undefined) {
var $win = $(window);
var $doc = $(document);
var $classes = {
SubNavTrigger : 'js-c-header__subnav-trigger',
SubNavItemActive : 'c-header__subnav-item-is-active',
SubNavDropDown : 'c-header__subnav-dd',
SubNavDropDownActive : 'c-header__subnav-dd-is-active'
};
var _isMobile = false;
_isMobile = ($win.width() <= 1024) ? true : false;
// Check if user is on touch on page load
// if isMobile use click events
// if not mobile use hover events
if(_isMobile) {
$("." + $classes.SubNavTrigger).on('click', function(){
if ( $(this).hasClass( $classes.SubNavItemActive ) ){
// If Item has active class removeClass
$(this).removeClass( $classes.SubNavItemActive )
} else {
// If Item does not have active class addClass
$(this).addClass($classes.SubNavItemActive);
} //End if
// Add Active Class To Subnav.
$(this).siblings().toggleClass($classes.SubNavDropDownActive);
});
} else {
$("." + $classes.SubNavTrigger).on('hover', function(){
$(this).addClass($classes.SubNavItemActive);
// Add Active Class To Subnav.
// If set to toggle impossible to hover on this menu.
$(this).siblings().addClass($classes.SubNavDropDownActive);
});
}
})(jQuery, window, document);
Thanks In Advance for any help.
Live Site Link to see
http://100dc.vincebrown.me/integrity-pledge
So I would make a few changes, I would move the s-c-header__subnav-triggerclass to the parent li. I would then change the jquery to use the hover(in,out). The in function would look something like
function () {
$(this).addClass($classes.SubNavItemActive);
// Add Active Class To Subnav.
$(this).children().addClass($classes.SubNavDropDownActive);
}
and the out
function () {
$(this).removeClass($classes.SubNavItemActive);
// Add Active Class To Subnav.
$(this).children().removeClass($classes.SubNavDropDownActive);
}
Here is a jsfiddle

Prevent ToggleClass on multiple elements

I have some li which i want when i hover on each of them toggle the class just for each oft hem not all.
Right now when i hover on each li all the LI will get the toggled class.
Here is the HTML and jQuery
<li><a class="one" href="#">
<img src="http://hhhhold.com/s"/></a>
<div id="project-title" class="me">Fandango
<span id="project-more">Learn more</span>
</div>
</li>
$('.one').hover(function() {
$('.me').closest('span').removeClass("dblock");
$('.me').closest('span').toggleClass('dblock');
});
Use $(this) to reference the active DOM element:
$('.one').hover(function() {
$(this).next('#project-title').find('span').removeClass('dblock');
// etc...
});
IDs should be unique in HTML too... Are you repeating the #project-title ID? If so it should be a class.

Removing active state when toggling between divs

I have created multiple top down menu items. When the links are clicked a div slides down to show some content.
What I am trying to do with these links is toggle between them. When one div is opened an active state is added to the link, when it is closed the active state is removed and the div hidden. When you click between the links I have managed to get them to toggle between each other and the active state is added to the div that is opened.
What I cannot achieve is removing the active state and resetting some css.
Here is my Javascript:
//menu toggle
$(".trigger").click(function() {
var divToToggle = $( $(this).data('target') );
$(".toggle:visible").not(divToToggle).hide();
$(".trigger").not(divToToggle).removeClass('active');
$('.top-nav').css('margin-top', '20px');
divToToggle.slideToggle("fast", "linear");
$(this).toggleClass('active');
$('.top-nav').css('margin-top', '0px');
return false;
});
The .toggle class is on all the divs that are toggled:
<div class="account-container toggle hide"></div>
<div class="collections-container toggle hide"></div>
<div class="search-container toggle hide"></div>
The .trigger class is on all my links:
<ul class="top-nav">
<li><a class="hidden-tablet" href="">home </a></li>
<li><a class="hidden-tablet" href="">about us </a></li>
<li><a class="hidden-tablet" href="">where to buy </a></li>
<li><a class="hidden-tablet" href="">contact us </a></li>
<li class="tablet-menu visible-tablet"><a class="tablet-menu trigger" href="" data-target=".tablet-menu-container">tablet menu</a></li>
<li class="account"><a class="account trigger" href="" data-target=".account-container">account</a></li>
<li class="collection"><a class="collection trigger" href="" data-target=".collections-container">collections</a></li>
<li class="search"><a class="search trigger" href="" data-target=".search-container">search</a></li>
<li class="basket"><a class="basket trigger" href="" data-target=".home-basket-container">basket</a></li>
</ul>
It's hard to say where exactly your code is going wrong, but I've re-written it so it works slightly differently. Your click handler has to handle two possibilities: either we're clicking to hide an existing section, or we're clicking to switch to a new section. But we can also think of this as being two steps, with the second one optional: either we hide an existing section, or we hide an existing section and show a new one.
I've also switched to using ev.preventDefault() to stop the link from firing, named the jQuery variables so they start with $ (which makes them easier to differentiate). You can try it out on jsfiddle here.
$(document).ready(function () {
$(".trigger").click(function (ev) {
ev.preventDefault();
var $clickedLink = $(this);
var $divToToggle = $($(this).data('target'));
var isHideOnly = $clickedLink.hasClass('active');
// Hide the existing div and remove 'active' class.
$(".toggle:visible").hide();
$(".trigger").removeClass('active');
$('.top-nav').css('margin-top', '20px');
// If we're showing a new one, reveal it and set the active class on the link.
if (!isHideOnly) {
$divToToggle.slideToggle("fast", "linear");
$('.top-nav').css('margin-top', '0');
$clickedLink.addClass('active');
}
});
});

Categories

Resources