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 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2004
    Posts
    37
    Thanks
    2
    Thanked 0 Times in 0 Posts

    jquery tab effects

    I'm using the jquery UI tabs, but the transition from tab to tab is very jumpy. Where can I find what effects that can be used with it if there are any? Should I be using another library with better effects?

    Here's my current initialization code:
    Code:
    <script>
    	$(function() {
    		$('#tabs_container > ul').tabs( {remote:true, ajaxOptions: {cache:false}, spinner:'Loading', fx: { height: 'toggle', opacity: 'toggle', duration:'slow' } }).tabs('rotate', 5000);
    	});
      </script>

  • #2
    Regular Coder
    Join Date
    Aug 2008
    Location
    Northern Ireland
    Posts
    167
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Do you have a link to the page that has the jumpy transitions on it?

  • #3
    New Coder
    Join Date
    Nov 2004
    Posts
    37
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sure, I've kind of figured out that I don't think it's the js, it's my CSS that needs to edited somehow to insure the height stays the same. You can see how the bottom nav briefly jumps to the top instead of staying in place.

    http://www.usm.edu/pr/web/beta/index.php

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post

    jumping

    I know the thread is old but anyway:
    if you mean brief jumping behavior during initial page load:
    I observed this in FF 3.0.15

    you can use the document.ready function to initialize the script something like so:

    $(document).ready(function () {
    ... [your code here]...
    });

    so you can set the initial visibility of your tabstrip or its container to false in the saved html file, then your jquery document ready function should be something like:
    $(document).ready(function () {
    [decorate tabstrip with your code]
    [set visibility of your tabstrip or its container to true]
    });

    you can read more about that event here
    http://docs.jquery.com/Events/ready

    You could create a div with a specific height around the tabstrip or its container to serve as a non-shifting placeholder so changing the visibility of the tabstrip or its container doesn't affect the rest of the page display while loading and prior to the document.ready function call...
    Last edited by pogo1234; 11-22-2009 at 07:07 PM. Reason: extra credit :)

  • Users who have thanked pogo1234 for this post:

    subnet_rx (11-24-2009)


  •  

    Posting Permissions

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