HTML5 History API integration (or similar)
Hello! I'm currently looking for an web programmer to implement functionality into my company's websites. After attempting implementing it myself, it's proving too difficult on my own - thus I'm looking for some help. It should be fairly simple for someone with an understanding of HTML5 (specifically the HTML5 History API), or other javascript that can get the same functionality implemented. We have three websites that I've coded in HTML with Jquery fades/animations. What we want is the following: 1) All three websites to have a fixed header that's the same on all three, linking to the other two websites (on each site). 2) When clicking on the site link on the header that div underneath loads the site, without refreshing the entire page to go to the other site (like an iframe's content changing when clicking an href link). 3) The URL in the browser to change to that new site, even though the page hasn't been entirely refreshed to a new site. The header will be the only element on the page that doesn't refresh when clicking to another site. If possible, each site will be hosted on it's own URL. - www.breakwaterstudios.com - www.dinnerwithfred.com - www.inkandpapermovie.com However, it appears that after reading the literature that cross-domain HTML5 History and other solutions don't work for security reasons. If this is the case, then subfolders will suffice - www.breakwaterstudios.com - the main company website - www.breakwaterstudios.com/dinnerwithfred - www.breakwaterstudios.com/inkandpaper Also, if possible, when a visitor clicks a link on the banner the current site open will fade out using jquery. So this is the functionality, for example: 1) User goes to www.breakwaterstudios.com 2) They click on the Dinner With Fred banner. 3) The Breakwater Studios logo animates left in the header and then the other buttons appear to the right on the banner (like on www.dinnerwithfred.com and www.inkandpapermovie.com). 4) The Breakwater Studios site fades out under the header. 5) The Dinner With Fred site (www.dinnerwithfred.com or www.breakwaterstudios.com/dinnerwithfred) displays underneath the header. 6) The URL changes from www.breakwaterstudios.com to www.dinnerwithfred.com or www.breakwaterstudios.com/dinnerwithfred If the user clicks on the Ink&Paper site button on the header... 7) The Dinner With Fred site fades out. 8) The header buttons fade in/fade out to be highlighted based on the site clicked (if ink&paper that button on the header fades to be highlighted, while Dinner With Fred button fades to be un-highlighted). 9) The ink&paper site displays under the header). 10) The URL changes from www.dinnerwithfred.com or www.breakwaterstudios.com/dinnerwithfred to www.inkandpapermovie.com or www.breakwaterstudios.com/inkandpapermovie If the user clicks on Breakwater Motion Picture button... 11) The other Dinner With Fred and Ink&Paper buttons fade out, and the Breakwater Motion Picture button slides over to be centered in the page. 12) The Breakwater Studios site loads under the header, fading in as if the user had gone to www.breakwaterstudios.com directly. 13) The URL changes from www.inkandpapermovie.com or www.breakwaterstudios.com/inkandpapermovie to www.breakwaterstudios.com You can see the current state of the sites using the links above, and how the header is laid out currently. I will provide you with all the current site files and also an FTP login to upload your work if you need it. This would be a HUGE help and I would definitely appreciate the work! I hope it's not too difficult to implement and I'm open to any suggestions as to how to get it working, even if the HTML5 History API isn't the best solution. THANKS! Sincerely, Dillon Keywords: Prototype, Javascript, History, HTML, jQuery, HTML5
| Expired |
Golda S.
Web Developer
View profile
Stephen L. Betts
Writer
View profile
Marc Mullo
Writer
View profile
Shelley Morison
Virtual Assistant
View profile
More history projects
View AllMore html projects
View AllRelated projects
Search for freelance jobscan’t wait for more clients
and advertising. Thank you."