[pnmorrison]

i have some jquery tabs on my target page:


My Target Page
<ul id="tabs" class="tabs">
<li><a href="#learning"><span>Learning styles</span></a></li>
<li><a href="#room"><span>Room type</span></a></li>
<li><a href="#products"><span>Products</span></a></li>
</ul>

<div id="learning">
content
</div>

<div id="room">
content
</div>

<div id="products">
content
</div>


My Referring Page

<a href="search.jtp#products">

When clicked the link launches the target page with the products tab opened BRILLIANT.
HOWEVER it jumps to the end/bottom of the containing div - which happens to be well below the fold.

What i need is for it to jump open the the tab and stay at the top ie so the tabs are visible.

Can this be easily achieved. I might be able to use AJAX but im no whizz with this and have tried but failed miserably.
Any help would be greatly appreciated.

[Andrea]

<a href="search.jtp#products">

the '#products' takes you to a bookmark in that page. I just bet that wherever you land, you'll find an id="products' - which functions as a bookmark.

[pnmorrison]

Obviously there is. The containing div which hold the products has an id of products.
This isnt helpful.

[pnmorrison]

Clearly u have misunderstood my requirement.

[Andrea]

pnmorrison, on 04 August 2011 - 10:30 AM, said:

Clearly u have misunderstood my requirement.

That's always a possibility, but we try.

Is there a link to that page, that would definitely help getting the complete picture.

Until then, my answer stands - the '#product" is a link to a BOOKMARK and it takes you to your <div id="products">

So humor me and remove #product from your link and see what happens.

[Ben]

I don't think there is a way to do this without some additional Javascript. It sounds like the page is functioning as it should, just that you are trying to change the default browser behavior.

It may be as simple as adding this bit of Javascript to the document, but you'd have to test/experiment:

<script type="text/javascript">
    window.scrollTo(0,0); 
</script> 

[Ben]

@Andrea - The page is working correctly. Yes, using an anchor will cause the page to scroll down to that particular anchor. As far as I understand it, the anchor in the URL is used by the tab script to indicate which tab is open, so that is necessary. @Pnmorrison needs to override the default, correctly working browser behavior with his own that will move up to the top of the page when the page loads.

[Andrea]

Ben, on 04 August 2011 - 10:50 AM, said:

@Andrea - The page is working correctly. Yes, using an anchor will cause the page to scroll down to that particular anchor. As far as I understand it, the anchor in the URL is used by the tab script to indicate which tab is open, so that is necessary. @Pnmorrison needs to override the default, correctly working browser behavior with his own that will move up to the top of the page when the page loads.

Thanks for the detail. Apparently, I overlooked the jquery tabs part - which I know nothing about anyway.

[pnmorrison]

i think the solution would be to open the products tab first and then scroll to the top of the page - that way you can see the tab/button which pertains to the content in the containing div - if only i knew how.

[pnmorrison]

oops i failed to send a previous post - this was to thank Ben for ur help.

the scrolling js works as intended i guess in that it moves to the top of the containing div.
it would be perfect if i could show the actual tab/button in the viewing area as well. the top of the screen cuts this off.

i think the solution would be to open the products tab first and then scroll to the top of the page - that way you can see the tab/button which pertains to the content in the containing div - if only i knew how.

[pnmorrison]

if it helps:

http://equanet.merus.co.uk/edu/

click on the second option (IT manager) which goes to search.jtp#products

on the target page (search.jtp) you can see that you still need to scroll up a little to see the products tab/button.

[Ben]

Huh. I would have thought that

<script type="text/javascript">
    window.scrollTo(0,0); 
</script> 

would move the user to the top of the page, but I guess it only moves them to the top of that div. Have you tried using a negative number?

<script type="text/javascript">
    window.scrollTo(0,-300); 
</script> 

[pnmorrison]

ahah yes i did think of that but makes no difference unfortunately.
i think it is obeying the js in that it is scrolling to the top but then the anchor overides it

[pnmorrison]

is it okay if i post this in another section to see if i get any more feedback or a solution..?

[Andrea]

I can move it for you - which forum do you want to try?

[pnmorrison]

i may recieve more feedback in html section - can we position it there pls.
thank you so kindly.

[Andrea]

I guess I could - but it's a JavaScript not an HTML issue - and Ben reads them all, anyway

[Ben]

This is one potential solution which seems to work for me. Only downside is that it uses jquery, and I was trying to avoid that, but it looks like you are already using jquery.

One catch -- it seems like a link to an anchor that exists within the current page doesn't refresh the page, just moves the page into a position. However, an external link to the anchor from a different page works -- the Javascript I've added moves the page back up to the top. Hopefully this works for you?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>	
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		
		<style type="text/css">#test { background: red; }</style>
		
		<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			window.scrollTo(0,0);
		});
		</script>
	</head>
	<body>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p>test</p>
		<p id="test"><b>test</b></p>
		<p>test</p>		
		<p>test</p>		
		<p>test</p>		
		<p>test</p>		
		<p>test</p>
	</body>
</html>

[pnmorrison]

this is fantastic. cheers ben.
i couldnt express how appreciative i am for this.
thank you soooooooooooooooooo much.

[mykul]

Hey!!!!

This is all awesome, had the same problem. I needed to link from a page to a tab but still have the browser open to the top of the page and not to the top of the selected tab.

Only problem is it only seems to work in Firefox?