I can't seem to wrap my head around this one, and if it can be done I'll be overjoyed. I'm building a website for a friend's film company, and he requested that there be a header on the top of each specific film site that links to each other film site with the film names. The header is the exact same on each film site with the exact placement. Each film site also resides on a different URL, and not subdirectories in the same URL.
Now he also requested that the header NOT refresh when clicking to other sites. I'm wondering if this is possible, and I'm totally open to the possibility of having all sites reside on the same URL in separate directories. He also wants the URL of each site to be visible, so not just loading content for each site in the same site and not having the URL in the browser change as well.
The company URL is www.breakwaterstudios.com
The first film URL is www.dinnerwithfred.com
The second film URL is www.inkandpapermovie.com
(I haven't yet integrated the new header on the sites).
However, if the only way to go about doing this is to have the URLs be
www.breakwaterstudios.com/dinnerwithfred
www.breakwaterstudios.com/inkandpapermovie
And then have the individual URLs redirect to those subdirectories that's fine.
The only way I can figure that I could go about not having the page reload when clicking on each header button is to
1) Code the entirety of all film sites into each individual film site and have each individual film site load its respective site elements first (hiding the other sites' elements). HOWEVER, this would need some sort of javascript/Ajax URL change/rewrite code or something to mask the fact that each film site is really coded into the same site and it's just reloading using jquery .show and .hide commands. And it could take a long time to load all the other sites' content in the same index.html file.
2) Use jquery .load or iframes even to dynamically load each site underneath the header when clicking on the header buttons. However, the URL would need to be rewritten just like number 1.
3) As the header div will be in the same position on all sites, and if the only way to get this to work is to reload to the page, have the header not flash off when another film site loads on a separate or same URL. Have the header appear to not reload when in fact it's loading on a separate website. There's a fraction of a second where the header disappears and reappears when clicking to another site.
The part of this that seems difficult is the whole URL change.
I suppose what I'm getting at is the possibility of retaining the header on each site without reloading the header when going to each site. I see that Facebook can do this, however it's all within the same URL of facebook.com. I've done research and found that perhaps it's impossible across multiple URLs due to the potential of security risks/masking/fraud/etc.
The jquery .load function and iframe could work, but the URL would need to be changed, and if the entirely of the URL can't be changed from dinnerwithfred.com to inkandpapermovie.com, then at least the subdirectory change in the browser window.
Any help would be GREATLY appreciated!!! Thanks!!!
On modern Browsers you could use the HTML5 history API:
I think there are some hacks for older browsers as well. But as you said i think it only works on the same domain. So you'll be stuck with subdirectory urls here. As for loading the pages itself i think iFrames are really your best bet.
You could also grab the page with http://simplehtmldom.sourceforge.net/ for example if you really want to integrate the pages in yours. It's probably not that easy though to extract the content correctly. There may also be legal issues with that (since you don't own the other sites, do you?)