Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks
Reload this Page jQuery UI, How to Select first TAB automatically?

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-28-2012, 04:37 AM   PM User | #1
kor81
New Coder

 
Join Date: Aug 2011
Posts: 49
Thanks: 9
Thanked 0 Times in 0 Posts
kor81 is an unknown quantity at this point
jQuery UI, How to Select first TAB automatically?
I'm no javascript expert, in fact i know very little. I Design wordpress themes in photoshop and I'm looking to add a little more "spice" to my themes using jQuery UI so i made a theme with this tabbed horizontal navigation with the sub menu showing horizontally under the menu when you hover over it.

So i searched google on how to do this jQuery menu and got this.

Code:
	    
       <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
       <script type="text/javascript">
       $(document).ready(function(){
           $("#main_nav li a.main").hover(function(){
               $("#main_nav li a.main").removeClass("active");
               $(this).addClass("active");
               $(this).queue(function() {                    
                   $(".sub_nav").fadeOut();
                   $(this).siblings(".sub_nav").fadeIn();
                   $(this).dequeue();

               });
           });
       });
       </script>
The other part

Code:
<div class="menu">
                   <ul id="main_nav">
                       <li><a href="" class="main">ALL</a>
                           <ul class="sub_nav">
                               <li><a href="">HOME</a></li>
                               <li><a href="">NEWS</a></li>
                               <li><a href="">ARTICLES</a></li>
							   <li><a href="">PREVIEWS</a></li>
							   <li><a href="">REVIEWS</a></li>
							   <li><a href="">MEDIA</a></li>
							   <li><a href="">GAME WIKI</a></li>
							   <li><a href="">FORUMS</a></li>
							   <li><a href="">SUBMIT CONTENT</a></li>
							   <li><a href="">Journalist Pro</a></li>
							   
                           </ul>
                       </li>
                       <li><a href="" class="main">XBOX30</a>
                           <ul class="sub_nav">
                               <li><a href="">HOME</a></li>
                               <li><a href="">NEWS</a></li>
                               <li><a href="">ARTICLES</a></li>
							   <li><a href="">PREVIEWS</a></li>
							   <li><a href="">REVIEWS</a></li>
							   <li><a href="">MEDIA</a></li>
							   <li><a href="">GAME WIKI</a></li>
							   <li><a href="">FORUMS</a></li>
							   <li><a href="">SUBMIT CONTENT</a></li>
							   <li><a href="">Journalist Pro</a></li>
                           </ul>
                       </li>
                       <li><a href="" class="main">PS3</a>
                           <ul class="sub_nav">
                               <li><a href="">HOME</a></li>
                               <li><a href="">NEWS</a></li>
                               <li><a href="">ARTICLES</a></li>
							   <li><a href="">PREVIEWS</a></li>
							   <li><a href="">REVIEWS</a></li>
							   <li><a href="">MEDIA</a></li>
							   <li><a href="">GAME WIKI</a></li>
							   <li><a href="">FORUMS</a></li>
							   <li><a href="">SUBMIT CONTENT</a></li>
							   <li><a href="">Journalist Pro</a></li>
                           </ul>
                       </li>
					        <li><a href="" class="main">Wii U</a>
                           <ul class="sub_nav">
                               <li><a href="">HOME</a></li>
                               <li><a href="">NEWS</a></li>
                               <li><a href="">ARTICLES</a></li>
							   <li><a href="">PREVIEWS</a></li>
							   <li><a href="">REVIEWS</a></li>
							   <li><a href="">MEDIA</a></li>
							   <li><a href="">GAME WIKI</a></li>
							   <li><a href="">FORUMS</a></li>
							   <li><a href="">SUBMIT CONTENT</a></li>
							   <li><a href="">Journalist Pro</a></li>
                           </ul>
                       </li>
					        <li><a href="" class="main">Wii</a>
                           <ul class="sub_nav">
                               <li><a href="">HOME</a></li>
                               <li><a href="">NEWS</a></li>
                               <li><a href="">ARTICLES</a></li>
							   <li><a href="">PREVIEWS</a></li>
							   <li><a href="">REVIEWS</a></li>
							   <li><a href="">MEDIA</a></li>
							   <li><a href="">GAME WIKI</a></li>
							   <li><a href="">FORUMS</a></li>
							   <li><a href="">SUBMIT CONTENT</a></li>
							   <li><a href="">Journalist Pro</a></li>
                           </ul>
                       </li>
					        <li><a href="" class="main">PC</a>
                           <ul class="sub_nav">
                               <li><a href="">HOME</a></li>
                               <li><a href="">NEWS</a></li>
                               <li><a href="">ARTICLES</a></li>
							   <li><a href="">PREVIEWS</a></li>
							   <li><a href="">REVIEWS</a></li>
							   <li><a href="">MEDIA</a></li>
							   <li><a href="">GAME WIKI</a></li>
							   <li><a href="">FORUMS</a></li>
							   <li><a href="">SUBMIT CONTENT</a></li>
							   <li><a href="">Journalist Pro</a></li>
                           </ul>
                       </li>
					        <li><a href="" class="main">VITA</a>
                           <ul class="sub_nav">
                               <li><a href="">HOME</a></li>
                               <li><a href="">NEWS</a></li>
                               <li><a href="">ARTICLES</a></li>
							   <li><a href="">PREVIEWS</a></li>
							   <li><a href="">REVIEWS</a></li>
							   <li><a href="">MEDIA</a></li>
							   <li><a href="">GAME WIKI</a></li>
							   <li><a href="">FORUMS</a></li>
							   <li><a href="">SUBMIT CONTENT</a></li>
							   <li><a href="">Journalist Pro</a></li>
                           </ul>
                       </li>
					        <li><a href="" class="main">PSP</a>
                           <ul class="sub_nav">
                               <li><a href="">HOME</a></li>
                               <li><a href="">NEWS</a></li>
                               <li><a href="">ARTICLES</a></li>
							   <li><a href="">PREVIEWS</a></li>
							   <li><a href="">REVIEWS</a></li>
							   <li><a href="">MEDIA</a></li>
							   <li><a href="">GAME WIKI</a></li>
							   <li><a href="">FORUMS</a></li>
							   <li><a href="">SUBMIT CONTENT</a></li>
							   <li><a href="">Journalist Pro</a></li>
                           </ul>
                       </li>
					        <li><a href="" class="main">DS</a>
                           <ul class="sub_nav">
                               <li><a href="">HOME</a></li>
                               <li><a href="">NEWS</a></li>
                               <li><a href="">ARTICLES</a></li>
							   <li><a href="">PREVIEWS</a></li>
							   <li><a href="">REVIEWS</a></li>
							   <li><a href="">MEDIA</a></li>
							   <li><a href="">GAME WIKI</a></li>
							   <li><a href="">FORUMS</a></li>
							   <li><a href="">SUBMIT CONTENT</a></li>
							   <li><a href="">Journalist Pro</a></li>
                           </ul>
                       </li>
                   </ul>
               </div>
 
           </div>
 
       </div>
