Forums

marcott

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):


// 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:


$(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\");
	});
});

cybershot

You 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.

marcott

Any help will be greatly appreciated.

Here is the jQuery (updated since my last post):


$(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:


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

<html xmlns=\"http://www.w3.org/1999/xhtml\">

	<head>
		<meta http-equiv=\"content-type\" content=\"text/html;charset=utf-8\" />
		<title>CSS + jQuery Panels</title>
		
		<style type=\"text/css\">
		/* Front Page News */
		#newsPanels {
			float: right;
			width: 460px;
			margin-right: 20px;
		}

		#newsPanels ul {
			margin: 11px 0;
			padding: 0;
			list-style: none;
		}

		#newsPanels li {
			display: inline;
		}

		#newsPanels ul li a {
			margin: 0;
			padding: 10px 25px 10px 25px;
			background: #9ba0b0;
			border: 1px solid #bfbfbf;
			border-bottom: none;
		}

		#newsContainer {
			background: #f6f6f6;
			border: 1px solid #bfbfbf;
		}

		#newsItem {
			margin: 10px 20px;
			padding: 0;
			background: #f0f0f0;
			border: 1px solid #bfbfbf;
		}
		
		/* News Panel Type */
		#newsPanels ul li a {
			margin: 0;
			padding: 10px 25px 10px 25px;
			font-weight: bold;
			color: #ffffff;
			border: 1px solid #bfbfbf;
			border-bottom: none;
		}

		#newsPanels ul li a.active {
			margin: 0;
			padding: 10px 25px 10px 25px;
			color: #666;
			background: #f6f6f6;
			border-left: 1px solid #bfbfbf;
			border-right: 1px solid #bfbfbf;
			border-top: 1px solid #bfbfbf;
			border-bottom: 1px solid #f6f6f6;
		}

		#newsPanels ul li a:hover {
			margin: 0;
			padding: 10px 25px 10px 25px;
			color: #666;
			background: #f6f6f6;
			font-weight: bold;
			border: 1px solid #bfbfbf;
			border-bottom: 1px solid #f6f6f6;
		}

		#newsItem h4 {
			padding: 10px 10px 10px 10px;
			font-size: 14px;
			font-weight: bold;
		}

		#newsItem h5 a {
			display: block;
			padding: 0 10px 10px 10px;
			font-size: 14px;
			font-weight: normal;
			color: #5e9ff7;
			text-decoration: underline;
		}

		#newsItem p a {
			margin: 0px 10px 5px 10px;
			color: #5e9ff7;
			text-decoration: underline;
		}
		
		</style>

	</head>

	<body>
		
		<div id=\"newsPanels\">
		<ul>
			<li><a class=\"generalNews\">News</a></li>
			<li><a class=\"ngNews\">NG</a></li>
			<li><a class=\"kstarNews\">K-Star</a></li>
			<li><a class=\"k1News\">K1</a></li>
			<li><a class=\"k2News\">K2</a></li>
		</ul>
		<div id=\"newsContainer\" class=\"generalNews\">
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">[General News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>			
		</div>
		<div id=\"newsContainer\" class=\"ngNews\">
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">[Nancy Greene News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>			
		</div>
		<div id=\"newsContainer\" class=\"kstarNews\">
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">[K-Star News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>			
		</div>
		<div id=\"newsContainer\" class=\"k1News\">
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">[K1 News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>			
		</div>
		<div id=\"newsContainer\" class=\"k2News\">
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">[K2 News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>
			<div id=\"newsItem\">
				<h4>Tuesday, September 8th, 2009</h4>
				<h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
			</div>			
		</div>
		</div>
		
	</div>
	
	</body>
</html>

cybershot

where are you calling your jquery library from? I don't see it in the head section

marcott

Sorry, I pasted only the code necessary to test the script (minus the library). I have uploaded the page so simplify things:

http://dev.mtseymourskiclub.com

cybershot

