SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: X Lib & IFRAMES

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    X Lib & IFRAMES

    Hi

    I like very much this tab selector
    http://www.cross-browser.com/x/examp...panelgroup.php


    Is it possible to have HTML pages in the DIVs with full cross-browser compatibility?
    I mean, How do I load an URL in the DIV section?

    thanks
    (and sorry if this is not a new thread but I don't know hot to search for it...)

    best regards

    alonso

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi alonso,

    Welcome to SPF!

    Using iframes tends to complicate things... but I think your idea just might work. Give it a try, post a link to your test page, and I'll help with it.

  3. #3
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mike!
    Thank very much for your almost-instantaneous answer!

    Well, I've started a page to document my robotic project
    http://www.freewebs.com/alonsobrain/robotica/

    Well... yes. I know... It's a copy of yours :-D

    Now, with the same design, I'd like to put my 3D models with a TAB selector

    The models are developed with Google-SketchUp, an easy way to share models, and as you can see

    http://sketchup.google.com/3dwarehou...17349d066afdfc

    this is the code to include the model in my website

    <iframe src="http://sketchup.google.com/3dwarehouse/mini?mid=cb7dc6e2c1caaaa5d17349d066afdfc" width="400" height="300" scrolling="no" marginheight="0" marginwidth="0" frameborder="0"/>

    Since I'll have 4 or 5 models, I think the TAB selector is a good choice to show the work... But I don't know how to load the URLs in the DIV...

    is it possible?

    thanks!!!!!!!!!!!!!!!!!!!!!!
    Last edited by alonso.brain; Sep 10, 2006 at 10:21.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi alonso,

    I don't mind you using the demos - that's what they're there for.
    v3.js and v3_xlib.js is site-wide js - it's not needed for the demos.

    Perhaps that tab panel is not really what you need. Instead of having multiple iframes, perhaps just have one and let a row of buttons or tabs select a url to load into it.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't tested this, it's just a quick idea ...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <script type='text/javascript'>
    window.onload = function()
    {
      tabBarInit();
    }
    function tabBarInit()
    {
      if (document.getElementById && document.getElementsByTagName) {
        var tb, a, i;
        tb = document.getElementById('tb1');
        if (tb) {
          a = tb.getElementsByTagName('a');
          if (a) {
            for (i = 0; i < a.length; ++i) {
              a[i].onclick = function() {
                var ifrm = document.getElementById('if1');
                if (ifrm) {
                  ifrm.src = this.href;
                  return false;
                }
                else return true;
              };
              a[i].onmouseover = function() {
                this.className = 'tabOver';
              };
              a[i].onmouseout = function() {
                this.className = 'tabOut';
              };
            }
          }
        }
      }
    }
    </script>
    </head>
    <body>
    
    <div class='micaja'>
      <div id='tb1' class='TabBar'>
        <a href='url1' class='tabOut'>tabText1</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
        <a href='url2' class='tabOut'>tabText2</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
        <a href='url3' class='tabOut'>tabText3</a><span class='linkDelim'>&nbsp;|&nbsp;</span>
      </div>
      <iframe id='if1'>
      </iframe>
    </div>
    
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well... I have no words...

    THANKS Mike! It works!!!

    http://www.freewebs.com/alonsobrain/robotica/models.htm

    :-D

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good work, alonso!


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
  •