Newbie - design question, how does this work?

[NuDesigner]

Hi all,

I am a relatively new designed just learning CSS, Javascript, etc. I have been using Groupon's home page as a learning point (probably not the best idea, but it hasn't been too bad).

I can't seem to figure out how the site transitions from Step 1 to Step 2 (when you go to the site, it starts with you selecting a city, you press continue, and you are asked to enter email). I see where the "Continue" button on the home page is shown in the code, but I don't understand where in the code it says "upon clicking continue, take the city, and go to step 2".

Can anyone provide some direction on how it works? (I was thinking it is some kind of eventhandler somewhere else...is that correct or way off here...haha).

Thanks in advance.

 

[CaldwellYSR]

I'm not exactly positive how it's done because I can't find it in their code and frankly I don't care enough to spend the time searching but one thing to notice is that continue is not a submit button. All the "steps" are inside one form. So looking at that, the way I would do it is with javascript (more specifically jquery)... when continue is clicked I'd run a function that animates step one out of the way and animates step two into place. It'd look something like....

$("#step_one_continue").click(function() {
    $("#step_one").animate({"left", "-999px"}, 300);
    $("#step_two").animate({"left", "200px"}, 300); 
    // note: 200px is just wherever you want that to animate TO not how far you want to move it
});

 

[NuDesigner]

I see. Thanks.

Can you direct me to a good reference for interpreting the syntax in your code? (Specifically, using the "#" sign). I understand the rest. I just don't how what the "#" does to search for it on Google.

 

[benjamin.morgan]

Read the jQuery documentation, http://jquery.com and it is a $ sign not a # sign. jQuery is a Javascript framework that is really cool.

 

[CaldwellYSR]

I see. Thanks.

Can you direct me to a good reference for interpreting the syntax in your code? (Specifically, using the "#" sign). I understand the rest. I just don't how what the "#" does to search for it on Google.

That's jquery.... jquery uses CSS selectors so the # is grabbing the element with that id.