473,721 Members | 2,133 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

browser slow to change state of elements when style changed to hidden

'When my form is submitted, I have onsubmit pointed to the following
code snippet. But, the button is not actually set to disabled and the
style.visibilit y changes are not made for several seconds. It appears
that it goes into validateForm and doing the rest of this snippet
before the browser makes the changes.

How can I get the browser to immediately make the UI change?

Thanx.

function submitForm(serv leturl) {
var submitbuttonele m = document.getEle mentById("submi t");
submitbuttonele m.disabled = true;
document.getEle mentById("modgr adeform").style .visibility="hi dden";
var mydiv = document.getEle mentById("conte ntarea");
mydiv.innerHTML = "Validating the form.";
mydiv.style.vis ibility="visibl e";
var ret = validateForm();

Jan 17 '06 #1
6 1904
James Black said the following on 1/17/2006 11:28 AM:
'When my form is submitted, I have onsubmit pointed to the following
code snippet. But, the button is not actually set to disabled and the
style.visibilit y changes are not made for several seconds. It appears
that it goes into validateForm and doing the rest of this snippet
before the browser makes the changes.

How can I get the browser to immediately make the UI change?

Thanx.

function submitForm(serv leturl) {
var submitbuttonele m = document.getEle mentById("submi t");
Are you sure the browser supports gEBI? Feature test for it.
submitbuttonele m.disabled = true;
Feature test to make sure the element supports the disabled attribute.
document.getEle mentById("modgr adeform").style .visibility="hi dden";
Feature test to ensure the browser supports .style and .visibility
var mydiv = document.getEle mentById("conte ntarea");
mydiv.innerHTML = "Validating the form.";
Are you sure the browser supports innerHTML?
mydiv.style.vis ibility="visibl e";


Right here, use a setTimeout to set a 10ms timeout to call a second
function that does form validation. Or, have to functions called
onsubmit, the first handles pre-submission page changes, the second
handles validation.

Sidenote: Are your users so stupid that they don't know that pressing a
submit button will cause a delay before the next page is shown?
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

Please quote what you are replying to.

If you want to post a followup via groups.google.c om, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.

Jan 17 '06 #2
>From what I understand, it is good design to give immediate feedback to
whatever actions the users make.

I just don't want them to assume that the click wasn't acknowledged.

I don't understand how having two functions with the same name will
work, actually.

Can you explain that?

Thanx.

Jan 17 '06 #3
James Black said the following on 1/17/2006 3:50 PM:

Please quote what you are replying to.

If you want to post a followup via groups.google.c om, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.
From what I understand, it is good design to give immediate feedback to whatever actions the users make.


I can agree with that, depending on your definition of immediate.
I just don't want them to assume that the click wasn't acknowledged.
Fair enough.
I don't understand how having two functions with the same name will
work, actually.


I didn't say two functions with the same name.

function function1(){
//all your visibility/innerHTML code here
window.setTimeo ut(function2,60 )
}

function function2(){
//validation code here
}

The problem you are having where the browser won't update the visual
display is because it doesn't re-display until *after* the function has
finished. By then, the form is submitted. Introducing a 60ms delay and
then executing your validation code will introduce a small enough delay
to allow the browser to update the visual screen but not enough delay to
be noticeable to the user.
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

Please quote what you are replying to.

If you want to post a followup via groups.google.c om, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.

Jan 17 '06 #4
On 2006-01-17, James Black <pl***********@ gmail.com> wrote:
'When my form is submitted, I have onsubmit pointed to the following
code snippet. But, the button is not actually set to disabled and the
style.visibilit y changes are not made for several seconds. It appears
that it goes into validateForm and doing the rest of this snippet
before the browser makes the changes.

How can I get the browser to immediately make the UI change?


the changes are made immediately but not rendered until the script ends.
make the script end sooner.
Bye.
Jasen
Jan 18 '06 #5
JRS: In article <N5************ *************** ***@comcast.com >, dated
Tue, 17 Jan 2006 11:53:21 remote, seen in news:comp.lang. javascript,
Randy Webb <Hi************ @aol.com> posted :

--
Randy
comp.lang.java script FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?
Oversize signatures.

Please quote what you are replying to.

If you want to post a followup via groups.google.c om, don't use the
"Reply" link at the bottom of the article. Click on "show options" at
the top of the article, then click on the "Reply" at the bottom of the
article headers.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 MIME. ©
Web <URL:http://www.merlyn.demo n.co.uk/> - FAQish topics, acronyms, & links.
Proper <= 4-line sig. separator as above, a line exactly "-- " (SonOfRFC1036)
Do not Mail News to me. Before a reply, quote with ">" or "> " (SonOfRFC1036)
Jan 18 '06 #6
Dr John Stockton said the following on 1/18/2006 11:14 AM:
JRS: In article <N5************ *************** ***@comcast.com >, dated
Tue, 17 Jan 2006 11:53:21 remote, seen in news:comp.lang. javascript,
Randy Webb <Hi************ @aol.com> posted :
--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?


Oversize signatures.


ab***@comcast.n et

File a complaint if it is that significant to you.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jan 18 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
5479
by: Simba | last post by:
In some pages of my website I use a code like the following: for (var n = 0; n < getTagsArray("SPAN").length; n++){ //SPAN is just an example. I also use other tags tag = getTagsArray("SPAN"); //make something with tag... }
6
9561
by: Csaba2000 | last post by:
How do I detect when the font size has been changed (especially by user action: either Ctrl+Scroll wheel or View/Text Size)? This is just for use on IE 5.5+, but it would be great if there was a generic solution. Thanks, Csaba Gabor from New York
2
1678
by: Edward | last post by:
The below code builds 2 tables 4 rows by 4 cols. All cells have checkboxes. When checked, the checkboxes in the first column automatically check the remainder of the check boxes in the same row. This is working fine for tables of this size. Unfortunately, my app produces lots of considerably bigger tables and the 'toggle' can take over a minute to complete!! I assume this is because for each toggle, the all form elements are searched...
12
10171
by: Kepler | last post by:
How do you get the height of the client browser in IE? Both document.body.clientHeight and document.body.offsetHeight return the height of the document. If the page is long and there's a vertical scrollbar, you get the height of the entire document, screwing up any chance of centering a window in the browser using these values. Is there a way to get the height of the actual browser window and not the entire page height? Thanks.
2
4226
by: Eduard | last post by:
I have a ASP.Net datagrid wrap in the following div: <DIV id="divPart2" style="OVERFLOW: hidden">. Another div controls the horizontal scrolling: <DIV id="scroll1" style="OVERFLOW: scroll; WIDTH: 800px; LINE-HEIGHT: 0px; HEIGHT: 17px" onscroll="javascript: document.getElementById('divPart2').scrollLeft = this.scrollLeft;"> scrolls the datagrid horizontally. When the horizontal scroll box is dragged or any of the scrollbar arrows is
2
3028
by: markszlazak | last post by:
I'm a relatively slow response of table cells changing their background color with mouseover/our in IE6 (Win 2K) but the response is fine (fast) in Firefox. Why? The code is below. Sorry about the length. <html> <head> <title>Rapid Blocking Interface</title> <style> .calendar {
6
4433
by: AAaron123 | last post by:
I'm using the CreateUserWizard Web Server Control The error message when the passwords do not match is colored red. Red does not show well against my background so I like to change that color. I only find 3 color settings: BackColor, BorderColor, and ForeColor. I the first two are evidently not what I need. I tried forecolor and it simply changed all the text but not the error message (as you would expect, but I tried anyway).
1
3810
oranoos3000
by: oranoos3000 | last post by:
hi would you please help me i have a online shopping center that i show pictures of the my product in home page. in the InterExplorer pictures is shown correctly but in Firefox browser is shown properties alt in img tag istead of picture . place of the pictures is saved in the database(my database is with mysql) and in home page i fetch properties of the product and address of place that pictures is located output of the code in the...
0
8840
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8730
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
1
9131
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9064
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8007
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
4484
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3189
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2576
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2130
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.