Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    61
    Thanks
    12
    Thanked 0 Times in 0 Posts

    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 08:17 PM.

  • #2
    New Coder
    Join Date
    Aug 2011
    Posts
    61
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Updated the above to be better understandable, i was really tired when i posted this.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    61
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    61
    Thanks
    12
    Thanked 0 Times in 0 Posts
    problem is still open, unresolved.

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    61
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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 07:24 AM.

  • #6
    Regular Coder 2reikis's Avatar
    Join Date
    Nov 2005
    Location
    New Mexico, USA
    Posts
    174
    Thanks
    18
    Thanked 13 Times in 13 Posts
    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

  • Users who have thanked 2reikis for this post:

    kor81 (03-12-2012)

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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>

  • Users who have thanked DanInMa for this post:

    kor81 (03-12-2012)

  • #8
    New Coder
    Join Date
    Aug 2011
    Posts
    61
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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!

  • #9
    Regular Coder 2reikis's Avatar
    Join Date
    Nov 2005
    Location
    New Mexico, USA
    Posts
    174
    Thanks
    18
    Thanked 13 Times in 13 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •