Creating tabs in jQuery. When you click another tab, all the tabs disappear. Can't figure out the fix
Here's the page not working: http://www.sleepfullnights.com/products/sfn-537
Here's the JSFiddle another guy made of it working: http://jsfiddle.net/gravitybox/7pHg4/ I've copied and pasted every element of this into the page and the issue is still there.
One person pointed out that something is giving the tabs the css "display:none" when clicked and I can't find where to fix it.
Also, another observation someone made was that "In Chrome dev tools, if you right click the ul.tabs in the "Elements" tab and select "Break On > Attributes modifications", it breaks on "$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');" when you click a tab".
Here's the jQuery code I have:
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
});
});
});
And the code from the working JSFiddle:
$(document).ready(function() {
$('ul.tabs').each(function(){
var active, content, links = $(this).find('a');
active = links.first().addClass('active');
content = $(active.attr('href'));
links.not(':first').each(function () {
$($(this).attr('href')).hide();
});
$(this).find('a').click(function(e){
active.removeClass('active');
content.hide();
active = $(this);
content = $($(this).attr('href'));
active.addClass('active');
content.show();
return false;
alert('yep');
});
});
});
Any help/guidance is greatly appreciated.
I'm the one who noted "In Chrome dev tools, if you right click the ul.tabs in the "Elements" tab and select "Break On > Attributes modifications", it breaks on "$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');"
It breaks there because that line is what is hiding the ul containing the tabs.
Looking at your website's code, you need to change the following inside app.js on Line 39.
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
to this:
$(contentLocation).show().addClass('active').siblings('div').hide().removeClass('active');
You only want to target the div siblings of the selected tab's content div. Right now, the ul is also a sibling of the selected div. Without the 'div', siblings() will select all of its siblings and hide() them (thus hiding the tabs too).
Preferably, I would add a tab-content class to the tab content div elements and use siblings('.tab-content') instead of siblings('div') to be more specific. That way if you add another div that happens to be a sibling, it won't hide that.
What's Going On
The code used for those tabs is much more complicated than you need, and I'm not really sure what is breaking. Rather than try to fix it, it would be easier to just start over. This is what you want:
Every time a user clicks on a tab, all tabs have the active class removed, and all content is hidden. Then, the active clicked on tab is given the active class and it's content is shown. This should seem instantaneous to the user. You will need to add a class to your content divs to accomplish this easily. I'd add tab-content.
Code
Working Fiddle
HTML (Only change is adding the class)
<div class="tab-content" id="tab-1">
...Content...
</div>
<div class="tab-content" id="tab-2">
...Content...
</div>
<div class="tab-content" id="tab-3">
...Content...
</div>
Javascript:
$(document).ready(function() {
$('.tabs li a').click(function(event){
event.preventDefault();
$('.tabs li a').removeClass('active');
$(this).addClass('active');
$('.tab-content').hide();
$($(this).attr('href')).show();
});
});
It's definitely a problem with the ul getting display: none. You could try overriding it in the click handler with $('ul.tabs').css('display','block'). It's hard to tell where the issues is coming from because of the amount of scripts on your page.
Related
I have my own drop down navigation working, so when a user clicks on one of the links a page overlay will appear. I just need when they click again the page overlay removes.
Here is my code to add the overlay
$('#nav li a').on('click', function(){
$('#page-overlay').addClass('active').siblings().removeClass('active');
});
And a working DEMO is here - http://dsm.fishtankcreative.co.uk/
I just need help for when a user clicks off the navigation the page overlay class disappear.
Thanks in advanced.
Use toggleClass()
$('#nav li a').on('click', function(){
$('#page-overlay').toggleClass('active').siblings().removeClass('active');
});
Note: I don't think there is a need to use .siblings().removeClass('active'), as you are not adding the active class to any other elements
I am using a nice script to hide and show several divs
// Catch all clicks on a link with the class 'link'
$('.link').click(function(e) {
// Stop the link being followed:
e.preventDefault();
// Get the div to be shown:
var content = $(this).attr('rel');
// Remove any active classes:
$('.active').removeClass('active');
// Add the 'active' class to this link:
$(this).addClass('active');
// Hide all the content:
$('.content').hide();
// Show the requested content:
$('#' + content).show();
});
This works great on a single div with several items I like to hide.
But I use a template the retrieves news items and I like to make this work on all the divs induvidual. Also hide the second div by default.
<div class="content" id="div[[+idx]]-1">
<p>Show content by default</p>
<a class="link-[[+idx]]" href="#" rel="div[[+idx]]-2">
Link to show div id="div[[+idx]]-2" and hide id="div[[+idx]]-1"
</a>
</div>
<div class="content hide" id="div[[+idx]]-2">
<p>Hide content by default</p>
<a class="link-[[+idx]]" href="#" rel="div[[+idx]]-1">
Link to show div id="div[[+idx]]-1" and hide div id="div[[+idx]]-2"
</a>
</div>
Problem is I use this template for every iteration and the script does not support an undefined number of items and closes all my other divs. As does the second div does not hide on default.
I changed the link to link1 and then you get the follwoing unwanted bahavior:
http://jsfiddle.net/Vh7HR/8/
if I leave out the 1 it does nothing
make use of .parent()
// Catch all clicks on a link with the class 'link'
$('.link').click(function(e) {
// Stop the link being followed:
e.preventDefault();
// Get the div to be shown:
var content = $(this).attr('rel');
// Remove any active classes:
$('.active').removeClass('active');
// Add the 'active' class to this link:
$(this).addClass('active');
// Hide all the content:
$(this).parent('.content').hide();
// Show the requested content:
$('#' + content).show();
});
You need to use delegation if you are adding new .link dynamically.
By using .on() you can listen for a click on document (or another element that is ancestor to .link and is present when the click handler is attached) and when the click is fired it will look for .link.
Try this:
$(document).on('click', '.link', function(e) {
I recommend you to use the on method provided by jquery to handle click events, the classic click method not works with elements that you create after rendering the DOM.
$( "your-selector" ).on( "click", function() {
alert( "Hello world!");
});
I have been satisfactorily using a submit button like this
for some time. The class defines the position of the button and it's appearance.
Now I have added a Jquery script to the page, and the button no longer works. The script is
$(document).ready(function() {
$("#tabcontent > div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#tabcontent div:first").fadeIn(); // Show first tab content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return
}
else{
$("#tabcontent > div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
}
});
$('#prices').load('../prices.php?hid=<?php echo $hid;?>');
});
Presumably it is something to do with having "javascript:void()" in the href, but I can't see why. Is there an alternative way of writing the href to get both things working together?
PARTIAL SOLUTION
The problem was not really what I thought it was. In the end I found that the parent page and the page being loaded by Jquery both contained a with the same name. Re-naming one of the forms solved that part of the problem.
However now that that is out of the way I am finding another issue that appears to be a conflict between two bits of Jquery. I've asked another question about that at Jquery - Scripts are conflicting
Change the function as below. Add the submit in last line of the function like I shown
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return
}
else{
$("#tabcontent > div").hide(); //Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
}
$(this).submit() **// ADD HERE**
});
$('#tabs a').click is your problem. You are overwriting the click event for the <a> tag with this code.
You can update the jQuery code to this:
$('#tabs a:not(.buttonavail)').click
is there a way to select the current anchor and have it visible on every section of a one page site? For example all my pages (home/contact/shop etc) are on one page, in a horizontally scrolling layout. When I select the anchor, it highlights the current anchor but does not keep that anchor highlighted when it scrolls to the next section of the page. Instead its highlighted and as the scroll begins the highlight of the anchor disappears. Here's the code I am using:
$('#nav a').click(function() {
alert($(this).attr('href'));
});
I had thought about using jquery ui to do it, but it seems a little too much just to carry out this operation. So highlight the current anchor of the item, in the same page, but when scrolling to a different section remaining highlighted. Thoughts?
Thanks in advance
I guess you are talking about the default overlay on focus that happens when you click an anchor?
How about adding a class to the currently active section instead:
$("#nav a").click(function() {
var self = $(this), className = "active";
self.addClass(className).siblings("."+className).removeClass(className);
...
});
You might also want to check this answer since it could be related. If this answer is not helpful to you my advice is to create a test case on jsFiddle to help you describe your problem further.
Like this?
JS:
$('#nav a').click(function(){
$('#nav a').removeClass('highlighted');
$(this).addClass('highlighted');
});
CSS:
.highlighted {
background: #ffffeo;
}
My webpage is at http://www.sarahjanetrading.com/js/resume
All the HTML, CSS and jQuery code + images are available there for anyone to access.
My issue is that currently my jQuery code makes the tabs show the tab-content when I click on the achor tag of the tab. But the tab doesnt change into the clicked tab.(tab name remains the same).
And the tab changes into the clicked tab when i click on the respective li of the tab. What I want is that both the tab changes and the content of the tab shows when I click on the either the li of the tab or the anchor of the tab.
You have two lots of events registered. One on the anchors and the other on the lis. The one on the lis changes the active state for the tabs themselves while the one on the anchors change the content. You should combine these into one function.
You change check the li function is working by clicking on the very bottom edge of it. Because your anchor javascript has a return false feclaration it is preventing the click event bubbling up to the li, thus not showing the change.
Try changing the function:
$("ul.tabs li a").click(function() {
$("ul.tabs li > a").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
to the following:
$("ul.tabs li a").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
$(".active-tab").removeClass();
$(this).parent().addClass("active-tab");
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
This should work and you should be able to remove your other javascript function.
If you already use jQuery you can use the jQueryUI library to create tabs. It is very simple and the style can easily be changed. Here is the Tutorial for tabs:
jQuery UI - Tabs Demo
If you click the whitespace around the text in the tabs, it works. Remove the anchor link from inside the tab, or add a click handler for the anchor link.
Edit:
My mistake. You have a click handler on your anchor element, but clicking the anchor link causes it to become $(this) in your code. So you assign class="active" to the anchor, when you want to assign it to the li.
$(this).addClass("active");
should be rewritten to modify the li. Personally, I would wrap the li in the anchor link:
<li></li>
This will probably require modifying your JS code a little, but will give a uniform result.