• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

How to hide all controls except one using div ?

 
Ranch Hand
Posts: 94
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi ,
First I am explaining my requirement a little bit .
Suppose in page there are many controls like link,text boxes ,save-edit-delete buttons etc etc .
Now the requirement is that ,If any user enters wrong data in any one of the input fields and validation fails,then the user should not be able to click any where in that page, except that field where he has entered the wrong value.
He should be correct the wrong input first and then only other parts of the page should become click able/accessible for him.

What my plan is that when the user enters a wrong value and subsequently when the validation fires and fails ,
1.then entire page should be covered with a div so that the user can not click anywhere else .

2.When the user enters correct data ,the covering div should be removed after successful validation.

That first part is done ,but the input field that has wrong value should be accessible to the user ,so that
the user can modify the incorrect data.
Here the entire page gets covered with the DIV so the user can not access the field ,where he needs to modify the data .

I have finalized my approach ,so my requirement is to hide entire page with a div , but one control/input should be accessible to the user(i.e. the control for which the validation has been fired).
Can the control/input be made accessible using higher Z index than the DIV ? I have tried once without much success.
I have just added some rough sample code for your help.
One thing I have written xyz instead of using click event pqr for blur related event for message post related problem.

I think this scenario will be interesting for you guys also.
With regards,
Ayan Dutta
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Wouldn't it just be a lot easier to disable the other elements?
 
Ayan Dutta
Ranch Hand
Posts: 94
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi ,
Thanks for your prompt reply .But sorry to say ,the answer is no.
In the actual scenario the page contains a tree on the top left,a tabbed panel containing 20 plus tabs and the page it self contains many buttons .
If you go through my previous post you can see the requirement is such that user should not able to navigate anywhere until he corrects the wrong input he provided.

If I try to disable other elements like.
1.other page controls.
2.tabbed panels.
3.tree on the left

It would be a patch only and not a generic solution.Applying javascript method to disable all other contents is a 2 minute solution and that is last and worst thing I will do if I have no other choice .

But think if your validation methods are enhanced with such capabilities
(like preventing the navigation if required ) ,no page specific code will be required .
Regards,
Ayan Dutta
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
The worst thing you can do is control the user's browser like the requirement for the job.

If you use formElementOnj.focus() with window.onblur() it forces them to stay focused on the control.

Disabling all of the controls is a better solution than throwing up a layer because the tab key still works and can navigate the elements even though the layer is on top of everything.

Eric
 
Ayan Dutta
Ranch Hand
Posts: 94
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for your thoughtful input .
The approach that you are talking about I have already
done in the past many times and needless to say it is a patch work .I am just giving you an example .
Say you have many controls (say 10 ) in a page and 5(say a,b,c,d,e) of them are enabled and 5 (say p,q,r,s,t)are disabled.
Now if I apply the idea of disabling elements/controls when validation fails ,then if I have to disable all of them (5 already disabled ,another 5 I need do disable).When user provides correct input I have to enable the fields which I have disabled.Now this is not enabling all !! Now I have to enable only 5 which I disabled(i.e. a to e) and not the set which were disabled(i.e. p to t) earlier.
Unnecessarily I need to keep a track of previously enabled/disabled elements .
Do you get my point ?

Stopping tab key based navigation is not a big deal and disabling
all elements is also easier,but that is not a generic solution at all.
I am not "throwing up a layer" for endless time also , when validation succeeds ,that particular div will be removed .
The code that I have written in the previous post is just a rough code ,
the div itself will be a dynamic one ,created in the page when required.

If you have any idea to hide all controls except one using div ,that
will be helpful ,disabling all element is solution is always there
with its own limitations.
Ayan Dutta
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
There is two things you can do.

1) Do not use one div to cover the page, use 4. Build a "frame" around the element that you want to edit. Problem with this is you will have to figure the dimensions of the control and descriptive properties.

2) Make a copy of the field and its text and put that on top of the page. When it passes, take the value and shove it back into the original form. Problem with this is fields like file can not have the value set through code.

Eric
 
Ayan Dutta
Ranch Hand
Posts: 94
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks Eric .
What a coincidence !! I also thought the same way as you mentioned in the point 1.
And the funny side is ,I just thought about the same problem of
dimensions .That is why I did not go for that option.

Anyways ,I will give it a try.

Lets see what can I do with this problem.
Ayan
 
Ranch Hand
Posts: 50
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
One little thought here....
Can we not leverage the DOM here to solve the problem? lets say, we write a javascript function which takes the field name as an input. inside, we get the reference to the form and we iterate through all the child nodes recursively and we go on disabling them after checking if it is really the field getting validated or not...
tell me wht you think about it.....
[ December 10, 2008: Message edited by: Romit Bose ]
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It is just a simple loop through document.forms[0].elements with an if statement.

Eric
 
reply
    Bookmark Topic Watch Topic
  • New Topic