aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes How to hide all controls except one using div ? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How to hide all controls except one using div ?" Watch "How to hide all controls except one using div ?" New topic
Author

How to hide all controls except one using div ?

Ayan Dutta
Ranch Hand

Joined: Oct 16, 2005
Posts: 94
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
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61010
    
  65

Wouldn't it just be a lot easier to disable the other elements?


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Ayan Dutta
Ranch Hand

Joined: Oct 16, 2005
Posts: 94
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
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Oct 16, 2005
Posts: 94
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
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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

Joined: Oct 16, 2005
Posts: 94
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
Romit Bose
Ranch Hand

Joined: Oct 03, 2007
Posts: 50
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
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
It is just a simple loop through document.forms[0].elements with an if statement.

Eric
 
wood burning stoves
 
subject: How to hide all controls except one using div ?