Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

How to set URL to set a div to be visible?

10:15 am on Dec 12, 2011 (gmt 0)

New User

5+ Year Member

joined:Dec 12, 2011
posts: 2
votes: 0

Hello, I wasn't sure where to place this question, so here it goes..

Looking at this demo website:

It is a one page, Javascript driven website. I am making something similar like this, but then it hit me that by having a one page website, I cannot link directly to certain section of the website.

For example, if I wanted to go to the "Work" page, I cannot link people to [blah.com...] to go to the "Work" page directly.

One thing I thought of was redirecting [blah.com...] to somehow set the "work" div visible..

Does this make sense? Please give me your input on this problem.. Thanks!
10:58 am on Dec 12, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0

You could have a system of optional permalinks, which you could use to link to certain 'pages'...

When your page first loads you would check for this URL parameter and show/hide the appropriate sections on the page.

Navigating the site does not update the URL in the address bar.

To inform your users of this permalink as they navigate your site you would need to update a corresponding anchor (or text block) informing your users what the permalink to this 'page' is.

You could make your permalinks look 'pretty', like you suggest:

And use mod_rewrite (in .htaccess) to rewrite this back to the above URL parameter internally.

Or, in compliant browsers, you could update the fragment identifier (the part after the # using location.hash) as the user navigates and this would be your 'permalink'.
5:06 pm on Dec 12, 2011 (gmt 0)

New User

5+ Year Member

joined:Nov 9, 2011
votes: 0

You could replace the contents with a menu.

<!DOCTYPE html>
<html lang="en">
<script type="text/javascript">
var page1='The is the html for page1';
var page2='<p><a href="www.example.com">somewhereelse</a> This is the html for page2</p>';
var page3='<div id="p3"><p>This is the html for page3</p></div>';
var page4='<p>This is the html for page 4.<p>';
function writepage(page, place)
<div id="writehere" class="container">
<div id="replace">Some text.</div>

<div id="menu">
<a class="one" id="changetxt" href="#writehere" onclick="writepage(page2, 'writehere')">changeto2</a>
<a class="one" id="changetxt2" href="#writehere" onclick="writepage(page3, 'writehere')">changeto3</a>
5:04 pm on Dec 13, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Nov 28, 2004
votes: 0

Welcome aboard lalala, I deal with this stuff all the time - the hidden-div, tabbed browsing (which is really the same as your sample,) but hey, I want a URL for each of my "tabs" so I can send my users right to that section. I don't like doing it. :-) Why?

Let's say you devise a way to do it via a URL. So you have 4 URL's indexed:


But . . . they are all the same page. "Duplicate content" X 4.

Fortunately the rel="canonical" tag saves us here, it's really really important to include it on any pages like this.

All that being said, I generally choose to do this in a non-javascript dependent fashion. This is fairly easy if you have your page in a CMS of some sort, you just set the "current" visible tab/content based on the URL.

Without that, I'd use jQuery's addClass to add the current class to the "current" hidden tab. You'll need to do this in such a way that there is a default visible tab in case Javascript is disabled.
4:23 pm on Dec 15, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 30, 2007
votes: 0

Best thing to do is to create the different pages and content based on the parameters, if you need search engines. Because you cannot expose the same links as mentioned earlier with the same content. And some CSS or js in this case doesn't help as the HTML source code will be the same.

Using ajax however you could serve different content for the different pages. If js is off, then you serve the actual full page content depending on the parameter passed. You should always think to provide appropriate content for both js and non-js requests.

It also depends on the pages. If you have the contact and gallery pages you need to differentiate the two. If you have a blog entry and associated comments you could use the same page for both. The js helps to improve user experience, don't count on spiders to decode jquery and understand what your intentions are. Also you don't want to put in a single HTML source page the content of the entire site.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members