[jQuery] Re: Keypress on a div
At least on FF, the mousedown event has a boolean property called ctrlKey:
$(...).bind('mousedown', function(event) {
if(event.ctrlKey) {
/* ctrl was down */
} else {
/* ctrl wasn't down */
}
});
Not sure if that's cross browser or not. Be careful about using the ctrl key
as CTRL-clicking on stuff can already have special meaning (like opening in
a new tab in FF/Win or showing the right-click menu on OS X).
--Erik
On 5/24/07, zio budda [EMAIL PROTECTED] wrote:
Hi all. I'm newbie about jquery so sorry for the stupid question.
I have this code:
html
head
script type=text/javascript src=jquery-1.1.2.js
script
/script
/head
body
div id=contenitore class=contenitoreC style=border: 3px black
solid;float:left;
div id=sotto1 class=interno style=border:2px red solid;
width:200px;height:200px; float:left;/div
div id=sotto2 class=interno style=border:2px green solid;
width:200px;height:200px; float:left;/div
div id=sotto3 class=interno style=border:2px blue solid;
width:200px;height:200px; float:left;/div
div id=sotto4 class=interno style=border:2px yellow solid;
width:200px;height:200px; float:left;/div
div id=sotto5 class=interno style=border:2px orange solid;
width:200px;height:200px;float:left;/div
/div
script type=text/javascript
var _mousedown = -1;
var last = -1;
var lastlast = -1;
var now = -1;
var first = -1;
var shift = -1;
$(document).ready( function() {
$('div.interno').hover(
//IN
function() {
if (_mousedown == 0) {
$(this).css('background','#99');
$(this).text('ippo');
{
lastlast = last;
$('#divlastlast').text(lastlast)
last = now;
$('#divlast').text(last)
now = $(this).attr('id');
$('#divnow').text(now)
if (now == lastlast || now == first) {
$('#'+last).css('background','white');
}
}
}
}
,
//out Nulla da fare qui.
function () {}
);
$('div.interno').mousedown( function () {
$(' div.interno').css('background','white');
_mousedown = 0;
$(this).css('background','#99')
now = $(this).attr('id');
first = $(this).attr('id');
last = -1;
lastlast = -1;
$('#divfirst').text(now);
$('#divnow').text(now);
//alert($(this).attr('id'));
});
//IF I uncomment this line keypress works
//$(document).keypress(function(e) {alert(e.charCode);
$('#debug').text(' ');for (i in e) {$('#debug').append(' -- ' + i);}});
$('div.interno').mouseup( function() {_mousedown = -1});
$('#contenitore').keypress(function (e) {
alert('dentro');
});
});
/script
br clear=all
first:div id=divfirst/div
now:div id=divnow/div
last: div id=divlast/div
lastlast:div id=divlastlast/div
debug:div id=debug/div
/body
/html
I want to realize this: when the user click into one of #sotto[1-5] div
and the CTRL KEY is pressed the div change his background color (In the
code I have set the click way only). But I have a problem about how to
intercept the CTRL KEY. I have thinked that
$('#contenitore').keydown() is my friend, but it does not work. I have
tried the line that you see into the code, but I don't know why it does not
work with all key. Keypress works only on $(document).
Where is my error ?
Tnx.
M.
--
Michel 'ZioBudda' Morelli [EMAIL PROTECTED]
Consulenza sistemistica in ambito OpenSource.
Sviluppo applicazioni web dinamiche (LAMP+Ajax)
Telefono: +39-3939890025 -- Fax: +39-0291390660
http://www.ziobudda.net ICQ: 58351764
http://www.ziobuddalabs.it Skype: zio_budda
http://www.ajaxblog.it MSN: [EMAIL PROTECTED]
[jQuery] Re: Keypress on a div
bind. Why bind ?
M.
--
Michel 'ZioBudda' Morelli [EMAIL PROTECTED]
Consulenza sistemistica in ambito OpenSource.
Sviluppo applicazioni web dinamiche (LAMP+Ajax)
Telefono: +39-3939890025 -- Fax: +39-0291390660
http://www.ziobudda.net ICQ: 58351764
http://www.ziobuddalabs.it Skype: zio_budda
http://www.ajaxblog.it MSN: [EMAIL PROTECTED]
2007/5/24, Erik Beeson [EMAIL PROTECTED]:
At least on FF, the mousedown event has a boolean property called ctrlKey:
$(...).bind('mousedown', function(event) {
if(event.ctrlKey) {
/* ctrl was down */
} else {
/* ctrl wasn't down */
}
});
Not sure if that's cross browser or not. Be careful about using the ctrl
key as CTRL-clicking on stuff can already have special meaning (like opening
in a new tab in FF/Win or showing the right-click menu on OS X).
--Erik
On 5/24/07, zio budda [EMAIL PROTECTED] wrote:
Hi all. I'm newbie about jquery so sorry for the stupid question.
I have this code:
html
head
script type=text/javascript src=jquery-1.1.2.js
script
/script
/head
body
div id=contenitore class=contenitoreC style=border: 3px black
solid;float:left;
div id=sotto1 class=interno style=border:2px red solid;
width:200px;height:200px; float:left;/div
div id=sotto2 class=interno style=border:2px green solid;
width:200px;height:200px; float:left;/div
div id=sotto3 class=interno style=border:2px blue solid;
width:200px;height:200px; float:left;/div
div id=sotto4 class=interno style=border:2px yellow solid;
width:200px;height:200px; float:left;/div
div id=sotto5 class=interno style=border:2px orange solid;
width:200px;height:200px;float:left;/div
/div
script type=text/javascript
var _mousedown = -1;
var last = -1;
var lastlast = -1;
var now = -1;
var first = -1;
var shift = -1;
$(document).ready( function() {
$('div.interno').hover(
//IN
function() {
if (_mousedown == 0) {
$(this).css('background','#99');
$(this).text('ippo');
{
lastlast = last;
$('#divlastlast').text(lastlast)
last = now;
$('#divlast').text(last)
now = $(this).attr('id');
$('#divnow').text(now)
if (now == lastlast || now == first) {
$('#'+last).css('background','white');
}
}
}
}
,
//out Nulla da fare qui.
function () {}
);
$('div.interno').mousedown( function () {
$(' div.interno').css('background','white');
_mousedown = 0;
$(this).css('background','#99')
now = $(this).attr('id');
first = $(this).attr('id');
last = -1;
lastlast = -1;
$('#divfirst').text(now);
$('#divnow').text(now);
//alert($(this).attr('id'));
});
//IF I uncomment this line keypress works
//$(document).keypress(function(e) {alert(e.charCode);
$('#debug').text(' ');for (i in e) {$('#debug').append(' -- ' + i);}});
$('div.interno').mouseup( function() {_mousedown = -1});
$('#contenitore').keypress(function (e) {
alert('dentro');
});
});
/script
br clear=all
first:div id=divfirst/div
now:div id=divnow/div
last: div id=divlast/div
lastlast:div id=divlastlast/div
debug:div id=debug/div
/body
/html
I want to realize this: when the user click into one of #sotto[1-5] div
and the CTRL KEY is pressed the div change his background color (In the
code I have set the click way only). But I have a problem about how to
intercept the CTRL KEY. I have thinked that
$('#contenitore').keydown() is my friend, but it does not work. I have
tried the line that you see into the code, but I don't know why it does not
work with all key. Keypress works only on $(document).
Where is my error ?
Tnx.
M.
--
Michel 'ZioBudda' Morelli [EMAIL PROTECTED]
Consulenza sistemistica in ambito OpenSource.
Sviluppo applicazioni web dinamiche (LAMP+Ajax)
Telefono: +39-3939890025 -- Fax: +39-0291390660
http://www.ziobudda.net ICQ: 58351764
http://www.ziobuddalabs.it Skype: zio_budda
http://www.ajaxblog.it MSN: [EMAIL PROTECTED]
[jQuery] Re: Keypress on a div
Because the API for it is more consistent. Functionally it's the same as
what you had.
--Erik
On 5/24/07, zio budda [EMAIL PROTECTED] wrote:
bind. Why bind ?
M.
--
Michel 'ZioBudda' Morelli [EMAIL PROTECTED]
Consulenza sistemistica in ambito OpenSource.
Sviluppo applicazioni web dinamiche (LAMP+Ajax)
Telefono: +39-3939890025 -- Fax: +39-0291390660
http://www.ziobudda.net ICQ: 58351764
http://www.ziobuddalabs.it Skype: zio_budda
http://www.ajaxblog.it MSN:
[EMAIL PROTECTED]
2007/5/24, Erik Beeson [EMAIL PROTECTED]:
At least on FF, the mousedown event has a boolean property called
ctrlKey:
$(...).bind('mousedown', function(event) {
if(event.ctrlKey) {
/* ctrl was down */
} else {
/* ctrl wasn't down */
}
});
Not sure if that's cross browser or not. Be careful about using the ctrl
key as CTRL-clicking on stuff can already have special meaning (like opening
in a new tab in FF/Win or showing the right-click menu on OS X).
--Erik
On 5/24/07, zio budda [EMAIL PROTECTED] wrote:
Hi all. I'm newbie about jquery so sorry for the stupid question.
I have this code:
html
head
script type=text/javascript src=jquery-1.1.2.js
script
/script
/head
body
div id=contenitore class=contenitoreC style=border: 3px black
solid;float:left;
div id=sotto1 class=interno style=border:2px red solid;
width:200px;height:200px; float:left;/div
div id=sotto2 class=interno style=border:2px green solid;
width:200px;height:200px; float:left;/div
div id=sotto3 class=interno style=border:2px blue solid;
width:200px;height:200px; float:left;/div
div id=sotto4 class=interno style=border:2px yellow solid;
width:200px;height:200px; float:left;/div
div id=sotto5 class=interno style=border:2px orange solid;
width:200px;height:200px;float:left;/div
/div
script type=text/javascript
var _mousedown = -1;
var last = -1;
var lastlast = -1;
var now = -1;
var first = -1;
var shift = -1;
$(document).ready( function() {
$('div.interno').hover(
//IN
function() {
if (_mousedown == 0) {
$(this).css('background','#99');
$(this).text('ippo');
{
lastlast = last;
$('#divlastlast').text(lastlast)
last = now;
$('#divlast').text(last)
now = $(this).attr('id');
$('#divnow').text(now)
if (now == lastlast || now == first) {
$('#'+last).css('background','white');
}
}
}
}
,
//out Nulla da fare qui.
function () {}
);
$('div.interno').mousedown( function () {
$(' div.interno').css('background','white');
_mousedown = 0;
$(this).css('background','#99')
now = $(this).attr('id');
first = $(this).attr('id');
last = -1;
lastlast = -1;
$('#divfirst').text(now);
$('#divnow').text(now);
//alert($(this).attr('id'));
});
//IF I uncomment this line keypress works
//$(document).keypress(function(e) {alert(e.charCode);
$('#debug').text(' ');for (i in e) {$('#debug').append(' -- ' + i);}});
$('div.interno').mouseup( function() {_mousedown = -1});
$('#contenitore').keypress(function (e) {
alert('dentro');
});
});
/script
br clear=all
first:div id=divfirst/div
now:div id=divnow/div
last: div id=divlast/div
lastlast:div id=divlastlast/div
debug:div id=debug/div
/body
/html
I want to realize this: when the user click into one of #sotto[1-5]
div and the CTRL KEY is pressed the div change his background color (In
the code I have set the click way only). But I have a problem about how to
intercept the CTRL KEY. I have thinked that
$('#contenitore').keydown() is my friend, but it does not work. I
have tried the line that you see into the code, but I don't know why it does
not work with all key. Keypress works only on $(document).
Where is my error ?
Tnx.
M.
--
Michel 'ZioBudda' Morelli [EMAIL PROTECTED]
Consulenza sistemistica in ambito OpenSource.
Sviluppo applicazioni web dinamiche (LAMP+Ajax)
Telefono: +39-3939890025 -- Fax: +39-0291390660
http://www.ziobudda.net ICQ: 58351764
http://www.ziobuddalabs.it Skype: zio_budda
http://www.ajaxblog.it MSN: [EMAIL PROTECTED]
[jQuery] Re: Keypress on a div
But which is better and faster? bind or the click,mouseover, etc
On 5/24/07, Erik Beeson [EMAIL PROTECTED] wrote:
Because the API for it is more consistent. Functionally it's the same as
what you had.
--Erik
On 5/24/07, zio budda [EMAIL PROTECTED] wrote:
bind. Why bind ?
M.
--
Michel 'ZioBudda' Morelli [EMAIL PROTECTED]
Consulenza sistemistica in ambito OpenSource.
Sviluppo applicazioni web dinamiche (LAMP+Ajax)
Telefono: +39-3939890025 -- Fax: +39-0291390660
http://www.ziobudda.net ICQ: 58351764
http://www.ziobuddalabs.it Skype: zio_budda
http://www.ajaxblog.it MSN:
[EMAIL PROTECTED]
2007/5/24, Erik Beeson [EMAIL PROTECTED]:
At least on FF, the mousedown event has a boolean property called
ctrlKey:
$(...).bind('mousedown', function(event) {
if(event.ctrlKey) {
/* ctrl was down */
} else {
/* ctrl wasn't down */
}
});
Not sure if that's cross browser or not. Be careful about using the ctrl
key as CTRL-clicking on stuff can already have special meaning (like opening
in a new tab in FF/Win or showing the right-click menu on OS X).
--Erik
On 5/24/07, zio budda [EMAIL PROTECTED] wrote:
Hi all. I'm newbie about jquery so sorry for the stupid question.
I have this code:
html
head
script type=text/javascript src=jquery-1.1.2.js
script
/script
/head
body
div id=contenitore class=contenitoreC style=border: 3px black
solid;float:left;
div id=sotto1 class=interno style=border:2px red solid;
width:200px;height:200px; float:left;/div
div id=sotto2 class=interno style=border:2px green solid;
width:200px;height:200px; float:left;/div
div id=sotto3 class=interno style=border:2px blue solid;
width:200px;height:200px; float:left;/div
div id=sotto4 class=interno style=border:2px yellow solid;
width:200px;height:200px; float:left;/div
div id=sotto5 class=interno style=border:2px orange solid;
width:200px;height:200px;float:left;/div
/div
script type=text/javascript
var _mousedown = -1;
var last = -1;
var lastlast = -1;
var now = -1;
var first = -1;
var shift = -1;
$(document).ready( function() {
$('div.interno').hover(
//IN
function() {
if (_mousedown == 0) {
$(this).css('background','#99');
$(this).text('ippo');
{
lastlast = last;
$('#divlastlast').text(lastlast)
last = now;
$('#divlast').text(last)
now = $(this).attr('id');
$('#divnow').text(now)
if (now == lastlast || now == first) {
$('#'+last).css('background','white');
}
}
}
}
,
//out Nulla da fare qui.
function () {}
);
$('div.interno').mousedown( function () {
$(' div.interno').css('background','white');
_mousedown = 0;
$(this).css('background','#99')
now = $(this).attr('id');
first = $(this).attr('id');
last = -1;
lastlast = -1;
$('#divfirst').text(now);
$('#divnow').text(now);
//alert($(this).attr('id'));
});
//IF I uncomment this line keypress works
//$(document).keypress(function(e)
{alert(e.charCode); $('#debug').text(' ');for (i in e) {$('#debug').append('
-- ' + i);}});
$('div.interno').mouseup( function() {_mousedown = -1});
$('#contenitore').keypress(function (e) {
alert('dentro');
});
});
/script
br clear=all
first:div id=divfirst/div
now:div id=divnow/div
last: div id=divlast/div
lastlast:div id=divlastlast/div
debug:div id=debug/div
/body
/html
I want to realize this: when the user click into one of #sotto[1-5]
div and the CTRL KEY is pressed the div change his background color (In
the code I have set the click way only). But I have a problem about how to
intercept the CTRL KEY. I have thinked that
$('#contenitore').keydown() is my friend, but it does not work. I
have tried the line that you see into the code, but I don't know why it does
not work with all key. Keypress works only on $(document).
Where is my error ?
Tnx.
M.
--
Michel 'ZioBudda' Morelli [EMAIL PROTECTED]
Consulenza sistemistica in ambito OpenSource.
Sviluppo applicazioni web dinamiche (LAMP+Ajax)
Telefono: +39-3939890025 -- Fax: +39-0291390660
http://www.ziobudda.net ICQ: 58351764
http://www.ziobuddalabs.it
[jQuery] Re: Keypress on a div
Seems like this comes up fairly often. A FAQ page about it might be nice...
Under the hood, they work the same way. The click/mousover/etc
versions are actually just shortcuts to bind('click', ...), etc.
I think which you use is just a personal preference. I think the
click() way was the original way, and the more generic bind() is
newer. I prefer the bind() version because I think the API is more
consistent. If you check out this page: http://docs.jquery.com/Events
You'll see there are three functions: bind, unbind, and one. The
similar syntax of bind and unbind make it pretty clear what's going
on. I think bind('click', function() {...}); unbind('click'); is much
more clear than click(function() {...}); unbind('click');
Similarly, 'bind' and 'one' have the same syntax. Again, I think
sometimes using click(...) and other times using one('click',...)
isn't as clear as using bind('click',...)/one('click',...).
Anyways, off my soap box now. In the long run, I don't think it really
matters. I know a bunch of the click/mouseover/etc type functions were
removed in version 1.1 (like oneclick and unclick and things like
that), so my thinking was the rest of the name based versions might
disappear in a future release and I'm trying to future proof. But I
don't know about that.
Again, this is mainly my opinion and shouldn't be interpreted as any
kind of official statement from the jQuery dev team.
--Erik
On 5/24/07, Jean Nascimento [EMAIL PROTECTED] wrote:
But which is better and faster? bind or the click,mouseover, etc
On 5/24/07, Erik Beeson [EMAIL PROTECTED] wrote:
Because the API for it is more consistent. Functionally it's the same as
what you had.
--Erik
On 5/24/07, zio budda [EMAIL PROTECTED] wrote:
bind. Why bind ?
M.
--
Michel 'ZioBudda' Morelli [EMAIL PROTECTED]
Consulenza sistemistica in ambito OpenSource.
Sviluppo applicazioni web dinamiche (LAMP+Ajax)
Telefono: +39-3939890025 -- Fax: +39-0291390660
http://www.ziobudda.net ICQ: 58351764
http://www.ziobuddalabs.it Skype: zio_budda
http://www.ajaxblog.it MSN:
[EMAIL PROTECTED]
2007/5/24, Erik Beeson [EMAIL PROTECTED]:
At least on FF, the mousedown event has a boolean property called
ctrlKey:
$(...).bind('mousedown', function(event) {
if(event.ctrlKey) {
/* ctrl was down */
} else {
/* ctrl wasn't down */
}
});
Not sure if that's cross browser or not. Be careful about using the ctrl
key as CTRL-clicking on stuff can already have special meaning (like opening
in a new tab in FF/Win or showing the right-click menu on OS X).
--Erik
On 5/24/07, zio budda [EMAIL PROTECTED] wrote:
Hi all. I'm newbie about jquery so sorry for the stupid question.
I have this code:
html
head
script type=text/javascript src=jquery-1.1.2.js
script
/script
/head
body
div id=contenitore class=contenitoreC style=border: 3px black
solid;float:left;
div id=sotto1 class=interno style=border:2px red solid;
width:200px;height:200px; float:left;/div
div id=sotto2 class=interno style=border:2px green solid;
width:200px;height:200px; float:left;/div
div id=sotto3 class=interno style=border:2px blue solid;
width:200px;height:200px; float:left;/div
div id=sotto4 class=interno style=border:2px yellow solid;
width:200px;height:200px; float:left;/div
div id=sotto5 class=interno style=border:2px orange solid;
width:200px;height:200px;float:left;/div
/div
script type=text/javascript
var _mousedown = -1;
var last = -1;
var lastlast = -1;
var now = -1;
var first = -1;
var shift = -1;
$(document).ready( function() {
$('div.interno').hover(
//IN
function() {
if (_mousedown == 0) {
$(this).css('background','#99');
$(this).text('ippo');
{
lastlast = last;
$('#divlastlast').text(lastlast)
last = now;
$('#divlast').text(last)
now = $(this).attr('id');
$('#divnow').text(now)
if (now == lastlast || now == first) {
$('#'+last).css('background','white');
}
}
}
}
,
//out Nulla da fare qui.
function () {}
);
$('div.interno').mousedown( function () {
$(' div.interno').css('background','white');
_mousedown = 0;
$(this).css('background','#99')
now = $(this).attr('id');
first = $(this).attr('id');
last = -1;