I'm needing the first tab (the "ALL" tab) to be selected by default, but i don't have the first clue on how to do this. You can paste the code in notepadd++ and you can see what i mean.
Last edited by kor81; 01-28-2012 at 07:17 PM..
kor81 is offline   Reply With Quote
Old 01-28-2012, 07:18 PM   PM User | #2
kor81
New Coder

 
Join Date: Aug 2011
Posts: 49
Thanks: 9
Thanked 0 Times in 0 Posts
kor81 is an unknown quantity at this point
Updated the above to be better understandable, i was really tired when i posted this.
kor81 is offline   Reply With Quote
Old 01-29-2012, 06:15 PM   PM User | #3
kor81
New Coder

 
Join Date: Aug 2011
Posts: 49
Thanks: 9
Thanked 0 Times in 0 Posts
kor81 is an unknown quantity at this point
can anyone help me with this issue? my theme is complete now but this issue is still unresolved and i don't even know where to begin.
kor81 is offline   Reply With Quote
Old 02-02-2012, 06:36 PM   PM User | #4
kor81
New Coder

 
Join Date: Aug 2011
Posts: 49
Thanks: 9
Thanked 0 Times in 0 Posts
kor81 is an unknown quantity at this point
problem is still open, unresolved.
kor81 is offline   Reply With Quote
Old 03-11-2012, 06:18 AM   PM User | #5
kor81
New Coder

 
Join Date: Aug 2011
Posts: 49
Thanks: 9
Thanked 0 Times in 0 Posts
kor81 is an unknown quantity at this point
bump bump

