Topic-icon Facebook Login Button - Module

Active Subscriptions:

None
11 years 10 months ago - 11 years 10 months ago #46017 by easypony
Hi

Version: 6.1.1

I am using the modal popup for the login module in a tight place at the top of the site. At present we are only using Facebook.

When logged in without using Facebook the message shows "Connect this site to your Social network?" with the image. I have created a smaller Facebook icon to fit that space (which shows up in the module params OK) and changed the CSS to fit it and the text in but now that effects the popup modal box.

The pop up modal uses the same small icon image. Is there a way I can override the selected image for the modal pop up and use the default larger image? but still use the small image on the page?

I am having trouble with the styling effecting the modal popup box.

We will be adding other social networks so I am hoping this can be done somehow.

I have attached a screen grab to show both.

Thank you
Steve
Last edit: 11 years 10 months ago by easypony.
The topic has been locked.
Support Specialist
11 years 10 months ago #46028 by alzander
There isn't a way to set the Reconnect images different from the Login buttons using the same module. There's a few options that could work for you though.

The one I'd suggest is:
* Create 2 SCLogin modules.
* Put them in the same module position.
* Configure the first as the "Login" module with the button and settings you want. Set it up so that the "Access" is "Guest". That will only show to users that aren't logged in.
* Configure the other module as the "Logout" module with the button and settings you want. Set it up so that the "Access" is "Registered". That will only show to logged in users.

That should do what you're wanting to do. I understand it's a little more complex that may be desired though.

The other options are:
* A code modification to our module to force the reconnect image
* A template override to create your own logout layout

Both of those are even more complex and could cause issues when upgrading. If you'd prefer those methods though, just let me know and we can give you more info on how.

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

None
11 years 10 months ago #46049 by easypony
Hi Alex

Great suggestion.

I am also having a conflict problem Jomsocial which I hope you may have run across, I cannot find a reference in the forum.

When on the community login page (default Jomsocial welcome join page) the login modal goes behind the overlay background and to the left of center which means it cannot be clicked or access clicking on the overlay closes at least.

I understand it is a css depth but I cannot find the place to override the Jomsocial css causing the problem.

I thought you guys might have seen this one before.

I have added a screenshot.

Thank you
Steve
The topic has been locked.
Support Specialist
11 years 10 months ago #46083 by alzander
Sorry for the delay in getting back to you on this. The reason the popup is hidden behind the modal backdrop is due to an unrelated Javascript error on your page. Because of that error, the Javascript the SCLogin module uses to 'pop' itself on top of everything is not executing properly.

The error that's causing the problem is:

Uncaught TypeError: undefined is not a function line:83

That line is the end of the following block of code:
<script type="text/javascript">
var frontpageUsers	= 0;
var frontpageUsers	= 20;
joms.filters.bind()
var frontpageVideos	= 5;
(function($){$().ready(function(){$("html.no-js").removeClass("no-js").addClass("js");});})(jQuery);
	var acymailing = Array();
				acymailing['NAMECAPTION'] = 'name';
				acymailing['NAME_MISSING'] = 'Please enter your name';
				acymailing['EMAILCAPTION'] = 'email';
				acymailing['VALID_EMAIL'] = 'Please enter a valid e-mail address';
				acymailing['ACCEPT_TERMS'] = 'Please check the Terms and Conditions';
				acymailing['CAPTCHA_MISSING'] = 'Please enter the security code displayed in the image';
				acymailing['NO_LIST_SELECTED'] = 'Please select the lists you want to subscribe to';
		
acymailing['reqFieldsformAcymailing60621'] = Array('html');
		acymailing['validFieldsformAcymailing60621'] = Array('Please enter a value for the field Receive');
acymailing['excludeValuesformAcymailing60621'] = Array();
acymailing['excludeValuesformAcymailing60621']['name'] = 'name';
acymailing['excludeValuesformAcymailing60621']['email'] = 'email';

jQuery(document).ready(function(){
	jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
acymailing['reqFieldsformAcymailing10272'] = Array('html');
		acymailing['validFieldsformAcymailing10272'] = Array('Please enter a value for the field Receive');
acymailing['excludeValuesformAcymailing10272'] = Array();
acymailing['excludeValuesformAcymailing10272']['name'] = 'name';
acymailing['excludeValuesformAcymailing10272']['email'] = 'email';

  </script>
Specifically, it looks to be the following line, but I can't be sure:
Query(document).ready(function(){
	jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
})
You'll need to narrow down what is trying to call that tooltip code and either remove it or fix the error. Once you do that, the SCLogin module should work properly on that page.

I hope that helps you get started. If you need anything more, just let me know.

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

None
11 years 10 months ago #46096 by easypony
Hi Alex

Thank you for that. That led me to the problem

In the template I was forced to unload the Joomla bootstrap version on the "com-community" pages as Jomsocial have there own hacked version of bootstrap.min.js which caused my template collapsed menu not to work (among other things) if they were both loaded.

So what I have done is isolate the bootstrap js tooltip function and load just that function that on the "com_community pages"

//unload Joomla core bootstrap.min.js on Jomsocial pages
if($currentComponent == "com_community"){
unset($doc->_scripts[JURI::root(true) . '/media/jui/js/bootstrap.min.js']);
$doc->addScript($template . '/js/bootstrap-tooltip.js');
}

There still is a problem with the position of the modal where normally the:
margin: 0 0 0 -40%;
Positions the popup well on all other pages on this page it's not. It is to the left -50% across and 40% back take the 40% out and it starts at 50% across.

I can't see any other css affecting it.

Steve
The topic has been locked.
Support Specialist
11 years 10 months ago #46109 by alzander
The issue is that the following Javascript that the SCLogin module uses on the page isn't being executed:
jfbcJQuery("#login-modal").on("show", function() {
        jfbcJQuery("#login-modal").css({"margin-left": function() {return -(jfbcJQuery("#login-modal").width() / 2)}})
        });
It seems like the onShow method of Bootstrap for the modal isn't being triggered, so the SCLogin module isn't properly centering itself.

My only suggestion is to try enabling the "Include jQuery / Bootstrap" setting in the JFBConnect -> Configuration area. That will include a JFBConnect/SCLogin specific version of jQuery and Bootstrap that only works for our extensions and won't conflict with other things.

I'm assuming the 'hacked' Bootstrap that's from JomSocial isn't doing what we expect it to do.

I hope that helps,
Alex
The topic has been locked.
Active Subscriptions:

None
11 years 10 months ago #46126 by easypony
Hi Alex

I will work something out with that info, thank you.

Correct with Jomsocial, why they couldn't use the default bootstrap and then add what they needed is beyond me. I see through their forum all sorts of 3rd party components and modules are having conflicts.

The sooner (if ever) everyone uses the built in assets the easier life will be.

All my best
Steve
The topic has been locked.
Support Specialist
11 years 10 months ago #46130 by alzander
Steve,
We agree.. however, we don't even use the built-in Joomla assets anymore. It caused too many conflicts in these cases. Now, we basically have 2 options:
* Your site already has jQuery and Bootstrap loading on every page. This is usually through your template, but may be another extension auto-loading them or using the Joomla built-in assets.
* Enable our "Include jQuery / Bootstrap" setting, which loads our own JFBConnect-specific version of those files. They won't conflict with other Bootstrap and jQuery versions and have been proven to work on all sites. The problem with this is that there's an extra Javascript file to load on the page.

Our solution isn't perfect either, so I can't say JomSocial is right or wrong.. it's difficult making a product that works with countless unknown other extensions :)

Alex
The topic has been locked.