1 Replies - 409 Views - Last Post: 13 September 2012 - 07:24 AM

#1 Eludiac  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 21
  • Joined: 12-December 11

I want to add a new tab on this page. How do I do that?

Posted 13 September 2012 - 07:14 AM

Hey coders!

I was looking at this page and noticed that the content in the middle, the videos and the tabs labeled 2011, 2010 etc, is all generated by javascript, or at least it appears to be. When I click through the tabs, it hides all of the other tabs and then shows the tab that i wanted to look at. I know that's happening in the js code somewhere and that's fine, but what protocol would I have to follow in order to add a new tab and corresponding content to the page? I have no idea where the site is pulling the html code for the middle content from and where i would be able to add my own content. For example, if I wanted to add a new tab labeled 2012 and have videos and content and stuff which appears when the user clicks 2012, how would I do that? I'm semi-interested in implementing a method like this in some of my future sites but I have no idea how i would manage the content.

While you can look at the source and inspect the site at the link above, the code in question is:

  <!-- InstanceBeginEditable name="content" -->            
            <!-- ====================================================== Middle Column ============================================================== -->  
                <div id="middle-col" style="width:540px">                	
                    <script> 
					$(function() {
					  $("#middle-col").load("tv/index.html");	
					
					  $(".product-description a").click(function() {	  
						if ( $(this).hasClass("mag") ){
						  $("#middle-col").load("magazine/");
						}else if ( $(this).hasClass("newspaper") ){	  
						  $("#middle-col").load("newspaper/");
						}else if ( $(this).hasClass("radio") ){	  
						  $("#middle-col").load("radio/");
						}else if ( $(this).hasClass("online") ){	  
						  $("#middle-col").load("online/");
						}else{
						  $("#middle-col").load("tv/");
						}
					   });
					 });
					</script>
                </div>



Which then translates into actual divs and content and a navigation system which is visible when you inspect elements on the page using firebug or inspect element. Please help me gain a little more insight as to how this works and to how I add, change, and access, the content.

Thanks so much!

Is This A Good Question/Topic? 0
  • +

Replies To: I want to add a new tab on this page. How do I do that?

#2 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6092
  • View blog
  • Posts: 23,612
  • Joined: 23-August 08

Re: I want to add a new tab on this page. How do I do that?

Posted 13 September 2012 - 07:24 AM

jQueryUI Tabs
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1