I have an asp.net MVC project with multiple pages.
For each page I must set the TAB key to go only among some controls. I know I can set:
tabIndex=x , x > 0 //to enable
tabIndex=-1, //to disable
The problem is that I have 5 controls for which the TAB key should work and 50 controls for which it should not work (the numbers are just to understand the proportions). So I was wondering if there is a way to disable the TAB key for an entire page (from *.css or a manager) and than make it enable just for the few specific controls that need it.
As far as I know this cannot be done as directly as you probably hope. What you can consider doing is executing a JS function on all elements where the tab index not set, setting it to less than zero:
var elements = document.querySelectorAll("input:not([tabindex])");
for (var i = 0; i < elements.length; i++) {
elements[i].tabindex = -1;
}
Keep in mind that depending on the number of elements that you have, this could be a drag on performance so you will want to consider benchmarking.
The other option that you could consider would be to create an HTML helper server-side which disables the tab index of the element. You can do helpers locally using the Razor #helper syntax, or globally using an extension method on the HtmlHelper class. This would perform significantly better than JS but may be a bit heavy handed depending on your scenario.
Since there were so many elements that should not be tabbed, instead or disabling TAB key for them, I changed the default behavior for the elements that had tabIndex, onkey pressed:
1) I took all elements that have tabIndex bigger than 0:
var tabbables = document.querySelectorAll("input[tabindex], textarea[tabindex]");
this is a simplified version, you should do visibility checks and select also other types of elements (e.g. buttons, etc.)
2) I replaced the default behavior in 2 cases: TAB presssed and the last element with tab index is selected or SHIFT+TAB is pressed and first element is selected. For these cases I forced the focus on the first element, respectively on the last element.
A similar question with a very good answer (not the accepted answer, the answer with most votes) is here: "Focus Next Element In Tab Index"
Related
I'm trying to create a wrapper component for material button-toggle-group. I should add a lot of custom styling for it, so it makes sense to do this in a component so I can import this component later rather than doing it every time. However, I've hit a snag. It is only possible to click the button one time, and then it is checked forever. Also, all buttons can be checked at the same time. What I'm wondering is:
How do I change the selected button when option is selected?
How can I use the boolean in the dataset to set one of the buttons to checked by default?
Also, how can I limit it to one selection at a time? I tried setting the "multiple"-parameter to false, but this does not seem to work.
I have provided what I have so far in a Stackblitz - for some reason this is not loading the material theme properly, but you can still see the problem and what I have so far:
https://stackblitz.com/edit/angular-b7rxxq
A mat-button-toggle-group is intended to be a group of several buttons... because your loop is on the mat-button-toggle-group you are creating two groups each containing one button.
Remove your loop from mat-button-toggle-group
<mat-button-toggle-group (change)="optionSelected($event)" multiple="false" [name]="label">
Add it to the mat-button-toggle so you have a yes and no in one mat-button-toggle-group... also use [checked]="option.value to default the value
<mat-button-toggle i18n="{{option.i18n}}" [value]="option.value" [checked]="option.value" *ngFor="let option of options" style="margin-left:15%">{{option.displayValue}}</mat-button-toggle>
Please Note: once your options are in a single group, only one will ever be selected at a time... once selected you cannot deselect... you will need to do it programmatically if you need the ability to deselect.
Stackblitz
https://stackblitz.com/edit/angular-rmn4k4?embed=1&file=src/app/toggle-wrapper/toggle-wrapper.component.html
I am trying to make an image picker component in LibreOffice.
I have a dialog that is dynamically filled with images. When the user clicks on one images, it should be selected and the dialog should be closed.
The problem is that the number of images is variable. So I need to enable scrolling in the dialog (so that the user can navigate through all images).
There seems to be some properties on the dialog object (Scrollbars, Scroll width, Scroll height, etc)
However, I cannot find a way to use them anywhere.
Any ideas?
The scrollbar is one of the Controls available through the dialog box editor. That is the easier way to put a ScrollBar on a dialog box. Just insert it like any other control. There is a harder way via DialogModel.addControl but that seems non-essential to answering this question.
If you add a scrollbar to the dialog box and run the dialog box, you will find it does nothing by default. The functionality (apparently) must be written into a macro. The appropriate triggering event is the While Adjusting event on the ScrollBar object, although it does not trigger the macro simply with the "Test Mode" function in the dialog editor. Running the dialog box through a macro triggers the While Adjusting event when the scroll arrows are triggered, when the slider area is clicked to move the slider, and when the slider itself is dragged. The Object variable returned by the scrollbar event contains a property .Value which is an absolute value between 0 and the EventObject.Model.ScrollValueMax, which allows you to manipulate the other objects on the page manually based on the position of the slider.
Yes, that's right, manipulate objects manually. The sole example I found, from the LibreOffice 4.5 SDK, does precisely this. Of course, it is not as bad as it sounds, because one can iterate through all of the objects on the page by reading the array Dialog.getControls(). In any event, the secret sauce of the example provided in the SDK is to define Static variables to save the initial positions of all of the objects you manipulate with the scrollbar and then simply index those initial positions based on a ratio derived from the scrollbar Value divided by the ScrollValueMax.
Here is a very simple working example of how to scroll. This requires a saved Dialog1 in the Standard library of your document, which contains an object ScrollBar1 (a vertical scrollbar) and Label1 anywhere in the dialog. The ScrollBar1 must be configured to execute the macro ScrBar subroutine (below) on the While Adjusting event. Open the dialog by executing the OpenDialog macro and the scrollbar will move the Label1 control up and down in proportion to the page.
Sub OpenDialog
DialogLibraries.LoadLibrary("Standard")
oVariable = DialogLibraries.Standard.Dialog1
oDialog1 = CreateUnoDialog( oVariable )
oDialog1.Execute()
End Sub
Sub ScrBar (oEventObj As Object)
Static bInit As Boolean
Static PositionLbl1Y0 As Long
oSrc = oEventObj.Source
oSrcModel = oSrc.Model
scrollRatio = oEventObj.Value / oSrcModel.ScrollValueMax
oContx = oSrc.Context
oContxModl = oContx.Model
oLbl1 = oContx.getControl("Label1")
oLbl1Model = oLbl1.Model
REM on initialization remember the position of the label
If bInit = False Then
bInit = True
PositionLbl1Y0 = oLbl1Model.PositionY
End If
oLbl1Model.PositionY = PositionLbl1Y0 - (scrollRatio * oContx.Size.Height)
End Sub
The example provided by the SDK does not run on my setup, but the principles are sound.
There appears to be a second improvised method closer to the functionality one might expect. This method uses the DialogModel.scrollTop property. The property appears to iterate the entire box up or down as a scroll based on the user input. There are two problems using this methodology, however. First, unless you put the scrollbar somewhere else, the scroll bar will scroll away along with the rest of the page. You will need to adjust the location of the scrollbar precisely to compensate for/negate the scrolling of the entire page. In the example below I tried but did not perfect this. Second, the property seems to miss inputs with frequency and easily goes out of alignment/ enters a maladjusted state. Perhaps you can overcome these limitations. Here is the example, relying on the same setup described above.
Sub ScrBar (oEventObj As Object)
Static scrollPos
oSrc = oEventObj.Source
oSrcModel = oSrc.Model
scrollRatio = oEventObj.Value / oSrcModel.ScrollValueMax
If IsEmpty(scrollPos) = False Then
scrollDiff = oEventObj.Value - scrollPos
Else
scrollDiff = oEventObj.Value
End If
scrollPos = oEventObj.Value
oContx = oSrc.Context
oContxModl = oContx.Model
oContxModl.scrollTop = scrollDiff * -1
oSrcModel.PositionY=(scrollRatio * oContx.Size.Height/5) * -1
End Sub
This (sort of) will scroll the contents of the entire dialog box, within limits and with the caveats noted above.
I am using Adobe Captivate to create an online learning course.
An abbreviation is broken down into 6 buttons, each with an action to bring you to their respective slides. Once the slide is complete, you are brought back to the original.
The ask: the original slide with the abbreviation should only display a 'continue' button once the user has visited all 6 slides.
Is there a way to do this with ActionScript?
You can hide or show buttons in Captivate. You can also change whether or not they are shown using Advanced Actions (you'd probably need to use the conditional actions).
I'm not familiar with ActionScript, but there's an easy way to do this using the Advanced Actions in Captivate. Here's how I would approach it. First, create six variables, one for each of the six respective slides, so you could create variables called v_slide1_viewed, v_slide2_viewed, v_slide3_viewed, v_slide4_viewed, v_slide5_viewed, and v_slide6_viewed. Set their default values equal to 0 (I usually prefix my variables with v_ to distinguish from the inbuilt Captivate variables).
Now on slide 1, set an On Enter property to assign the value 1 to the variable v_slide1_viewed. This means, that when slide 1 loads, the variable 'v_slide1_viewed' will be set to 1. Similarly do this for each of the six respective slides.
Now on the abbreviation slide, create a SmartShape (Continue) button and uncheck the 'Visible in Output' so that by default this button is not displayed. Now you can write an advanced actions (conditional) script that says if
v_slide1_viewed = 1 AND
v_slide1_viewed = 2 AND
v_slide1_viewed = 3 AND
v_slide1_viewed = 4 AND
v_slide1_viewed = 5 AND
v_slide1_viewed = 6
Then Show and select the smartshape ID or whatever you named that object.
Hope this is what you were looking for.
-Sean
I'd like to create a content box with two tabs. Each tab is associated with a table which contain server-side data. My thought right now is just to load the page with 10 rows worth of data for each table and hide/display each table respectively to begin.
I was then going to toggle display of the tabbed content based on either click events on the tabs OR GET parameters relating to which tabbed content is being acted on (through pagination, for example).
Should I just handle this with UI tabs or is toggling display reasonable in this case? Since the user can update their data, I assume that caching via the tab UI isn't helpful in this case.
Thanks,
Brendan
From what I understood, I don't think its going to be overkill. If you are worried about performance, ten rows for 2 tables is just 20, which is not much. Paginating will also get 10 more rows for each 'click' so it's still good there.
Do use tab activation through click events, but also use GET parameters to know in which page the user currently is, from which tab.
Regarding caching data that you know will change, it might be unnecessary (see my 1st paragraph). Caching can sometimes become unwieldy, so don't add an uneccesary layer of complexity.
As someone who suggests simplicity above all else, I'd discard the whole 'tab loading' thing but leaving the tabs per se (i.e. the interface elements that will be clicked) and when the user clicks each tab, it takes to another page with the tabs too, old-fashioned style.
I am trying to display items retrieved from an XML DB using xforms:select1 control using appearance=xxforms:tree. The items appear collapsed or expanded automatically and the behaviour is not the same for all the items retrieved. I have the following questions regarding xxforms:tree view:
how to make sure this view shows sub-nodes (those expandable/collapsable using +/- icon) as collapsed or expanded always, irrespective of, for example, the no. of nodes covered by the + icon?
how to render select1 with tree appearance without making any of the items hyperlinks?
how to make sure no item is highlighted/selected by default?
...and although the docs say xxforms:menu is also a possible appearance (URL http://www.orbeon.com/orbeon/doc/reference-xforms-extensions#tree), the details are not available...
About which branches of the tree should be open — By default all the nodes leading to selected nodes are open, this so the selected values are all visible. But you can change this default behavior and specify which nodes should be open using the xxforms:open attribute. For more on this, see the section "Controlling which tree nodes are initially open" on Selection Controls. Note that this feature was added in October 2010, so it is not included in Orbeon Forms 3.8, and until Orbeon Forms 3.9 is released, you'll need to get a nightly build for this.
About using links in the tree — At this point, the nodes you can click on in the select1 appearance="xxforms:tree control are rendered as links, so users know that this is something they can click on to make a selection. I assume that you don't want them to show as links because the tree might be "read-only" in your case (for information only, not to make a selection). This isn' supported at this point. As a workaround, you could use CSS to change the pointer and appearance of links in the tree so to users they don't even notice that this those are links.
About the menu appearance — It works very much like the tree appearance. See for instance this example using the menu.