well 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.


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">

   <head>
      <meta http-equiv=\"content-type\" content=\"text/html;charset=utf-8\" />
	  <script src=\"js/jquery-1.3.2.min.js\" type=\"text/javascript\" ></script>

      <title>CSS + jQuery Panels</title></head>
	  <script type=\"text/javascript\">
	  $(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\");
      }
   });
});

      </script>
      <style type=\"text/css\">
      /* Front Page News */
      #newsPanels {
         float: right;
         width: 460px;
         margin-right: 20px;
      }

      #newsPanels ul {
         margin: 11px 0;
         padding: 0;
         list-style: none;
      }

      #newsPanels li {
         display: inline;
      }

      #newsPanels ul li a {
         margin: 0;
         padding: 10px 25px 10px 25px;
         background: #9ba0b0;
         border: 1px solid #bfbfbf;
         border-bottom: none;
      }

      #newsContainer {
         background: #f6f6f6;
         border: 1px solid #bfbfbf;
      }

      #newsItem {
         margin: 10px 20px;
         padding: 0;
         background: #f0f0f0;
         border: 1px solid #bfbfbf;
      }
      
      /* News Panel Type */
      #newsPanels ul li a {
         margin: 0;
         padding: 10px 25px 10px 25px;
         font-weight: bold;
         color: #ffffff;
         border: 1px solid #bfbfbf;
         border-bottom: none;
      }

      #newsPanels ul li a.active {
         margin: 0;
         padding: 10px 25px 10px 25px;
         color: #666;
         background: #f6f6f6;
         border-left: 1px solid #bfbfbf;
         border-right: 1px solid #bfbfbf;
         border-top: 1px solid #bfbfbf;
         border-bottom: 1px solid #f6f6f6;
      }

      #newsPanels ul li a:hover {
         margin: 0;
         padding: 10px 25px 10px 25px;
         color: #666;
         background: #f6f6f6;
         font-weight: bold;
         border: 1px solid #bfbfbf;
         border-bottom: 1px solid #f6f6f6;
      }

      #newsItem h4 {
         padding: 10px 10px 10px 10px;
         font-size: 14px;
         font-weight: bold;
      }

      #newsItem h5 a {
         display: block;
         padding: 0 10px 10px 10px;
         font-size: 14px;
         font-weight: normal;
         color: #5e9ff7;
         text-decoration: underline;
      }

      #newsItem p a {
         margin: 0px 10px 5px 10px;
         color: #5e9ff7;
         text-decoration: underline;
      }
      
      </style>

   </head>

   <body>
      
      <div id=\"newsPanels\">
      <ul>
         <li><a class=\"generalNews\">News</a></li>
         <li><a class=\"ngNews\">NG</a></li>
         <li><a class=\"kstarNews\">K-Star</a></li>
         <li><a class=\"k1News\">K1</a></li>
         <li><a class=\"k2News\">K2</a></li>
      </ul>
      <div id=\"newsContainer\" class=\"generalNews\">
         <div id=\"newsItem\">
            <h4>Tuesday, September 8th, 2009</h4>
            <h5><a href=\"\">[General News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>
         <div id=\"newsItem\">
            <h4>news 1</h4>
            <h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>
         <div id=\"newsItem\">
            <h4>news 2</h4>
            <h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>         
      </div>
      <div id=\"newsContainer\" class=\"ngNews\">
         <div id=\"newsItem\">
            <h4>Tuesday, September 8th, 2009</h4>
            <h5><a href=\"\">[Nancy Greene News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>
         <div id=\"newsItem\">
            <h4>ng news 1</h4>
            <h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>
         <div id=\"newsItem\">
            <h4>ng news 2</h4>
            <h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>         
      </div>
      <div id=\"newsContainer\" class=\"kstarNews\">
         <div id=\"newsItem\">
            <h4>Tuesday, September 8th, 2009</h4>
            <h5><a href=\"\">[K-Star News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>
         <div id=\"newsItem\">
            <h4>ks news 1</h4>
            <h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>
         <div id=\"newsItem\">
            <h4>ks news 2</h4>
            <h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>         
      </div>
      <div id=\"newsContainer\" class=\"k1News\">
         <div id=\"newsItem\">
            <h4>Tuesday, September 8th, 2009</h4>
            <h5><a href=\"\">[K1 News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>
         <div id=\"newsItem\">
            <h4>kl news 1</h4>
            <h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>
         <div id=\"newsItem\">
            <h4>kl news 2</h4>
            <h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>         
      </div>
      <div id=\"newsContainer\" class=\"k2News\">
         <div id=\"newsItem\">
            <h4>Tuesday, September 8th, 2009</h4>
            <h5><a href=\"\">[K2 News] This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>
         <div id=\"newsItem\">
            <h4>k2 news 1</h4>
            <h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>
         <div id=\"newsItem\">
            <h4>k2 news 2</h4>
            <h5><a href=\"\">This is the Headline from some piece of news relevant to the category. Click through will take you to the story.</a></h5>
         </div>         
      </div>
      </div>
      
   
   
   </body>
</html>

cybershot

ON 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

marcott

Ah, 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.

cybershot

your welcome. I like the site by the way. Good work.

treehouse : what would you like to learn today?

Forums

jQuery Panel Tab Issues