I have two separate ULs as menus. I'd like the second menu items to change text color when I hover the first menu items. Maybe a solution where the links with the same href as the link you hovered change css class? How could I do that with jQuery?
<ul class="firstMenu jQueryHover">
<li>bla</li>
<li>bla2</li>
</ul>
<ul class="secondMenu">
<li>blabla (same href as firstMenu item you hovered changes this elements css class)</li>
<li>blabla (same href as firstMenu item you hovered changes this elements css class)</li>
</ul>
If you want to affect all the links with the same href, including the one that was hovered over:
$("a").hover(function() {
$("a[href='" + $(this).attr("href") + "']").addClass("yourClass");
}, function() {
$("a[href='" + $(this).attr("href") + "']").removeClass("yourClass");
});
This makes use of the attribute name selector, to find all links with the same href as the currently hovered link.
Here's a working example.
If you wanted to make it so only the other links change (and not the hovered one) then you can make use of the jQuery not method to exclude the hovered element. It's not clear from your question whether you want all links with the same href to change, or all other links but not the currently hovered one.
$("a").hover(function() {
$("a[href='" + $(this).attr("href") + "']").not(this).addClass("yourClass");
}, function() {
$("a[href='" + $(this).attr("href") + "']").not(this).removeClass("yourClass");
});
To change all anchor tags with the same href
$("a").hover(function() {
$("a[href='" + $(this).attr("href") + "']").addClass("hover-class-name");
}, function() {
$("a[href='" + $(this).attr("href") + "']").removeClass("hover-class-name");
});
However, I can not see why you want to have two links with the same href on the page? Have you thought about using class names rather than the href to link the anchors?
Should be simple:
$(".jQueryHover a").hover(function(){
if($(this).hasClass("hovering"))
{
$(this).removeClass("hovering");
$('a[href="'+$(this).attr('href')+'"]').removeClass("hovering");
}
else {
$(this).addClass("hovering");
$('a[href="'+$(this).attr('href')+'"]').addClass("hovering");
}
});
Example
You could do:
$('.firstMenu ').hover(function(){
var href = $(this).attr('href');
$('.secondMenu a[href='+href+']').addClass('newClass');
},
function(){
var href = $(this).attr('href');
$('.secondMenu a[href='+href+']').removeClass('newClass');
}
);
Related
I have a repeated component with a control that toggles between displaying 2 images (mobile image and desktop image). I need each control to only toggle the component it is in, and function independently from every other component.
I am able to generate unique ids for all the controls, unique ids for all the images, and on click I am able to add/remove classes as well as show/hide images. My problem is that I don't know how to associate the toggle control id to the image id so that I'm only changing one component. Right now I am targeting the class (which is the same for every component) so everything toggles when you click the control.
This is inside Wordpress using Visual Composer, so I don't believe I am able to use a loop to render the repeated components.
JSFiddle Here
below is a single component, which would be repeated a number of times
<div class="wrapper">
<div class="platform-toggle">
<div class="mobile-toggle">
mobile
</div>
<div class="desktop-toggle">
desktop
</div>
</div>
<div class="platform-images">
<img class="mobile-image" src="https://via.placeholder.com/100x100.png?text=mobile" />
<img class="desktop-image" src="https://via.placeholder.com/100x100.png?text=desktop" />
</div>
</div>
$.each($('.platform-toggle'), function(ind) {
$(this).attr('id', 'platform-toggle_' + parseInt(ind + 1));
});
$.each($('.mobile-toggle'), function(ind) {
$(this).attr('id', 'mobile-toggle_' + parseInt(ind + 1));
});
$.each($('.desktop-toggle'), function(ind) {
$(this).attr('id', 'desktop-toggle_' + parseInt(ind + 1));
});
$.each($('.mobile-image'), function(ind) {
$(this).attr('id', 'mobile-image_' + parseInt(ind + 1));
});
$.each($('.desktop-image'), function(ind) {
$(this).attr('id', 'desktop-image_' + parseInt(ind + 1));
});
$(".mobile-toggle").click(function() {
if ($(".mobile-toggle").hasClass("inactive")) {
$(".mobile-toggle").removeClass("inactive");
$(".mobile-toggle").addClass("active");
$(".mobile-image").show()
$(".desktop-toggle").removeClass("active");
$(".desktop-toggle").addClass("inactive");
$(".desktop-image").hide()
}
});
$(".desktop-toggle").click(function() {
if ($(".desktop-toggle").hasClass("inactive")) {
$(".desktop-toggle").removeClass("inactive");
$(".desktop-toggle").addClass("active");
$(".desktop-image").show()
$(".mobile-toggle").removeClass("active");
$(".mobile-toggle").addClass("inactive");
$(".mobile-image").hide()
}
});
You would use $(this) selector for this case, and jQuery has lot of functions for finding parent, sibling, children, next, prev or etc elements.
I've changed your fiddle and added new selectors.
JSFiddle
$(".mobile-toggle").click(function() {
if ($(this).hasClass("inactive")) {
$(this).removeClass("inactive");
$(this).addClass("active");
//find current toggle element parent, then find next element(wrapper of the images) and finally find children image.
$(this).parent('.platform-toggle').next('.platform-images').children('.mobile-image').show();
$(this).siblings('.desktop-toggle').removeClass("active");
$(this).siblings('.desktop-toggle').addClass("inactive");
$(this).parent('.platform-toggle').next('.platform-images').children('.desktop-image').hide();
}
});
You may use parent div of the specific control in this way:
$(".mobile-toggle").click(function() {
var parentObj=$(this).closest(".wrapper");
if ($(parentObj).find(".mobile-toggle").hasClass("inactive")) {
$(parentObj).find(".mobile-toggle").removeClass("inactive");
$(parentObj).find(".mobile-toggle").addClass("active");
$(parentObj).find(".mobile-image").show()
$(parentObj).find(".desktop-toggle").removeClass("active");
$(parentObj).find(".desktop-toggle").addClass("inactive");
$(parentObj).find(".desktop-image").hide()
}
});
$(".desktop-toggle").click(function() {
var parentObj=$(this).closest(".wrapper");
if ($(parentObj).find(".desktop-toggle").hasClass("inactive")) {
$(parentObj).find(".desktop-toggle").removeClass("inactive");
$(parentObj).find(".desktop-toggle").addClass("active");
$(parentObj).find(".desktop-image").show()
$(parentObj).find(".mobile-toggle").removeClass("active");
$(parentObj).find(".mobile-toggle").addClass("inactive");
$(parentObj).find(".mobile-image").hide()
}
});
This should be exactly the same as #Slim's answer, but with simplified code that doesn't re-select the same elements again and again. The $() selector in jQuery is fast, but there's no reason to keep selecting $(this) 7 times if we don't have to.
$(".mobile-toggle").click(function() {
var $this = $(this);
if ($this.hasClass("inactive")) {
$this.removeClass("inactive").addClass("active");
//find current toggle element parent, then find next element(wrapper of the images) and finally find children image.
var $platformImgs = $this.parent('.platform-toggle').next('.platform-images')
$platformImgs.children('.mobile-image').show();
$this.siblings('.desktop-toggle').removeClass("active").addClass("inactive");
$platformImgs.children('.desktop-image').hide();
}
});
I have used jQuery to generate a sequential numbering for my menu items.
When clicked, the hyperlink text becomes red.
However, the problem here is that I want the respective number to turn into red as well when the hyperlink is clicked (active).
Such as when 'WHY YOU NEED IT' is clicked, the text turns red perfectly. But I need the number 1's background color to change into red as well.
I tried replacing classes but it didn't work.
This is the JS.
jQuery(function ($) {
$(".menu-solutions-menus-container ul li").each(function (i, el) { $(this).children('a').prepend("<number>" + (i + 1.) + "</number>");
});
$('.local-scroll').click(function (event) {
event.preventDefault();
var full_url = this.href;
var parts = full_url.split('#');
var trgt = parts[1];
var target_offset = $('#' + trgt).offset();
var target_top = target_offset.top;
$('html, body').animate({
scrollTop: target_top
}, 500);
});
$('.menu-solutions-menus-container a').click(function () {
$('.menu-solutions-menus-container a').removeClass('active');
$(this).addClass('active');
});
$('.number').click(function () {
$('.number').removeClass('active');
$(this).addClass('active');
});
Here's the jsfiddle workspace. (Change jQuery version to jQuery 1.7.2 or above if you don't see the numbers.)
The secondary menu in this site is where I would really want to implement it.
Thanks a lot in advance.
Your class names just need a tweek and this'll work fine
change
number.active {
background: white;
}
To
.active number {
background: red;
}
Edit (explanation)
The CSS selector number.active is looking for an html element number that has a class of active like this <number class="active" /> but what your HTML shows is that you wanted the parent <a> to have the active with a child node of <number>.
So to do that you put the parent class first, followed by a space to note a child node of the parent, followed by the element you want to target.
so:
parentElement.parentClass childElement.childClass {
defs
}
you could write
a.active number {
background: red
}
Edit 2 for top bars:
There's a few things, the first being that the grey areas are actually background colors, as opposed to borders. Second the CSS selector is looking for a parent class of "active" but your "active" is a child of the <li>'s
<li id="menu-item-205" class="local-scroll menu-item menu-item-type-custom menu-item-object-custom menu-item-205">
</li>
what you can do is make the li the get the active class like this
$('.menu-solutions-menus-container a').click(function () {
$('.menu-solutions-menus-container a').removeClass('active');
$(this).parent('li').addClass('active');
});
$('.number').click(function () {
$('.number').removeClass('active');
$(this).parent('li').addClass('active');
});
$('.menu-solutions-menus-container a').click(function(){
$('ul.shortcode_menu.solution-menu li').removeClass('active');
$(this).parent('li').addClass('active');
});
Then change your CSS to reflect the <li> is the element with the active class.
ul.shortcode_menu.solution-menu li.active {
background: black;
}
Again I've changed it to background: black instead of border-top, as I think that's the effect you want.
I'm pretty new to jquery and I decided to build a jquery tabber. So far so good but I have a little problem!!! I cant see how I can activate the tabber based on the URL. For instance when the link is www.myweb.com#tab2, the second tabber becomes activated. My jquery is as follows. Now I know jquery has it's own tabber script but I don't want to use it. So anybody else help me accomplish this please
Javascript
$(document).ready(function() {
var hash = location.hash;
var link1 = ("ul#tabs li a[href='" + hash + "']")
var link2 = ("ul.tabs li a[href='" + hash + "']")
var link3 = ("ul#tabs li[href='" + hash + "']")
$(".tab_content").hide(); //Hide all content
if ((link3.length)(link2.length)(link1.length))
{ //check if such link exists
$(link3, link2, link1).parent().addClass("active"); //Activate tab
$(hash).show();
}
else {
$("ul.tabs li a:first, ul#tabs li:first, ul#tabs li a:first").addClass('active');
$(".tab_content:first").show()
// On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
HTML
<ul class="tabs">
<li>Design Team</li>
<li>Publications</li>
<li>Awards & Recognitions</li>
<li>Our Mission</li>
<li class="last-item">Company Profile</li>
</ul>
this is how far I have come. Since I have 3 selectors the jquery code is weirdly not working how do I achieve this so tabber is activated based on URL? Thanks
Look at JQueryUI, they have pre-built components like this.
Specifically: http://jqueryui.com/tabs/
Edit:
Or is their a specific reason why you are building your own?
You can set the selected tab using the following :
$(document).ready(function() {
$('#tabs').tabs(); // make jquery tabs
$("#tabs").tabs("select", window.location.hash);
});
Second parameter of $.tabs function accept either index or a selector.
I'm having trouble with a little jQuery, and thought someone in the community could help me out? So, my markup is as follows:
<div class="left">
<ul id="editing-nav">
<li><a class="active testforso" href="#TestForSO">Test For SO</a></li>
<li><a class="testforso2" href="#TestForSO2">Test For SO2</a></li>
...and so on.
</ul>
</div>
<div class="scroll">
<div class="scrollContainer">
<div id="testforso">
...some content
</div>
<div id="testforso2">
...some content
</div>
...and so on.
</div>
</div>
So, basically - .left is floated left, and .scroll is on the right side. I am looking for a way so the active nav element (by default, the first one, and then when the user would click another one, it'd assign that element a class of ".active" and remove the previous one's active class)'s co-insiding div has a display:block, while all others hide. I'm doing this inside of fancybox, which makes it a little bit more complicated, but here's what I have now -
$('#editing-nav li > a').click(function() {
$('#editing-nav li > a').removeClass('active');
$(this).addClass('active');
activeClassID = $(this).attr('class'); // grabs the nav class for the id to show in .scroll
var divIDToShow = ('.scroll .scrollContainer #') + activeClassID; // grabs the DOM path & ID of the coinciding div to show
divIDToShow = divIDToShow.replace(' active', ''); // removes " active" from the class (because before it would have a class of "testforso2 active"; now it just has "testforso".
$('.scrollContainer div:not(#' + divIDToShow + ')').hide();
$('.scrollContainer #' + divIDToShow ).show();
});
This works for the first link someone clicks, but not after that. I don't know if I was clear earlier, but the class for the #editing-nav li a co-incides with what div to show inside of .scroll.
Any ideas? I'm not sure why it's doing this... Thank you!
This issue is with your id selector - try this instead
EDIT
Figured out the real issue here - not sure why it works the first time but your divIDToShow variable contains too much information. See here for a cut down version
The reason why it's doing this is probably because it ran into an error during the first click. 'active testforso'.replace(' active') evaluates to 'active testforso' because there is no ' active' in the string. Even if you fix that, you don't know whether 'active' is in front or at the back of the class string. You could instead do .replace(/\s*active\s*/, '') , but my example below just removes all spaces.
I think you could probably change your code to something like:
$('#editing-nav li > a').click(function() {
$('#editing-nav li > a:active').removeClass('active');
$(this).addClass('active');
activeClassID = $(this).attr('class'); // grabs the nav class for the id to show in .scroll
var divIDToShow = activeClassID; // grabs the DOM path & ID of the coinciding div to show
divIDToShow = divIDToShow.replace('active', '').replace(/\s+/g,''); // removes "active" from the class then remove all spaces in what's left - "testforso2 active"; now it just has "testforso".
$('.scrollContainer div:not(#' + divIDToShow + ')').hide();
$('#' + divIDToShow ).show();
});
BUT:
Instead of doing all these, you might want to use the jQuery-BBQ plugin which allows you to track states through the hash. So you can just detect changes in the hash like, for example, using the hash as the id itself.
Using JQuery, how do I change a map icon whenever I mouse hover over a row in an HTML table/div?
Here is an example:
http://www.sfsunriseidx.com/homes/94131/?uuid=9ed7269b-5327-4c88-ba15-f700ed343d69&source=REDIR
Notice when you mouse hover over a home listing on the left, the corresponding map icon on the right changes.
Question: how do I emulate this functionality using JQuery?
Update: It was suggested below that an ID linked the two elements. If that is the case, how would you still accomplish this?
Use the for="" attribute in html, like
Hover Link
On the image:
<img id="mapIcon4" src="myImg.png" />
jQuery, using the hover function to animate the corresponding ID, the same one in the for:
$(".mapHover").hover(function() {
$("#" + $(this).attr('for')).animate({"left": "-=50px"}, "slow");
}, function() {
$("#" + $(this).attr('for')).animate({"right": "+=50px"}, "slow");
});
Probably both elements are linked by a ID..
Something like this:
$(document).ready(function() {
var googleMap = $("#googleMaps");
$('a', '#mapLinks').hover(function() {
var index = $(this).index(this);
$('img:eq(' + index + ')', googleMap).animate({
width: '+=10%'
});
}, function() {
var index = $(this).index(this);
$('img:eq(' + index + ')', googleMap).animate({
width: '-=10%'
});
});
});
Just make sure you change the "#googleMaps" and "#mapLinks" thing :)