1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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 Jr. VIP Jr. VIP Premium Member

    Joined:
    Nov 10, 2009
    Messages:
    460
    Likes Received:
    1,447
    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:
    11
    Good luck
     
    Last edited: Feb 10, 2010