StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>So, it's unlikely this will solve your problem, since you seem competent enough to know how to do this, posted no real code to actually asses the problem, and I can't figure out exactly which facebook API you're using, BUT-</p> <p>Can't you just capture the click event and the width of the iframe or whatever it is and just compare the offsets? Something like -</p> <pre><code>$("#social-container").click(function(e){ var facebookSelector = $( iframe selector here ); var iframeHeight = facebookSelector.height(); var iframeWidth = facebookSelector.width(); var winHeight = $(window).height(); var winWidth = $(window).width(); if ( e.clientY && e.clientX ){ //Set the top based on where mouse click occured if ( e.clientY > (winHeight-iframeHeight) ){ facebookSelector[0].style.top = winHeight-iframeHeight + "px"; } else { facebookSelector.style.top = e.clientY + "px"; } //Set the left based on where mouse click occured if ( e.clientX > (winWidth-iframeWidth) ){ facebookSelector[0].style.left = winWidth-iframeWidth + "px"; } else { facebookSelector[0].style.left = e.clientX + "px"; } } } </code></pre> <p>The above example less verbose-</p> <pre><code>$("#social-container").click(function(e){ var facebookSelector = $( iframe selector here ); var h = $(window).height() - facebookSelector.height(); var w = $(window).width() - facebookSelector.width(); if ( e.clientY && e.clientX ){ //Set the top based on where mouse click occured facebookSelector[0].style.top = ( e.clientY > h ) ? h + "px" : e.clientY + "px"; //Set the left based on where mouse click occured facebookSelector[0].style.left = ( e.clientX > w ) ? winWidth-iframeWidth + "px" : e.clientX + "px"; } } </code></pre> <p>You could also use the position of the facebook like button instead of the click location (or whatever you want, really).</p> <p>Caveats and Addendums:<BR/> 1. This won't work so easily if the id of your iframe (or whatever) is being dynamically generated by facebook and you have no control over it<BR/> 2. This won't work so easily if the Like button is in the iframe and prevents event bubbling up to your container.<BR/> 3. This example currently requires jQuery.<BR/> 4. Your iframe (or whatever) must be <code>position: absolute</code> or <code>position: fixed</code></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload