Log in | Register
  1. Forum
  3. Discontinued Products
  5. JFBConnect Joomla 1.5 Support (CLOSED)
  7. Send Popup in JFBCLIke Module appearing behind module and breadcrumbs
× Joomla Facebook Connect support forum

Topic-icon Send Popup in JFBCLIke Module appearing behind module and breadcrumbs

Active Subscriptions:

None
12 years 4 months ago #16311 by egrohs
The FB send button popup works fine in the article. When a user tries to use FB send from the JFBCLike Module, the popup appears behind the module and breadcrumbs so the user cannot input the necessary info. How do I rectify so that the popup appears over everything so the user can input the info?

Thanks

page is www.njteachertalk.com

File Attachment:
The topic has been locked.
Active Subscriptions:

None
12 years 4 months ago #16332 by egrohs
I see that if I change the left attribute in the style below from 55px to -410px (screenshot below), I can at least move the box off of the modules more to the left. Not sure how it would look on a mobile phone. Box might be off the screen I guess. If I wanted to go with this change though, where would I find this iframe style to change? What folder?

span class= " fb_edge_comment_widget fb_send_button_form_widget light fb_iframe_widget " style= top: 19px; left: 55px; z-index: 10000;

Hoping there is an easier fix.

File Attachment:
The topic has been locked.
Support Specialist
12 years 4 months ago #16336 by alzander
Sorry for the delay. I started on this yesterday, and got one piece of the puzzle (having it appear over the main content are), but didn't get why the left-side bar is getting covered. Below is some info:
Normally, to fix this the easiest way, would be to use the Module Class Suffix parameter in the JFBCLike Module. With that, you can then assign specific CSS values to just that module. You need a higher index for just the JFBCLike module, so it's contents are 'above' the other content on the page, in case of an overlap.

You can try putting in a class suffix, like '-sidelike'. On the page, that should create a div with a class of "moduletable-sidelike", however, I don't think your template is created in a way to allow for class suffixes.. try though, and we can look again.

For example, we can assign a higher z-index to all modules in the left column, but that still has issues when the Like box is overlapping with the other modules (which is why we need to target that Like module only. To see what I mean, do the following:
In www.njteachertalk.com/templates/njteache...ont/css/template.css, at line ~1666, in the .art-vmenubloc, .art-block section, you'll see z-index is set to 0. Change that to 10. That will fix the overlap with the main content area, but not other sidebar modules.

Hope that gets you started. You may want to talk to whoever created your template and tell them that the module inclusions in the template file should be of type "xhtml", which allows the class suffix to work (I can explain more if you want).

Thanks,
Alex
The topic has been locked.
Support Specialist
12 years 4 months ago #16337 by alzander
Oh yeah, you may be able to combine your 'movement' to the left with my z-index fix.. but move the module to the right, over the main content area. Worth a shot at least, if interested.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 4 months ago #16346 by egrohs
Yeah, I changed that line at 1666 with the z-index of 10 and I see how the flybox now shows over the content but still is cover by the module. It works great on the page. www.njteachertalk.com/rate-my-administrator because I guess that there are no other modules on that left hand side to cover the send box. I tried moving the Like module over to the right side but still covered under the modules.

I tried adding the suffix like you advised but I do not see it showing up in the css template using my file manager. I could have swore I used t the suffix attribute to fix the "contact us" page because the content fill in boxes were moving to the center instead of the left where I wanted them so I was able to use that suffix, creating
#component-contact table td { and the assigning the text align: left to it.

Not sure why the new '-sidelike' suffix isn't turning up in the css template. Is that how it's exactly suppose to be entered in the suffix text area, as '-sidelike' or as -sidelike or as .sidelike or as just sidelike? I'm pretty new at this so maybe I am enetring the info wrong?

And I created my template through Artisteer, which I heard how bad they are, after the fact. I actually wound up changing a lot on my own already. I am not sure if there is a way for me to do that myself, making the module inclusions in the template file, type "xhtml".

Anything else I can do? I really do not want to disable the send button.

Isn't there a way to just change the position where the box comes up, like how I changed this in firefox:

span class= fb_edge_comment_widget fb_send_button_form_widget light fb_iframe_widget style= top: 19px; left: -410px; z-index: 10000;
The topic has been locked.
Support Specialist
12 years 4 months ago #16352 by alzander
Aristeer isn't perfect, but frankly, it gets the job done.. and in web development, that's 90% of the battle :)

Quick primer on the template styles.. basically, if you use the style of XHTML for the module inclusions, it will wrap all modules in a new div that has a class of "moduletable". If you set a module class suffix, like "-sidelike", it will then create the div with a class of "moduletable-sidelike", which you can then style individually per module. Of course, if your template has any other inherited styles on moduletable, that could cause other issues, but it allows you maximum flexibility for styling individual modules.

So... to change the class to XHTML, you'd want to edit your template's file that includes the module positions. Usually, this is simply /templates/YOUR_TEMPLATE/index.php, but could be else where. In there, you'll see the module inclusions like:
<jdoc:include type="modules" name="top" />
To change the style to XHTML, you want to update that line to:
<jdoc:include type="modules" name="top" style="xhtml" />

If there's already a style there, try just updating it. Since (for now), you only need it on the the left sidebar position, you might just want to only update that one jdoc:include line, instead of all, so that there's less of a possible impact.

Once done, you should be able to remove the CSS change I made above, and (hopefully) simply add the following:
.moduletable-sidelike {z-index: 10; overflow:visible}

Hope that all helps get you going, and maybe even taught you something. Should you need anything else though, you know where to find us!

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 4 months ago #16354 by egrohs
Sorry, I am totally new at all of this coding. 1st template ever. that's why I used Artisteer. Glad you don't think that program is that bad. I caught a lot of flack in other forums from other developers.

I think I found the lines to edit to make that style="xhtml" edit. The lines don't say exactly that though. I just wanted to brush them by you so I don't edit the wrong lines and screw everything up.

in the index.php file in the template folder, there are these 2 lines:

<jdoc:include type="modules" name="user3" />
<jdoc:include type="modules" name="banner1" style="artstyle" artstyle="art-nostyle" />

Do I place that style="xhtml" edit in there?

I really did not understand what you meant by:

Since (for now), you only need it on the the left sidebar position, you might just want to only update that one jdoc:include line, instead of all, so that there's less of a possible impact.

Can you please explain further?
Thanks
The topic has been locked.
Support Specialist
12 years 4 months ago #16359 by alzander
Aristeer certainly isn't great, but honestly, there's not much else for automated template development... so it's a great starting point if you don't want to hack up another template. Again, the end goal is the same, and frankly, your site looks pretty good.. so you're at a great point, regardless of how you got there.

Taking the last question first, you have modules that you've assigned in the module manager to that left sidebar. In Joomla, you've given them a template position. I don't know what the name of that position is, but once you look it up in the Joomla Module Manager (where that Like button is set to appear), you want to find the jdoc statement that loads that template position. So, let's say the template position is "user3", I'd recommend you only change that one jdoc line, not both (I'd think there are more than two though, honestly.

Anyways, once you know the position, find the jdoc line with the name="that-template-position", and then change or add the style="xhtml" to it. Obviously, if you change it, and it messes things up, undo the change. Nothing you do in the template should be destructive, since you can simply undo it and no change will really happen.

Hope that all helps, but ask away if you have other questions :D
Alex
The topic has been locked.
Active Subscriptions:

None
12 years 4 months ago #16370 by egrohs
OK, I threw in the towel. Been working on it for 2 days. I'm done. There were only 2 jdoc statements in the template index.php file. I tried editing them both. The user3 edit jacked up my modules. Created a white space between the modules and top menu. I still continued and tried to add that moduletable-sidelike attribute to the template css file but nothing happened. Same prob. I also tried to edit the other jdoc statement by switching out style="artstyle" with style="xhtml" that did not alter my site at all, but it also did not change anything with the addition of the template css edit.

So I just moved the JFBCLike Module down to the bottom left. That mod will always be last on the left so there will be no mods under it blocking the box and since the other prob was solved of the content blocking the box, it's all good. Send box shows over the content, no mods blocking, works for me. Once I put some more articles in there, the like mod will be very visible in the middle of the page.

One question I do have though about the send box, why is the image in the send box inherited from the rss feed? How do I change this image?

File Attachment:
The topic has been locked.
Active Subscriptions:

None
12 years 2 months ago #19076 by Krx
I have same issue with JFBCLike module.
When Like or share is clicked, it opens FaceBook extra boxes inline in that module box and those are invisible and unacessible.
I'm using latest JFBCLike version Joomla 1.7.5 and rockettheme template powered with Gantry.

Edit:
Please ignore this. I've solved issue with help from this thread:
www.sourcecoast.com/forums/jfbconnect/jf...ther-modules-on-page

Regards
The topic has been locked.
  1. Forum
  3. Discontinued Products
  5. JFBConnect Joomla 1.5 Support (CLOSED)
  7. Send Popup in JFBCLIke Module appearing behind module and breadcrumbs
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS