Log in | Register
  1. Forum
  3. Non-Commercial Extensions
  5. SCLogin Enhanced Login
  7. Show login popup on site entry (pageload)

Topic-icon Show login popup on site entry (pageload)

Active Subscriptions:

None
10 years 9 months ago #34182 by lrawling
Can anyone provide me some guidance on how to show the SC login popup on site entry, without the user having to click a button first? I would like the functionality to be similar to www.templeandwebster.com.au , except in my instance it's acceptable that the user can bypass the login.

thanks,

Liz
The topic has been locked.
Support Specialist
10 years 9 months ago #34207 by alzander
Liz,
The below Javascript can be used to automatically open the modal on page load. I'd recommend adding this to the bottom of your template, which should work for you, but if not, let us know:
<script type="text/javascript">
  jQuery('#login-modal').modal({show:'true'});
</script>
That will only work on pages where the SCLogin module is enabled, but hopefully does what you're looking for. Please test and let us know.

Best of luck,
Alex
The topic has been locked.
Active Subscriptions:

None
10 years 9 months ago #34235 by lrawling
hi Alex,

Thank you. That worked perfectly!, However, I do have a question about some functionality:

I would like to have 2 SCLogin modules working independently: one for showing the popup login only on the home page and only on desktops; and the other for showing the login/Register button on various pages and various devices. Is this possible?

tHanks,

Liz
The topic has been locked.
Support Specialist
10 years 9 months ago #34248 by alzander
The SCLogin module doesn't specifically let you state that it's only show on desktops or mobiles. That would have to be a feature of your template.

Beyond that, you can configure as many instances of the SCLogin module that you want on each page. There shouldn't be any limits on that.

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

None
10 years 9 months ago #34306 by lrawling
Hi Alex,

I have the feature in my template to enable modules to display or not depending on the device used, I was just including this information so you could understand the purpose of what I was asking. I'm not asking how to make SCLogin responsive. However I can't see how to nominate the SCLogin popup module on pageload to a particular module.

What I want is to create 2 modules like so:
Module 1 - shows modal popup on pageload only, no other login/register buttons are shown
Module 2 - shows login/register button on all pages in top left hand corner.

If I create 2 modules, how do I assign one only to the popup on pageload?

Thanks,


Liz
The topic has been locked.
Support Specialist
10 years 9 months ago #34442 by alzander
Sorry for the delayed response to this.

If module #2 is also using the modal mode, then you only need to configure that instance of the module. Then, you can use the Javascript I provided above to trigger that module's modal popup on page load. If the user chooses to close the modal, then the Login/Register buttons will still be there and would still work as expected.

I hope that makes senses, but if not, let me know. If module #2 above is configured to not be in modal mode (actually show the login form always), then we'd have to do things a little differently.

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

None
10 years 8 months ago #34719 by lrawling
Hi Alex,

Thanks for your response. I still can't get it to work the way I want. I have the site live now so it may be easier to explain. I have the login modal appearing on pageload, and the login/register buttons only appearing when viewed via iphone or ipad-portrait (after clicking away from the login popup). This is all working as I want.

What I want to do is hide the login popup from the iphone, only showing the login/register button. Any ideas on how to accomplish this?

Thanks,


Liz
The topic has been locked.
Support Specialist
10 years 8 months ago #34894 by alzander
Liz,
Whew, this post took a lot longer to get back to than I intended. It took a little research to find the best way to detect a mobile browser and *I think* I have something that may work. This is new territory for me though, so I can't guarantee it will work.. test, as always.

To make it not display on certain devices/browsers, please update the small snippet of code I posted above to add the browser detection:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
  jQuery('#login-modal').modal({show:'true'}); 
}
The only issue I can think of with that is that browsers like Chrome on iPhone or something like that that isn't native to the device may not work with those checks. The other option is to do a simple check for the window width. For example:
if ($(document).width() > 500) {
  jQuery('#login-modal').modal({show:'true'}); 
}
Neither of the above have been tested, but I've done a bit of investigation to check on them. I hope that helps get you going, but definitely let us know if you need something else.

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

None
10 years 8 months ago #34988 by lrawling
Thanks so much for all your help with this Alex, it's really appreciated. Your solution worked! I used the following at the bottom of the index.php file to say don't show the login popup on iphone, ipod, etc..

<script type="text/javascript">
if(! /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ) {
jQuery('#login-modal').modal({show:'true'});
}
</script>

I would have liked to set it by screen/window size but this bit of code didn't work (I also tried it with window instead of document but to no avail).

Hopefully all this effort on your behalf Alex will help someone else utilise this feature also.

THanks again!

cheers,


Liz
The topic has been locked.
Support Specialist
10 years 8 months ago #34997 by alzander
Glad to hear that got you where you wanted to be. I just looked at the code above again for the width option and realized I used $ instead of jQuery. That could have been the problem. If you want to try the following for detecting the width, it may work:
if (jQuery(document).width() > 500) { 
  jQuery('#login-modal').modal({show:'true'}); 
}
Let me know if that helps or not, and good luck,
Alex
The topic has been locked.
  1. Forum
  3. Non-Commercial Extensions
  5. SCLogin Enhanced Login
  7. Show login popup on site entry (pageload)
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS