Facebook iFrame

Discussion in 'FaceBook' started by qwickpk, Feb 10, 2010.

  1. qwickpk

    qwickpk Registered Member

    Joined:
    Mar 8, 2009
    Messages:
    76
    Likes Received:
    6
    Occupation:
    Internet marketing
    Location:
    Sweden
    Hi, I got an facebook page with an "Click here" iFrame (the iframe opens up when people click on the text "click here). However, the iFrame opens right to the text but I want it to open on top of the text. So that the text is BELOW the iframe.

    Here is the code I'm using:
    Code:
    <a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;">
    <div id="outside_location">
      <img src='PIC' />
    </div>
    </a>
        <fb:js-string var="location_two"> <fb:iframe width="900" height="500" frameborder='0'  scrolling="no" src='www.....' /> </fb:js-string>
    <script type="text/javascript" charset="utf-8"> var outside_location = document.getElementById('outside_location'); </script>
    Does someone know how to do this? I appriciate all answers!!!
     
  2. bpicks

    bpicks Junior Member

    Joined:
    Apr 16, 2008
    Messages:
    147
    Likes Received:
    21
    Try setting outside_location div with relative positioning and if fb allows position style attributes for fb:iframe, absolute position the iframe with a negative top value and if not wrap the iframe in a div and absolute position that with a z-index > 0.

    try this (untested):

    Code:
    <a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;">
    <div id="outside_location" style="position: relative;">
      <img src='PIC' />
    </div>
    </a>
        <fb:js-string var="location_two"> <div style="position: absolute; top: -100px; left: 0; z-index: 2;"><fb:iframe width="900" height="500" frameborder='0'  scrolling="no" src='www.....' /></div> </fb:js-string>
    <script type="text/javascript" charset="utf-8"> var outside_location = document.getElementById('outside_location'); </script>
    You'll have to play with the actual pixel positions if it works to get the dive to open where you want.
     
    • Thanks Thanks x 1
  3. The Dark One

    The Dark One Regular Member

    Joined:
    Nov 10, 2009
    Messages:
    460
    Likes Received:
    1,457
    Not sure what you are trying to achieve here!
     
  4. qwickpk

    qwickpk Registered Member

    Joined:
    Mar 8, 2009
    Messages:
    76
    Likes Received:
    6
    Occupation:
    Internet marketing
    Location:
    Sweden
    Didn't work man :( Thanks anyway!!
     
  5. steco

    steco Newbie

    Joined:
    Jan 24, 2010
    Messages:
    20
    Likes Received:
    4
    try with this.. it's free cake slice http://digitalgangster.com/4um/showthread.php?t=115217 copy paste the code where you want

    PHP:
    <div style="overflow: hidden; width: 179px; height: 175px; position: relative;" id="i_div">
    <
    iframe name="i_frame" src="http://url.here" style="border: 0pt none ; left: -496px; top: -192px; position: absolute; width: 1272px; height: 569px;" scrolling="no"></iframe></div>
    you can modyfy the location of the frame left: -496px; top: -192px
     
    Last edited: Feb 10, 2010
  6. bpicks

    bpicks Junior Member

    Joined:
    Apr 16, 2008
    Messages:
    147
    Likes Received:
    21
    Not sure what text you want it above. Try to move the div outside the href tag.

    Code:
    <div id="outside_location"></div>
    <a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;"><img src='PIC' /></a>
        <fb:js-string var="location_two"> <fb:iframe width="900" height="500" frameborder='0'  scrolling="no" src='www.....' /> </fb:js-string>
    <script type="text/javascript" charset="utf-8"> var outside_location = document.getElementById('outside_location'); </script>
     
  7. WoosterOh

    WoosterOh Junior Member

    Joined:
    Mar 29, 2008
    Messages:
    173
    Likes Received:
    12
    Good luck
     
    Last edited: Feb 10, 2010