I have downloaded jquery.hotkeys-0.7.9.js plugin and was trying to provide hot key. on pressing ctr+t it should open new url address . i have made this something like this
jQuery(document).bind('keypress', 'Ctrl+t',function (evt){
alert('ctrl+t is pressed');
window.location.href = ("${createLink(controller:'trip',action:'create')}");
return false
});
But this is not working, it resonds to any key in my keyboard,(even if i press a,b,c etc). What changes i should make so that it should respond to only ctr+t ??
even if i delete the downloaded plugin from js folder the result is same\
jquery version i am using is jquery-1.1.3.1.pack.js
According to the example the project gave, you should do this:
$.hotkeys.add('Ctrl+t', function(){
alert("haha");
});
But in Chrome(and maybe some other browsers too), Ctrl+t is the default hot key to open a new tab, I don't know how to overwrite it. So when I test, I replace Ctrl+t to Ctrl+v, and it worked.
fiddle: http://jsfiddle.net/QFT8f/
UPDATE:
This is copied from the source file of hotkey.js:
USAGE:
$.hotkeys.add('Ctrl+c', function(){ alert('copy anyone?');});
$.hotkeys.add('Ctrl+c', {target:'div#editor', type:'keyup', propagate: true},function(){ alert('copy anyone?');});>
$.hotkeys.remove('Ctrl+c');
$.hotkeys.remove('Ctrl+c', {target:'div#editor', type:'keypress'});
Your code is correct based on the documentation, but the plugin does not work as expected (at least in Firefox). I would ditch the plugin and just handle it based on event attributes.
Here's a fiddle with the plugin installed where you can see the event firing when any key is pressed, and how you would limit to only run certain code when 'Ctrl+t' is pressed. Note: you have to click on the output panel to give it focus for the key events to fire.
JavaScript code:
$(document).bind('keypress', 'Ctrl+t',function (e){
if(e.which==116 && e.ctrlKey){
alert('Ctrl+t was pressed');
return false;
} else {
alert('Any other key. Bad code...BAD!');
}
return true;//Pass the event on
});
UPDATE
I had previously added the plugin when I was testing, but it appears like I lost it somewhere when I was fiddling, so the example above works in plain JQuery (I'd make the second parameter the function though). Here's the fiddle with the jquery.hotkeys-0.7.9.min.js resource added with the same code, and for me it throws an "elem.getAttribute is not a function" JavaScript error when run with JQuery 1.6. Another reason to ditch the plugin!
Related
Sorry for my poor English.
I'm using jQuery plugin slick. It contain some code
_isSlideOnFocus =_.$slider.find('*').is(':focus');
...
if(_isSlideOnFocus) {
//some code that i don't want to execute
}
Plugin gives ability to execute callback right before upper code will execute. So i can unfocus elements, but i don't know how.
In browser console right before upper code i try
_.$slider.find('*').blur();
_.$slider.find('*').each(function() {$(this).blur()});
_.$slider.find('*').trigger('blur');
but it don't work's.
i try in console
_.$slider.find(':focus'); //empty jQuery object
_.$slider.find('*').each(function() {
console.log($(this).is(':focus')); //false for all elements
});
_.$slider.find('*').is(':focus') //but this one returns true
Even if I try
_.$slider.find('*').each(function() {
if($(this).is(':focus')) {
$(this).blur();
console.log($(this).is(':focus'));
}
});
console logs true, so as I can see blur is not working for is(':blur')
How can i blur all elements in $slider? Thank's for help
Here the fiddle. My code in the end of js block. Subject plugin code is in the Slick.prototype.activateADA function in the end of plugin.
I have found the solution. I was using the old jQuery version 1.7. After updating jQuery to 1.9 blur works.
I did this:
$('.ui-slider-handle').blur();
I wrote this extension that basically changes the look of a website using CSS and JS. But now I want to add some checkbox settings to the extension so users can toggle features of the website.
I tried reading the documentation, and searched all over the web. Even tried to look for demo extensions that I could reverse engineer, but to no avail.
Let's say I want to add a "Check Box", title it "sidebar" and given it a "key" value of "tg_sidebar". Can someone explain how I would add an event listener for this, and then trigger some jquery code?
[I think this StackOverflow query [http://stackoverflow.com/questions/3032945/safari-extension-how-to-respond-to-settings-changes] makes things clear, but it still doesn't explain much.]
Here's one thing that worked.
function numberChanged(event)
{
if(event.key == "tg_sidebar")
alert("Number has changed!");
}
safari.extension.settings.addEventListener("change",numberChanged,false);
[Screenshot of the Extension Settings window: http://dznr.org/56wi]
Now whenever I toggle the setting, I get an error. But replacing that alert function with say adding or removing a CSS class doesn't work.
I also tried using the code by the answerer below, but that doesn't do anything. Would have been perfect to be able to look at the code of some extension…
One more thing, in case it wasn't clear, is that the setting should make the change permanent. That is, when the setting is ticked, it should do that action every time the page loads.
Assuming you have it setup in your extensions.
It's pretty simple. Every time your function is called in your global.html call this:
var type = safari.extension.settings.yourSettingsCall;
example:
var type;
function performCommand(event)
{
if (event.command === "start-event") {
type = safari.extension.settings.tg_sidebar;
}
safari.application.activeBrowserWindow.activeTab.page.dispatchMessage("type", type);
}
then your inject.js add these:
safari.self.addEventListener("message", handleMessage, false);
and
function handleMessage(event){
if (event.name === "type") {
//run code
}
}
Hello I'm writing a jQuery code for my application and got some issues (like function called once, running three times).
I must know if exist any site that people audit source code and comment my mistakes..
most of my code is like this i/e:
$('a.openBox').click(function(){
//do something
$('.box').show();
$('a.openModal','.box').click(function(){
$.openModal(some, parameters)
});
});
$.openModal = function(foo,bar){
//do something
$('a.close').click(function(){
$('#modal').hide();
});
$('input.text').click(function(){
$.anotherFunction();
});
});
does am I doing something obviously wrong?
I'm not aware of any source code audit like that -- certainly not for free! This website is pretty good for specific problems though...
In this case, the problem is that you are continually binding more and more events. For instance, with the following code:
$('a.openBox').click(function(){
//do something
$('.box').show();
$('a.openModal','.box').click(function(){
$.openModal(some, parameters)
});
});
This code says "whenever the user clicks on an a.openbox element, show all .box elements and bind a new click handler to all .box a.openModal elements". This means that you will add another handler to .box a.openModal every time you click on a.openbox. I can't believe this is what you want to do!
It is difficult to work out what the correct code should be without knowing the context and exactly what you want to happen. My advice for you in the first instance would be to do some reading up on Javascript events and event handlers, particularly as they are implemented in jQuery.
HI,
I am developing a web page using asp.net.
I am using some links in my web page. For that I have used some code like this.
Test
and in the ChangeLoc() method I have written __doPostBack event.
This works fine in IE7 installed in my machine. But in IE6 in another machine it does not invoke the __doPostBack event.
Edit
When I change the void(0) in href it works fine.
I would like to know whether it is a bug with IE or a JavaScript problem.
function ChangeLoc( param, arg )
{
__doPostBack ( param, arg )
}
href and onclick both get fired when you click an element, you are overwriting the onclick event with void()
change to
test
or with jQuery.
$(function(){
$("#linkId").click(function(event){
ChangeLoc();
event.preventDefault();
});
});
Do you get an error? If so, what error do you get in IE6? Can you post the code for ChangeLoc()? Also, try changing your markup to the following and see if you get the same result:
Test
Edit: removed 'javascript:' from the onclick
You can also use unobtrusive javascript syntax:
test
<script type="text/javascript">
document.getElementById("chngLink").onclick = function(e) {
if (e && e.preventDefault) {
e.preventDefault();
}
ChangeLoc('TEST','');
return false;
};
</script>
it is not good to use <a>-element for javascript functions call.
Use styled <span onclick="my_function()" class="looks_like_hyperlink">...</span>
I have the following JQuery code which does similar functionality like Stackoverflow where the user clicks on the comment link and it displays the comments or in this case replies to a member's status update, generally it works great except when a member posts a new status update which updates the list of status updates using an ajax async postback in ASP.net MVC.
What happens is if you click on the new item in the list it brings them to a new page instead of doing what the JQuery is suppose to do.
<script type="text/javascript">
$(function() {
$("a[id ^='commentLink-']").click(function() {
match = this.id.match(/commentLink-(\d+)/);
container = $("div#commentContainer-" + match[1])
container.toggle();
if (container.is(":visible")) {
container.load($(this).attr("href"));
} else {
container.html("Loading...");
}
return false; //Prevent default action
});
});
</script>
Note: I think what is causing it is the fact that the new item in the list isn't actually on the page as the list was updated through the ajax so the new html isn't there until the page is refreshed.
Update Okay how would I use this live/event functionality that Paolo Bergantino spoke of in his answer to trigger an ASP.net MVC ActionResult?
Check out the new Events/live feature in jQuery 1.3
Binds a handler to an event (like click) for all current - and future - matched element.
So as you add new items, jQuery should add the click event to them with this.
If for some odd reason you do not want to upgrade to jQuery 1.3, you can check out the livequery plugin.
EDIT in response to update:
The actual code to use .live would be something like this:
$(function() {
$("a[id ^='commentLink-']").live('click', function(event) {
match = this.id.match(/commentLink-(\d+)/);
container = $("div#commentContainer-" + match[1])
container.toggle();
if (container.is(":visible")) {
container.load($(this).attr("href"));
} else {
container.html("Loading...");
}
event.preventDefault();
});
});
The changes that were made are mostly in the 2nd line, where
$("a[id ^='commentLink-']").click(function() {
was replaced by
$("a[id ^='commentLink-']").live('click', function(event) {
I am now also receiving the argument event to use for event.preventDefault(); which is the way you are recommended to stop events by jQuery. If return false; does the trick, though, you can keep that.
I haven't used .live yet, but I think that should do the trick. Make sure that you get jQuery 1.3 in your server before trying this, though. :)