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.

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?

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

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…

Thnx Robert :)…

Hi there,

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

$( ".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).

Hope you get better soon, pullo :), i’ll wait for you…

Good morning,

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

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:

$( ".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/09/get-url-parameters-values-with-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.

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 :(…

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:

<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:

<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.

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???

Good news all round then :slight_smile:

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)…

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.

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 :)…

Hi,

The problem is specifity.

Try this:

.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.