These checks are probably the issue:
if($(".video-tabs1") && document.location.hash){
if($(".video-tabs2") && document.location.hash){
The first expression in each is always true, you'd have to use
$("selector").length to check if that element actually exists.
The second expression will be true for both or false for both, so you
have to check for some actual value.
Jörn
On Fri, Aug 14, 2009 at 9:44 PM, Gabe<[email protected]> wrote:
>
> Hello,
>
> I am building a tab interface for a web page, and I want to be able to
> link to the individual tabs' content. I figured out quickly I could
> use the hash tags from each of the tab sections appended to the url,
> but that scrolled the page to a place where the tabs themselves were
> not visible.
>
> I found this article that showed how to use the scrollTo and
> localScroll plugins to scroll the page to the top of the tabs and make
> them visible, so far so good.
>
> The problem comes when I try to set up a second set of tabs. this page
> has enough content that I am going to need 3-4 sections.
>
> Here is a link to the page in progress:
> http://www.easycareinc.com/Cool_Stuff/newvids1.aspx
>
> I can't seem to figure out how to scroll to the different tab sections
> with external links. I tried giving both tab sections the same class
> and using the single original function that worked with just one tab
> set function. I made sure to give each tab it's own unique anchor tag
> so they could be linked to separately:
>
>
> <!--------- tabs script--------->
> $(document).ready(
>
> function(){
> $(".video-tabs").tabs();
>
> if($(".video-tabs") && document.location.hash){
> $.scrollTo(".video-tabs");
> }
> $(".video-tabs ul").localScroll({
> target:".video-tabs",
> duration:0,
> hash:true });
>
> });
>
> <!-----html------------>
> <div class="video-tabs">
> <ul>
> <li><A href="#glove">Glove</a></li>
> <li><A href="#glue-on">Glue-On</A></li>
> <li><A href="#edge">Edge</a></li>
> <li><A href="#rx">Rx</a></li>
> <li><A href="#easyboot">Easyboot</a></li>
> <li><A href="#epic">Epic</a></li>
> </ul>
> <div id="glove"></div>
> etc....
>
> </div>
>
> <div class="video-tabs">
> <ul>
> <li><A href="#grip">Grip</a></li>
> <li><A href="#bare">Bare</A></li>
> <li><A href="#boa">Boa</a></li>
> <li><A href="#om">Old Mac's</a></li>
> </ul>
> <div id="grip"></div>
> etc....
>
> </div>
> --------------------------------------------------
>
> Using the method above, if I tried to use a link to a tab (
> http://www.domain.com/#grip ) it would work for the first section of
> tabs, but would not scroll to the second section. The proper tab in
> the second section would open, but the page would only scroll to the
> first tab section.
>
> So I tried uniquely naming the tab sections like this:
>
> <!--------- tabs script--------->
> $(document).ready(
>
> function(){
> $(".video-tabs1").tabs();
> $(".video-tabs2").tabs();
>
> if($(".video-tabs1") && document.location.hash){
> $.scrollTo(".video-tabs1");
> }
> $(".video-tabs1 ul").localScroll({
> target:".video-tabs1",
> duration:0,
> hash:true });
>
> if($(".video-tabs2") && document.location.hash){
> $.scrollTo(".video-tabs2");
> }
> $(".video-tabs2 ul").localScroll({
> target:".video-tabs2",
> duration:0,
> hash:true });
>
>
> });
>
> <!-----html------------>
> <div class="video-tabs1">
> <ul>
> <li><A href="#glove">Glove</a></li>
> <li><A href="#glue-on">Glue-On</A></li>
> <li><A href="#edge">Edge</a></li>
> <li><A href="#rx">Rx</a></li>
> <li><A href="#easyboot">Easyboot</a></li>
> <li><A href="#epic">Epic</a></li>
> </ul>
> <div id="glove"></div>
> etc....
>
> </div>
>
> <div class="video-tabs2">
> <ul>
> <li><A href="#grip">Grip</a></li>
> <li><A href="#bare">Bare</A></li>
> <li><A href="#boa">Boa</a></li>
> <li><A href="#om">Old Mac's</a></li>
> </ul>
> <div id="grip"></div>
> etc....
>
> </div>
> ---------------------------------------------
> Doing it this way, every link would scroll the page to the second set
> of tabs.
>
> Any idea how to select and scroll to a specific tab set, depending on
> which tab is linked to? Thank you
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
