Canvas Support

How to manually show login or sign up form?

5 replies·opened Mar 14, 2020
C
cloudliuzjMar 14, 2020

Hi,
Sorry to bother. How can I manually set which form to show or hide in Login/Register - style 3?
For example, if someone clicks on register link, the page will show login form closed and register form opened after loaded.
How can I set that?

Thanks for help!

S
SemiColonWebSTAFFMar 15, 2020

Hello,

Consider using the following JS Code at the bottom of the Page:

<script>
&#x9;jQuery(window).on( &apos;load&apos;, function(){
&#x9;&#x9;var windowHash = location.hash;
&#x9;&#x9;if( windowHash != &apos;&apos; && typeof windowHash !== &apos;undefined&apos; ) {
&#x9;&#x9;&#x9;var $accordion = $(windowHash).parents(&apos;.accordion&apos;);
&#x9;&#x9;&#x9;if( $accordion.length > 0 ) {
&#x9;&#x9;&#x9;&#x9;$accordion.find(&apos;.acc_content&apos;).hide();
&#x9;&#x9;&#x9;&#x9;$accordion.find(&apos;.acctitle&apos;+ windowHash).addClass(&apos;acctitlec&apos;).next().show();
&#x9;&#x9;&#x9;}
&#x9;&#x9;}
&#x9;});
</script>

and then simply add the id Attribute to the .acctitle Element. Example:

<div class="accordion accordion-lg divcenter nobottommargin clearfix" style="max-width: 550px;">

&#x9;<div class="acctitle" id="accordion-login"><i class="acc-closed icon-lock3"></i><i class="acc-open icon-unlock"></i>Login to your Account</div>
&#x9;<div class="acc_content clearfix">
&#x9;&#x9;..
&#x9;</div>

&#x9;<div class="acctitle" id="accordion-register"><i class="acc-closed icon-user4"></i><i class="acc-open icon-ok-sign"></i>New Signup? Register for an Account</div>
&#x9;<div class="acc_content clearfix">
&#x9;&#x9;...
&#x9;</div>

</div>

Now, you can Link the Page using this Link with a Hash referencing to the ID: login-register-3.html#accordion-register .

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

C
cloudliuzjMar 16, 2020

Hi, Thanks for your reply!
I have added the id attribute and adjust the JS code like below to make it working.

<script>
jQuery(document).ready( function($) {

        let authMode = location.hash;
        if (authMode != '' && typeof authMode !== 'undefined') {
            var $accordion = $("#" + authMode).parents('.accordion');
            if ($accordion.length &gt; 0) {
                $accordion.find('.acc_content').hide();
                $accordion.find('.acctitle').removeClass('acctitlec');
                $("#" + authMode).addClass('acctitlec').next().show();
            }
        }
    });
&lt;/script&gt;

There is another question. I have to put this code after import the functions.js file.
Is there any way I can add this JS code before import the function.js file?

Sincerely,

S
SemiColonWebSTAFFMar 16, 2020

Hello,

Unfortunately, not. This has to be put after the js/functions.js JS File Linking to avoid being overridden by the default functions.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

C
cloudliuzjMar 17, 2020

Got it, thanks for helping!

Sincerely,

S
SemiColonWebSTAFFMar 17, 2020

Hello,

Very Happy to Help!

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard