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

Forum Moderators: open

Message Too Old, No Replies

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

lalala

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:
[tympanus.net...]

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!

penders

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

http://www.example.com/id=work

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:

http://www.example.com/work

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

tw56

5:06 pm on Dec 12, 2011 (gmt 0)

You could replace the contents with a menu.


<!DOCTYPE html>
<html lang="en">
<head>
<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)
{
document.getElementById([place]).innerHTML=page;
}
</script>
</head>
<body>
<div id="writehere" class="container">
<div id="replace">Some text.</div>

</div>
</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> 
</div>
</body>
</html>

rocknbil

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:

example.com/
example.com/about
example.com/portfolio
example.com/contact

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.

enigma1

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.