I want to trigger the keydown event when the textbox is focus. So that i when i focus out of that textbox google map autocomplete " place_changed" will work fine.
var el=document.getElementById('inputID');
el.addEventListener("keydown", function(){
console.log('press');
});
Node.prototype.fire=function(type,options){
var event=new CustomEvent(type);
for(var p in options){
event[p]=options[p];
}
this.dispatchEvent(event);
}
el.addEventListener("focus", function(){
el.fire("keydown",{ctrlKey:true,keyCode:90,bubbles:true})
});
<input id='inputID'>
Related
I have an infowindow in a google map like so,
var content = '<div id="link"><input type="button" value="Report this light" id="reportBtn"/></div>';
i am using jquery mobile to bind a 'click' event when the infowindow pops open on the map but it doens't fire, my code:
$(document).on('pageinit', function() {
$('#reportBtn').on('click', function() {
alert('it works');
});
});
You need to use event delegation. Try
$(document).on('pageinit', function() {
$(document).on('click', '#reportBtn', function() {
alert('it works');
});
});
Instead of document you can use nearest static element that is a parent to <div id="link">.
$('#nearestparent').on('click', '#reportBtn', function() {...});
How the new jQueryUI's tooltip widget can be modified to open the tooltip on click event on certain element's on document, while the others are still showing their tootip on mouseover event. In click-open case the tooltip should be closed by clicking somewhere else on the document.
Is this possible at all?
Using jqueryui:
HTML:
<div id="tt" >Test</div>
JS:
$('#tt').on({
"click": function() {
$(this).tooltip({ items: "#tt", content: "Displaying on click"});
$(this).tooltip("open");
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
You can check it using
http://jsfiddle.net/adamovic/A44EB/
Thanks Piradian for helping improve the code.
This code creates a tooltip that stays open until you click outside the tooltip. It works even after you dismiss the tooltip. It's an elaboration of Mladen Adamovic's answer.
Fiddle: http://jsfiddle.net/c6wa4un8/57/
Code:
var id = "#tt";
var $elem = $(id);
$elem.on("mouseenter", function (e) {
e.stopImmediatePropagation();
});
$elem.tooltip({ items: id, content: "Displaying on click"});
$elem.on("click", function (e) {
$elem.tooltip("open");
});
$elem.on("mouseleave", function (e) {
e.stopImmediatePropagation();
});
$(document).mouseup(function (e) {
var container = $(".ui-tooltip");
if (! container.is(e.target) &&
container.has(e.target).length === 0)
{
$elem.tooltip("close");
}
});
This answer is based on working with different classes. When the click event takes place on an element with class 'trigger' the class is changed to 'trigger on' and the mouseenter event is triggered in order to pass it on to jquery ui.
The Mouseout is cancelled in this example to make everything based on click events.
HTML
<p>
<input id="input_box1" />
<button id="trigger1" class="trigger" data-tooltip-id="1" title="bla bla 1">
?</button>
</p>
<p>
<input id="input_box2" />
<button id="trigger2" class="trigger" data-tooltip-id="2" title="bla bla 2">
?</button>
</p>
jQuery
$(document).ready(function(){
$(function () {
//show
$(document).on('click', '.trigger', function () {
$(this).addClass("on");
$(this).tooltip({
items: '.trigger.on',
position: {
my: "left+15 center",
at: "right center",
collision: "flip"
}
});
$(this).trigger('mouseenter');
});
//hide
$(document).on('click', '.trigger.on', function () {
$(this).tooltip('close');
$(this).removeClass("on")
});
//prevent mouseout and other related events from firing their handlers
$(".trigger").on('mouseout', function (e) {
e.stopImmediatePropagation();
});
})
})
http://jsfiddle.net/AK7pv/111/
I have been playing with this issue today, I figured I would share my results...
Using the example from jQueryUI tooltip, custom styling and custom content
I wanted to have a hybrid of these two. I wanted to be able to have a popover and not a tooltip, and the content needed to be custom HTML. So no hover state, but instead a click state.
My JS is like this:
$(function() {
$( document ).tooltip({
items: "input",
content: function() {
return $('.myPopover').html();
},
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
$('.fireTip').click(function () {
if(!$(this).hasClass('open')) {
$('#age').trigger('mouseover');
$(this).addClass('open');
} else {
$('#age').trigger('mouseout');
$(this).removeClass('open');
}
})
});
The first part is more or less a direct copy of the code example from UI site with the addition of items and content in the tooltip block.
My HTML:
<p>
<input class='hidden' id="age" />
Click me ya bastard
</p>
<div class="myPopover hidden">
<h3>Hi Sten this is the div</h3>
</div>
Bacially we trick the hover state when we click the anchor tag (fireTip class), the input tag that holds the tooltip has a mouseover state invoked, thus firing the tooltip and keeping it up as long as we wish... The CSS is on the fiddle...
Anyways, here is a fiddle to see the interaction a bit better:
http://jsfiddle.net/AK7pv/
This version ensures the tooltip stays visible long enough for user to move mouse over tooltip and stays visible until mouseout. Handy for allowing the user to select some text from tooltip.
$(document).on("click", ".tooltip", function() {
$(this).tooltip(
{
items: ".tooltip",
content: function(){
return $(this).data('description');
},
close: function( event, ui ) {
var me = this;
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function(){
$(this).remove();
});
}
);
ui.tooltip.on("remove", function(){
$(me).tooltip("destroy");
});
},
}
);
$(this).tooltip("open");
});
HTML
Test
Sample: http://jsfiddle.net/A44EB/123/
Update Mladen Adamovic answer has one drawback. It work only once. Then tooltip is disabled. To make it work each time the code should be supplement with enabling tool tip on click.
$('#tt').on({
"click": function() {
$(this).tooltip({ items: "#tt", content: "Displaying on click"});
$(this).tooltip("enable"); // this line added
$(this).tooltip("open");
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
jsfiddle
http://jsfiddle.net/bh4ctmuj/225/
This may help.
<!-- HTML -->
Click me to see Tooltip
<!-- Jquery code-->
$('a').tooltip({
disabled: true,
close: function( event, ui ) { $(this).tooltip('disable'); }
});
$('a').on('click', function () {
$(this).tooltip('enable').tooltip('open');
});
I want to display an jquery UI dialog when a user focues a certain input box. It works the problem is, that the input box won't get the focus after closing the dialog, meaning user clicks into input box, dialog is opened. User closes dialog -> input box does not have focus.
The only way to actually focus the input box is ti click into it a second time while the dialog is already displayed. This is pretty annoying. i would like the inputbox to have focus after closing the dialog.
$(function() {
$( "#identifiersDialog" ).dialog({autoOpen: false});
});
$('#identifiers').focus(function(event) {
$( "#identifiersDialog" ).dialog('open');
});
You could use
$(function(){
InitiliseInput();
});
function InitiliseInput(){
$('#identifiers').bind('focus', function() {
$('#identifiersDialog').dialog({ close: function() {
$('#identifiers').unbind('focus').focus().blur(function(){ InitiliseInput()});
}});
});
}
Working example here http://jsfiddle.net/RCBQs/1/
The blur function then resets the dialog once the focus has moved away from the input, so that refocusing opens the dialog again.
This should help.
$(function() {
$( "#identifiersDialog" ).dialog({autoOpen: false, close: function() { $('#identifiers').focus() }});
});
$('#identifiers').focus(function(event) {
$( "#identifiersDialog" ).dialog('open');
});
I am using a jQuery-UI dialog box that has three fields on it together with an 'Update' and 'Cancel' buttons.
When the dialog is opened, I would like to have the focus set to the first field in that dialog, say it was calle 'ID' but from the looks of it, the focus is set to my 'Cancel' button.
How can I override this and have the focus set to 'ID' field when opened?
here the open function is called after the dialog box open happens.
$( ".selector" ).dialog({
open: function(event, ui) {
$('#yourText').focus();
}
});
To set default focus on cancel button pass the index of the button. The default focus is on first button ie index 0. To set focus on second element you can use following code
$(this).parents('.ui-dialog-buttonpane button:eq(1)').focus();
Source code to create a dialog with two buttons and set focus on a button
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog" ).dialog({
modal: true,
minHeight:200,
minWidth:190,
buttons: {
Delete: function() {
// do something
},
Cancel: function() {
$( this ).dialog("close");
}
}
});
//to set focus on cancel button
$(this).parents('.ui-dialog-buttonpane button:eq(1)').focus();
});
I have the following script using the jQueryUI autocomplete widget. It calls some function whenever a menu item in the selection box is being selected:
<script type="text/javascript">
$(function() {
$( "#tags" ).autocomplete({
source: [ "ActionScript", "AppleScript", "Asp"],
select: function() {
console.log("Element has been selected");
}
});
});
</script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
This works nicely. But I need this method in a multiple of instances of the autocomplete widget, so I prefer extending the autocomplete widget using the widget factory.
This works nicely whenever I want to override methods of the autocomplete plugin:
$.widget("ui.myAutocomplete", $.extend({}, $.ui.autocomplete.prototype, {
search: function( value, event ) {
// this WORKS!
console.log('overriding autocomplete.search')
return $.ui.autocomplete.prototype.search.apply(this, arguments);
}
}));
However, I have no clue how to do that for the underlying menu widget.
I tried to override the _init method and binding a function to the select event. However this does not work as I don't know how to access the bind method of the menu-widget (or this menu widget is not yet there at this point during runtime)
$.widget("ui.myAutocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_init: function() {
// this does NOT work.
this.bind('select', function() { console.log('item has been selected') })
return $.ui.autocomplete.prototype._init.apply(this, arguments);
}
}));
I think you're close; you should be overriding _create instead of _init:
$.widget("ui.myAutocomplete", $.extend({}, $.ui.autocomplete.prototype, {
_create: function() {
// call autocomplete's default create method:
$.ui.autocomplete.prototype._create.apply(this, arguments);
// this.element is the element the widget was invoked with
this.element.bind("autocompleteselect", this._select);
},
_select: function(event, ui) {
// Code to be executed upon every select.
}
}));
Usage:
$("input").myAutocomplete({
/* snip */
});
Here's a working example: http://jsfiddle.net/EWsS4/