I've got some code like so:
<ul id="ulPersonal">
<li class="break eTime">
<p>Manage your time card.</p>
<div id="dEtime">
some content
</div>
</li>
</ul>
The div only appears once you hove over the li item, in jquery:
$('#dEtime').hide(); //initially hide the div...
//when the user hovers show the div
$(".eTime").hover(function () {
$('#dEtime').fadeIn('slow');
});
So basically the page shows the li item, I hove over it and the div is shown. Now I tried it so that when you "un-hover" off the li then the div disappears, however the UX was not friendly...to much flickering.
So I decided to add a close hyperlink...but if I add it within the li item and click on it, the div reappears as I am still "hovering" inside the li. How can I handle this so that I can allow the user to close the div?
I've got a lot of seperate ul items that do this, so I dont want to add the close link after the ul, and obviously I cannot just add an href tag outside of an li, as that is just plain wrong.
Try to use .mouseenter() instead of .hover() because since you are passing only one callback to .hover() it will be called for both mouse enter and leaving conditions
$('#dEtime').hide(); //initially hide the div...
$('#closeIt').hide(); //initially hide the div...
//when the user hovers show the div
$(".eTime").mouseenter(function () {
$('#dEtime').fadeIn('slow');
$('#closeIt').show(); //initially hide the div...
});
$("#closeIt").click( function(){
$('#dEtime').hide(); //initially hide the div...
$('#closeIt').hide();
});
Demo: Fiddle
Related
OK, so I am sorry if this question is repeated BUT I really could not figure answer.
O have menu with classes, and I want that when I click on some menu items .menuitem > a
that link have more paddingBottom.
So I managed to use .click function and animate function but that add padding to entire class ( all menu items ).
What I need is adding padding only to THAT CLICKED menu.
Code that make padding to all menu items ( entire class )
$(".menuitem" ).click(function() {
$('.mainNav > ul > li > a').animate({paddingBottom:"+=17px"});
});
when I click on some menu items .menuitem > a that link have more paddingBottom
Within the click handler, the particular .menuitem element that was clicked can be referred to by this. Thus, using $(this) you can use jQuery's DOM traversal method(s) to move from that element to the related one you want to animate.
If the anchor is a child of the .menuitem element that you are binding the click handler to then the simplest way to get a reference to that anchor is with the .find() method:
$( ".menuitem" ).click(function() {
$(this).find("a").animate({paddingBottom:"+=17px"});
});
you can use this key word to select your 'a' tag which you click on it now 'only'
$('.menuitem').click(function(){
$(this).find('a').animate({'padding':'+=17px'});
});
or more specific
$('.menuitem li').click(function(){
$(this).find('a').animate({'padding':'+=17px'});
});
I'm a newbie so i hope my question will have some logic :)
i wish to add a class "active" to "li" (in this case a portfolio filter item in the page) by clicking on a link from the nav menu.
the "li" is not a part of the nav menu, how do i assign a "li" with a class if the "li" is in the deep tree - it's a whole different part of my site.
the "li" is in:
<div class=""section"
<ul id="portfolio-filter" class="list-inline">
<li <--- the place i wish the "active" be added
i have checked other question but couldn't figure out how to implement the specific need.
thanks for the help
You have to create a listener for the link of the menu. In JQuery, to create a listener, you have the 'on' function.
Example :
$("myElement").on("click",function(){});
After that, add an id attribute for the 'li' tag.
For example:
<li id="myLI">
So, when the user will click on the link of the menu, it will go to the listener. And in the listener, you will do :
$("#myLI").addClass("active")
Don't forget to create the css class.
First you have to specify .active in your CSS.
.active {
//add styles here
}
Then using javascript you have to grab #myLI and set class .active to it using onclick event:
var element = document.getElementById("myLI");
element.onclick = function() {
element.setAttribute('class','active');
}
I have 5 a link items in a row, encapsulated within a h4 and the h4 within li element and the li within ul which it's finally nested in a nav element.
At the moment, the role of a (thanks to a very helpful example that I found here) when clicked is to change the content of the divs (that contain images and text).
What I would like to do in addition, is that when you click the link and the content changes, I would like a link to receive the "active" class, which has white color and certain other css attributes.
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
the function that swaps the content
<nav id="nav2">
<ul class="tabz">
<li><h4>Szenario 1</h4></li>
<li><h4>Szenario 2</h4></li>
<li><h4>Szenario 3</h4></li>
<li><h4>Szenario 4</h4></li>
<li><h4>Szenario 5</h4></li>
</ul>
</nav>
When the page loads, everything displays correctly. When I click the second link I would like the "active" class to be removed from first link and go to the sencond.
(The css of the active class is just some color and border differences.)
Thank you very much in advance.
Attach handler for those anchor tags by using the attribute starts with selector, since you are having href with same beginning. And by using the $(this) reference set the active class and remove the active class from all of its anchor siblings.
Try,
$('[href^="#tabs"]').click(function(){
$(this).addClass('active');
$(this).closest('.tabz').find('a').not($(this)).removeClass('active');
});
$('[href^="#tabs"]').click(function(e){
$(this).addClass('active').parents('li').siblings().find('a').removeClass('active');
});
With the markup you have, the clicked a element won't have any sibling, but its li parent will, so this code will work as expected, see here : DEMO
I have a jQuery driven side navigation menu that on click of a li loads a hidden div. When I click another li I just have a hide() function on every every other hidden div id. Ideally I am looking for a way to when I click a li, it shows the hidden div and hides the div that was there previously. I have to load each hidden div based on id, but I figure there is some way to hide the current content before I load the new div. Here is how I currently have it:
<ul>
<li id="overview" class="selector">OVERVIEW</li>
<li id="whyus" class="selector">WHY US</li>
<li id="clients" class="selector">CLIENTS & TESTIMONIALS </li>
<li id="staff" class="selector">MEET THE STAFF</li>
</ul>
jQuery(document).ready(function() {
jQuery("#overviewHidden").fadeIn();
jQuery("li#overview").addClass('active');
jQuery("li.selector").click(function () {
jQuery(this).addClass('active');
jQuery(this).siblings().removeClass('active');
});
jQuery("#overview").click(function(){
jQuery('#whyusHidden, #clientsHidden, #staffHidden').hide();
jQuery('#overviewHidden').slideDown();
});
jQuery("#whyus").click(function(){
jQuery('#overviewHidden, #clientsHidden, #staffHidden').hide();
jQuery('#whyusHidden').slideDown();
});
jQuery("#clients").click(function(){
jQuery('#overviewHidden, #whyusHidden, #staffHidden').hide();
jQuery('#clientsHidden').slideDown();
});
jQuery("#staff").click(function(){
jQuery('#clientsHidden, #overviewHidden, #whyusHidden').hide();
jQuery('#staffHidden').slideDown();
});
});
Instead of a hide() on all the div's , I would like to hide whatever the current div is. Thanks,
One solution is to add a class to all hidden div's like hidden-container then in your click handler use it to hide the elements instead of using hard coded ids.
Ex
jQuery("#whyus").click(function(){
var hidden = jQuery('#whyusHidden');
jQuery('.hidden-container').not(hidden).hide();
hidden.slideDown();
});
Also you can improve the solution by removing the individual click handlers
For this you need to add a class called hidden-container to each of these divs
jQuery("li.selector").click(function () {
var $this = jQuery(this);
$this.addClass('active');
$this.siblings().removeClass('active');
var hidden = jQuery('#' + this.id + 'Hidden');
jQuery('.hidden-container').not(hidden).hide();
hidden.slideDown();
});
because from what I can see the id of the hidden id is nothing but the clicked li's id + Hidden
Demo: Fiddle
You can simply toggle the active class name on or off when clicking your links, and hide the active div at the same time. Here is a working example http://codepen.io/lukeocom/pen/eFdjI
You can also improve your code by adding a class to the ul instead of each li. Then use individual class names on each li to select the hidden divs. You dont need to use <a> tags as you can assign a click function to the <li> tags just as easily.
$('.selector li').click(function(){
//hide current displayed div
$('.active').toggleClass('active').hide();
//get the class name of this item to select the hidden div.
var theId = '#' + $(this).attr('class');
//show the div, assign active class
$(theId).toggleClass('active').fadeIn(500);
});
hope this helps
I have a drop down menu that returns results after a selection. The user can then click a link, cloning the dropdown menu, and choose another selection that will return more results. The structure of the results div is as follows:
<ul>
<li class="red">
<span> some html content</span>
</li>
<li class="red">
<span> some html content</span>
</li>
</ul>
I would like the user to click an li and change the background color. The user should only be able to change the color of one li at a time. I am able to accomplish this first part using:
$("li.red, li.blue").live("click",function() {
var $this, c;
$this = $(this);
c = $this.hasClass("red")
? {us: "blue", them: "red" }
: {us: "red", them: "blue" };
$("li." + c.us).removeClass(c.us).addClass(c.them);
$this.removeClass(c.them).addClass(c.us);
});
The problem is that when the user adds another selection (and the previous dropdown is cloned using jquery), and clicks an li in that results div, the previous selection is unselected. I want the user to be able to change the background of the li for the first set of results, as well as change the background for the second set of results. So each set of results would be able to toggle background colors between only that particular ul.
Any help is much appreciated!
Try this...
$("ul").on("click", "li", function() {
$(this).parent().find("li").removeClass("red").addClass("blue");
$(this).toggleClass("red").toggleClass("blue");
});
jsFiddle example... http://jsfiddle.net/L34pT/3/
Giving the ul a class name or ID would make sure it only affects the list in question. It looks a little pointless, but I used parent and find so that you only have to change the ul selector if you do give it a class or ID, and it will still work.
Try to use on() instead of live():
$(document).on("click","li.red, li.blue",function() {
...
});