How to change url so a file is automatically loaded inside a div?

Question

Clicking on a div inside a sidebar I load a specific file inside a div.

<div id="menuLeft">
<div id="file01">File 01</div>
<div id="file02">File 02</div>
<div id="file03">File 03</div>
</div>

js

$("#menuLeft div").click(function () {
var id = "chapters/" + $(this).attr('id') + ".php";
$('#divRight').load(id);
});

This all works, but url is always the same - for example www.something.com

What I need by clicking on the sidebar is to get something like www.something.com#file01, or any other content, so when this url is entered in another window, file01 is automatically loaded inside divRight.

Any help?

When the page loads, check for location.hash. If it's set, then strip off the leading # and call .load(). — gen_Eric
– gen_Eric, Commented Feb 11, 2014 at 17:06
@RocketHazmat, thanks, I will try. Just a question: If I have another div with the same procedure, can I have two or three hashs inside url ? — bonaca
– bonaca, Commented Feb 11, 2014 at 17:21
You can make the hash value whatever you want. For example you can do #file01,file02. Then just remove the # and use .split(','). — gen_Eric
– gen_Eric, Commented Feb 11, 2014 at 17:22

MMM · Accepted Answer · 2014-02-11 17:07:36Z

1

There are two things you need to do.

First, you need to change the hash:

document.location.hash = "file01";

And then secondly on page load, check the hash and load the appropriate file.

However, what's probably better is using HistoryAPI or a similar implementation. For instance HistoryJS will allow you to create states, so that people can press Back and Forward in the browser and switch between these pages.

answered Feb 11, 2014 at 17:07

MMM

7,3402 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to change url so a file is automatically loaded inside a div?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related