I needed some method of adding/removing classes of a parent element when it's children are clicked to reflect which child is currently selected. In this case a UL parent and LI children in a tab scheme. I needed a way to mark the current tab on the UL so I could style a background sprite on the UL; since styling my LI's backgrounds would not work with the graphics in this case.
I am a jQuery/Javascript/DOM novice, but was able to piece together an ugly solution for starters,
HTML
<!-- tabs -->
<ul class="tabs currenttab-info">
<li id="tab-info" class="info"><strong>Information</strong></li>
<li id="tab-write" class="write"><strong>Write Feedback</strong></li>
<li id="tab-read" class="read"><strong>Read Feedback</strong></li>
</ul>
Javascript
// send '.currenttab-x' to '.tabs' and remove '.currenttab-y' + '.currenttab-z'
// when LI #tab-X is clicked ...
$( '#tab-info' ).click(function() {
// ... find the UL and remove the first possible conflicting class
$('.tabs').removeClass("currenttab-read");
// ... find the UL and remove the other possible conflicting class
$('.tabs').removeClass("currenttab-write");
// ... find the UL and add the class for this LI
$('.tabs').addClass("currenttab-info");
});
// ... repeat ...
$( '#tab-write' ).click(function() {
$('.tabs').removeClass("currenttab-info");
$('.tabs').removeClass("currenttab-read");
$('.tabs').addClass("currenttab-write");
});
$( '#tab-read' ).click(function() {
$('.tabs').removeClass("currenttab-info");
$('.tabs').removeClass("currenttab-write");
$('.tabs').addClass("currenttab-read");
});
This actually seems to be working, BUT it's a fumbling solution and I am sure there is a better way. Some of you jQuery ninjas will know how to put this functionality together really elegantly, any help?
Also I would like to add onto this so that the clicked LI is also given a class to show it is selected while the other LIs are stripped of any such class. The same sort of thing I already am doing for the UL; I can see how to do that with my awkward approach, but it will mean even more and more lines of messy code. If your improvement also included a way to do change classes of the LIs I'd appreciate it
FYI: I'm using jQuery Tools Tabs with this so there is more jQuery then I showed, but only the bit I quoted seems relevant.
html
I will remove ids of li if you are not using it for other purposes.
<ul class="tabs currenttab-info">
<li class="info"><strong>Information</strong></li>
<li class="write"><strong>Write Feedback</strong></li>
<li class="read"><strong>Read Feedback</strong></li>
</ul>
jQuery
$('.tabs li').click(function() {
var $li = $(this);
$li.addClass('current').siblings().removeClass('current'); // adds a current class to the clicked li
var $ul = $li.parent();
$ul.removeClass("currenttab-info currenttab-read currenttab-write")
.addClass("currenttab-" + this.class ); // assuming li only holds one class e.g. class="write"
});
You can just do something like this:
$('.tabs > li').click(function() {
$(this).parent().attr('class', 'tabs').addClass('currenttab-'+$(this).attr('class'));
});
$("UL.tabs LI A").bind('click',function(e){ //bind a Click-Event handler to the Links
var $target = $(e.target); //the jQuery-Object-Reference to the clicked target ( $(this) should work too)
var LIClasses = $target.parents('LI').attr('class'); //A list of all Classes the parrent LI of the clicked Link have
$target
.parents('UL.tabs')
//now you can remove and add classes to the parent "UL.tabs"
.removeClass('...')
.addClass('...')
.end() //after .end() the chain for .parents-match is broken
.parents('LI')
//here you can add and remove classes from the parent LI
.removeClass('...')
.addClass('...')
.end() //after .end() the chain for .parents-match is broken
;
});
Notes:
jQuery is chainable.
.removeClass() and .addClass() can work with multiple classnames at the same time by speration with a space (like .removeClass('class1 class2'))
The full solution:
var relevantClasses = ['read','write','info'];
$("UL.tabs LI A").bind('click',function(e){
var $target = $(e.target);
var relevantClass = '';
for( var cl in $target.parents('LI').attr('class').split(' ') )
if( jQuery.inArray(relevantClasses , cl) > -1 ){
relevantClass = cl;
break;
}
$target
.parents('UL.tabs')
.removeClass(jQuery.map(relevantClasses , function (className) { return 'currenttab-' + className; }).join(' '))
.addClass('currenttab-'+relevantClass )
.end()
;
});
First of all you can chain the method calls...
$('.tabs').removeClass("currenttab-read currenttab-write").addClass("currenttab-write");
This would make the code much cleaner...
EDIT: I'll try such things in Fiddle http://jsfiddle.net/JvtAz/
Related
I have a set of li elements forming a menu. When the user clicks a particular li element I want to change the source of an iframe element to the URL that corresponds to the clicked item.
I've tried the function below but it didn't work. Can somebody please advise how to do this?
http://jsfiddle.net/ZnMTK/8/
$(document).ready(function(){
var source1="http://www.hurriyet.com.tr";
var source2="http://www.milliyet.com.tr";
var source3="http://www.vatan.com.tr";
var source4="http://www.ensonhaber.com";
$("#menubar ul li:nth-child(i)").click(function(){
$(this).attr('src', source(i) );
});
});
You can use an array and then use the clicked li elements index to fetch the target source from array.
$(document).ready(function(){
var sources =["http://www.hurriyet.com.tr","http://www.milliyet.com.tr","http://www.vatan.com.tr","http://www.ensonhaber.com"],
$("#menubar li").click(function(){
$('#iframe1').attr('src', sources[$(this).index()])
});
});
Demo: Fiddle
This type of functionality is what arrays are for:
$(document).ready(function(){
var sources =["http://www.hurriyet.com.tr","http://www.milliyet.com.tr","http://www.vatan.com.tr","http://www.ensonhaber.com"],
i = 0;
$("#menubar li").click(function(){
$("#iframe1").attr('src', sources[$(this).index()] );
});
});
However, specifying all of your URLs in your JavaScript and relying on the indices matching up with the order of the menu li elements is kind of fragile. I would recommend linking the values more closely, perhaps something like this:
<ul id="menubar">
<li data-src="http://www.hurriyet.com.tr">Hurriyet</li>
<li data-src="http://www.milliyet.com.tr">Milliyet</li>
<li data-src="http://www.vatan.com.tr">Vatan</li>
<li data-src="http://www.ensonhaber.com">Ensonhaber</li>
</ul>
And then with JS:
$(document).ready(function () {
$("#menubar li").click(function () {
$("#iframe1").attr('src', $(this).attr("data-src"));
});
});
This is the pen I'm working on.
If you will see the pen,the first container have a child div that is not showing in the result.The Jquery as follows,
$('.content-canvas').find('div').hide();
$('.content-canvas div:first-child').show();
$('.tab-button span:first-child').addClass('active');
$('.tab-button').find('span').click(function(){
$('.tab-button').find('span').removeClass('active');
var currentclass=$(this).attr('class');
$(this).addClass('active');
$('.content-canvas').find('div').each(function(){
if($(this).attr('class')==currentclass)
{
$('.content-canvas').find('div').hide();
$(this).slideDown(200);
$(this).children().show(200);
}
else
{
$(this).hide();
}
});
});
First line:
$('.content-canvas').find('div').hide();
Change to
$('.content-canvas > div').hide();
Do the same with all the same selectors you used. You only need to hide the direct descendant, not all divs.
Also, I recommend caching this selecotr into a variable:
var elements = $('.content-canvas > div').hide();
...
...
element.each(function() {
...
and so on, so that you don't have to jump into the DOM everytime.
It's because at the beginning of your js code, you hide every div.
Show it by using something like:
$('.content-canvas .content1 div').show();
Or put your 'as' inside a span instead of a div such as:
<span>as</span>
Please check my fiddle
Consider a dynamic dropdown-menu. Because of creating this code server side I don't know the exact number of li situated in div 'sub'.Example HTML output:
<li>
Videos
<div id="sub">
<ul>
<li>Main</li>
<li>Acting</li>
<li>Animals</li>
</ul>
</div>
</li>
The following script should give the number of li in the in div id="sub"
$(function() {
$('.tabMenu li a').click(function() {
currentLink = $(this);
//Get number of children elements
alert(currentLink.children().size());
});
Any help will be greatly appreciated.
alert(currentLink.parent().find('li').size());
First: where is your .tabMenu in your code?
Try with:
.length;
Working solution
$('.tabMenu li a').click(function() {
currentLink = $(this);
alert(currentLink.parents('ul').children('li').length);
});
What you need to do is get the parent container of the li element, then see how many children it has:
$(function() {
$('.tabMenu li a').click(function() {
// Get the parent ul of the current link
var currentLinkParent = $(this).parents("ul:first");
alert(currentLinkParent.children().size() );
});
I am struggling with a collapsible vertical menu. The first part of the script below works, so that the upper UL display its sibling LIs, while the other ULs keep their sibling LIs hidden.
My difficult task (to me at least) is to make the parent UL to the active link keep its sibling LIs visible. This is what I tried in the lower part of the script.
My a-links some times get a trailing hash (#) which I want to remove in order to compare i to the active URL. This is done through the trimHash(string)-function--which works when tested on a simple string, but not in this script.
Any good advice out there?
$(document).ready(function() {
// Collapse everything but the first menu:
$(".mainmenu > li > a").not(":first").find("+ ul").slideUp(1);
// Expand or collapse:
$(".mainmenu > li > a").click(function() {
$(this).find("+ ul").slideToggle("fast");
});
$(".mainmenu li").each(function () {
var li = $(this);
var a = rtrimHash(li[0].firstChild);
if (a.href == location.href) {
$(this).find("+ ul").slideDown(1);
}
});
I ended up with this solution. As it is a Wordpress site, while stepping through the menu items in the menu I could check if each link is active by comparing the link to the active post, and insert the class "current" to these menu items:
echo '<li class="child';
if ( $menuPost->ID == $post->ID ) { echo ' current'; }
And then use jQuery to find all instances of the li "current" class, and trigger the parent ul's to slideDown:
$(document).ready(function() {
// Collapse everything:
$("li.cat").find("+ ul").slideUp(1);
// Collapse everything but the first menu:
//$("li.cat").not(":first").find("+ ul").slideUp(1);
// Expand or collapse:
$("li.cat").click(function() {
$(this).find("+ ul").slideToggle("fast");
});
$("li.current").parent().slideDown(1);
});
Sorry I didn't solve this through javascript as I intended, but I achieved what I wanted.
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.