I have disabled right click by adding the following code. However, when I navigate from one page to other, during that window of time, on right click, the right click menu is opening.
document.onmousedown = function (event)
{
event = (event || window.event);
if (event.button == 2 )
{
alert("right click");
}
}
You can use oncontextmenu for this:
document.oncontextmenu = function () {return false;}
This can happen for case if document.onmousedown = function (event) isn't yet executed for some reason. Among reasons can be errors in java script or browser yet didn't execute document.onmousedown = function (event) because it is in process of executing some other javascript code.
Another proposal for consideration can be another way of disabling:
<body oncontextmenu="return false">
Related
I'm trying to get to controls inside a frame that is located inside a frame that is located inside another frame.
The last (deepest) frame is used only for login - that I manage to do.
The problem is that after the login I basically need to return to the upper frame and click a button. For some reason I keep getting the error:
NoSuchElementError: no such element
BTW, all the code in the frames is non-angular.
This is my code for the test:
it('Should get to drive sample app', function () {
login.get();
login.clickLogin();
browser.ignoreSynchronization = false;
login.goToUsecases(); //getting to the page
$('[href="/developers/api/1542"]').click();
browser.sleep(5000);
//iframe issue starts here
browser.switchTo().frame(0);
browser.ignoreSynchronization = true;
browser.switchTo().frame(0);
browser.switchTo().frame(0);
browser.driver.findElement(by.id('userName_str')).sendKeys("username");
browser.driver.findElement(by.id('password')).sendKeys("password");
browser.driver.findElement(by.name('submit')).click();
// login succeeded
browser.sleep(10000);
browser.driver.switchTo().defaultContent();
browser.driver.findElement(by.id('home')).click();
browser.sleep(10000);
});
The problem is that after the login I basically need to return to the upper frame and click a button.
From what I see in your code, you are switching to the default content, but, as you said, the button is inside the upper iframe, switch to it:
browser.driver.switchTo().defaultContent();
browser.switchTo().frame(0);
browser.driver.findElement(by.id('home')).click();
You can try this may be this helps you.. As this works for me for handling different windows.
browser.getAllWindowHandles().then(function (handles) {
newWindowHandle = handles[1];
browser.ignoreSynchronization = true;
browser.switchTo().window(newWindowHandle).then(function () {
browser.sleep(500).then(function () {
browser.ignoreSynchronization = true;
browser.driver.findElement(by.id('userName_str')).sendKeys("username");
browser.driver.findElement(by.id('password')).sendKeys("password");
browser.driver.findElement(by.name('submit')).click();
//login succeeded
});
//to close the current window
browser.driver.close().then(function () {
//to switch to the previous window
browser.switchTo().window(handles[0])
browser.driver.findElement(by.id('home')).click()
browser.sleep(10000);
});
});
});
Instead of ::browser.switchTo().frame(0);
try giving the locate of the iframe where you want to switch too.. that might help.
// Switch to iframe context in order to see inside iframe
browser.switchTo().frame(element(by.tagName('iframe')));
I'm using the Tooltip() from Twitter-Bootstrap. When hovered over an element, a tooltip shows up. But it stays there unless you move your mouse away from it.
How can I make it dissapear after a few seconds it popped up, in stead of waiting until mouse moves away from the element?
Bootstrap provides methods for manipulating tooltips such as $('#element').tooltip('hide')
If you add the data-trigger='manual' attribute to your elements, you can control how the tooltip is shown or hidden.
$('.bstooltip').mouseenter(function(){
var that = $(this)
that.tooltip('show');
setTimeout(function(){
that.tooltip('hide');
}, 2000);
});
$('.bstooltip').mouseleave(function(){
$(this).tooltip('hide');
});
Fiddle
If multiple mouseEnter and mouseleave event happen within delay time 'hide' is called multiple times and may be the tooltip closes earlier than expected. Older calls must be discarded.
$('.bstooltip').on('shown.bs.tooltip', function () {
var that = $(this);
var element = that[0];
if(element.myShowTooltipEventNum == null){
element.myShowTooltipEventNum = 0;
}else{
element.myShowTooltipEventNum++;
}
var eventNum = element.myShowTooltipEventNum;
setTimeout(function(){
if(element.myShowTooltipEventNum == eventNum){
that.tooltip('hide');
}
// else skip timeout event
}, 2000);
});
Fiddle
setTimeout would only work once for the first tooltip, we need to use setInterval instead.
This works for me perfectly fine with Bootstrap 4 Tooltips
$(document).ready( function () {
$('[data-toggle="tooltip"]').tooltip();
setInterval(function () {
$('[data-toggle="tooltip"]').tooltip('hide');
}, 2000);
});
The tooltip would appear and disappear after 2 seconds.
Here is simple Answer
$(selector).tooltip({title:"somthing~", trigger:"hover", delay:{hide:800}, placement:"top"});
only give hide parameter in delay option.
it work fine also focus event not click event(I don't know why..)
Say I have a form with a web resource on it, when viewing the form and clicking the web browser's 'back' button the web resource seems to unload, if I click the back button again then it behaves as I'd expect.
Has anyone else experienced this? Is there a way to prevent the web resource from unloading when a user clicks 'back'?
Note: This seems to happen in both IE (10,11) and Chrome, but not Firefox.
Had the same issue, looks like a bug.
Until Microsoft fixes it, use the following in your webresource to trap the back event and redirect it properly.
$(document).ready(function () {
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
var hashLocation = location.hash;
var hashSplit = hashLocation.split("#!/");
var hashName = hashSplit[1];
if (hashName !== '') {
var hash = window.location.hash;
window.parent.history.back();
window.parent.history.back();
}
});
window.history.pushState('forward', null, './#forward');
}
}
I've got a nested grid within my grid, and it works perfectly, but the client doesn't like to use the arrow on the left and asked for a button to be added in order to show the child grid.
The example on the Kendo website shows how to automatically open the first row, I just want a way to expand the grid from a custom control in the same way that the left selector does it.
I've got the custom command working, and it executes the sample code, but I just need some help with the javascript required to make it work for the current row.
columns.Command(command =>
{
command.Edit().Text("Edit").UpdateText("Save");
command.Destroy().Text("Del");
command.Custom("Manage Brands").Click("showBrandsForAgency");
And the js with the standard example of opening the first row:
function showBrandsForAgency(e) {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
Please help by giving me the js required to expand the row clicked and not the first row?
* EDIT *
Modified the solution provided by Atanas Korchev in order to get it to work on only the button and not the whole row.
I'd prefer a solution that uses the function showBrandsForAgency instead of a custom funciton but this does the job:
$(document).ready(function () {
$("#grid").on("click", "a", function (e) {
var grid = $("#grid").data("kendoGrid");
var row = $(this).parent().parent();
if (row.find(".k-icon").hasClass("k-minus")) {
grid.collapseRow(row);
} else {
grid.expandRow(row);
}
});
});
You can try something like this:
$("#grid").on("click", "tr", function(e) {
var grid = $("#grid").data("kendoGrid");
if ($(this).find(".k-icon").hasClass("k-minus")) {
grid.collapseRow(this);
} else {
grid.expandRow(this);
}
});
When using jQuery on the function context (available via the this keyword) is the DOM element which fired the event. In this case this is the clicked table row.
Here is a live demo: http://jsbin.com/emufax/1/edit
Same results just Simpler, faster, and more efficient:
$("#grid").on("click", "tr", function () {
$(this).find("td.k-hierarchy-cell .k-icon").click();
});
I have a requirement to disable the escape key when the dialog is open.currently when i click the escape button the dialog closes and the transaction is submitting.I tried the following code snippet but its not working chrome.
dojo.connect(dialog, "onKeyPress", function(e){
var key = e.keyCode || e.charCode;
var k = dojo.keys;
if (key == k.ESCAPE) {
event.preventDefault();
d.stopEvent(event);
}
});
Could you please help on this..i have searched a lot and havent found a suitable solution for my problem.
Thanks inadvance..
Dojo uses the _onKey event for accessibility. You can override it by using:
dialog._onKey = function() { }
I wrote an example JSFiddle, hitting the Escape key should not work anymore.
In the event you want to override the escape key in all dialogs (rather than a particular instance), you can use dojo/aspect:
require(['dojo/aspect', 'dijit/Dialog'], function (Aspect, Dialog) {
Aspect.around(Dialog.prototype, '_onKey', function (original) {
return function () { }; // no-op
});
});
You can create an extension for the Dialog widget like this in a new file:
define(["dojo/_base/declare", "dijit/Dialog"],
function(declare, Dialog){
return declare(Dialog, {
//Prevents the 'ESC' Button of Closing the dialog
_onKey: function() { }
});
});
save the file into dojo Directory (say: dojo/my/my_dialog.js),
and instead of calling: 'dijit/Dialog', just call: 'my/my_dialog'.
this will save you the hard work of editing each Dialog call,
And the same thing to the "dojox/widget/DialogSimple" Widget.