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.
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
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.
The following code is normally wrapped in an if statement to check if the browser is on a mobile device and if so then when you click on the main menu link it stops the href, hides the current nav bar links, then adds a new one. This allows for the drop menu to stay dropped and you can click on the main menu link again so that the href works. The problem is that you can only do this one time. After the first click and the javascript:void(0) is run and the links are updated I cannot stop the href from going to its original location. I need the javascript:void(0) to run on the first click of link each time and on the second click of the link redirect you to the respective page.
$(document).ready(function(){
$('.mobile-device > a').click(function(){
$(this).attr('href', 'javascript:void(0)');
});
});
$(document).ready(function(){
$('.mobile-device > a').click(function(){
$('.testing-a').css('display','block');
$('.testing-this').css('display','none')
});
});
Use preventDefault() in such scenario.
Example ::
$('.mobile-device > a').click(function(evt){
evt.preventDefault();
$(this).attr('href', 'javascript:void(0)');
});
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;
}
I am not very familiar with the JQuery Address plugin, but i came up with this code, and its working great, except in this situation: When i click on the "nav a", the url is changed and the content is also changed, but when i am reload the page, the plugin is not triggered by default.
$("#player aside nav a").address(function(event, hash) {
var rel = $(this).attr('rel');
$('.ajax_container').hide().removeClass('current');
$('#player aside nav a').removeClass('active');
$('#'+rel).show().addClass('current');
$(this).addClass('active');
return $(this).attr('href').replace(/^#/, '');
});
Any idea, how can i trigger this function on page load?
I think you need to look at $.address.externalChange(fn). When I click the back this event will fire and I believe it gives you the hash value.
You could just trigger the click event of that link. Put it in a "dom ready" function:
$(function() {
$("#player aside nav a").click();
});