Here is a youtube video of my problem
http://www.youtube.com/watch?v=-RzOF4f1aL8
Last edited by kor81; 03-11-2012 at 06:24 AM..
kor81 is offline   Reply With Quote
Old 03-12-2012, 02:44 AM   PM User | #6
2reikis
Regular Coder

 
2reikis's Avatar
 
Join Date: Nov 2005
Location: California
Posts: 167
Thanks: 17
Thanked 13 Times in 13 Posts
2reikis is on a distinguished road
Code:
       <script type="text/javascript">
       $(document).ready(function(){
           $("#main_nav li a.main").hover(function(){
               $("#main_nav li a.main").removeClass("active");
               $(this).addClass("active");
               $(this).queue(function() {                    
                   $(".sub_nav").fadeOut();
                   $(this).siblings(".sub_nav").fadeIn();
                   $(this).dequeue();

               });
           });
           $('a.main:first').mouseover()
       });
       </script>
After setting up the code, manually hover the first container. This will trigger the code as if someone very kindly moused over it for you as soon as your page loads.
__________________
2Reikis
I did not arrive at my understanding of the physical universe through my rational mind.
Albert Einstein
2reikis is offline   Reply With Quote
Users who have thanked 2reikis for this post:
kor81 (03-12-2012)
Old 03-12-2012, 04:25 AM   PM User | #7
DanInMa
Senior Coder

 
DanInMa's Avatar
 
Join Date: Nov 2010
Location: Salem,Ma
Posts: 1,307
Thanks: 12
Thanked 204 Times in 204 Posts
DanInMa is on a distinguished road
I think if you jsut add the active class to it in your html, that should do it:

Code:
<li><a href="" class="main">ALL</a>
to
Code:
<li><a href="" class="main active">ALL</a>
__________________
- Firebug is a web developers best friend! - Learn it, Love it, use it!
- Validate your code! - JQ/JS troubleshooting
- Using jQuery with Other Libraries - Jslint for Jquery/other JS library users
DanInMa is offline   Reply With Quote
Users who have thanked DanInMa for this post:
kor81 (03-12-2012)
Old 03-12-2012, 04:35 AM   PM User | #8
kor81
New Coder

 
Join Date: Aug 2011
Posts: 49
Thanks: 9
Thanked 0 Times in 0 Posts
kor81 is an unknown quantity at this point
Quote:
Originally Posted by 2reikis View Post
Code:
       <script type="text/javascript">
       $(document).ready(function(){
           $("#main_nav li a.main").hover(function(){
               $("#main_nav li a.main").removeClass("active");
               $(this).addClass("active");
               $(this).queue(function() {                    
                   $(".sub_nav").fadeOut();
                   $(this).siblings(".sub_nav").fadeIn();
                   $(this).dequeue();

               });
           });
           $('a.main:first').mouseover()
       });
       </script>
After setting up the code, manually hover the first container. This will trigger the code as if someone very kindly moused over it for you as soon as your page loads.
Where do you live? because i want to come kiss your ***!

I Been stuck on this for a month or longer and no one had any clue, they were just as stuck as i was. THANK YOU!
kor81 is offline   Reply With Quote
Old 03-12-2012, 05:10 AM   PM User | #9
2reikis
Regular Coder

 
2reikis's Avatar
 
Join Date: Nov 2005
Location: California
Posts: 167
Thanks: 17
Thanked 13 Times in 13 Posts
2reikis is on a distinguished road
LOL, I live in New Mexico but before you kiss anything o' mine, I need to see a signed and dated permission slip from my wife.

srsly though, glad I could help. I'm no stranger to hair-pulling moments that last for days.
__________________
2Reikis
I did not arrive at my understanding of the physical universe through my rational mind.
Albert Einstein
2reikis is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 09:16 AM.
Advertisement
Log in to turn off these ads.