Question

a couple of queries with jquery…

I’m trying to create a tabbed panel, initially I tried using jquery tabs ui but could not get it to exist with blueprint. Whenever I used a ‘span-xx’ class within the pane the whole structure seemed to break and the panes appeared outside of the tab area.

A bit if digging and I found the blueprint example from their site so got to work on that method instead. The jquery code appeared at the footer and I understand this is so it runs after the page is loaded? I tried moving it to the top but no joy. I also put it within a document.ready but still no joy – should I worry about this or leave it alone? Why does it not work within a document.ready??

    <script type="text/javascript">
        $("ul.tabs li.label").hide(); 
        $("#tab-set > div").hide(); 
        $("#tab-set > div").eq(0).show(); 


      $("ul.tabs a").bind('click hover', 

    function() { 
        $("ul.tabs a.selected").removeClass('selected'); 
        $("#tab-set > div").hide();
        $(""+$(this).attr("href")).fadeIn('slow'); 
        $(this).addClass('selected'); 
        return false; 
    }
  );

  $("#toggle-label").click( function() {
    $(".tabs li.label").toggle(); 
    return false; 
  }); 
    </script>

My main problem though is when I mouseover the tab it displays the panel most times but on other occasions I can get multiple instances of the same panel or indeed other panels. ANy reasons why?

summary:
Is there a way to get blueprint to play nice with jquery tabs ui?
Why is the code at the page bottom and can I get it to work from the top?
Why am I getting multiple instances of the panes?

<div id="tab-set" class="span-18 append-1">
      <ul class="tabs">
        <li><a href="#panel-1" class="selected">Full Membership</a></li>
        <li><a href="#panel-2">Associate</a></li>
        <li><a href="#panel-3">Cadets</a></li>
        <li><a href="#panel-4">Juniors</a></li>
        <li><a href="#panel-5">Corporate</a></li>
        <li><a href="#panel-6">Hotels</a></li>
      </ul>
<div id="panel-1>Content 1</div>
<div id="panel-2>Content 2</div>
  etc...
</div>

Thanks for the help

Answer 1

I think because your animation is not ready yet. try this:

<script type="text/javascript">
    $("ul.tabs li.label").hide(); 
    $("#tab-set > div").hide(); 
    $("#tab-set > div").eq(0).show(); 


  $("ul.tabs a").bind('click hover', 

function() { 
    $("ul.tabs a.selected").removeClass('selected'); 
    $("#tab-set > div").stop(true, false).hide(); // This stops the animation
    $(""+$(this).attr("href")).fadeIn('slow'); 
    $(this).addClass('selected'); 
    return false; 
}
);

$("#toggle-label").click( function() {
  $(".tabs li.label").toggle(); 
  return false; 
}); 
</script>