Jump to content

Using a link from a referring page to open a tab on another page


pnmorrison

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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> 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

  • 4 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...