• Frontend Login Form - Jumps down the page... help please!! :(#

  • 17035
    9

    LewisSellers Reply #1, 10 months, 3 weeks ago

    Reply
    Hi Everyone,

    I'm running Evolution 1.0.3 on a site thats currently in development. We've got a weird bug that I've spent hours looking at and I can't figure out whats causing it.

    When using Internet Explorer (Version 8.0.6001.18702) the page loads part the way down missing off quite a big chunk of the header. It only does this on the homepage which is very strange.

    We have a Jquery slider on the homepage so I assumed it would be that (as the jquery slider is on the homepage). I've replaced the slider with another slider and that hasn't fixed the problem. I then decided to go through the code line by line and comment it out until it stopped jumping down the page. I then managed to figure out that if the first line of our login form was commented out, the issue stops.

    I've tried commenting out all the of JS files on the homepage, but the issue still remains. It seems strange that it's only the homepage, but hopefully someone will know how to sort this. It's really becoming an irritating issue .

    Ok, so to try and give you as much information as possible, this is how it's called in:

    Every single template on our website calls in a chunk called 'siteFooter'. Inside here, we call in the login box via the following code:

    [[Personalize? &yesChunk=`accountLinks` &noChunk=`loginFormTpl` &ph=`name`]]


    If you go to 'loginFormTpl' the following code is in there:

    [!WebLogin? &tpl=`FormLogin` &loginhomeid=`[(site_start)]`!]


    And then if you go to 'FormLogin', the following line is the one causing the issues:

    <label for="username">User: <input  type="text" name="username" id="username" tabindex="1" onkeypress="return webLoginEnter(document.loginfrm.password);" value="[+username+]" style="margin-left: 41px;" /></label><br />


    I went through that line and removed each section part by part to find out where the issue was. It sems to be with the 'name="username"' part of the line. If I change username in both sections to anything else, the page doesn't jump down and it's fine....

    Unfortunately, if I change those, the login form stops working as I assume thats the variable that's needed in order to login....

    It's very strange that it only happens on the homepage because every single other page loads fine... When the page 'jumps down' the bottom of the browser aligns with the bottom of the username login box. A bit like an anchor tag would, but it's the bottom of the browser that aligns and not the top.

    If anybody has any suggestions at all, please let me know!

    Kind Regards
    Lewis
    The login box is called in


  • 28042
    15,111
    How MODx Evo Works

    Log in to an Evo Manager username guest, password guestuser.

    sottwell Reply #2, 10 months, 3 weeks ago

    Reply
    The default weblogin snippet has the username field with a tabindex of 1. This can cause the screen to scroll until it's visible on the screen. Try using a chunk for the tpl and copy the default form, editing it to get rid of the tabindex attributes.


  • 17035
    9

    LewisSellers Reply #3, 10 months, 3 weeks ago

    Reply
    Hi There,

    The form already is running from a tpl, so I've gone in and removed all the tab indexs. The actual login form now looks like this:

    <!-- login form section-->
        <h3><span><span>Login to your Account</span></span></h3>
        <div class="clear"></div>
<form method="post" class="mainlogin" name="loginfrm" action="[+action+]"> 
    <input type="hidden" value="[+rememberme+]" name="rememberme" /> 
<label for="username">User: <input  type="text" name="username" id="username" onkeypress="return webLoginEnter(document.loginfrm.password);" value="[+username+]" style="margin-left: 41px;" /></label><br />
    	<label for="password">Password: <input type="password" name="password" id="password" onkeypress="return webLoginEnter(document.loginfrm.cmdweblogin);" value="" style="margin-left: 10px;"  /></label><br />
    	<input type="checkbox" id="checkbox_1" name="checkbox_1" size="1" style="margin-right: 15px;"  value="" [+checkbox+] onclick="webLoginCheckRemember()" /><label for="checkbox_1" class="checkbox">Remember me</label><br />
    	<input type="submit" value="[+logintext+]" name="cmdweblogin" class="button" /><br />
	<a href="#" onclick="webLoginShowForm(2);return false;" id="forgotpsswd">Forget Your Password?</a>
</form>


    It's still down the page... I can down see the bottom of 'login to your account' rather than the bottom of the Username box...

    Thank you for your help so far!

    Regards
    Lewis


  • 17035
    9

    LewisSellers Reply #4, 10 months, 3 weeks ago

    Reply
    Infact, just to further my last email, when you refresh the page it goes down to just below the username box, then scrolls back up to just below the 'login to your account' h3 tag once the site is fully loaded...

    The URL to the site is http://www.secretserviceinfo.co.uk
    Many thanks
    Lewis