iFrame tricks/hacks possible?

Discussion in 'Programming' started by TuesZ, Apr 19, 2008.

  1. #1
    I'm sure it can be done with javascript but I want to make sure before I start my journey. :D

    Do you think it's possible to load a page "behind the scenes" in a frame?

    For instance when someone loads the page both your page and another page can load at the same time but only your page is visible. That way they click on the huge graphic on your page (sorta like a splash screen) and it shows the second page right away. Without you having to wait for it to load.

    I was even thinking about fade effect but I'd want to get this working first. I almost positive it can be done just wanted to get some confirmation.
     
    TuesZ, Apr 19, 2008 IP
  2. tonyrocks

    tonyrocks Active Member

    Messages:
    1,574
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    88
    #2
    AJAX man,. check out Ajax...alot of cool tricks contained in Ajax.
     
    tonyrocks, Apr 19, 2008 IP
  3. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #3
    AJAX wouldn't load the post-splash screen part of the site without loading.

    TuesZ, why not just have the second page as the default and have the "splash screen" layered "on top" of the page covering it. The splash screen would be a layer, e.g. a <div> with 100% width/height, absolutely positioned and with a higher z-index than the rest of the page.
     
    krt, Apr 20, 2008 IP
  4. nks

    nks Well-Known Member

    Messages:
    1,602
    Likes Received:
    40
    Best Answers:
    0
    Trophy Points:
    160
    #4
    If you are not using Ajax, try using the IFrame trick to use on sites that do not allow manipulation of html codes.
     
    nks, Apr 20, 2008 IP
  5. glink1

    glink1 Peon

    Messages:
    135
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I think krts way with divs and css is fastest and best

    <script>
    function change(){
    document.getElementById('Splash').style.zIndex='0'; 
    
    }
    
    </script>
    <div id="Splash" style="position: absolute;z-index:2;background-color: Green;
    width:100%;height:100%"
    onclick="change()">
    <h1 style="margin-left:40%; 
    margin-top:20%;">SPLASH!</h1>
    </div>
    
    <div id=blue style="position: absolute;;z-index:1;background-color: white;
    width:100%;height:100%">
    
    <h1 style="margin-left:20%">Home Page</h1>
    </div>
    <div style="z-index:0">position: relative;
    position: absolute;</div>
    HTML:
     

    Attached Files:

    glink1, Apr 20, 2008 IP
    TuesZ likes this.
  6. TuesZ

    TuesZ Well-Known Member

    Messages:
    934
    Likes Received:
    66
    Best Answers:
    0
    Trophy Points:
    163
    #6
    WOW, I love the idea of solving something with such simplicity you guys are the SSSHH. Thanks++
     
    TuesZ, Apr 20, 2008 IP