jQuery to load hidden divs as content sections - javascript

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

Related

addClass/removeClass based on selected items data attribute

I'm a little stuck here. I have a ul menu of links. When a user selects from this list, I'm calling up content from another page with ajax. I want to grab a data attribute (data-flag) from the selected anchor and add that attribute as a class to the div that holds the ajax content (#fourteen). The adding class piece is working fine. However, when a new item is selected from the ul menu, I can't seem to remove the other classes from the content div. With each click, it just adds more classes.
Here's my code.
<ul id="langtest" class="tp_lang2">
<li>English</li>
<li>中文(简体)</li>
<li>Nederlands</li>
<li>Français</li>
</ul>
<div id="fourteen" class="cn">
<div id="content">
<div class="main-content">Content being served up here.
</div>
</div>
</div>
<script>
jQuery("ul#langtest li a").click(function() {
jQuery('#fourteen').load($(this).attr("href") + " #content");
jQuery('#fourteen').removeClass.not(this).attr("data-flag");
jQuery('#fourteen').addClass($(this).attr("data-flag"));
return false;
});
</script>
You just need to remove all class in the element like so :
// remove all class
jQuery('#fourteen').removeClass();
// then add class name with data flag selected anchor only
jQuery('#fourteen').addClass($(this).attr("data-flag"));
DEMO(inspect element to see the class actually added & removed)
Your removeClass seems not perfect. Do it like below.
jQuery('#fourteen').removeClass();
On dynamically added element you have to use delegate event binding.
jQuery(document).on("click","ul#langtest li a",function() {
jQuery('#fourteen').load($(this).attr("href") + " #content");
//also change your removeClass code
jQuery('#fourteen').removeClass();
jQuery('#fourteen').addClass($(this).attr("data-flag"));
return false;
});

add class to li by clicking on a link from nav menu

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');
}

How to handle adding a close link within an UL/LI item

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

Toggling classes with cloned divs

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() {
...
});

prototype js library beginner

I have a list in which I am dynamically adding the classname, now when I click on that item again the class stays there. I dont want that I want that classname to be assigned to the currently clicked list item.
<ul id="menubar">
<li>one</li>
<li>two</li>
</ul>
Now when I click on one I dynamically add classname, and when I click on two the classname stays the same on one and it gets affected on two as well. but I want it to be removed from one and to be applied to currently clicked item.
How can I achieve it?
$$('#menubar li').invoke('observe', 'click', (function(e) {
//removes classname from all the li elements
$$('#menubar li').invoke('removeClassName', 'myClass');
//Gets the li you clicked on
var list_item = Event.element(e);
//adds the classname
list_item.addClassName('myClass');
}).bindAsEventListener(this));
You need to be including .removeClass() in the same event as when you addClass() to the other one.
$('.one').click(function(){
$(this).addClass('myClass');
$('.two').removeClass('myClass');
});
This could be written more efficiently, but im writing this in between meetings.
Hope it's a start!

Categories