I want to execute a click on a full-screen div which is underneath a (non full-screen) modal dialog. However it seems that the click event automatically targets the center of my background div, thereby touching content that's on top of that div (the modal dialog itself).
How can I specify where the click should happen?
This is the verbose output of my click command:
Element is not clickable at point (640, 436). Other element would receive the click: <label class="btn btn-default ">...
The root of problem is selenium clicks by sending mouseclick event not directly to the element but by screen coordinates. Therefore it cannot find clickable element by point (as described in verbose output).
There are two possible workaround (for your case):
1) Click by element position which not overlapped by modal dialog (applicaple for fullscreen div):
.moveToElement('.backdrop', 900, 10) // 900 is X offset
.mouseButtonClick(0)
2) Better, universal solution. By directily sending click event via injected javascript:
.execute(function(selector) {
document.querySelector(selector).click();
}, ['.backdrop'])
Related
I need the ability for a user to press and set an ListView item's checkbox independently of clicking on the item. If they press on the checkbox I will add/remove the checkmark and take some action. If they press on the item text I can take another action.
I can do this with a ListBox no problem with built in functionality. I can't figure out how to do it with a ListView. How is it done?
I can put the following code in the ListView1ItemClickEx to know when the user is clicking on the image. Maybe I can just change the image to a checkmark?
if (ItemObject->Name == "I") {
ShowMessage("Item Image clicked");
}
But I don't know how to change that particular items image (e.g. I could just toggle between a checkmark image and an unchecked image) at runtime.
The picture below is for clarity. Clicking anywhere in the red box will change the items checkbox. For the ListBox clicking anywhere in the blue box will fire the OnClick event and not change the checkbox. I want that same behavior in the ListView.
Ok, Remy answered this related question and it helped me solve this issue. Now I can make the ListView have a checkbox that functions like that of the ListBox. I do it by toggling the item image whenever the user presses (or clicks on) the image area of an item.
When the user clicks an items image I trap it (per Remy's code in the ListView1ItemClickEx event) and toggle it from 0->1 or 1->0 in a vector at reference ItemIndex (e.g. myVector[ItemIndex] = 0) and then I completely rebuild the ListView (clear it and build from scratch).
I thought I'd have to remember where in the list I had scrolled down to and after refreshing the ListView I'd have to scroll to that point in code - but, that isn't the case. I don't know why but after the refresh I'm still at the point in the list where I clicked an item image. It makes it work and feel exactly like a check box.
It works great in iOS, Android, and Windows.
p.s. I forgot to mention that you need to treat any Header's like they are items in your vector that keeps up with each items' image (0 or 1). Otherwise adding headers gets you out of sync and clicking an item's image will toggle some other item's image.
There's a collapsible sidebar on my webpage. When I collapse it, I want the svg element on the page to resize to take up all of the new blank space.
The function that resizes the svg is working. However, it is not being triggered when the sidebar is collapsed.
I have tried:
d3.select("#mydivHoldingSVG").on("resize", MyResize)
Where #mydivHoldingSVG is a <div> and MyResize is the function to resize the svg.
When the sidebar is collapsed, the <div> element increases in size (as inspected via Google Chrome developer view), which I thought constituted a "resize".
If the window is resized, that is, if I use:
d3.select(window).on("resize", MyResize)
Then the svg resizes correctly.
I have looked at the list of standard events to see if one can be applied to the div element (#mydivHoldingSVG) but I'm not seeing an obvious "when a div element changes" event.
Is there an eventListener that can be added on a <div> element being resized or changed?
The gist is that you should do it another way: the resize event only pertains to the window and will not fire on any other element.
The cleanest way to solve this problem would be call MyResize when you call whatever function is collapsing your sidebar, rather than trying to indirectly listen for the sidebar being collapsed.
If I drag a kendo window in upward direction the kendo window stops being dragged once kendo window top aligns browser window top, that is min top position is 0. I want similar behavior if I drag the kendo window to left, right or downward direction, window should always stay within the browser window (do not want scrolls to browser window).
After visiting documentation on Kendo site I have got an hint to implement the solution. Here is link to Restrict Windows Position
Idea is to listen to drag event on Window and based on your condition adjust left and top of window.
I have div element in which I am loading text, usually long text, so the div has scrollbars. I can scroll in this div with mouse, when the cursor is on it, but I cant scroll with page up and down, unless I click inside the div first. So Is there a way to avoid this clicking, to do it from code when the text is loaded?
The answer here worked for me:
Set keyboard focus to a <div>
Basically add a tabindex to the div:
<div id="mydiv" tabindex="-1">
then programmatically set the focus using:
document.getElementById("mydiv").focus();
From the original post:
The tabindex value can allow for some interesting behaviour.
If given a value of "-1", the element can't be tabbed to but focus can
be given to the element programmatically (using element.focus()).
If given a value of 0, the element can be focused via the keyboard and
falls into the tabbing flow of the document.
Values greater than 0
create a priority level with 1 being the most important.
Here it is, as you described. I appended an input to the content div, then focus() it, rather than trying to focus the div. So, immediately after pressing load text, you can press pg up/dn to scroll div.
HERE IT IS
$("div").append('<input type="text" id="focusDiv">');
/*
Here I need to have some code which gives "focus to the div, so if I press the load text and then immediately PageDown key, sthedvis scrolls down.
$("button").on("click", function (e) {
e.preventDefault();
$("div").html("Very long text...");
$("div").append('<input type="text" id="focusDiv">');
$('#focusDiv').focus();
});
I am using jquery layout plugin and have the following situation that I cannot find a solution. How do I make the center pane increase its size permanently by dragging the div beyond the bottom border.
I have a left pane and a center pane. I dynamically generate div
when the user clicks on the left pane. The divs are generated and
dropped on the center pane. The divs are draggable and resizable.
Everything works fine with dragging and resizing on the visible center
area. The moment I drag the div beyond the bottom, the scroll bar on
the center pane appears and it seems the center pane is extending to
accommodate the new position of the dragged div. But the moment I try
to resize the div or add another div, it jumps to the top section of
the div and resets the scrollbars. I checked the center div height in
firebug and it remains at the same height when initialized
even after dragging the new div beyond the bottom.
Here is the test page html code.
Just copy/paste entirely into a html page. On the left pane, click on the "Add new" button will add new div that is draggable and resizable.
Click on "Add new"
Drag the newly added div beyond the bottom of the center pane.
The center pane shows the scrollbar as it is suppose to.
If you check the center div's height in firebug, it is not changing
Now try resizing the newly added div by dragging its handle
It jumps to the top and the center box loses its scrollbar.
I could not paste the complete html page so here is the reference to the code at the bottom of this thread
http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/ca922aa44c0048ee
And here is the test link http://jsfiddle.net/yZc63/
I am surprised no one has come across this situation before? Even without the layout plugin, my solution is not very pretty. In order to simulate the page without the layout plugin, I had to keep the top and the left pane using position:fixed property in css. And there is no center div at all. I add the new div directly to the body of the html. The reason is I don't want to see additional scrollbars on top the browser scrollbars. In other words the center pane should scroll when the browser scrollbars are moved. I am attaching the solution so you have an idea.
I am open to any solution even without the layout plugin if i can simulate the previous attached file using any other approach. i am attaching my page without the layout plugin but am not sure if that is the only elegant solution left.
You can check the solution here http://jsfiddle.net/c7wrT/
Is adding the dynamic div directly to the html body a good approach?
I ran into same situation and this answer helped.
https://stackoverflow.com/a/33004821/2139859. Updated Fiddle: http://jsfiddle.net/bababalcksheep/yZc63/11/
$(".removalbe-recom").draggable({
appendTo: "body",
helper: "clone",
revert: "invalid",
cursor: "move",
containment: "document",
zIndex: 10000,
scroll:false,
start: function (event, ui) {
$(this).hide();
},
stop: function (event, ui) {
$(this).show();
}
});