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.
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
}
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.
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.
Related
I am traying to create a big button that overflow an IconTabBar in SAPUI5.
I am working with IconTabBar, but I would like to use the empty space at the right of the IconTabFilter elements. Because I can not add additional buttons to the IconTabFilter, I want to add a button below the IconTabFilter and the using
css:
transform: sale(2.0);
transform-origin: 20% 40%;
and position the button over the empty space of the IconTabBar .
But as soon the element go outs of the container the next container hides the bottom.
I tried using overflow: visible, but still not working.
Does anyone know how can I make a big button that overflows another container?
A solution I can discourage you from using (in its current form): define and implement an IconTabButton control. The basic idea is to trick the IconTabBar into accepting another type of control in items aggregation. However the IconTabBar only accepts controls that implement the interface sap.m.IconTab and its corresponding functions. The problem is, they are a lot.
We did develop a prototype by using the source code on github, but gave up due to this needing a lot of work and maintenance (or at least more than we were willing to give). One specific unresolved problem by this IconTabButton control is, when the tabs in the IconTabBar overflow, they use another rendering method that the custom control does not implement. So it may look good but only until it overflows. Source code.
I am sharing this only for it to serve as an idea and eventual basis for proper implementation, I believe it is common use case to want some kind of a button inside the sap.m.IconTabBar. The control renderer must be migrated to V2, all the methods have to be properly adjusted.
Hello to everyone.
This is my first question ever, and I know it could be a little tricky, but I'll try.
I'm currently working on an accessible web app, and I wanted to build a "Direct touch area", just like some native apps for iOS, in which the accessibility assistant is disabled, when the user is focused on it.
I'm using HTML, Javascript and CSS in frontend developing.
When the accessibility tools (TalkBack for Android, VoiceOver for iOS) are switched on, if you touch the screen with one finger, you cannot interact with the DOM, because you are into an "explore by touch" mode.
I'd need to bypass this particular behaviour, but just for a precise area.
I struggled a lot with various ARIA attributes, roles, etc, but didn't find a way yet.
For istance, there's an HTML attribute named aria-disabled (true|false), which makes the screen reader simply ignore the area content, so it's not useful in my case.
Something similar happens with "aria-hidden" attribute.
Perhaps someone has already encountered this problem and solved it, somehow?
Any help would be veeeery appreciated!
I don't quite understand what is meant by the question, but maybe "Aria-Disabled" will help?
Aria-Disabled Reference
role="application" is how you get events passed directly to an element without the screen reader capturing the event first. But be very careful with this role. It should be used sparingly.
Note that this role will not turn off VoiceOver for that element. The user still needs to be able to explore the screen. You could implement double-tap-and-hold to go into a mode where the user interacts directly with your object then implement the two-finger 'Z' swipe to escape out of that mode.
first of all bypassing the explore by touch mode won't be possible since it is handled by voiceover or talkback. More important: doing so would make harm since that behaviour would catch the user and he or she won't be able to swipe through the elements. Being a born blind and daily user of such screen readers myself: a blocked swiping through the controls of an app makes me wipe it immediately and leaving me frustrated. Keep in mind that a screen reader user will not be able to touch your input area before he or she found it by swiping. He or she could leaarn the exact position and size but thats more like spinning wheels of fortune.
ARIA 1.1 at https://www.w3.org/TR/wai-aria-practices states in the chapter on mobile and touch support that there is currently no standard on this and there is no ARIA role for that.
You could switch to aria-disabled after your user activates the area after locating it by "explore by touch", but I don't know how the user will get back to the other controls.
Using the application element seems to be the best way, but users have to remember a special key for their screenreaders to leave the application since e.g. NVDA or JAWS will box their reading the apllication until this magic key is pressed. This way I have been trapped in office documents when using office365 many times!
If a user is, for example, right handed, there is no point having lateral menus on the left side of the screen - and vice versa.
For ease of use by instrumentalists, I'd like to configure a highly interactive browser display to match the hand (left or right) for which a user's input device (for example mouse) has been configured.
I could of course just query the user, but would prefer -at least initially- to pick up a system setting. I see no indication that this is possible, but nothing lost in asking...
I'm trying to avoid jQuery, so would prefer approaches using javascript, css3 or (better) directly using d3.js. Any ideas? Thanks.
If, by "right-handed" vs. "left-handed," you mean whether the mouse primary and secondary buttons are configured as left, right (normal) or right, left (reversed), there is no way in JavaScript to get that information. That's a system configuration setting. All you'll get from JavaScript is a primary button or secondary button click, no indication of whether the click was the right button or the left button.
I don't think this is what you want, but it is possible in JavaScript to tell whether the user's language is a "right-to-left" language (e.g. Arabic or Hebrew).
I have dabbled with jQuery and javascript (I'm afraid in that order) before but allways very simple stuff, like sliding elements up, adding/removing classes etc.
I've not worked with events and objects before.
Now I have an allready working intranet "app" that is programmed exactly how I would do it. Namely lots of (if not all) global functions and variables to show / hide & generally control the page elements. all this is controlled without a mouse, only by keys.
Seeing this (and getting slightly scared in the process) I got myself a copy of "Object-Oriented JavaScript" By Stoyan Stefanov ...
My problem now is that I understand I'm going to need to work with objects, prototypes and events...
I -think I- understand the concepts by themselves but am totally at a loss at how to start.
Another problem I have is that the same keys should trigger different actions, depending on the visible or active elements. up/right/down/left should control the menus but when a content is loaded(end of menu is reached) the same keys have to trigger completely different things. I think I need to work with event-namespaces here, right?
Since it is not the mouse that is triggering the events I have to catch them at a very high level and determine what actions have to be made depending on the active and visible elements. Since I dont really get to know with event.target which element triggered the event
for example: if menu1 is visible and "right" was pressed
either open sub-menu or load content.
I have made a few attempts but was not able to get away from letting everything stay globally:
jQuery('body').on('ok.menu.rc right.menu.rc',function(e){
var cur = jQuery('nav.active a.active').removeClass('active').addClass('selected');
jQuery('nav.active a:not(.selected)').addClass('disabled').parent().removeClass('active');
//cur.parent().removeClass('active');
get_entry(cur.attr('data-name')+'-');
//jQuery('body').off('.menu'); // testing namespaces
jQuery('#menu1wrap nav').removeAttr('class').addClass('active');
});
And still nowhere near any kind of reuse-ability. It probably does not seem like it, but I have made several (and at least 2 different) attempts but grew frustrated pretty quickly.
Especially when trying out to put everything into objects. I wouldn't know how to link the html-elements with the instances of the javascript objects.
How would you take this beast on?
I've been googling and trying this for a good while now, but comes nowhere. So here goes:
What I want to do is to drop text on a DIV tag and handle that with JavaScript. Something along these lines:
<script type="text/javascript">
function handleDrop(sender, args)
{
$('#theDiv').html(args.textfromdrop);
}
</script>
<div id="theDiv" ondrop="handleDrop()" />
<br/>
<p>
This is some simple text. Draggable?
</p>
So, on this page I want to be able to drag contents from the paragraph for example to the div and it would handle the drop and change it's appearance accordingly (Or maybe just display that text, as long as it would handle it!). I've been trying with jQuery, but it seems to be a whole other model, and I can't set all my potential draggables as such because they should be able to come from everywhere. Is this even possible?
EDIT: Please correct me if I'm wrong, but these droppables all require a draggable to be dropped at it, right? What I would want is that you can drop text, pure text, from a page that you don't have any control of. This might sound weird, but it's for a firefox extension where you can drag content from a page to another page that resides in the side bar.
I would recommend using an established Javascript Library such as jQuery or YUI.
Have you considered creating a hidden textarea (ie with css style visibility:hidden) overlapping the div in question? Then check for drops with the onchange JavaScript event, or if that doesn't work, periodically the textarea's value for non-empty strings. I'm guessing your mileage will vary depending on the browser and operating system.
Or if you prefer Prototype like I do: http://wiki.github.com/madrobby/scriptaculous/droppables
EDIT: Based on your revised question: No, there's no way to allow a user to drop text from one page to another page. Not unless you do decide to build a FireFox extension like you were saying. Even if you could find a way around the security issue where you cannot script a page that's not under the same domain, you can only drag and drop DOM elements within the window/iFrame they're in.
I have done this before and it CAN be done without any library with some effort.
I've built the following methods:
Method that tracks your mouse movements.
Method to read and pass the content when you drop.
Used onmousemove and onclick events for the drag and drop methods.
OnMouseOver for the div area where you'd like to drop the text - to detect whether the pointer is over the container (div) or not.
Finally after dropping the text I deleted the original content (if needed) using innerHTML so it looks like it has been moved.
You can pretty much achieve a Windows like drag and drop functionality with this. I used it for drag and drop images, icons, etc.
If you need help with the coding I can give you some guidance, but most of it you will find if you Google around a little, then all you need to do is make them work together.