Develop Reference

Select username everywhere with selector

I'm using selectable() from jQuery it works just the way i want it.
But i want to go to the next step, i want it to select the message too inside the main chat.
So the text of the selected nickname will highlight too in the main chat.
JsFiddle http://jsfiddle.net/56SkH/13/
UPDATE
What i wanna to do is that when Nickname is selected from users that the channelmessage automaticly is being selected from the users.

$(function() {
$('#users').selectable({
selected: function(event, ui) {
var user = ui.selected.id.toLowerCase();
$('.channelmessage.'+user).addClass('ui-selected');
},
unselected: function(event, ui) {
$('.channelmessage').removeClass('ui-selected');
},
});
});
DEMO: http://jsfiddle.net/56SkH/23/

Try this - On click of each name corresponding message also selected using 'stop' property of selectable().
$(function () {
$("#users").selectable({
stop: function () {
$("#users li").each(function (key) {
$("#Nickname" +(key+1)+ "_message").css({"background":"white","color":"black"});
});
$(".ui-selected", this).each(function (key) {
var index = $( "#users li" ).index( this );
$("#Nickname" +(index + 1)+ "_message").css({"background":"#F39814","color":"white"});
});
}
});
});

It's easy to add a dummy class to each chat message, and the selector will be more efficient than searching for a name string.
$(function() {
$( '#users').selectable({
filter: "li",
selecting: function( event, ui ) {
$(".ui-selected").removeClass("ui-selected");
$('.channelmessage span.message.' + ui.selecting.id).addClass("ui-selected");
}
});
});
Here you have a working JSFiddle sample:
http://jsfiddle.net/56SkH/21/

You can force the selection on the element by adding the class ui-selected and using the selected event:
$(function () {
$('#users').selectable({
selected: function (event, ui) {
$(".channelmessage span.nickname.ui-selected").removeClass("ui-selected");
$(".channelmessage span.nickname:contains('" + ui.selected.id + "')").addClass("ui-selected");
}
});
});
In the example I use the span content as contains selctor, by I have modified a bit the HTML markup like:
<p class="channelmessage"> <span class="nickname">Nickname2</span><span>:</span>
<span class="message">Message</span>
</p>
Demo: http://jsfiddle.net/IrvinDominin/LnnLT/

Imagemap: Leave clicked area's tooltip displayed on mouseout?

I am using the plugin Imagemapster to add highlighting and tooltip functions to an image map. It provides callbacks like so:
image.mapster(
{
mapKey: 'name',
listKey: 'name',
onClick: function (e) {
if(!$(this).hasClass('clicked')){
$(this).addClass('clicked');
}
$('#selections').html(xref[e.key]);
},
onMouseover: function (e) {
$('#selections').html(xref[e.key]);
},
onMouseout: function (e) {
if(!$(this).hasClass('clicked')){
$('#selections').html('');
}
},
});
Here is my example:
http://jsfiddle.net/5scbh/6/
If you click an item, I want that item's tooltip to remain displayed even if you mouseout. I'm sort of there, but the problem is: if you click an item, and then mouseover another area and then mouseout... it doesn't keep the clicked item's tooltip on mouseout.
I like that the tooltip changes on mouseover to whatever you rollover, but once you mouseout of that area or the imagemap, I want it to go back to showing the tooltip of whatever area has been clicked. If you unclick the clicked area so that nothing is clicked, then the tooltip should go away.
Can you help me do this? Thank you.

You can store your current tooltip in a data attribute, then write it back on mouse out.
...
onClick: function (e) {
if(!$(this).hasClass('clicked')){
$(this).addClass('clicked');
}
$('#selections').html(xref[e.key]);
$( '#selections' ).data( 'storage', xref[e.key] );
},
...
onMouseout: function (e) {
if(!$(this).hasClass('clicked')){
$('#selections').html('');
}
if( $( '#selections' ).data( 'storage' ) ) {
$( '#selections' ).html( $( '#selections' ).data( 'storage' ) );
};
},
....
updated your fiddle acordingly.

Here is the updated fiddle, using the correct edits provided by #robotroll, as well as the solution to the selecting/deselecting issue described in my comment above.
That part was solved by using this code:
onClick: function (e) {
if (e.selected) {
$(this).addClass('clicked');
$('#selections').html(xref[e.key]);
$('#selections').data( 'storage', xref[e.key] );
} else {
$(this).removeClass('clicked');
$('#selections').removeData();
$('#selections').html('');
}
},
http://jsfiddle.net/5scbh/10/

Backbone Events on jquery tool tip

