?
Solved

web form jquery

Posted on 2010-11-10
4
Medium Priority
?
313 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 2000 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

Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

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 becoming increasingly popular to have a front-page slider on a web site. Nearly every TV website,  magazine or online news has one on their site, and even some e-commerce sites have one. Today you can use sliders with Joomla, WordPress or …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Suggested Courses

765 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