Home › Forums › JavaScript › jQuery Panel Tab Issues
- This topic is empty.
-
AuthorPosts
-
September 15, 2009 at 12:06 am #26110marcottMember
Hello all,
I am having some very frustrating issues with some jQuery script. I am building a site for a non profit I work for. The site will display the latest news headlines for five categories on the front page. Each category has its own tab and when you roll over it the respective category is displayed while the others are hidden.
I have tested the page and script with mac versions of Safari and Firefox as well as the windows version of Safari with no issues – everything works as it should. When I try it with IE 7+ or Firefox on windows it does something quite odd: the tabs and content will display for the first and second categories but when you scroll over any of the other categories the content from the second tab displays.
I am at a loss.
Here is the code (commented):
Code:// Front Page News Panel Switcher$(document).ready(function() {
// hides all of the news containers
$(“div#newsContainer”).hide();// makes the first container visible
$(“div#newsContainer.generalNews”).show();// sets the first containers tab to its active state
$(“div#newsPanels li a.generalNews”).addClass(“active”);// hover function to switch tab and content states
$(“#newsPanels li a”).hover(function() {// set variable based on class of the tab being hovered over
var tgt = $(this).attr(“class”);// hides all of the news containers
$(“div#newsContainer”).hide();// shows content for the new tab
$(“div.”+tgt).show();// resets tabs
$(“div#newsPanels li a”).removeClass(“active”);// sets new tab to active
$(this).addClass(“active”);
});
});Here is the code without comments for clarity:
Code:$(document).ready(function() {
$(“div#newsContainer”).hide();
$(“div#newsContainer.generalNews”).show();
$(“div#newsPanels li a.generalNews”).addClass(“active”);$(“#newsPanels li a”).hover(function() {
var tgt = $(this).attr(“class”);
$(“div#newsContainer”).hide();
$(“div.”+tgt).show();
$(“div#newsPanels li a”).removeClass(“active”);
$(this).addClass(“active”);
});
});September 15, 2009 at 1:43 am #64088cybershotParticipantYou didn’t give enough information. We could use a link to the site, we could also use the code for the site so that we can test the code locally to figure out a sollution.
September 15, 2009 at 2:06 am #64090marcottMemberAny help will be greatly appreciated.
Here is the jQuery (updated since my last post):
Code:$(document).ready(function() {
$(“div#newsContainer”).hide();
$(“div#newsContainer.generalNews”).show();
$(“div#newsPanels li a.generalNews”).addClass(“active”);$(“#newsPanels li a”).hover(function() {
var currentTab = $(“#newsPanels li a.active”).attr(“class”);
var tgt = $(this).attr(“class”);if (currentTab == tgt) {
return(this);
} else {
$(“div#newsContainer”).hide();
$(“div.”+tgt).show();
$(“div#newsPanels li a”).removeClass(“active”);
$(this).addClass(“active”);
}
});
});And here is the HTML with basic styling:
Code:
CSS + jQuery Panels Tuesday, September 8th, 2009
[General News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
Tuesday, September 8th, 2009
This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
Tuesday, September 8th, 2009
This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
Tuesday, September 8th, 2009
[Nancy Greene News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
Tuesday, September 8th, 2009
This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
Tuesday, September 8th, 2009
This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
Tuesday, September 8th, 2009
[K-Star News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
Tuesday, September 8th, 2009
This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
Tuesday, September 8th, 2009
This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
Tuesday, September 8th, 2009
[K1 News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
Tuesday, September 8th, 2009
This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
Tuesday, September 8th, 2009
This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
Tuesday, September 8th, 2009
[K2 News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
Tuesday, September 8th, 2009
This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
Tuesday, September 8th, 2009
This is the Headline from some piece of news relevant to the category. Click through will take you to the story.
September 15, 2009 at 2:18 am #64099cybershotParticipantwhere are you calling your jquery library from? I don’t see it in the head section
September 15, 2009 at 2:37 am #64100marcottMemberSorry, I pasted only the code necessary to test the script (minus the library). I have uploaded the page so simplify things:
September 15, 2009 at 2:38 am #64101cybershotParticipantwell I am looking at your code and I am not seeing what problem you are having. When I scroll over the tabs, they all show the correct information. Here is the code I tested.
I added a link to jquery-1.3.2.min.js into the head section of the file. then I changed the dates on the second and thrird block of news so that I could see that they are changing. Everything looks correct.
Code:
CSS + jQuery Panels
September 15, 2009 at 2:42 am #64107cybershotParticipantON another note. I just noticed that you code is bad in one spot. You have id="newsitem" defined several times. You can’t do that. You need to change that to class="newsitem" Maybe that’s the cause of the problem you are having. Same thing with newsContainer
September 15, 2009 at 2:57 am #64108marcottMemberAh, turned out to be my lazy coding! Changed the repeating id’s to classes and everything seems to be working fine across Safari, FF and IE, both windows and mac. Funny how it almost always ends up being something simple.
Thanks for your help. It is always great to have another set of eyes spot the issues.
I guess I can get some sleep now. Cheers.
September 15, 2009 at 2:59 am #64109cybershotParticipantyour welcome. I like the site by the way. Good work.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.