All, I know the Draggable containment option can be set string values with these follow.
Parent(Constrains dragging to within the bounds of parent element of current element),window and document.
but I don't know what is the difference between the window and document values. and I didn't found any api document for this two values. please help me understand it .thanks.
This all boils down to the difference between window and document. When you set the containment of a draggable, jQuery uses the width and height properties of either of them to determine its bounds, as the sources show (formatted for readability):
if(o.containment == 'document' || o.containment == 'window') this.containment = [
0 - this.offset.relative.left - this.offset.parent.left,
0 - this.offset.relative.top - this.offset.parent.top,
$(o.containment == 'document' ? document : window).width() -
this.helperProportions.width - this.margins.left,
($(o.containment == 'document' ? document : window).height() ||
document.body.parentNode.scrollHeight) - this.helperProportions.height -
this.margins.top
];
If there are no iframes, then I believe both dimensions will be the same, otherwise, things can be a little different (though I'm unsure if jQuery supports drag and drop between iframes, even if from the same origin).
Related
I was wondering (have not tested it myself) if Playwright is able to find - for example - a button and click it when it is being overlapped by another button. Or if there is a way to check if an element is more than - for example - 50% visible.
I've read the documentation on Auto-waiting but noticed that it didn't say anything about this phenomenon. isVisible() clearly states the following:
Element is considered visible when it has non-empty bounding box and does not have visibility:hidden computed style. Note that elements of zero size or with display:none are not considered visible.
And thus doesn't say anything about it actually being visible - in the sense of 'on the fore-ground' - to the end-user.
Does anyone know if this is correct or if there is a way to actually test this?
Purely wondering for scalability purposes.
If there is an element on top of the target element, you will get a timeout saying that X element intercepts pointer events, and it will fail.
I think (I'm not 100% sure) that Playwright will only try to click at the center of the element.
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 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"
I'm developing a quick solution that uses a Slider with multiple handles to define widths for a dynamic layout.
I've attempted to use both ExtJS3 and the latest JQuery UI.
In ExtJS, you can constrain the handles so the don't cross over each other, and it's quite an intuitive approach to the UI I need, however there are reasons why I would rather not use ExtJS for one 'island' in a sea of JQuery.
So, does anyone know of a secret attribute, or a bit of code that constrains multiple handles in the JQuery slider ?
For clarity: if you have a slider with 2 handles, one at 40 and one at 60; the constraint would stop you dragging the handle at 60 down to 20, without first moving the 40 one.
In the slide event you can constrain the handle movement by checking the slider values and returning true to allow the slide or false to prevent it (see the jQuery UI docs for more information)
What code are you using for the Jquery slider? Looking at the range slider demo, it has two handles and its not possible to cross them.
As #madcapnmckay pointed out, if you have a slider with two handles and the range: true in the options the handles cannot be dragged past each other.
I was having a problem where it wasn't constraining properly but it turned out I had a string 'true' instead of a boolean true
I'm a bit late to the party here, but I wanted to share my most compact-yet-readable way to do this. Technically it's pretty similar to #tototresde's answer.
slide: function (e, ui) {
// Prevent crossing and overlapping of slider handles.
if (ui.values[(ui.handleIndex - 1)] >= ui.value ||
ui.values[(ui.handleIndex + 1)] <= ui.value) {
return false;
}
}
Check this solution:
slide : function( event, ui ) {
//Actual Handle Selected
var handleIndex = $(ui.handle).index()-1;
var diffA, diffB;
//Check with right handles
if(handleIndex > 0)
diffA = ui.values[handleIndex] - ui.values[handleIndex-1];
//Check with left handles
if(handleIndex < ui.values.length-1)
diffB = ui.values[handleIndex+1] - ui.values[handleIndex];
if (diffA <= 0 || diffB <= 0) { /*checks for the values and compares*/
return false;
}
}
Does anybody know how to design report in FastReport so that when user changes page orientation all column headers and data autofits new page width? I couldn't find any anchor mechanism there. Maybe I can do that during run-time? But then I need to catch page orientation change event somehow. Can anybody help?
I don't know what the question is: Bands are magnetic to page borders by default, so they fit the new page width.
But if you want the frxMemoview objects to move and resize according to the new page size, you should use the beforeprint event of the report to recalculate and move or size the report components.
If you have a report that can be printed both in portrait or landscape, the easiest way to buid this would be a layout for portrait and one for landscape. You could show a printersetupdailog before loading the report and depending on the orientation load the portrait or landscape layout.
This may not be the cleanest way. Building your report runtime in code is another option and recalculating every component in the report is another. But they involve a lot of coding and what if the user selects "Letter" instead of "A4"?
Regards,
Teo
FR dealer in Holland.
You can :
use the Align property of each
TfrxMemoview...
make it with Script
Sometimes it is necessary to modify report page settings (for example, to modify paper alignment or size) from a code. The TfrxReportPage class contains the following properties, defining the size of the page:
property Orientation: TPrinterOrientation default poPortrait;
property PaperWidth: Extended;
property PaperHeight: Extended;
property PaperSize: Integer;
The «PaperSize» property sets paper format. This is one of the standard values, defined in the Windows.pas (for example, DMPAPER_A4). If a value to this property is assigned, FastReport fills the «PaperWidth» and «PaperHeight» properties automatically (paper size in millimeters). Setting the DMPAPER_USER (or 256) value as a format, would mean that custom paper size is set. In this case, the «PaperWidth» and «PaperHeight» properties should be filled manually.
The following example shows, how to modify parameters of the first page (it is assumed that we already have a report):
Pascal:
var
Page: TfrxReportPage;
{ the first report’s page has [1] index. [0] is the Data page. }
Page := TfrxReportPage(frxReport1.Pages[1]);
{ modify the size }
Page.PaperSize := DMPAPER_A2;
{ modify the paper orientation }
Page.Orientation := poLandscape;
C++:
TfrxReportPage * Page;
// the first report’s page has [1] index. [0] is the Data page.
Page = (TfrxReportPage *)frxReport1.Pages[1];
// modify the size
Page->PaperSize = DMPAPER_A2;
// modify the paper orientation
Page->Orientation = poLandscape;
On BeginDoc i you can acess the properties from it using (frxPrincipal.FindObject('Page1') as TfrxReportPage).PaperSize := DMPAPER_A4;