WordPress.org

Ready to get started?Download WordPress

Forums

SimpleModal Login
[resolved] gif spinner while loading (10 posts)

  1. camilin119
    Member
    Posted 3 years ago #

    Hi Eric, first thanks a lot for this awesome plugin is exactly what i was looking for. There's one thing i think could enhance the user experience and is a gif animation that tells the user that they're being logged. Right now the screen just don't tell anything to the user so they may think anything wrong is happening, often causing the user to click once again.

    I think the best solution we can implement is to present a gif spinner while the system is logging that tells the user "hey this is logging you in".

    How can we do this?

    Again, thanks a lot for this awesome work!

    http://wordpress.org/extend/plugins/simplemodal-login/

  2. Eric Martin
    Member
    Plugin Author

    Posted 3 years ago #

    Thanks for the suggestion - I agree.

    Here's a bit of code that should do the trick:

    - create a img folder and add a animated gif called loading.gif (WP ships with one under wp-admin/images.

    - update simplemodal-login.php and add the following code after the <p class="submit">...</p> block of code:
    <div class="simplemodal-login-loading" style="display:none"></div>

    - update default.css and add:
    #simplemodal-login-container .simplemodal-login-loading {background:url(../img/loading.gif) center no-repeat; height:20px; position:absolute; width:100%;}

    - update default.js and change the if (SimpleModalLogin.isValid(form)) { ... } block of code to:

    if (SimpleModalLogin.isValid(form)) {
    	buttons.hide();
    	loading.show();
    	$.ajax({
    		url: form[0].action,
    		data: form.serialize(),
    		type: 'POST',
    		cache: false,
    		success: function (resp) {
    			var data = $('<div></div>').append(resp),
    				error = $('#login_error', data[0]),
    				loginform = $('#loginform', data[0]);
    
    			if (error.length > 0) {
    				loading.hide();
    				buttons.show();
    				$('p:first', form[0]).before(error);
    			}
    			else if (loginform.length > 0) {
    				loading.hide();
    				buttons.show();
    				SimpleModalLogin.showError(form, 'empty_both');
    			}
    			else {
    				var redirect = $('#redirect_to', form[0]).val(),
    					href = location.href;
    
    				if (redirect.length > 0) {
    					if (SimpleModalLogin.url && SimpleModalLogin.url.indexOf("redirect_to") !== -1) {
    						var p = SimpleModalLogin.url.split("=");
    						href = unescape(p[1]);
    					}
    					else {
    						href = redirect;
    					}
    				}
    				window.location = href;
    				dialog.close();
    			}
    		}
    	});
    }

    That will hide the buttons and show the animated gif after the submit.

  3. wood2695
    Member
    Posted 3 years ago #

    I had come across camilin119's post the other day as I am currently implementing SimpleModal Login into the site I'm developing and couldn't agree more with his suggestion/request for some "loading" visual cue. I'm happy to see that you agreed, Eric. I love the plugin and this was the only thing missing IMHO.

    Anyway, I logged on to this forum this morning to bump that original post and was delightfully surprised to see your solution. Unfortunately, I don't believe it's quite there yet. I have implemented the changes you've suggested, Eric, but not only am I not seeing the spinner in action (original buttons stay there) but the login process is no longer working. No meltdown or anything, the modal window simply stays there (as-was) and does not log the user in. I've reverted for the time being, so no major emergency.

    I'd love to help troubleshoot this Eric, is there anything else you suggest or is there any additional information I can provide to help iron this out?

    Thanks for a great plugin and thanks for the support. Cheers.

    UPDATE... in trying to make sense of your code (i'm a hack, not a dev guy) I am wondering if you need to define "buttons" and "loading" somewhere, before you can tell them to hide() and show()? Apologies if I'm way off, just wondering how your script would know what to hide/show if those aren't defined anywhere.

  4. Eric Martin
    Member
    Plugin Author

    Posted 3 years ago #

    I'm working on an update to release. It will also include the forgot password and register features.

    You are correct, good catch. I apologize for missing some of the necessary code. I can't update my original answer, so here's what shuold get it working:

    Before if (SimpleModalLogin.isValid(form)) {, add:

    var buttons = $('.submit input:visible', form[0]),
    	loading = $('.simplemodal-login-loading', form[0]);
  5. wood2695
    Member
    Posted 3 years ago #

    Killer... worked like a charm. Thank you very much. I'll look forward to updates, but it's perfect for me now.

    Cheers!

  6. Isaak Wells
    Member
    Posted 3 years ago #

    Thanks for the info emartin24, I have actually manually added the register and forgot links to my login and customized it to my site look. All I needed was that little fix.

    Take a look and let me know what you think if you have time.
    http://www.consolealliance.com

  7. yashmistrey
    Member
    Posted 3 years ago #

    hey friends it's takes too much time to load !

    it's not working in my site here

    http://www.shreshthbharat.in

  8. yashmistrey
    Member
    Posted 3 years ago #

    why is still loading ! often it's taking a long time to process

  9. Eric Martin
    Member
    Plugin Author

    Posted 3 years ago #

    @yashmistrey - have you tried this fix?

  10. yashmistrey
    Member
    Posted 3 years ago #

    thanks Eric Martin worked well ,

    धन्यवाद ! :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic