I'm developing a site where the main content is loaded dynamically (and using a fade effect) into a placeholder div using AJAX. This is all working fine, however the tricky part for me is making the site accessible by using unobtrusive javascript.
What I want to do for users with javascript disabled is to load a full new page when they click on a link, but for everyone else I want to simply load content to fill the placeholder div. So I will need 2 separate files (i think) to link to for each link option on my page.
Here's what I currently have set up:
Expand|Select|Wrap|Line Numbers
- <div id="links">
- <a href="test.html">Home</a>
- <a href="test2.html">Contact</a>
- </div>
Expand|Select|Wrap|Line Numbers
- window.onload = applyEvents;
- function applyEvents(){
- var links = document.getElementsByTagName('a');
- for (var i=0;i < links.length;i++) {
- var link = links.item(i);
- link.onclick = function() {
- makeactive(this.href);
- };
- }
- }
Is there anyway I can retain the value of the link's href without actually loading a new page - but only responding to onclick?
A really crude way to do this would be as follows, but there must be a better solution!
Expand|Select|Wrap|Line Numbers
- <noscript><a href="fullpage.htm">Home</a></noscript>
- <script type = "text/javascript">document.write('<a href="javascript:makeactive(\'partialpage.htm\')">Home</a>')</script>