[solved] How to make dropdown login

Hi guys! My modx site is currently running WebloginPE. I have an extra line below my menu with the login form, pretty classic design. However lately i have been looking to make a login dropdown similar to this page: http://www.magentocommerce.com/ , is this easy to do? I’m thinking it might be javascript which im not that experienced with making. Also im not sure if weblogin would be more suited for this design?

Advice is welcomed!

Thanks

The Magento login menu item registers the onclick() event to toggle the login form:



Then the login form itself is wrapped in this div:



Then its display is toggled with this javascript:



You can see this yourself if you visit the site an do a "view source" in your browser.

THANKS bobray ! i’m playing around with it now!! ill post a link if i get it down right


EDIT: Its not exactly the optimal behavior i have accomplished so far... still looking at it though. There is suddenly a scrollbar at the bottom of my site, and the footer is floating around here is my experimental page: http://www.norlins.dk/uchihaproject/foreningens_historie.html

You probably need some adjustments to your CSS to accommodate the drop-down, but I don’t know what they would be.

BTW, The drop-down doesn’t work at all for me in IE7 Vista.

Quote from: BobRay at May 06, 2009, 11:49 AM

You probably need some adjustments to your CSS to accommodate the drop-down, but I don’t know what they would be.

BTW, The drop-down doesn’t work at all for me in IE7 Vista.

Maybe it was because i was changing something. When i view the page in IE 7 the loginform pops below my website’s content div though, dang.

EDIT: Fixed the template screw up... was a sneaky bastard . that was inside my div close tag..

Still IE special bonus effect tho *Points at bobRay*

This is exactly the kind of thing that would be good to share on the wiki:
http://wiki.modxcms.com/index.php/WebLoginPE_Examples

I’m putting together usage scenarios for the WebLoginPE Snippet... using a drop-down login form is essentially the same as using a sidebar, but you hide the sidebar using CSS or Javascript.

Thanks for sharing!

When i login with an user account the "welcome.. etc." information is displayed inside the loginform’s div rather than replacing my custom "Login" button... this is pretty standard behavior i guess; webloginpe swaps the loginform with the welcome form... only in my case this is not what i want, and this might be quite difficult to change, at least im not sure how to do this.


EDIT: fixed this by adding all the code, except js of course, to the chunk rather than my template, don’t know why i did not think of that before..

PROBLEM. (still working here: http://www.norlins.dk/uchihaproject/foreningens_historie.html)

Try click "Ny bruger" its my Register new user button, the link dosen’t work.

Try to log-in with user (bruger): jonastest password(kode):123456
Login works in FF but not IE7....

I’m not quite sure what to do here


My Login template:

<div id="member-title-bg" class="member-title-bg">
<div id="member-title-bg-st"><a href="javascript:void(0);" class="login_knappen" onclick="toggleMemberMenu(’2’);">Login</a><button type="submit" id="wlpeRegisterButton" name="service" value="registernew">Ny Bruger</button></div>

<div class="login-menu" id="mMenu" style="display:none;">
[+wlpe.message+]
<div id="wlpeLogin">
<form id="wlpeLoginForm" action="[~[*id*]~]" method="POST">

<label id="wlpeUsernameLabel" for="wlpeUsername">Bruger
<input id="wlpeUsername" type="text" name="username" />
</label>



<label id="wlpePasswordLabel" for="wlpePassword">Kode
<input id="wlpePassword" type="password" name="password" height="20" />
</label>




<button type="submit" id="wlpeLoginButton" name="service" value="login"><strong>LOGIN</strong></button>




<label id="wlpeStayLoggedInLabel" for="wlpeStayLoggedIn">Husk mig
<checkbox id="wlpeStayLoggedIn" name="stayloggedin">
<input type="checkbox" name="pet" value="315569260" />
</checkbox>
</label>




<button type="submit" id="wlpeReminderButton" name="service" value="forgot">Glemt Koden?</button>
</form>
</div>
</div>
</div>

Quote from: norlin at May 06, 2009, 12:36 PM

When i login with an user account the "welcome.. etc." information is displayed inside the loginform’s div rather than replacing my custom "Login" button... this is pretty standard behavior i guess; webloginpe swaps the loginform with the welcome form... only in my case this is not what i want, and this might be quite difficult to change, at least im not sure how to do this.


EDIT: fixed this by adding all the code, except js of course, to the chunk rather than my template, don’t know why i did not think of that before..

BTW, JS can go in a chunk, although if you need it in the <head> section, you need to put it in a snippet with $modx->regClientStartupScript() and put the snippet call in the chunk.

Would be nice to do it onMouseOver instead than onMouseClick!!