homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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

Msg#: 4396972 posted 10:15 am on Dec 12, 2011 (gmt 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!



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

Msg#: 4396972 posted 10:58 am on Dec 12, 2011 (gmt 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'.


Msg#: 4396972 posted 5:06 pm on Dec 12, 2011 (gmt 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>


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

Msg#: 4396972 posted 5:04 pm on Dec 13, 2011 (gmt 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.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4396972 posted 4:23 pm on Dec 15, 2011 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved