Jump to content


Photo

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


  • Please log in to reply
19 replies to this topic

#1 pnmorrison

pnmorrison

    Member

  • Member
  • PipPip
  • 45 posts

Posted 29 July 2011 - 09:50 AM

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

#2 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 29 July 2011 - 02:21 PM

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

#3 pnmorrison

pnmorrison

    Member

  • Member
  • PipPip
  • 45 posts

Posted 04 August 2011 - 10:29 AM

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

#4 pnmorrison

pnmorrison

    Member

  • Member
  • PipPip
  • 45 posts

Posted 04 August 2011 - 10:30 AM

Clearly u have misunderstood my requirement.
  • 0

#5 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 04 August 2011 - 10:43 AM

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

#6 Ben

Ben

    Administrator

  • Administrators
  • 5,553 posts
  • LocationChico, CA

Posted 04 August 2011 - 10:44 AM

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>

  • 0
Benjamin Falk
Falken Creative : Twitter

#7 Ben

Ben

    Administrator

  • Administrators
  • 5,553 posts
  • LocationChico, CA

Posted 04 August 2011 - 10:50 AM

@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.
  • 0
Benjamin Falk
Falken Creative : Twitter

#8 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 04 August 2011 - 11:22 AM

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

#9 pnmorrison

pnmorrison

    Member

  • Member
  • PipPip
  • 45 posts

Posted 08 August 2011 - 03:09 AM

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

#10 pnmorrison

pnmorrison

    Member

  • Member
  • PipPip
  • 45 posts

Posted 08 August 2011 - 03:11 AM

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

#11 pnmorrison

pnmorrison

    Member

  • Member
  • PipPip
  • 45 posts

Posted 08 August 2011 - 04:56 AM

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

#12 Ben

Ben

    Administrator

  • Administrators
  • 5,553 posts
  • LocationChico, CA

Posted 08 August 2011 - 07:37 AM

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>

  • 0
Benjamin Falk
Falken Creative : Twitter

#13 pnmorrison

pnmorrison

    Member

  • Member
  • PipPip
  • 45 posts

Posted 08 August 2011 - 10:28 AM

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 :(
  • 0

#14 pnmorrison

pnmorrison

    Member

  • Member
  • PipPip
  • 45 posts

Posted 15 August 2011 - 09:23 AM

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

#15 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 15 August 2011 - 09:28 AM

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

#16 pnmorrison

pnmorrison

    Member

  • Member
  • PipPip
  • 45 posts

Posted 15 August 2011 - 09:47 AM

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

#17 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 15 August 2011 - 10:40 AM

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

#18 Ben

Ben

    Administrator

  • Administrators
  • 5,553 posts
  • LocationChico, CA

Posted 15 August 2011 - 11:24 AM

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>

  • 0
Benjamin Falk
Falken Creative : Twitter

#19 pnmorrison

pnmorrison

    Member

  • Member
  • PipPip
  • 45 posts

Posted 17 August 2011 - 06:09 AM

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

#20 mykul

mykul

    New member

  • New Members
  • 2 posts

Posted 11 January 2012 - 02:27 PM

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users