Loading content into div

how to load content into div

[Str8TalkingBob]

Hi all, i'm pretty new to Javascript but have been using html and css for many many years. Finding the javascript language quite hard to learn in comparison but am getting there slowly.

What i'm trying to do is load html content that i have stored in an "includes" folder into a div on my index page when clicking a link i a menu that is in another div on my index page, the said menu is also in the "includes" folder and called into my index page using the php include function.

I've managed a couple of ways of doing this using a couple of jquery snippets i found on the web which have worked with some success. But what i'm truing to do is change the url when new content is loaded into the div. eg. when a link is clicked on "www.mydomain.com" "newcontent.html" is loaded into my content div and the url changes to "www.mydomain.com/newcontent.html" i've been told by a good few people that yes, it is possible but i have yet to find the correct method of doing this.

If anyone here can help me accomplish this i would be very greatful.

Thankyou in advance,

[Fotiman]

I'm afraid you have been mislead by those few good people. :)

If you change the URL in the address bar, the browser will navigate to that new URL. Otherwise, you'd have a big security threat, as someone could do something like create a page with a fake link to, say, a bank login page, trying to make it appear to the user that they were on the bank login page when in fact they were on a "spoofed" page.

So the answer is no, you can't change the URL (without actually navigating to that URL).

[Str8TalkingBob]

Bugger, i was surprised the url could be manipulated in this way. I was looking for a way to streamline my site development. At the moment i an using php includes to load the content into the pages, which is great and woks fine but it means i am having to create 2 pages for every page, the content to be loaded and the page that has the include on it, i was hoping to maybe have one page that loads all the different content which i can do now,but losing my sites bookmarkability is not really an option, it's not a problem as such, but you know what it's like when somebody tells you something can be done.

[Fotiman]

Note, there are ways around the bookmarking problem. For example, using the hash value (the value after # in a URL). If you only change the hash value, I believe the page will not reload. You would then need to have some script that checked the hash value when the page loads to pull in the appropriate content.

So, you can't change the URL from this:
http://www.example.com/
To this:
http://www.example.com/newcontent.html
without redirecting the browser.

But you can change the URL from this:
http://www.example.com/
to this:
http://www.example.com/#newcontent.html
without redirecting.

Perhaps that's what those few good people were referring to? :)

[Str8TalkingBob]

It sounds like thats what they were referring to, and that sounds ideal, thanks a lot. And not wanting to push my luck would you know of a good place to get the script i would need? :)

[Fotiman]

I don't off the top of my head, but it should not be too difficult to create. When the page loads, fetch the hash value:

var h = location.hash;

If it's got a value, pull in that document as you normally would if someone clicked on it. And then make sure all of your links that pull in documents are configured with an href value like:

href="#newcontent.html"

Hope that helps.

[Str8TalkingBob]

Sorry for the late reply been away for work, thanks for your help with this, i'm going to give it a go, like i say i'm a complete beginner to JS so am relying on tutorials at the mo, something which i must admit i'm finding it quite difficult to find, there are plenty out there but all just seem to cover a few of the same subjects.

[Fotiman]

If you get stuck, feel free to post some code here.