Catching ⌘+1 in Safari JavaScript - javascript

I'm writing a Safari 6 extension which adds a few keyboard shortcuts. One of the things I'd like to do is catch when the user presses ⌘+1 ⌘+2, etc. Right now, Safari seems to not fire any event when this happens. Here's a Fiddle: http://jsfiddle.net/Xe9YQ/ to show the code, and here's the JS:
$( 'body' ).bind( 'keypress', function ( event ) {
var modifier = '';
if ( event.metaKey ) {
modifier += 'cmd-';
}
if ( event.ctrlKey ) {
modifier += 'ctrl-';
}
if ( event.altKey ) {
modifier += 'alt-';
}
if ( event.shiftKey ) {
modifier += 'shift-';
}
$( 'body' ).html( modifier + event.keyCode );
});
If you try "⌘+j", "⌘+t", or even "⌘+0" and "⌘+shift+5" you'll see correct output. From this, it seems that it's not a problem of overriding browser shortcuts, and not a problem of using the numerical row.
Is anyone familiar with this problem? Is this a known bug? I'd appreciate any advice.

You have to use the keydown event in combination with preventDefault(), because ⌘ combinations may have bindings already (in Chrome, for example ⌘ + 1 switches to the first tab).
$( 'body' ).bind( 'keydown', function ( event ) {
var modifier = '';
if ( event.metaKey ) {
event.preventDefault();
modifier += 'cmd-';
}
if ( event.ctrlKey ) {
modifier += 'ctrl-';
}
if ( event.altKey ) {
modifier += 'alt-';
}
if ( event.shiftKey ) {
modifier += 'shift-';
}
$( 'body' ).html( modifier + event.keyCode );
});

Related

Autocomplete: How to focus on first item after pressing arrow down key on last item?

Go through each option of the dropdown by using arrow down key. When focusing on the last option, and pressing arrow down key the cursor move to textbox instead of the first option. How make the cursor go to the first option?
You can use below code block to fix that issue.
.autocomplete('instance')._move = function( direction, event ) {
if ( !this.menu.element.is( ":visible" ) ) {
this.search( null, event );
return;
}
if ( this.menu.isFirstItem() && /^previous/.test( direction ) ||
this.menu.isLastItem() && /^next/.test( direction ) ) {
if ( !this.isMultiLine ) {
this._value( this.term );
}
this.menu[ direction ]( event );
// this.menu.blur();
return;
}
this.menu[ direction ]( event );
}

Impress.js + Firefox: How to disable advance slide on mouse click

Impress.js works great in Chrome, but unfortunately, it's somewhat buggy in Firefox. The biggest problem that I am having is that, in Firefox, the slideshow advances to the next slide on every mouse click. Does anybody know of a way to disable this functionality?
Go to js/impress.js, delete the code below (about line 783~797) , it listen the click event:
// Delegated handler for clicking on step elements
document.addEventListener( "click", function( event ) {
var target = event.target;
// Find closest step element that is not active
while ( !( target.classList.contains( "step" ) &&
!target.classList.contains( "active" ) ) &&
( target !== document.documentElement ) ) {
target = target.parentNode;
}
if ( api.goto( target ) ) {
event.preventDefault();
}
}, false );

jQuery - IF ELSE - Not reading any variables

