Jump to content

named anchors and browser back button?


PicnicTutorials

Recommended Posts

Named anchors and browser back button? Go here and click through the nav items at the top. Now click the browser back button! See how you have to now go back through all those named anchors? Is there some way using JavaScript (I imagine) to bypass all those? If so, it would be a usable piece of code. Because as it stands now, it's more of a novelty because of this little problem (in my book). Thanks!

Edited by Eric
Link to comment
Share on other sites

OK, in another forum I think they gave me the answer. But as usual (uppity JS guys) they just tease me with the solution. Can someone show how to put this together?

 

Here is the CSS/html...

 




CSS-TABS | CSS-Only "DOM TABS"

<br />    <br />    #pagewidth { width: 760px; margin: 0 auto 0 auto; }<br />    <br />    #navigation { margin: 0 10em 0 0; background: #000000; color: #FFFFFF; }<br />    #navigation li { display: inline; padding: 0 2em 0 2em; }<br />    <br />    .content { background: #CCCCCC; height: 20em; padding: 1em;}<br />    <br />    a { color: #0066FF; }<br />    a:hover { color: #00CCFF; }<br />    a:active { font-weight:bold; }<br />    <br />    #container { height: 20em; overflow: hidden; }<br /><br />









Content Block 1
Content Block 2
Content Block 3







Heading 1

Here is some content, I hope that you like it!




Heading 2

Now that you have read content block 1, you can learn more in this block





Heading 3

In conclusion, content blocks are fun


 



Example provided by 3.7 Designs - Web Design & Marketing

 



 

And here is the JS they gave me...

 

something.onclick = doStuff;

function doStuff(e) {
 if (e) e.preventDefault(); //W3C method
 else window.event.returnValue = false; // IE method
 //.. stuff to do
 return false; // simpler method that works across browsers
}

Link to comment
Share on other sites

  • 2 weeks later...

Afraid that JS they gave you will only work in case that you were using JS to switch the tabs. However seeing as you're implementing the switching using pure HTML/CSS I cannot see a way currently.

 

How flexible are you in using a framework such as jQuery? If you can use jQuery then i suggest you have a look at the Tabs plugin:

http://jqueryui.com/demos/tabs/

 

If you use this to switch your tabs, then u won't even need to worry about the browser's history as the script automatically cancels the default action of any tab headers (links).

Link to comment
Share on other sites

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