[ Live Demo ]
I have a navigation menu that displays a certain state when hovered and also displays text in a different div.
In the event that the user does not interact with the menu, the divs auto cycle on their own and the navigation menu displays the corresponding hover state as if the user were interacting.
However, as it is cycling, if the user hovers over another link on the navigation menu, I need to removeClass on the previously highlighted element.
How do I write, "if id is not currently hovered id, then removeClass('hoverBold') on all other navigation links"
Look at jQuery not().
Something like...
$('.myMenu').hover(function() {
$('.myMenu').not(this).removeClass('hoverBold');
});
Just add this to hoverIn:
links.removeClass('hoverBold');
You don't need to take the class off the other elements, because the current element, a:hover.sliderLinks, shares styling with hoverBold
Working example: http://www.jsfiddle.net/MXSkj/1/
Something like this?...
$('#nav li').mouseover(function(){
//remove from others
$('#nav li').removeClass('hoverBold');
//add to this
$(this).addClass('hoverBold')
});
one way to do this would be to remove the hoverBold class on all links and add the it on the current link.
$(".sliderLinks").hover(function(){
$(".sliderLinks").removeClass("hoverBold");
$(this).addClass("hoverBold");
},function(){
//..resume the automatic behaviour
});
Other would be to use the .is() method inside the function passed to $(".sliderLinks").each() to see if its current element
Look at .filter
$(".myMenu").click(function() {
// store current object
var that = this;
$(".myMenu").filter(function() {
// check object in list is not current object
return this != that;
}).removeClass("hoverBold");
});
Basically you pass a filtering function and every object is tested. If the filter returns false (i.e. this == that) then the object is removed from the list.
Related
I'm bulding a hero section that consists of four horizontal accordion items, they expand when user clicks one of them.
One element is active on page load, because I pre-styled it with class "active".
I have code, that removes active class from an active element and sets the active class to the one that's been clicked.
The code looks like this:
<script>
$(".tabs_link").on("click", function () {
$(".tabs_link, .tabs_content").removeClass("active");
$(this).addClass("active");
$(this).next(".tabs_content").addClass("active");
});
</script>
The issue with code above is that it only works while users interact with the element, and I need those elements to open/close based on anchors in the link.
I have four anchors, I'd like them to open specific accordion by adding class "active" to the proper element.
The anchors:
#recover
#active
#mother
#kids
each one of .tabs_link and .tabs_content have combo classes so I could set the anchor to the specific child item f.e. .tabs_link.is-blue
Basically i have 4 url scenarios and i need the function to remove active class and set it on each element:
I was thinking to make a template and copy&paste it a couple of times.
f.e.
if(window.location.href.indexOf("#mother") {
$(".tabs_link, .tabs_content").removeClass("active");
$(this).addClass("active");
*// I don't know how to declare to what should I add class,
$(this).next(".tabs_content").addClass("active");
Heres the link to the website if you want to check it out and get to know the case better.
[https://fysioo.webflow.io/][1]
You can just use location.hash to add the class to the desired a tag.
Something like this:
function showContent() {
$(".tabs_link, .tabs_content").removeClass("active");
const aTag = $(`.tabs_link[href="${location.hash}"]`);
aTag.addClass('active');
aTag.next('.tabs_content').addClass('active');
}
showContent(); // on page load
I have many li(list) items which are generated by a loop thanks to java servlets, now
I want to change the class of the current li(list) which is selected
$('li.doBlokkeer').click(function(e) {
$('.doBlokkeer').addClass('doDEBlokkeer').removeClass('doBlokkeer');
});
so if a current li is selected its class need to be changed (it needs to have doDEBlokkeer).
The above code works.. but it changes ALL my li items... so guys do you know how to change the class of the current item $(this) ? I have no jquery skill, pls help me out. Thanks!!
You need to use $(this) instead of $('.doBlokkeer') in the click event handler. As $('.doBlokkeer') will return all the elements having class doBlokkeer where as $(this) represents the jQuery object that is source of the event.
Live Demo
$('li.doBlokkeer').click(function(e) {
$(this).addClass('doDEBlokkeer').removeClass('doBlokkeer');
});
You can also try using toggleClass to switch between two classes.
Live Demmo
$('li.doBlokkeer').click(function(e) {
$(this).toggleClass('doDEBlokkeer');
});
I want danamically create select element in horizontal block. And have funny result. What is the correct way?
JSFiddle
You need to define where you want to append the new elements. For this, use .after(). And then you need to apply styles on the generated/modified controlgroup.
Demo here: http://jsfiddle.net/Palestinian/rKGtQ/
Code:
// append select menu after Button div
$("#Button_show_filters").after('<select id="sm"><option>Opt 1</option><option>Opt 2</option></select>');
// apply styles on select menu
$("#sm").selectmenu();
// add options to controlgroup
$( "#test" ).controlgroup( "option", "corners", true );
// create controlgroup
$( "#test" ).controlgroup().trigger('create');
controlgroup div ID is #test.
I think the main problem is that every time the "Push me!!" button is pressed, you are appending a select element with an id attribute of sm. Having multiple elements with the same id is invalid HTML and can cause problems with Javascript. See this question.
Namely, the $("#sm") line doesn't know which select you are trying to target.
Maybe you should try something like this:
$("button").click(function () {
$("#div_for_harakteristikinomenklatury_list").append('<select><option>Opt 1</option><option>Opt 2</option></select>');
$("#div_for_harakteristikinomenklatury_list select:last").selectmenu();
});
Also, you should get rid of the onclick attribute for the button. You don't need it. Passing the click handler to the click function should make the function run when the button is clicked.
Instead of using id you should use class and apply selctmenu only on last appended select element. Check this fiddle
$("button").click(function show_filters() {
//alert("Hello");
$("#div_for_harakteristikinomenklatury_list").append('<select class="sm"><option>Opt 1</option><option>Opt 2</option></select>');
$(".sm:last").selectmenu();
})
Updated Fiddle
change the $("#sm").selectmenu(); to $("select").selectmenu();
With above mentioned method no matter what is the id or class of the element you newly pushed, it'll get the styles applied.
Check the live fiddle here http://jsfiddle.net/mayooresan/VMj4U/6/
On my page I'm trying to do smth like that: Lets say, when we click on some link with id min_reg it animates div with idftr_form_cntr, and shows another div tcr_form_cntr within.
There are 3-4 links that does same function but shows another div within ftr_form_cntr. Well if user clicked one of this links for the first time then there is no problem. But if user already clicked (I mean if ftr_form_cntr already opened) I want to just fadeOut all existing divs nested to ftr_form_cntr and fade in one another div (or swap existing div with another one).
Take a look at this line tcr_form_cntr.fadeIn(1000). What do I need to do before this line to fadeOut all nested divs?
My function look like this:
$(min_reg).click(function () {
if($(ftr_form_cntr).hasClass('opened')){
$(ftr_form_cntr)...<fadeOut all nested divs>
tcr_form_cntr.fadeIn(1000);
return;
}
ftr_form_cntr.show().stop(true, true).animate({
height:"170"
},1000).addClass('opened');
tcr_form_cntr.fadeIn(1000);
});
Assuming that ftr_form_cntr is a string variable holding the jQuery selector for your container element, you can select all the div elements inside and fade them like this:
$(ftr_form_cntr + " div").fadeOut();
Have a look at the jQuery doco on selectors, specifically the "descendant selector".
If ftr_form_cntr is not a string variable but is actually, say, a reference to a DOM element or something then another way to select certain nested elements is using the .find() method, which gets descendants of the elements in your existing jQuery object according to another selector you provide:
$(ftr_form_cntr).find("div").fadeOut();
Your function could look like this:
$(min_reg).click(function () {
var animated_div = $(ftr_form_cntr);
if(animated_div.hasClass('opened')){
animated_div.find('div').fadeOut();
tcr_form_cntr.fadeIn(1000);
return;
}
animated_div.show().stop(true, true).animate({
height:"170"
},1000).addClass('opened');
tcr_form_cntr.fadeIn(1000);
});
What I did is:
I cached the element you work on ($(ftr_form_cntr)),
used .find() jQuery method to get all the divs you want to fade out,
Did it help? Please make sure that both ftr_form_cntr and tcr_form_cntr are defined and first is eg. selector, but the second must be jQuery object.
Given this website: link text
How would one find an element and remove any class=selected and add it to the correct link?
That way when history, models, and the like links will look become selected when clicked upon.
The following code should do the trick in your case..
// when clicking a link inside the sub-navigation list
$('#sub-navigation a').click(function(){
// first remove the selected class from the active one
$('#sub-navigation li.selected').removeClass('selected');
// then find the parent li of the clicked element and add the selected class
$(this).parents('li').addClass('selected');
});
(it is tested on your example page and it works as expected..)
$("a").click(function(e) {
$("a.selected").removeClass("selected");
$(this).addClass("selected");
});