Solved

web form jquery

Posted on 2010-11-10
4
309 Views
Last Modified: 2012-06-21
on the form, there's a name filed, a phone field, and a picture, a submit button.

how do i achieve this?

the picture is hidden, only when you focus on either the name field or phone field, the picture slidedown, when it's blur, the picture stay hidden.

The problem with my code is(see attached), when I finish name field and tab to phone field, it will still do the slideup and then slidedown. But what I want is, if the blur doesnt last more than 30 secs, it doesnt do the slideup, how to do this in jquery?  



$("#pic").css('display','none');



$("#name,#phone").focus(function (){
   
    $("#pic").slideDown(600);
                      
});
 
$("#name,#phone").blur(function (){
   
    $("#pic").slideUp(600);
                      
});

Open in new window

0
Comment
Question by:charmingduck
  • 2
4 Comments
 
LVL 14

Expert Comment

by:sam2912
ID: 34127317
Try this:
$("#pic").css('display','none');

$("#name,#phone").focus(function (){
	clearTimeout(timeout);
	$("#pic").slideDown(600);
});

$("#name,#phone").blur(function (){
	timeout = setTimeout('$("#pic").slideUp(600)', 30000);
});

Open in new window

0
 
LVL 14

Expert Comment

by:sam2912
ID: 34127319
You will also need a global timeout variable outside of the jquery document ready function:

var timeout = null;
0
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 500 total points
ID: 34127397
you may also stop the current animation using .stop() before calling new one
$("#pic").css('display','none');



$("#name,#phone").focus(function (){
   
    $("#pic").stop().slideDown(600);
                      
});
 
$("#name,#phone").blur(function (){
   
    $("#pic").stop().slideUp(600);
                      
});

Open in new window

0
 

Author Closing Comment

by:charmingduck
ID: 34491477
great
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This tutorial will discuss fancy secure registration forms, with AJAX technology support. In this article I assume you already know HTML and some JS. I will write the code using WhizBase Server Pages, so you need to know some basics in WBSP (you mig…
Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question