[jQuery] Re: ClueTip focus/blur trouble
hi
i m karthick,i m ding MCA in VIT...for me honey well company is
coming for placement so can u give any model paper
thank u
2009/10/26 Shawn
>
> Thanks Karl. I'll look at this more in a bit. but from what I can see I
> think you have a solution for me..
>
> Shawn
>
> Karl Swedberg wrote:
>
>> Hi Shawn,
>>
>> Here is what I'd probably do:
>>
>> After you call $this.cluetip( ...), unbind the blur event:
>>
>> $this.unbind('blur.cluetip');
>>
>> Then you can handle the closing of the clueTip however you want using
>> $(document).trigger('hideCluetip');
>>
>> Maybe something like this:
>>
>> $('#cluetip').hover(function() {
>> $(this).data('hovered', true);
>> }, function() {
>> $(this).removeData('hovered');
>> });
>>
>> $this.blur(function() {
>> setTimeout(function() {
>>if (!$('#cluetip').data('hovered')) {
>> $(document).trigger('hideCluetip');
>>}
>> }, 100);
>> });
>>
>>
>> You'll have to add the click handler to the list items, too, of course.
>>
>> Hope that gets you on the right track.
>>
>>
>> --Karl
>>
>>
>> Karl Swedberg
>> www.englishrules.com
>> www.learningjquery.com
>>
>>
>>
>>
>> On Oct 22, 2009, at 6:08 PM, Shawn wrote:
>>
>>
>>> Hi Gang.
>>>
>>> I'm working with ClueTip and have run into some oddities.
>>>
>>> In particular, I want to show ClueTip when a textbox receives focus. The
>>> source shows me that I can use activation:'focus' for this and that will
>>> result in the cluetip showing on focus and disappearing on blur. Showing the
>>> cluetip is working fine, blurring is not.
>>>
>>> The code I have is this:
>>>
>>> $this.cluetip({
>>> activation: 'focus',
>>> local: true,
>>> showTitle: false,
>>> sticky: true,
>>> mouseOutClose: true,
>>> arrows: true,
>>> closeText: "X",
>>> closePosition: "title"
>>> }).focus( function (){
>>> $(opts.source).children().removeClass(opts.hover); });
>>>
>>> The .focus() method that I have here is simply resetting the classes on
>>> the items the user may interact with.
>>>
>>> I'm using ClueTip to provide a rapid selection tool - similar to a drop
>>> down list, but without the drop down list UI. (large number of options,
>>> needing HTML for formatting, etc.) The idea is that when the cursor arrives
>>> at the textbox, the cluetip shows and the user can use either the mouse to
>>> click an item, or the up/down keys and enter to do the same. Where I am
>>> running into problems is with the click selection. If I add a blur handler
>>> to the above code:
>>>
>>> .blur( function () { $(document).trigger('hideCluetip'); })
>>>
>>> then things work well for keyboard selection and blurring, but if I click
>>> instead, the click event never happens. Because, clicking on the cluetip
>>> triggers the blur of the textbox which closes the cluetip before the click
>>> can be handled. I suspect this may be partly why the onblur isn't working
>>> within ClueTip as well - the logistics seem rather complex...
>>>
>>> So I'm looking for suggestions on how to get this running properly. OR
>>> for a plugin that provides similar functionality already. Thanks for any
>>> feedback.
>>>
>>> Shawn
>>>
>>
>>
[jQuery] Re: ClueTip focus/blur trouble
s close.
Your code works, but due to the unbind of the blur.cluetip event, it
only works once. Which makes sense. So I modified it slightly to the
following. This seems to be working so far.
$this.unbind('blur.cluetip');
$("#cluetip").hover(
function () { $(this).data('hovered', true); },
function () { $(this).removeData('hovered'); }
);
$this.focus( function () {
$(this).blur(function() {
setTimeout(
function () {
if (!$('#cluetip').data('hovered')) {
$('#cluetip').removeData('hovered');
$(document).trigger('hideCluetip');
}
}, 100
);
});
});
The .live() would have been a nice touch here, but it doesn't support
blur events (yet).
Thanks for the nudge in the right direction.
Shawn
Karl Swedberg wrote:
Hi Shawn,
Here is what I'd probably do:
After you call $this.cluetip( ...), unbind the blur event:
$this.unbind('blur.cluetip');
Then you can handle the closing of the clueTip however you want
using $(document).trigger('hideCluetip');
Maybe something like this:
$('#cluetip').hover(function() {
$(this).data('hovered', true);
}, function() {
$(this).removeData('hovered');
});
$this.blur(function() {
setTimeout(function() {
if (!$('#cluetip').data('hovered')) {
$(document).trigger('hideCluetip');
}
}, 100);
});
You'll have to add the click handler to the list items, too, of course.
Hope that gets you on the right track.
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Oct 22, 2009, at 6:08 PM, Shawn wrote:
Hi Gang.
I'm working with ClueTip and have run into some oddities.
In particular, I want to show ClueTip when a textbox receives focus.
The source shows me that I can use activation:'focus' for this and
that will result in the cluetip showing on focus and disappearing on
blur. Showing the cluetip is working fine, blurring is not.
The code I have is this:
$this.cluetip({
activation: 'focus',
local: true,
showTitle: false,
sticky: true,
mouseOutClose: true,
arrows: true,
closeText: "X",
closePosition: "title"
}).focus( function (){
$(opts.source).children().removeClass(opts.hover); });
The .focus() method that I have here is simply resetting the classes
on the items the user may interact with.
I'm using ClueTip to provide a rapid selection tool - similar to a
drop down list, but without the drop down list UI. (large number of
options, needing HTML for formatting, etc.) The idea is that when the
cursor arrives at the textbox, the cluetip shows and the user can use
either the mouse to click an item, or the up/down keys and enter to do
the same. Where I am running into problems is with the click
selection. If I add a blur handler to the above code:
.blur( function () { $(document).trigger('hideCluetip'); })
then things work well for keyboard selection and blurring, but if I
click instead, the click event never happens. Because, clicking on
the cluetip triggers the blur of the textbox which closes the cluetip
before the click can be handled. I suspect this may be partly why the
onblur isn't working within ClueTip as well - the logistics seem
rather complex...
So I'm looking for suggestions on how to get this running properly.
OR for a plugin that provides similar functionality already. Thanks
for any feedback.
Shawn
[jQuery] Re: ClueTip focus/blur trouble
Thanks Karl. I'll look at this more in a bit. but from what I can see
I think you have a solution for me..
Shawn
Karl Swedberg wrote:
Hi Shawn,
Here is what I'd probably do:
After you call $this.cluetip( ...), unbind the blur event:
$this.unbind('blur.cluetip');
Then you can handle the closing of the clueTip however you want
using $(document).trigger('hideCluetip');
Maybe something like this:
$('#cluetip').hover(function() {
$(this).data('hovered', true);
}, function() {
$(this).removeData('hovered');
});
$this.blur(function() {
setTimeout(function() {
if (!$('#cluetip').data('hovered')) {
$(document).trigger('hideCluetip');
}
}, 100);
});
You'll have to add the click handler to the list items, too, of course.
Hope that gets you on the right track.
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Oct 22, 2009, at 6:08 PM, Shawn wrote:
Hi Gang.
I'm working with ClueTip and have run into some oddities.
In particular, I want to show ClueTip when a textbox receives focus.
The source shows me that I can use activation:'focus' for this and
that will result in the cluetip showing on focus and disappearing on
blur. Showing the cluetip is working fine, blurring is not.
The code I have is this:
$this.cluetip({
activation: 'focus',
local: true,
showTitle: false,
sticky: true,
mouseOutClose: true,
arrows: true,
closeText: "X",
closePosition: "title"
}).focus( function (){
$(opts.source).children().removeClass(opts.hover); });
The .focus() method that I have here is simply resetting the classes
on the items the user may interact with.
I'm using ClueTip to provide a rapid selection tool - similar to a
drop down list, but without the drop down list UI. (large number of
options, needing HTML for formatting, etc.) The idea is that when the
cursor arrives at the textbox, the cluetip shows and the user can use
either the mouse to click an item, or the up/down keys and enter to do
the same. Where I am running into problems is with the click
selection. If I add a blur handler to the above code:
.blur( function () { $(document).trigger('hideCluetip'); })
then things work well for keyboard selection and blurring, but if I
click instead, the click event never happens. Because, clicking on
the cluetip triggers the blur of the textbox which closes the cluetip
before the click can be handled. I suspect this may be partly why the
onblur isn't working within ClueTip as well - the logistics seem
rather complex...
So I'm looking for suggestions on how to get this running properly.
OR for a plugin that provides similar functionality already. Thanks
for any feedback.
Shawn
[jQuery] Re: ClueTip focus/blur trouble
Hi Shawn,
Here is what I'd probably do:
After you call $this.cluetip( ...), unbind the blur event:
$this.unbind('blur.cluetip');
Then you can handle the closing of the clueTip however you want using $
(document).trigger('hideCluetip');
Maybe something like this:
$('#cluetip').hover(function() {
$(this).data('hovered', true);
}, function() {
$(this).removeData('hovered');
});
$this.blur(function() {
setTimeout(function() {
if (!$('#cluetip').data('hovered')) {
$(document).trigger('hideCluetip');
}
}, 100);
});
You'll have to add the click handler to the list items, too, of course.
Hope that gets you on the right track.
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Oct 22, 2009, at 6:08 PM, Shawn wrote:
Hi Gang.
I'm working with ClueTip and have run into some oddities.
In particular, I want to show ClueTip when a textbox receives focus.
The source shows me that I can use activation:'focus' for this and
that will result in the cluetip showing on focus and disappearing on
blur. Showing the cluetip is working fine, blurring is not.
The code I have is this:
$this.cluetip({
activation: 'focus',
local: true,
showTitle: false,
sticky: true,
mouseOutClose: true,
arrows: true,
closeText: "X",
closePosition: "title"
}).focus( function (){ $
(opts.source).children().removeClass(opts.hover); });
The .focus() method that I have here is simply resetting the classes
on the items the user may interact with.
I'm using ClueTip to provide a rapid selection tool - similar to a
drop down list, but without the drop down list UI. (large number of
options, needing HTML for formatting, etc.) The idea is that when
the cursor arrives at the textbox, the cluetip shows and the user
can use either the mouse to click an item, or the up/down keys and
enter to do the same. Where I am running into problems is with the
click selection. If I add a blur handler to the above code:
.blur( function () { $(document).trigger('hideCluetip'); })
then things work well for keyboard selection and blurring, but if I
click instead, the click event never happens. Because, clicking on
the cluetip triggers the blur of the textbox which closes the
cluetip before the click can be handled. I suspect this may be
partly why the onblur isn't working within ClueTip as well - the
logistics seem rather complex...
So I'm looking for suggestions on how to get this running properly.
OR for a plugin that provides similar functionality already. Thanks
for any feedback.
Shawn
