SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    326
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using a div instead of iframe

    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>?

  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is possible, but very difficult to do properly. What was your problem with using an iframe?
    Hello World

  3. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Addict jlisec01's Avatar
    Join Date
    Nov 2006
    Location
    MI
    Posts
    326
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  5. #5
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    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
    Hello World

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    HTML Code:
    document.getElementById("my_div").innerHTML = returned_content;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •