I'm developing yet another website for my company. It's all set up for nt authentication which unfortunately seems to break AJAX. However, I love the UI abilities of AJAX so I'm trying to work around the no-ajax functionality. It's an intranet so load times are quick so I'm being fairly successful.
Anyway, there's a part that shows news events. The page shows one news event (the most recent) and the has links at the top (<<< and >>>) that scroll to next/previous. Ordinarily I would've used ajax to dynamically load the appropriate article into the page, but since I can't I settled for javascript hiding / unhiding the different articles that were all preloaded.
basically the html looks like this (very simplified obviously)
 | | |
| Code: <table><tr><td id='left'><<<</td><td id='right'>>>></td></tr></table> <table id='0'><tr><td>Article 1</td></tr></table> <table id='1' style='display: none;'><tr><td>Article 2</td></tr></table> etc.etc.etc | |
| | |
initially the <<< part has no link and the >>> has a link that invokes a javascript function nextNews(1);
Then here's the javascript:
| | |
| Code: function nextNews(id){ var left = document.getElementById('left'); var right = document.getElementById('right'); try{ document.getElementById(id-1).style.display = 'none'; left.innerHTML = "<a href='javascript: nextNews(" + (id-1) + ");' title='Previous news item'><<<</a>"; } catch(e){ left.innerHTML = "<<<"; } try{ document.getElementById(id+1).style.display = 'none'; right.innerHTML = "<a href='javascript: nextNews(" + (id+1) + ");' title='Next news item'>>>></a>"; } catch(e){ right.innerHTML = ">>>"; } document.getElementById(id).style.display = ''; } | |
| | |
Anyway, it's nothing earth shattering but I was very happy with it. This works in IE7 and Firefox.