SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to jump to a section within another page

    Hi, I'd initially asked this question under the general website design forum but was asked to repost in this JS forum.

    I have the site yourdemosite.in from which I'm trying to link to specific tab sections within other pages - for example, under the Therapies section in the homepage, I have links such as yourdemosite.in/therapies.html#two and yourdemosite.in/therapies.html#three..

    However, all these links only take me to the first tab on the Therapies page and it seems that it is the Javascript for the tabs that is causing this behaviour.

    Can anyone let me know how to handle this in JS as I need to be able to jump to those specific tabs from the homepage links??

    Thanks,
    Xavier.

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    This should work as you describe, but it seems that JavaScript is overriding the browser's default behaviour.
    Could you post a link to your site so I can see this problem in action?

  3. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Xavier (maxdp73), has already posted the links: http://yourdemosite.in/ that is the site in question. The page was also noted; http://yourdemosite.in/therapies.html

  4. #4
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Hi,

    This should work as you describe, but it seems that JavaScript is overriding the browser's default behaviour.
    Could you post a link to your site so I can see this problem in action?
    Ahh, a reply finally , thnx pullo....the site is at yourdemosite.in and the external page links I'm referring to are in the Therapies section...

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    Off Topic:

    Xavier (maxdp73), has already posted the links: http://yourdemosite.in/ that is the site in question. The page was also noted; http://yourdemosite.in/therapies.html
    Thnx Robert ...

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    So according to the documentation you should just be able to do:

    Code JavaScript:
    $( ".selector" ).tabs({ selected: 3 });

    meaning you could just retrieve the correct tab from document.location and apply the selected class accordingly.

    However, for some reason I couldn't get this to work with your code.
    Leave it with me and I'll have a closer look and get back to you with a solution.
    (I'm afraid I'm ill right now so it might take a day or two).

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hope you get better soon, pullo , i'll wait for you...

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Good morning,

    I can think a lot better after a good night's sleep and have found a solution for you

    I made a demo page using the code from here: http://jqueryui.com/tabs
    After a little trial and error, it seems the best way to pre-select the open tab is thus:

    Code JavaScript:
    $( ".selector" ).tabs({ active: 1 });
    I then decided to pass in the tab to open via a query string in the url (i.e. www.site.com?tab=2). The reason for this is that if you do this: www.site.com#two, then the browser will always jump to the anchor "#two" on page load.
    I then found a function to retrieve url parameter values here: http://jquery-howto.blogspot.de/2009...th-jquery.html and put everything together.

    There are three tabs in my example.
    Open first tab (default)
    Open second tab
    Open third tab

    All of the JavaScript is inline, so if you have a look at the page source, you'll be able to see what I have done.
    You'll need to adapt this a little to work with your page, but hopefully that shouldn't be too hard.
    Let me know if you have any questions.

  9. #9
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't get to thank you for the quick reply, Pullo...it's been 2 weeks and i apologise for this late response but I had some personal issues (baby was hospitalised)...i tried your soln in my pages but it's not working right, it seems so simple but i think i'm missing something...

    i plugged the script inline into my therapies.html page and changed the links in my index.html page to therapies.html?tab=1, which i thought was what you had done, but the links stubbornly take me to the first tab alone ...

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    Sorry to hear about your baby.
    I hope he/she is ok.

    Anyway, re. your page:
    I basically crowbarred out your tabs script and replaced it with a more modern version of the same thing.
    In the process I removed these:

    HTML Code:
    <script type="text/javascript" src="http://yourdemosite.in/js/jquery_1.4.2.js"></script>
    <script type="text/javascript" src="http://yourdemosite.in/js/jqueryui.js"></script>
    <script type="text/javascript" src="http://yourdemosite.in/js/jquery.tabs/jquery.tabs.pack.js"></script>
    and added these:

    HTML Code:
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
    I also had to alter the mark-up around the tabs ever so slightly, but I managed to keep the tab styling.
    And, as I was feeling benevolent, I corrected a bit of invalid mark-up and made your document validate.

    Anyway, here are links to the various tab states:
    Tab 1 open (default)
    Tab 2 open
    Tab 3 open
    Tab 4 open
    Tab 5 open

    Just check out the page and have a look at the source to see exactly what I have done.

    Hope that helps.

  11. #11
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works!!! Thnx for the help, the soln and also your benevolence, Pullo ...Baby's recovered from his infections now, thanks for asking...

    Would you by any chance be able to tell me how to get that search function (which you've uncommented!) to work??? Is it complex, should I try out Google custom search???

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by maxdp73 View Post
    Works!!! Thnx for the help, the soln and also your benevolence, Pullo ...Baby's recovered from his infections now, thanks for asking...
    Good news all round then

    Quote Originally Posted by maxdp73 View Post
    Would you by any chance be able to tell me how to get that search function (which you've uncommented!) to work??? Is it complex, should I try out Google custom search???
    Um, depends how the site is constructed.
    Am I correct in assuming you have a bunch of static HTML pages, or is your content stored in a database?

  13. #13
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pullo View Post
    Um, depends how the site is constructed.
    Am I correct in assuming you have a bunch of static HTML pages, or is your content stored in a database?
    Well, bunch of static HTML pages for now, but will possibly change, maybe later this year itself even, to include memberships/paid content (which, I'm assuming, require database storage)...

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    In this case you probably want to go with a remotely hosted search service (such as Google)

    I used Google Search at work for quite a while and had good results with it.
    However, for a commercial site, you'll have to show the search ads it serves up.

    Here is a good overview of some alternatives.

  15. #15
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thnx, will check them out, Pullo...Reverting to the previous issue, I'm trying to set the color of the active tab using .ui-tabs-active{color: #??????;}, replacing the bold and underline you'd set earlier but it's not working!!! Any idea why? As you can probably tell, I'm very much a newbie to the web design world, so hope you'll excuse my qns if they seem really dumb ...

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,321
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    The problem is specifity.

    Try this:

    Code CSS:
    .portfolio-sidebar ul li.ui-tabs-active a { color:green; }

    If you want to read more about why this wasn't working, check this out.


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
  •