I'm using JQuery Tool Tip in on my HTML page and in that tool tip I've User Name and a Sign Out Link.
Now I'm trying to bind the event in my backbone view, on the id of the Sign Out Link.
But the event is not fired.
I removed the tool tip code and then when i clicked on the sign out link the event got fired.
So question here is - Is it possible to bind the backbone event on jquery tool tip? If not than what would be the work around.
Some code snippets
This is the function which is used to apply jquery tool tip
jQuery(function () {
jQuery.widget("ui.tooltip", jQuery.ui.tooltip, {
options: {
content: function () {
// self.addDescendant('toolTip', {selector: templ.loginHelpContent, view: tt});
return jQuery(templ.loginHelpContent).html();
},
show: null,
close: function (event, ui) {
ui.tooltip.hover(
function () {
jQuery(this).stop(true).fadeTo(400, 1);
},
function () {
jQuery(this).fadeOut("400", function () {
jQuery(this).remove();
})
});
},
position: {
my: "left-190 bottom-18",
using: function( position, feedback ) {
jQuery( this ).css( position );
jQuery( "<div>" )
// .addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
},
}
});
jQuery(templ.loginHelpIcon).tooltip();
});
and the HTML
<span id=loginHelpContent style="display:none">
Not Elizabeth Murphy? <a id="logoutLink" style="color:blue;text-decoration: none">Sign out</a><br> and login as a different user.
</span>
When I tried to bind and event on 'logoutLink' it didn't worked.

You can listen to the "tooltipopen" event ".tooltip tooltipopen": "listenTooltip" and in listenTooltip function :
listenTooltip: function( e ) {
var tooltip = $( e )
}
Now you can bind listener to tooltip in this function

Trigger event once dropdown item is selected on jQuery combobox

I'm using the autocomplete combobox from the jQuery UI library to create a couple text fields that also accept dropdowns -- basically a hybrid text/dropdown input. I customized it though so it also accepts free text input, not just items in the dropdown array.
When the user selects an item from the dropdown, I'd like to trigger a function that populates the rest of the form based on the input. I don't want this function to trigger when the user types in a value manually. I'm not sure though how to bind an event specifically to the user selecting an item from the dropdown.
Here's a Fiddle: http://jsfiddle.net/AhDHk/
HTML:
<input type="text" name="realtor-name" id="lp-realtor-name" value="" class="text ui-widget-content ui-corner-all" />
JS:
// adds the dropdown, dropArray is the list of items for the dropdown, id is the ID of the html input.
function textDropdown(dropArray, id) {
var $input = $(id).autocomplete({
source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
minLength: 0
}).addClass("ui-widget ui-widget-content ui-corner-left");
$("<button type='button'> </button>")
.attr("tabIndex", -1)
.attr("title", "Show All Items")
.insertAfter($input)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("ui-corner-right ui-button-icon lp-drop-button")
.click(function() {
// close if already visible
if ($input.autocomplete("widget").is(":visible")) {
$input.autocomplete( "close" );
return;
}
$(this).blur();
$input.autocomplete("search", "" );
$input.focus();
});
$("form").submit(function(e) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
alert($(this).serialize());
});
}

Here is how you can handle it:
var $input = $(id).autocomplete({
source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
minLength: 0,
select: function(event, ui) { alert('test');}
}).addClass("ui-widget ui-widget-content ui-corner-left");
Possible duplicate of: jQuery UI Autocompleteselect

The select event, here.
function textDropdown(dropArray, id) {
var $input = $(id).autocomplete({
source: dropArray, // this is an array fetched with AJAX of all the items for the dropdown
minLength: 0,
select:function(a,b){
alert(b.item.value + 'selected');
}
}).addClass("ui-widget ui-widget-content ui-corner-left");

how to add multiple text onclick in jquery non-modal dialog?

I need to log multiple messages in a jquery non-modal dialog and a textarea,
I have an jqueryui autocomplete field from which i am selecting an option, on selecting the option it gets logged into the textarea.
what I also want to do is get it to be logged in the non-modal dialog as well. How do i do that?.
Here is the html.
<div id="codes">
<label for="selectcodes"></label>
<input id="selectcodes" size="25">
<textarea id="selectcodes-log"></textarea>
</div>
<div id="dialog">
<div>
Here is the javascript,
/*JSON data, JavaScript object */
var tag = [
"abc",
"efg",
"hij",
"klm",
"nop",
"qrst"];
/* this function logs the selected autocomplete option into the textarea */
function selectcodes_log(message) {
/*this is for logging the code into the textarea */
$("#selectcodes-log").val(function () {
return this.value + "codes= " + message + ', '}).prependTo("#selectcodes-log");
/*this is what have tried to log into the non-modal dialog*/
$("#dialog").val(function(){return this.value + message +', '}).prependTo( "#dialog");
}
/*selects multiple autocomplete values */
$("#selectcodes")
.bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB && $(this).data("ui-autocomplete").menu.active) {
event.preventDefault();
}
})
`/* jquery ui autocomplete */`
.autocomplete({
minLength: 0,
source: function (request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
tag, extractLast(request.term)));
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
selectcodes_log(ui.item ? +ui.item.value :
"Nothing selected, input was " + this.value);
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
$(this).val("");
return false;
}
});
/* function for a non modal dialog */
$(function () {
$('#dialog').dialog({
autoOpen: true,
open: function () {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function () {
closedialog = 0;
},
close: function () {
$(document).unbind('click');
},
buttons: {
Ok: function () {
$(this).dialog('close');
}
}
});
});
http://jsfiddle.net/pratik24/9VBNd/1/