Solved

tab navigation: anchor tag javascript

Posted on 2006-06-14
12
340 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now