[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 209
  • Last Modified:

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?
0
EddieShipman
Asked:
EddieShipman
  • 3
  • 3
1 Solution
 
effxCommented:
$.animate(); can achieve this effect.

http://api.jquery.com/animate/
0
 
EddieShipmanAuthor 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
 
effxCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
EddieShipmanAuthor 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
 
EddieShipmanAuthor Commented:
I used the deobfuscator firefox plugin to figure it out, thanks.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now