Solved

web form jquery

Posted on 2010-11-10
4
307 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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Introduction:   Welcome to my first article ever. To begin with, the reason I write this article.  I participated in a question on Experts Exchange about the start command in Windows and there were some discussion about the usage. The discussio…
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…
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…
The viewer will learn how to count occurrences of each item in an array.

762 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now