PROBLEM:
UPDATE: I have found that its not just with returned data from a post. Literally every if else statement disregards my variables almost entirely.
I have tried to do something extremely simple to verify my statement above.
When the code below is executed, nothing happens. I added consol.log() in before my if statement ( in place of the alert ) to make sure that its getting the data to the DOM and it is.
HTML
<input type='submit' name='Confirm' class='button' value='Confirm' >
<input type='submit' name='Cancel' class='button' value='Cancel' >
JS
$( '.button' ).on( 'click' , function() {
var btnName = $( this ).attr( 'name' ) ;
var cancel = "Cancel" ;
var confirm = "Confirm" ;
alert( btnName + cancel + confirm ) ;
if ( btnName == cancel ) {
//some function here . .
} else if ( btnName == confirm ) {
//some function here . .
}
EDIT If I run the code below, then the alert is always Cancel... What the fudge.
$( '.button' ).on( 'click' , function() {
var btnName = $( '.button' ).attr( 'name' ) ;
if ( btnName == "Cancel" ) {
alert( 'Cancel' ) ;
} else if ( btnName == "Confirm" ) {
alert( 'Confirm' ) ;
}
Not matter what i click, the functions in the if statement don't run. The weird part is, when it hits alert( btnName + cancel + confirm ) ; The data that is alerted in the browser is accurate, as in, if I click name='Confirm' the alert output looks like ConfirmCancelConfirm...
I assume you have an error:
function( data ) {
if ( returnedData == "Company Added" ) { //right here
$( '#navAdmin' ).click() ;
} else {
alert( data ) ;
}
}
It should be
function( data ) {
if ( data == "Company Added" ) {
$( '#navAdmin' ).click() ;
} else {
alert( data ) ;
}
}
I tried your JS code.
if ( btnName != cancel ) {
// This function is normal
} else {
// This function is also work
}
That's work on my machine and browser. and your (if else else if code is also work).
Chrome 44.0.2403.157 (64-bit)
Finally found my problem
I don't know where it's happening, but when I assign a variable, for example;
$( '.button' ).on( 'click' , function() {
var btnName = $( this ).attr( 'name' ) ;
}
For some reason there was a bunch of whiteSpace being added before the string.
Started Working With:
$( '.button' ).on( 'click' , function() {
var btnName = $( this ).attr( 'name' ) ;
var trimmedData = ( btnName ).trim() ;
if ( trimmedData == "Confirm" ) {
alert( "Confirm" ) ;
} else if ( trimmedData == "Cancel" ) {
alert( "Cancel" ) ;
}
I put this into my $.post function and it is working as well. I don't know where the extra space is coming from, any other thoughts are welcome. Please Let me know if I am doing something horribly wrong here..

IE event don't catch element

I'm writing a script which prevents form clicking, but i can't make it work in IE7 - 8, maby anyone know why it is?
I try to use ev = e || window.event; but nothing good happens.
Please help, and thanks in future.
(function( button ) {
$( document ).click(function( e ) {
ev = e || event;
var clickedEl = ev.srcElement || ev.target;
var parentClass = $( button ).attr( 'class' ).split(' ')[0];
if ( clickedEl !== button && $( clickedEl ).parents( '.' + parentClass ).
length == 0 && !$( clickedEl ).hasClass( parentClass ) ) {
// DO SOMETHING
}
});
})($('.category_select')[0]);
Because you're using jQuery, an event object will be passed to the callback, regardless of the browser. Though it's important to note that you won't be receiving the "pure" event object: it's wrapped in a jQuery object. To get the true event object, do this:
var trueEvent = e.originalEvent;
That should do the trick, mind you: you won't have the jQuery stopPropagation method in IE8, you'll have to correct for that manually by using .returnValue = false and .cancelBubble = true
(function( button )
{
$( document ).click(function( e )
{
var ev = e.originalEvent,//this is all you need to do, plus ev is a variable, declare it as such,
clickedEl = ev.srcElement || ev.target,//separate var declarations by comma
parentClass = $( button ).attr( 'class' ).split(' ')[0];
if ( clickedEl !== button && $( clickedEl ).parents( '.' + parentClass ).length == 0 && !$( clickedEl ).hasClass( parentClass ) )
{
// DO SOMETHING
}
});
})($('.category_select')[0]);
That should workI also had a look at the jQuery reference this is what it says on the jQuery event object

Check First Char In String

I have input-box. I'm looking for a way to fire-up alert() if first character of given string is equal to '/'...
var scream = $( '#screameria input' ).val();
if ( scream.charAt( 0 ) == '/' ) {
alert( 'Boom!' );
}
It's my code at the moment. It doesn't work and I think that it's because that browser doesn't know when to check that string... I need that alert whenever user inputs '/' as first character.
Try this out:
$( '#screameria input' ).keyup(function(){ //when a user types in input box
var scream = this.value;
if ( scream.charAt( 0 ) == '/' ) {
alert( 'Boom!' );
}
})
Fiddle: http://jsfiddle.net/maniator/FewgY/
You need to add a keypress (or similar) handler to tell the browser to run your function whenever a key is pressed on that input field:
var input = $('#screameria input');
input.keypress(function() {
var val = this.value;
if (val && val.charAt(0) == '/') {
alert('Boom!');
}
});

Categories