HTML5 Loading the external content into a div and using pushState()? - javascript

I have a main page "index.html". This main page is the enterance to the site which is done in HTML5. There are other pages for the site:
"about.html", "work.html", "portfolio.html", "contact.html"
So all of these pages have a div called "contentDiv" which has the copy/text accordingly. User enters the site via "index.html" and if user clicks on one of following the nav links:
About | Work | Portfolio | Contact
"index.html" page loads the content of clicked page's "contentDiv" using JQuery's load() call and then slides in the loaded div using animation.
Site is backward compatible so if Javascript is disabled then user is taken to the clicked page instead of having the "index.html" to load the content via load() call.
By the way, the nav link(s) are coded like this:
<a href="about.html" title='About'>About</a>
Once the "index.html" loads the requested content, By using pushState(), the URL is updated. So if user clicks on "about" link then pushState() updates the URL to:
"http://www.abc.com/about.html"
The reason I have not inserted any hash into the href tags, because I want the site to have a fallback just in case if the Javascript is disabled. This way, user can be directed to the requested page ('about.html') instead of "index.html".
So far all works well as expected however here is the issue. When user is on "index.html" and clicks on anyone of the sections for example "about.html", content is loaded and URL is updated via pushState(). So now the URL is "http://www.abc.com/about.html". Now if user refreshes the page("index.html"), "about.html" is loaded instead of "index.html" doing the load() calls.
Lets say if I code the nav href tags like this:
About
then the URL ends up having a hash in it. And if I copy and email the link "http://www.abc.com/#about" to a user, and if user tries to open the link via browser with javascript disabled then user will not be able to get to "about.html" because link only has '#about' instead of "about.html".
What I am trying to do is indeed doable I just don't know how to approach it. If anyone can help me on this that would be wonderful.
Forgive me, for such a long description.
Thank you.

I ended up setting all the nav hrefs to "". and then setting the hrefs values on document.ready() function.
$('a[rel=nav]').attr('href', '');
Thanks.

