0

I'm not sure this is even possible. I have a UI built that uses javascript and css, the interface users use a keypress to navigate. Css for the layouts that change per client, like a "skin". Javascript controls the functions and monitors the users keypresses.

The setup has 2 menus, a lower one and upper one. When you load it the lower one is focussed and you can use left or right arrows to go between the menu items.

In normal circumstances you would press "up" to get an upper menu, however this one client does not want this menu at all.

The problem is that we cannot just simply edit the javascript to prevent it, since the same javascript is used for all the clients, only different css get loaded based on which client is selected.

So now I have the upper menu hidden, but the problem is that the javascript still allows you to press up, but now since the top menu is not there, you lose your focus, and nothing is highlighted. The end user doesn't know why or how they lost focus if they press up by accident. (since they know no different setup where the top menu is there, they don't realize that they should press down, they just know nothing seems to happen when they press left/right)

What I want to do, is somehow, in the css, prevent the users from pressing up. Since we can't just go change the javascript.

Is this possible? Or is my only solution to modify the javascript?

TIA!!

Thanks to all who offer advise, just to clarify, we will make a new release with a function to check if the client wants this other menu, and disable the up button if not, however that will require a new release of the software, and a full pass through QA. Just trying to quick hack this one client in the mean time.. :)

Our final solution would have a boolean field in the database, and if it's true, the javascript will have an ignore for the up key, if false, then act normally.

AstroCB
  • 12,337
  • 20
  • 57
  • 73
Drew
  • 142
  • 1
  • 12
  • 4
    Change your Javascript to react to the presence of a CSS class (or to the visibility of an element) – SLaks Feb 11 '13 at 18:15
  • As @SLaks said, since the "upper menu" won't be there, only use the "up" functionality if the element is found. – Shmiddty Feb 11 '13 at 18:17
  • 1
    @BryanH - I think the nature of the question precludes example code. – JDB Feb 11 '13 at 18:27
  • @Cyborgx37 I agree, I understood the concept. Seeing as it's not a bug, we might as well assume there is no code yet. – R Esmond Feb 11 '13 at 18:29

3 Answers3

2

Change the code so it only acts on up-arrow key-presses if an element isn't present.

EG add a p with the class="noupkey" then stop the event from firing like : 

if($('.nokeyup').length === 0) {
//Do normal behaviour
}
Infra Stank
  • 346
  • 1
  • 2
  • 15
  • 1
    You might want to consider something a little more "universal", such as applying an "inputDisabled" class (which could be reused in multiple contexts in the future). – JDB Feb 11 '13 at 18:24
1

Unfortunately there is no correct way to disable components through css, for this type of functionality is meant for javascript.

The philosophy for most programmers that I have worked with is that you should allow the end user to decide if they want to use a new feature.

What I mean by this, is that you should leave an option in the app that lets the person disable the component themselves. This way you can have the same set of javascript for all users and still disable any component in the correct way. The real advantage to this is that you wont have to deal with this ticket ever again, the support staff could simply walk any client through the operation of recreating the requested feature.

Most of this solution might be unusable to you however. I understand it's not easy changing your workplace convention.

Here is something that might be a little more useful, How do I disable form fields using CSS? Some of the advise might be applicable to any component, including menus.

Community
  • 1
  • 1
R Esmond
  • 1,224
  • 9
  • 17
  • 1
    I would disagree with this as a blanket statement. The philosophy for most programmers is to get paid. Letting users muck around with the UI settings is not a common thing I've seen and usually creates more of a support mess than locking it in. – JDB Feb 11 '13 at 18:26
  • I've never had a problem, if you make your UI for the options right. What field do you work in? – R Esmond Feb 11 '13 at 18:27
  • This is planned for the "next release", however unforeseen customer requests and desires were not anticipated. – Drew Feb 11 '13 at 18:44
  • They rarely are, I defiantly agree with the idea of not branching customer specific code. My last company did that and it was a nightmare. – R Esmond Feb 11 '13 at 18:53
0

Actually it is very odd solution but it can be done with little tricky solution .

Make One transparent Div with more z-index , with Absolute Position at the body level over that Up Button , For rest of your applications apply Pointer Events Css property to none so your mouse events will be done on the Below Div .

Then for your Case in which you want to disable that control do not give Pointer Events to the foremost div it will be disabled for mouse events .

Note : There is some issue for Pointer events in IE.

sandyJoshi
  • 733
  • 9
  • 20