Facebook iFrame

qwickpk · Feb 10, 2010

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!!!

bpicks · Feb 10, 2010

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.

The Dark One · Feb 10, 2010

Not sure what you are trying to achieve here!

qwickpk · Feb 10, 2010

bpicks said:
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.

Didn't work man

Thanks anyway!!

steco · Feb 10, 2010

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

bpicks · Feb 10, 2010

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>

WoosterOh · Feb 10, 2010

Good luck

Facebook iFrame

qwickpk

Registered Member

bpicks

Junior Member

The Dark One

Regular Member

qwickpk

Registered Member

steco

Newbie

bpicks

Junior Member

WoosterOh

Junior Member

Main Menu

Marketplace

Making Money

BlackHat World