Solved

web form jquery

Posted on 2010-11-10
4
312 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Why You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

Question has a verified solution.

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

In this tutorial I will focus on how to use WhizBase as a tool for sending ICQ messages to ICQ. Here I will use a new technology in WhizBase, published in WhizBase 5.1 version. In this tutorial I will use 3 files, pager.wbsp for the processing, e…
It is a general practice to get rid of old user profiles on a computer  in a LAN environment. As I have been working with a company in a LAN environment where users move from one place to some other place at times. This will make many user profil…
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
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…

724 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