using a div instead of iframe

[jlisec01]

Hello everyone, I recently had a problem with iframes and wanted to load my additional page inside a div instead of iframe, I guess the question im trying to ask is if anybody knows how can I load an html page inside a <div</div>
where the content gets update on the onclick even of anchor <a href=>
</a>?

[DougBTX]

It is possible, but very difficult to do properly. What was your problem with using an iframe?

[mrhoo]

You can use an <object> element, with type="text/html" and data= the path.

Note that you have no access to reading/ writing to the document contained in the object, but any scripts or links should work normally.

[jlisec01]

iframes cause too much problems, one being: storing up in the history. using divs would be faster.

basically I got a page, with 4 product images in 1 row, each image is a link, and when you click on one of those images, directly below it will appear a bigger picture and information.

also is ajax possible?

[DougBTX]

OK, that shouldn't be too much of a problem. The easiest way to do this if you don't have much content to display under the images would be to make an array of hashes which contain the text and the url of the image, then set that content in the onclick of the images.

Something like:

var data = [
  {src: "../images/image1.jpg", text: "image one..."},
  {src: "../images/image2.jpg", text: "image two..."}];

function show(data) {
  var img = document.getElementById("image");
  var txt = document.getElementById("text");
  img.src = dara.src;
  txt.innerText = data.text;
}

<a href="#" onclick="show(data[0]); return false;">One</a>
<a href="#" onclick="show(data[1]); return false;">Two</a> 

<div>
  <img id="image" src="../images/image1 />
  <p id="text">Text here</p>
</div>

hth,
Douglas

[drimsun]

This could be done quite easily with AJAX. Just call for example a PHP script (using AJAX) that returns the page content you want. Then attach the returned content to the div using Javascript:

document.getElementById("my_div").innerHTML = returned_content;