[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

tab navigation: anchor tag javascript

Posted on 2006-06-14
12
Medium Priority
?
370 Views
Last Modified: 2012-05-05
Hi there,

I have been working on a tabbed interface see: http://www.projectrebirth.org/film/cameras/cameraX.html

Thing is, I can't figure out how to anchor the page around the tabs. I.E., if I scroll down to the tabs section of the page, and then select a tab, I need for the page to anchor at that point. In other words I need the tabs remain at the same point in the browsers current scroll position, and not scroll back to the top of the page.

For a good example, look at any product page on http://www.bhphotovideo.com.


Cheers,
paul.


0
Comment
Question by:gooner_paul
  • 9
  • 3
12 Comments
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16906232

A simple way would be to add an "#tabs" to your tab link like so:

<a name="tabs" href="anotherPage.html#tabs">my tab</a>

This would search for/scroll to the "tabs" named anchor tag when it gets to the next page.
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16906726


Another way would be to pass the window.scrollTop value to the next url and set it on the next page:

function goThere() {
  location.href = "anotherPage.html?scrollAmt=" + document.body.scrollTop;
}


<div id="myTab" onclick="goThere()">


on the next page you can set that value after passing it throug the server:

<script>
var document.body.scrollTop = <% your server var %>
</script>



0
 

Author Comment

by:gooner_paul
ID: 16906791
Thanks for the quick reply.

Not sure I totally understand as this page only goes through the server once. All the content is loaded and doesn't have a next page.

Hope that makes sense.

paul.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16906947


Oh wait I just checked out that page!  they are not using seperate web pages like your site so they don't have to scroll at all.  they are just using several divs that are shown or hidden.

When a user clicks on a tab they set the  "display" property for the corresponding div's style object to either "block" or "none".  
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16907067


oh sorry i assumed you were flipping pages... since I have never seen that behavior otherwise.
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16907094


I would use divs instead of  anchor tags here; that problem will go away:

             
  <div class="TabNav">
    <ul>
      <li><div id="link1" href="#" onClick="displayTable(1)">tab1</a></li>

      <li><div id="link2" onClick="displayTable(2)">tab2</div></li>
      <li><div id="link3" onClick="displayTable(3)">tab3</div></li>
      <li><div id="link4" onClick="displayTable(4)">tab4</div></li>
    </ul>
  </div>
      
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16907107

er.. take out all the hrefs too:

<div class="TabNav">
    <ul>
      <li><div id="link1"  onClick="displayTable(1)">tab1</a></li>
      <li><div id="link2" onClick="displayTable(2)">tab2</div></li>
      <li><div id="link3" onClick="displayTable(3)">tab3</div></li>
      <li><div id="link4" onClick="displayTable(4)">tab4</div></li>
    </ul>
  </div>
0
 

Author Comment

by:gooner_paul
ID: 16907268
the anchor works, but it removes the style. see: http://www.projectrebirth.org/film/cameras/cameraX.html

shouldn't there be an href in there somewhere?

paul.
0
 
LVL 10

Accepted Solution

by:
0h4crying0utloud earned 1348 total points
ID: 16907490

ok you can go back to using the anchor tags: the trick is to put "return false" after your function call in your a tag.  returning false stops the link from activating. the href is never seen.  buuuutt  if you use a div, you don't have to worry about deactivating anything....

here the technique they use at that site you linked:

<div class="TabNav">
    <ul>
      <li><a id="link1"  onClick="displayTable(1);return false">tab1</a></li>
      <li><a id="link2" onClick="displayTable(2);return false">tab2</a></li>
      <li><a id="link3" onClick="displayTable(3);return false">tab3</a></li>
      <li><a id="link4" onClick="displayTable(4);return false">tab4</a></li>
    </ul>
  </div>
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16907500

oh yeah you have to put href attibs in there too if you are using a tags...
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 16907513

so final would be:

<div class="TabNav">
    <ul>
      <li><a id="link1"  href="#" onClick="displayTable(1);return false">tab1</a></li>
      <li><a id="link2"  href="#" onClick="displayTable(2);return false">tab2</a></li>
      <li><a id="link3"  href="#" onClick="displayTable(3);return false">tab3</a></li>
      <li><a id="link4"  href="#" onClick="displayTable(4);return false">tab4</a></li>
    </ul>
  </div>

I've seen other site put the current URL in the href but I don't think it matters what you put in there.



0
 

Author Comment

by:gooner_paul
ID: 16907632
Ok, you the man. That did the job.

Thanks so much.

Cheers,
paul.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question