This code will achieve what you need to do and support the users with javascript disabled.
$('a').click(function() {
window.location.hash = $(this).attr('src');
return false;
}
Your urls will look something like http://www.yoursite.com/#about.html if you click on the about link and they work when you refresh.
If you want to learn more about making ajax sites I recommend you visit this blog Css-Tricks.com

Related

Using pushState to create "links" on an AJAX website produces 404s

I currently have my website set up with a single html file that uses on-click javascript functions to display various sections of the site differently as the user navigates around. The main page contains an audio player that I want to keep playing as the user navigates, which is why I've chosen the AJAX route.
I've implemented pushState across the site to produce URLs for each section that the user navigates to. These links don't work.
I have a couple questions regarding this: should I be using pushState to generate these URLs, or am I going about producing links the wrong way? And is there a way I can have a user reload a deeply-embedded page in the site, and then have the page constructed from the javascript somehow server-side?
EDIT: I feel like maybe if I could have all these links routed to a javascript file that then built the appropriate page, maybe that would work? Not sure if that's the way to go about it.
$('#menu a').click(function() {
var page = $(this).attr('href');
history.pushState({}, '', page);
$('#news').load('content/' + page + '.php');
return false;
});
Here's an example of how the menu is running this jQuery function on click, and then using pushState to make a new URL. Then, it loads in content into the #news div from the appropriate php file.
Is there any way I can link to this "state" of the page? I've been reading Jose Maria Arranz Santamaria's "Single Page Interface Manifesto", which has a lot of great info, but I'm sort of wondering what I should do next.
Pushstate is not the way you should use if the links don't actually work.
You can use the hashes to implement this easily.
You the event onhashchange.
The hashes are stored in the window.location.hash property. There would be no need to modify the browser history as well.
Refer to onhashchange and Hashes

Dynamic Website - load almost all of the page with out reload and change the url

I am developing a website and having trouble figuring out what I can use to accomplish this requirement.
I need a website where links in the document load the contents of page that was clicked.
I am thinking about using angular.js but how might a user get back to the back by entering it into the url.
Example of what I am looking for:
You are on www.example.com
You click the link to www.example.com/profile/1234.
The page doesn't reload but loads the contents of the new page.
The static element at the bottom of the page doesn't change the the rest of the page does.
The url has also changed and you have the history of being at www.example.com
You can also load the exact same page by pasting the url www.example.com/profile/1234, it also has the same bar at the bottom.
You could also say I need something similar to youtubes website. You click a link and it loads only some of the page. But if you re-enter the url you get all of the page.
Thanks.

Smooth slide transition between two separate html files

is there any possibility to make smooth slide transition between two seperate html files?
Like for example.
On one html is
Link
and after clicking this link page is not reloading, just sliding to the second file?
You have to load the second HTML file into an iFrame or into a DIV by ajax, then slide it into view. You can use jQuery for that and for easy access to animations.
You may also would like to update the URL of your page, for that you can use location.hash to do it without reloading the page. You can also check for observehashchange plugin for jquery to check for the hash change when a user changes the URL.
You can view a sample here.
To have Google access the pages, you can add a sitemap.xml to your site to describe the pages and you may also have to setup webmaster tools to provide Google with useful information about your site. Here you can add the links and Google will got it. I have a page where more than 5000 links are seen by Google, however they aren't on any page by default.
But if you want to have normal <a> links on your page, you can use a simple jQuery to trigger the animation instead of going to the link.
Go to page 2
Go to page 3
Go to page 4
<script>
function LoadPage(page) {
//Put your page loader script here
}
$(document).ready(function(){
$(a).click(function(event){
event.preventDefault();
var page = $(this).attr('href').substr(1);
LoadPage(page);
});
});
</script>

Load different pages while leaving certains divs behind

I want to know how some web pages move between different PHP pages without reloading the entire page. Here some divs stays the same. If I use AJAX i cannot share the link of the page, so I need to do this. Thank you.
You have to use AJAX in order to do that.
BUT if you want to be able to share the link or handle reload ou need to build a navigation system using # and some javascript around it.
There is a lot of example for doing that on the web.
https://www.google.nl/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=tutorial%20build%20ajax%20navigation
You could just load a new page and include the same divs of the page :
include 'div1.php';
You could use the other answers below and just use ajax but also build a url at the same time so you can navigate back to the same structure of the page.
clicking the link modifies the url, eg:
document.title = document.title + '?div1=true'
Modify the URL without reloading the page
and then just does an ajax call to load a new section. And on first page load, parse the url to check what divs to load.
you could use iframes:
<iframe src="/div1.php" id="div1"></iframe>
And clicking a link loads new stuff to a specific iframe.

Redirect to a specified page using JavaScript

Is there any way through which i can have a javascript on a page to redirect any url that's present on the page to some specific site.
For example on a HTML page i have say 10 urls present. Can i add a javascript to the HTML page so that if anyone clicks on any url on that page, it gets redirected to the a specified page.
Thanks.
EDIT::
My scenario is i have some 13k links on a page and i do highlighting of terms on the page, even if any link is also clicked on the page, the word gets highlighted on that page. In order to do that i process each url and add some more info to it to go thought my server perl script which does the job of highlighting. But now due to large number of links on page, it takes time to process the page and page is rendered after a long time. So i want to have a javascript which can pass any link by adding info to my perl script on server.
I tried doing it server side my breaking page into pieces and processing in parallel but not much improvement.
Any other solution or suggestions are welcomed.
Appreciate your help in this regard.
You can use preventDefault in the click event handler to prevent the default behavior(open the link), and use location.href to redirect to a new page.
if you're using jQuery:
$(".links").click(function(event){
event.preventDefault();
location.href = "http://google.com";
});
You can do this with the following jQuery block:
$(document).ready(function () {
$('#urlId').live('click', function (e) {
e.preventDefault(); //Stops the link from opening
window.location.href = "/specifiedPage"; // Changes the location of the page
});
});
You can create a "protective glass" div in front of everything and handle the click event on that div. This has the advantage of not touching the page so after removing the div anything can go back to normal.
Only be sure to put a non-fully-transparent color on the div background because I've found that Internet Explorer ignores events if the div is fully transparent.
Something like rgba(0,0,0,0.001) is enough.

Categories