Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jan 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to replace iframes

    In the past, I've used an iframe as part of an image gallery. The user would click on the thumbnail and the target of that link would be the iframe. It makes for a neat and simple image gallery that is contained on one page. I know that iframes are being depreciated so I looked at Dynamic Drive CSS library model (http://www.dynamicdrive.com/style/cs...gallery/#thumb) but I don't like the fact that all the images have to be loaded at once (makes for high load times) not to mention the increased code. I was wondering if there was any way to emulate this, possibly using an object tag?

    Here is a very simple version (that uses an iframe) of what I want to do: http://activities.fit.edu/aiaa/Test/...ate/roster.htm

    Thanks
    Last edited by NewbNeedHelp; 01-26-2007 at 04:48 PM.

  • #2
    Regular Coder
    Join Date
    Oct 2006
    Posts
    206
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Try using an object element instead of your iframe. Your thumbnails would change the object's data attribute.

    PHP Code:
    <script type="text/javascript">
    function 
    changeData(filePath)
    {
    document.getElementById('I1').data filePath;
    }
    </script>

    <div id="border">
            <dl>
                <dt>Officers</dt>
                    <dd onclick="changeData('theman.htm');">President: The man</dd>

                    <dd>Vice President: the other man</dd>
                    <dd>Treasurer: other other man</dd>
                    <dd>Captain: the other</dd>
                    <dd>Coach: the other other</dd>
                <dt>Average Beings</dt>
                    <dd>Peasant1</dd>
                    <dd>peasant2</dd>
                    <dd>peasant3</dd>
                    <dd>peasant4</dd>
            </dl>

    <object id="I1" type="text/html" data="Rosterblank.htm" style="height: 420px; width: 520px;">
                Your browser does not support object elements. Use a real browser, like <a href="http://mozilla.com/firefox/">Mozilla Firefox</a>
                </object>
            
        </div> 

  • #3
    New Coder
    Join Date
    Jan 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've been working with the above script, trying to get it to work. But due to my limited Javascript knowledge I can't figure it out. Anyone else know what to do?

  • #4
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    what is it you need the above script to do?
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)

  • #5
    New Coder
    Join Date
    Jan 2007
    Posts
    38
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am intrigued about using the object tag to include other files. In my tests it works wonderfully well in FF, I could include an assortment of images, text and html. But IE6 does not display the html, chokes on the images and generally fails.

    Do you have any links or more how to info on using the object tag (on things other than applets and flash files which is all that google can apparently find.) Is IE6 incompatible with this technique?

    Code:
    <object data="includefile.html" type="text/html"></object>
    Thanks

    EDIT:
    Well I jumped in too soon. I answered my own questions with some tinkering around.
    IE requires that the height and width of the object be explicitly set. Otherwise you get a 1px object. I am still wrapping my head around the implications of this but it may cause problems for percentage based flowing layouts.

    IE has other quirks as well. It will always try to insert a scrollbar and a border with each html doc. These can't be controlled from the main page style sheet, so the included file needs to have something like this in its style sheet:
    Code:
    body {
     overflow:auto;
     border:0;
    }
    Last edited by Arragon; 02-05-2007 at 01:26 PM. Reason: I learned more.

  • #6
    New Coder
    Join Date
    Jan 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    neomaximus2k,

    I was hoping the above script would replace the data in an object. So that I could load different htm files into the object when the user clicked on the text. I wanted something that would work the same as targeting an iframe only without the iframe...

    Thanks

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    I managed to create a script that turns an object element into an inline frame. It works fine in Firefox and Opera, but I’m not sure how to get it working in Internet Explorer. In that browser, the new object that I insert ends up being blank.

    The top script is standards‐compliant. The second is for Internet Explorer.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en-US">
      <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="Author" content="Patrick Garies">
        <title>HTML 4.01 Strict Document</title>
    
        <style type="text/css">
          * {
            margin: 0;
            padding: 0;
            }
          html, body, div {
            height: 100%;
            }
          html {
            padding: 0 1em;
            background-color: white;
            color: black;
            font: small-caps 16px/1.2 "Lucida Sans Unicode", "Lucida Grande", sans-serif;
            }
          ul {
            padding: 1em 0 1em 2em;
            }
          a.intra-document {
            color: red;
            }
          object {
            display: block;
            width: 100%;
            height: 70%;
            border: 1px solid black;
            }
        </style>
    
        <script type="text/javascript">
          document.defaultView.addEventListener("load", basic, false);
    
          function basic() {
            var anchors = document.getElementsByTagName("a");
            for (var i = 0; i < anchors.length; i++) {
              if (anchors[i].className.match(/intra-document/)) {
                anchors[i].addEventListener("click", function(e) {
                  e.preventDefault();
                  var object = document.createElement("object");
                  object.setAttribute("type", "text/html");
                  object.setAttribute("data", this.getAttribute("href"));
                  var objects = document.getElementsByTagName("object");
                  objects[0].parentNode.appendChild(object);
                  objects[0].parentNode.removeChild(objects[0]);
                  }, false);
                }
              }
            }
        </script>
    
        <!--[if IE]>
        <script type="text/javascript">
          window.onload = IEbasic;
    
          function IEbasic() {
            var anchors = document.getElementsByTagName("a");
            for (var i = 0; i < anchors.length; i++) {
              if (anchors[i].className.match(/intra-document/)) {
                anchors[i].setAttribute("rel", anchors[i].getAttribute("href"));
                anchors[i].removeAttribute("href");
                anchors[i].onclick = function(e) {
                  var object = document.createElement("object");
                  object.setAttribute("classid", "clsid:25336920-03F9-11CF-8FD0-00AA00686F13");
                  object.setAttribute("type", "text/html");
                  object.setAttribute("src", this.getAttribute("rel"));
                  var objects = document.getElementsByTagName("object");
                  objects[0].parentNode.appendChild(object);
                  objects[0].parentNode.removeChild(objects[0]);
                  }
                }
              }
            }
        </script>
        <![endif]-->
    
      </head>
      <body>
    
        <div>
          <ul>
            <li><a class="intra-document" href="http://www.webdevout.net/browser-support-html">Web Browser <abbr title="Hypertext Markup Language">HTML</abbr> Support</a></li>
            <li><a class="intra-document" href="http://www.webdevout.net/browser-support-css">Web Browser <abbr title="Cascading Style Sheets">CSS</abbr> Support</a></li>
            <li><a class="intra-document" href="http://www.webdevout.net/browser-support-dom">Web Browser <abbr title="Document Object Model">DOM</abbr> Support</a></li>
            <li><a class="intra-document" href="http://www.webdevout.net/browser-support-ecmascript">Web Browser <abbr title="European Computer Manufacturers Association Script">ECMAScript</abbr> Support</a></li>
          </ul>
          <object type="text/html" data="http://www.webdevout.net/browser-support">
            <a href="http://www.webdevout.net/browser-support">Web Browser Standards Support</a>
          </object>
        </div>
    
      </body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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