Dropdown login form

http://sprint.com/index_p.html

Click the Sign in/Sign up button.

I can't figure out hos they do this one

I've see dozens like the twitter login form but this one is different.

I can't even find the code for the animation.

Any help on this one?
LVL 26
Eddie ShipmanAll-around developerAsked:
Who is Participating?
 
effxConnect With a Mentor Commented:
Although your status states you are a "Qualified Expert" I still have to assume you dont know anything, I personally don't know that you already "KNOW" this, but if you alredy "KNOW" this why are you asking how to do something you already "KNOW" this.

If on the other hand you cannot achieve this effect just by looking at it on another site then I guess you don't already "KNOW" about the animate() function.

To figure something out like this is quite simple, firstly its a 2 stage animation the first being extending the width and the second extending the height.

Just by looking at the animation I would assume it would look like this:

HTML:

<div>
  <div class="extendButton">The Button</div>
  <div class="extendContent">The content</div>
</div>
<script>
$(document).ready(function(){
	$(".extendContent").hide();
	$(".extendButton").click(function(){
		$(this).parent().animate({
			width: '200'
			}, "slow", function() {
			$(".extendContent").slideDown("slow");
		});
	});
});
</script>

Open in new window

0
 
effxCommented:
$.animate(); can achieve this effect.

http://api.jquery.com/animate/
0
 
Eddie ShipmanAll-around developerAuthor Commented:
If you think you're going to get points for that, no way. I already KNOW about the animate() function. I just can't figure out how the effect is done on their site because I can't find the code.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Eddie ShipmanAll-around developerAuthor Commented:
I understand jQuery and how to do this with the exception that I cannot see their code to determine exactly how they did it.
It is apparent that you did not either look at the code nor had any desire to.
0
 
effxCommented:
The function is in this file: http://sprint.com/global/js/sprint.common_all.js

This file has been minified, you can reverse engineer this file or just search it for "#signInLink".

But I guess you knew that
0
 
Eddie ShipmanAll-around developerAuthor Commented:
I used the deobfuscator firefox plugin to figure it out, thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.