[web] Changing contents of a div using links
Author
Hi, I'm very new to this web development stuff, and using CSS I have set up a main [div], however, I want to change its contents by using links, rather than constantly reloading new pages. Can this be done?
I apologise in advance if my information is incorrect/screwy, like I said im new to this stuff.
You can use javascript to update a div by making an HTTP request in the background. Look at <a href="http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html">this AJAX tutorial</a> -- it'll give you some code you can use to do it.
Why do you not want to reload the entire page? If the div you speak of holds your main contents then neither AJAX nor IFRAME's will be good solutions. Both have serious usability and accessibility issues. AJAX because you need javascript (many people suft with javascript off) and IFRAME's pretty much has the same drawbacks as regular frames.
Well, I've changed out text in divs based on links (actually onClick, but you could make it look like a link), so I assume you could as well.
I should add that I don't care if things validate under W3 so long as they run on most major browsers. By which I mean current versions of FF and IE. If that concerns you, you should probably check the code and see.
Also, I don't think this is the best way to make your page work. It will add much longer initial loading times for content the user may not choose to see. It isn't best practices, and the standard way of using 5 .htm pages really is better. AJAX would also be effective if you redesigned the way you do your work, but you probably don't want to go that far - if you were going to do that, you could just make the .htms.
<head><title>xxxx</title><link rel="stylesheet" href="../style.css" type="text/css"><script language=javascript>function switch_image(url, text){ img.src = url; txt.innerHTML = text;}</script></head>...<img src="xx/2.jpg" id="img" width=30 height=30 border=1 height=300><div id="txt">A nice view of downtown.</div><br><br>...//Cue fifty little photo links that look like this:<img src="xx/tn/3.jpg" onclick="switch_image('xx/2.jpg', 'The Text I Want to Switch Out Goes Here');" width=30 height=30 border=1>I should add that I don't care if things validate under W3 so long as they run on most major browsers. By which I mean current versions of FF and IE. If that concerns you, you should probably check the code and see.
Also, I don't think this is the best way to make your page work. It will add much longer initial loading times for content the user may not choose to see. It isn't best practices, and the standard way of using 5 .htm pages really is better. AJAX would also be effective if you redesigned the way you do your work, but you probably don't want to go that far - if you were going to do that, you could just make the .htms.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
