SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    preventing hash jump on easytabs

    I've got some tabs that transition in and out by fading.

    The functionality of the tabs goes as follows

    User click on tab
    The tab then expands down
    The user can then tab through other tabs without panel closing (fade transition)
    The user can also click on same tab to collapse the tab up

    My issue is when the tab panel has been expanded, then closed, then a person clicks on another tab to re-expand it.

    I'm using a hash anchor to match up the tabs tot he content and it jumps the div to the top of the page. How do I disable this jumping behavior when the user re-expands the tabs a second time?

    Here is my code

    HTML Code:
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
          
            $('#tab-container').easytabs({
              collapsible: true, 
              collapsedByDefault: true,
    			       });
            
            var $tabContainer = $('#tab-container'),
                $tabs = $tabContainer.data('easytabs').tabs,
                $tabPanels = $(".panel")
                totalSize = $tabPanels.length;
            
            
            
          });
    
    
        </script>
    
    
    <div id="tab-container" class='tab-container'>
    	
             
               <ul class='etabs'>
    
                 <li class='tab'><a href="#tab1">About</a></li>
                 <li class='tab'><a href="#tab2">Committees</a></li>
                 <li class='tab'><a href="#tab3">Events</a></li>
                 <li class='tab'><a href="#tab4">Grants &amp; Support</a></li>
                  <li class='tab'><a href="#tab5">Knowledge Base</a></li>
                  <li class='tab tabActive'><a href="#tab6">Blog</a></li>
                 <li class='tab'><a href="#tab7">Forum</a></li>
                 <li class='tab'><a href="#tab8">Submit</a></li>
               </ul>
         
     
         <div class='panel-container'>
          <div id="tab1" class="panel">
          	
            <div class="container_50">
              <h2>About</h2>
              <div class="panelContent">
                text
              </div>
            </div>
          </div>
          <div id="tab2" class="panel">
            <div class="container_50">
            <h2>Committees</h2>
            <p>
              text
            </p>
        	</div>
          </div>
          <div id="tab3" class="panel">
            <div class="container_50">
            <h2>Events</h2>
            <p>
              text
            </p>
        	</div>
          </div>
          <div id="tab4" class="panel">
          	<div class="container_50">
            <h2>Grants &amp; Support</h2>
            <p>
              text
            </p>
        </div>
          </div>
          <div id="tab5" class="panel">
          	<div class="container_50">
            <h2>Knowledge Base</h2>
            <p>
            text
            </p>
        </div>
          </div>
          <div id="tab6" class="panel">
          	<div class="container_50">
            <h2>Blog</h2>
            <p>
           text
            </p>
        </div>
          </div>
          <div id="tab7" class="panel">
          	<div class="container_50">
            <h2>Forum</h2>
            <p>
              text
            </p>
        </div>
          </div>
          <div id="tab8" class="panel">
          	<div class="container_50">
            <h2>Submit</h2>
            <p>
              text
            </p>
        </div>
          </div>
    suggestions?

    I've tried this already :

    <script type="text/javascript">
    /* <![CDATA[ */
    ( function( $ ) {
    $( 'a[href="#"]' ).click( function(e) {
    e.preventDefault();
    } );
    } )( jQuery );
    /* ]]> */
    </script>

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,868
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    href="#" is an instruction to jump to the top of the page. If you don't want that behaviour then get rid of the href.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What other alternatives are there?

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,868
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Perhaps put a rel attribute on the <a> tag in place of the href and use that instead to locate the tags that the code is to apply to.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I've been waiting for this day for 8 years. I know something felgall didn't know. Lol. You need the href and something in it for a few browsers for it to work - depending. So you do this to keep it from jumping...

    Code:
    <a href="javascript:;"></a>

    http://www.websitecodetutorials.com/...ith-no-url.php

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,868
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by PicnicTutorials View Post
    Code:
    <a href="javascript:;"></a>
    NEver ever place a JavaScript label inside the href like that. Anyone even suggesting such a thing should never be providing advice on JavaScript as they obviously know nothing whatever about JavaScript since learning not to do that is one of the first things any decent beginners JavaScript class would teach.

    If you need the href to be there then you need to disable the default action when JavaScript is enabled and leave the href pointing to the web page you want people to get to if they click the link and don't have JavaScript enabled.

    Where the href is needed is where you have it pointing to an actual web page. The href="#" is only ever used in example code where the # is supposed to be replaced by the address of the page for hen javaScript is not available. When you do;'t have an actiaual page to link to in that situation then all resonably modern browsers such as Netscape 4 do not require the href attribute to be there at all.

    Since the OP hadn't replaced the # with an actual page for the link to work with for those without JavaScript the href is completely unnecessary for their purpose. Only if they changed it to provide a working destination for those without JavaScript would a different solution be required.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ha you didn't take that personal did you. It does prevent it from jumping. And because he asked he did need it. Why is that a problem in your minds eye anyway?

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,868
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Looking again at the original code I have now realised that the href="#..." are needed as they are where you want things to jump to if JavaScript is disabled.

    So what must be happening is that the following code is not matching to the tags that you expect:

    Code:
    $( 'a[href="#"]' ).click( function(e) {
    e.preventDefault();
    } );
    perhaps because none of the hrefs have just a # in them.

    They all start with a # so the following should work:

    Code:
    $( 'a[href^="#"]' ).click( function(e) {
    e.preventDefault();
    } );
    note the extra ^ in front of the = to indicate starts with rather than exactly equal to.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    They all start with a # so the following should work:

    Code:
    $( 'a[href^="#"]' ).click( function(e) {
    e.preventDefault();
    } );
    note the extra ^ in front of the = to indicate starts with rather than exactly equal to.
    I've tried adding this to my script, but I think I'm implementing it wrong, just putting it in the document ready function doesn't seem to do it... pardon my asking for so much help, I really do appreciate it.

    Whereabouts in here would I add the recommended snippet?

    HTML Code:
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
          
            $('#tab-container').easytabs({
              collapsible: true, 
              collapsedByDefault: true
    			       });
            
            var $tabContainer = $('#tab-container'),
                $tabs = $tabContainer.data('easytabs').tabs,
                $tabPanels = $(".panel")
                totalSize = $tabPanels.length;
          });
    </script>

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ahh my bad. I should of looked closer. Much closer lol. You have #tabs1 ect in the href. Obviously you can't put anything else in there. The solution I showed was only for when you need the href but if you use # it goes to the top. In that case you can use what I showed.


Bookmarks

Posting Permissions

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