Cannot get popup to show over other content

[sverhagen]

I have tried the Z-Index On/Off option in the module configuration as well as the suggestion from one of the reviewers to add some high z-index values to the CSS, but I cannot get the popups to fold over the other modules.

This is a Joomla 2.5 installation with the RocketTheme Afterburner template.

Here's an example:
http://www.veronicaanders.net/en/stories/138-treasures

Your help would be much appreciated.

[martinkolle]

I will write some javascript, when I find an easy way to do it.

I can not give any help to you, because I get a lot of these request, and do not have time to help everyone.

Sorry, :)

[sverhagen]

A number of templates out there inhibit this behavior, it has to do with complex div constructions and hidden overflow. I wasn't able to fix it using CSS (nor did I want to move away from the template that I adopted). The problem is also not exclusive to this module, rather to any use of Facebook's social plugins in combination with these templates.

I wrote some JavaScript to automatically resize the div that's used. This may not be what you want for all web sites, and I'd prefer having it just float/collapse over whatever is displayed further down the page. But lack of being able to make that work, resizing the div is the second-best solution.

This is the JavaScript. Note that in finding out all of the above I moved away from using this module, but the solution should be pretty much the same. Here goes:

<!--
The JavaScript code below works for the following flavor of the Facebook social plugin:
<fb:like send="true" width="450" show_faces="true"></fb:like>
-->

<script language="javascript" type="text/javascript">
var interval=null;
function fncEnter() {
  if(!interval) {
    interval=setInterval(fncResize, 250);
  }
}

function fncExit() {
  if(interval) {
    clearInterval(interval);
    interval=null;
  }
}

function fncResize() {
  //console.debug("starting resize");
  fbLike=document.getElementsByTagName("fb:like")[0];
  height=0;

  spans=document.getElementsByClassName("fb_edge_comment_widget");
  for(i=0; i<spans.length; i++) {
    height=Math.max(height, spans[i].clientHeight);
  }

  likeButton=document.getElementsByClassName("fb_ltr fb_iframe_widget_lift")[0];
  if(likeButton) {
    height=Math.max(height, likeButton.clientHeight);
  }

  height+=29;
  fbLike.style.height=height+"px";
  //console.debug("resized to " + height + "px; done");
};

function attachEventForFunction(obj, evt, fnc) {
  evt = evt.toLowerCase();
  if(obj.addEventListener) {
    obj.addEventListener(evt, fnc, false);
  } else {
    obj.attachEvent("on"+evt, fnc);
  }
}

fbLike=document.getElementsByTagName("fb:like")[0];
attachEventForFunction(fbLike, "mouseover", fncEnter);
attachEventForFunction(fbLike, "mouseout", fncExit);
</script>

A note about obtaining the topmost element within "scope":

fbLike=document.getElementsByTagName("fb:like")[0];

Depending on the flavor of the Facebook social plugin you may also use:

fbLike=document.getElementById("fb-like"); // I added my own id for this
fbLike=document.getElementsByClassName("fb_edge_widget_with_comment")[0];

Another note about obtaining the topmost element is that it only supports a single instance of the fb:like element on your web page, but the entire JavaScript snippet could easily be extended to support multiple instances. (Nor does it support zero instances. Anyhow, it specifically refers to the first instance [0].) It's just not an issue for the web site I'm working on now.

A note about using a timer. Ideally you'd want to automatically resize after a button is clicked, but I wasn't able to capture these events (as they're handled by a Facebook iframe; cross-domain issues). Then I tried mousemove; same issues. Then I decided to just regularly do the automatic resize while the mouse is within "scope" (hence use of the mouseover and mouseout events being used).

A note about the console.debug statements (currently commented out). They are helpful when testing the code and using Firebug.

I don't feel it's a great solution, but after two days of hacking it's the best I could come up with. Hope this may be of use to other people.

[martinkolle]

Sorry for the late reply. I have looked at this function and it will work
in some way, but it is very long.

Currently I have an idea to fix this, but have not been written.

Have a nice day!

2012/12/28 Sander Verhagen notifications@github.com

A number of templates out there inhibit this behavior, it has to do with
complex div constructions and hidden overflow. I wasn't able to fix it
using CSS (nor did I want to move away from the template that I adopted).
The problem is also not exclusive to this module, rather to any use of
Facebook's social plugins in combination with these templates.

I wrote some JavaScript to automatically resize the div that's used. This
may not be what you want for all web sites, and I'd prefer having it just
float/collapse over whatever is displayed further down the page. But lack
of being able to make that work, resizing the div is the second-best
solution.

This is the JavaScript. Note that in finding out all of the above I moved
away from using this module, but the solution should be pretty much the
same. Here goes:

<script language="javascript" type="text/javascript"> var interval=null; function fncEnter() { if(!interval) { interval=setInterval(fncResize, 250); } } function fncExit() { if(interval) { clearInterval(interval); interval=null; } } function fncResize() { //console.debug("starting resize"); fbLike=document.getElementsByTagName("fb:like")[0]; height=0; spans=document.getElementsByClassName("fb_edge_comment_widget"); for(i=0; i

A note about obtaining the topmost element within "scope":

fbLike=document.getElementsByTagName("fb:like")[0];

Depending on the flavor of the Facebook social plugin you may also use:

fbLike=document.getElementById("fb-like"); // I added my own id for this
fbLike=document.getElementsByClassName("fb_edge_widget_with_comment")[0];

Another note about obtaining the topmost element is that it only supports
a single instance of the fb:like element on your web page, but the entire
JavaScript snippet could easily be extended to support multiple instances.
It's just not an issue for the web site I'm working on now.

A note about using a timer. Ideally you'd want to automatically resize
after a button is clicked, but I wasn't able to capture these events (as
they're handled by a Facebook iframe; cross-domain issues). Then I tried
mousemove; same issues. Then I decided to just regularly do the automatic
resize while the mouse is within "scope" (hence use of the mouseover and
mouseout events being used).

I don't feel it's a great solution, but after two days of hacking it's the
best I could come up with. Hope this may be of use to other people.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/23#issuecomment-11741142.