How would you detect if say the letter 'a' on the keyboard is pressed... and if it is, perform an action where you click and hold at the mouse location for 1 second? I'm completely new to Opera Extensions and I'm not even sure how to run the script in the Opera browser.
EDIT: Changed JavaScript to Opera Extension.
show keycode number
$(function () {
$(document).keyup(function (e) {
$('body').text(e.keyCode);
});
});
now
$(function () {
$(document).keyup(function (e) {
if(e.keyCode==65){ //letter a
//some code
}
});
});
Related
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">
I currently have a magnific popup and within that popup i have a link that opens another magnific popup. Something along the lines of:
$('.logbook-entry-details').magnificPopup({
type: 'ajax',
closeBtnInside:true,
closeOnBgClick:false,
closeOnContentClick:false,
callbacks: {
beforeOpen: function () {
$.magnificPopup.close();
},
open: function() {
console.log('Popup open has been initiated');
},
beforeClose: function() {
console.log('Popup before close has been initiated');
},
close: function() {
console.log('Popup close has been initiated');
},
afterClose :function() {
console.log('Popup after close has been initiated');
}
}
});
After reading i found that callbacks on the second popup will not be registered until i close the original popup as opening the new one just replaces the content and actually doesn't recreate a new instance.
I am trying to figure out how i could have my link within my popup close the current popup before calling the code to open the new one so it can register my callbacks.
By the way, the reason I am trying to do this is i want to reopen the original popup after closing my new popup. If you happen to have a better solution please let me know.
So just in case someone needs this answered, i had to add the following code to my new popup.
// a button that closes the popup
$('#cancel-logbook-entry-btn').click(function(){
$.magnificPopup.proto.close.call(this);
});
$.magnificPopup.instance.close = function () {
//code to show the original popup
};
And then in the original popup i had to add otherwise it will never close the popup
$.magnificPopup.instance.close = function () {
// "proto" variable holds MagnificPopup class prototype
// The above change that we did to instance is not applied to the prototype,
// which allows us to call parent method:
$.magnificPopup.proto.close.call(this);
};
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..)
I would like to show the big play button at the end of the video, so user can replay it easily.
It seems that this big play button is shown by default (every posts I read are for hidding it instead of showing it...), but it is not the case for me...
I have tried to edit the following function (in video.dev.js file) but nothing has changed :
vjs.Player.prototype.onEnded = function(){
if (this.options_['loop']) {
this.currentTime(0);
this.play();
}
else { // I am not using loop mode
this.bigPlayButton.show();
this.pause();
}
};
Thanks for your responses.
There are a few ways you can do this. You can show the button when the video ends with the API:
videojs("myPlayer").ready(function(){
var myPlayer = this;
myPlayer.on("ended", function(){
myPlayer.bigPlayButton.show();
});
});
Or if you do want to modify video.dev.js you just need to uncomment the line that does the same thing:
vjs.BigPlayButton = vjs.Button.extend({
/** #constructor */
init: function(player, options){
vjs.Button.call(this, player, options);
if (!player.controls()) {
this.hide();
}
player.on('play', vjs.bind(this, this.hide));
// player.on('ended', vjs.bind(this, this.show)); // uncomment this
}
});
Or with CSS you could force the button to be showed whenever the video is not playing (ended or paused):
.video-js.vjs-default-skin.vjs-paused .vjs-big-play-button {display:block !important;}
The posts you've seen about hiding it probably refer to version 3 of video.js, as with that the play button was shown at the end.
Place this code after the videojs code. Works great. It not only shows the poster and the big play button, but also allows you to re-play the video again and again:
<script type="text/javascript">
var vid = videojs("YOUR-VIDEO-ID");
vid.on("ended", function()
{
vid.posterImage.show(); //shows your poster image//
vid.currentTime(0);
vid.controlBar.hide(); //hides your controls//
vid.bigPlayButton.show(); //shows your play button//
vid.cancelFullScreen(); //cancels your fullscreen//
document.mozCancelFullScreen(); //cancels your fullscreen in firefox//
});
vid.on("play", function() //function to play the video again//
{
vid.posterImage.hide(); //hides your poster//
vid.controlBar.show(); //shows your controls//
vid.bigPlayButton.hide(); //hides your play button//
});
</script>
The only thing I can't get to work is the exit fullscreen with firefox... But I don't know what else to do.
I don't know why but I cant get the answers mentioned here to work, maybe it's because I am on a newer version of the player, so doing things like vid.posterImage.show() is not doing anything for me.
On version 5.19.2 (current release), I was able to reset the player to it's default state (before the play button is pressed by the first time) by setting hasStarted to false on the event listener "ended".
example:
var player = videojs('player');
player.on("ended",function(){
player.hasStarted(false);
});
That brings back the big button, the poster, and hides the controls.
I created this plugin to "reset" the player and show the big play button and the video's poster
https://github.com/brianpkelley/video-js-4-plugins/blob/master/showPosterAtEnd/videojs.showPosterAtEnd.js
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.