I am currently in the process of writing my own hinter widget using UI widget factory. For my turnOn and turnOff methods, I want either all my hints to be turned on or off OR if i pass an array of hint id's to this methods, they will turn on or off specifically only those with the ids.
Widget looks like this at the moment:
$.widget("ui.hint", {
options: {
id: '1',
text: 'This is a hint',
position: 'top',
offset: '0%',
hide: { effect: "explode", duration: 1000 }
},
_create: function() {
var o = this.options,
el = this.element,
shell = $('<div></div>').addClass('ui-hint ui-hint- '+o.position).text(o.text).css({
position: 'absolute',
minHeight: 100,
minWidth: 100,
background: 'rgb(250, 255, 189)',
zIndex: 9999
});
el.addClass('ui-hint-target');
this._trigger('beforeShow', null, shell) //added event before placing into dom
shell.insertAfter(el);
switch (o.position) {
case 'top':
shell.position({
"my": "center bottom",
"at": "center top",
"of": el,
"offset": o.offset+" -25%",
"collision": 'none none'
});
break;
case 'bottom':
shell.position({
"my": "center top",
"at": "center bottom",
"of": el,
"offset": o.offset+" 25%",
"collision": 'none none'
});
break;
case 'left':
shell.position({
"my": "right center",
"at": "left center",
"of": el,
"offset": "-25% "+o.offset,
"collision": 'none none'
});
break;
case 'right':
shell.position({
"my": "left center",
"at": "right center",
"of": el,
"offset": "25% "+o.offset,
"collision": 'none none'
});
break;
}
},
_setOption: function(key, value) {
if (value !== undefined) {
this.options[key] = value;
this._render();
return this;
}
else {
return this.options[key];
}
},
hide: function() {
this.element.next().hide("fast");
this._trigger('afterHide', null, this.element.next());
},
show: function() {
this._trigger('beforeShow', null, this.element.next());
this.element.next().show("fast");
},
hint: function() {
return this.element.next();
}
});
My question is, how can i organize those methods? I imagine I should loop through each instance of the widget and compare the values with their id's yet i don't know how. Will appreciate any advice, thanks in advance.
I may not be understanding your question fully, but if I was you I'd use a class rather than Id's to select multiple elements. Then you can use jquery's each method you can do something like:
$('.ui-hint').each(function(i, el) {
var $myHint = $(el);
console.log('index: ', i, ' jquery el: ', $myHint);
});
Related
I want to retrieve item information when I hover the mouse over it. I tried the example of an earlier question but it doesn't work. It shows the title but not the content (Bootstrap popover over $(this) element)
[...]
demoSource.push({
name: RFInum,
desc: deadline,
values: [{
from: start,
to: end,
label: tit,
customClass: balk_kleur,
dataObj: stat
}],
var popoverContent;
$(".gantt").gantt({
source: demoSource,
navigate: "scroll",
scale: "days",
maxScale: "months",
minScale: "hours",
itemsPerPage: 20,
scrollToToday: false,
useCookie: true,
onItemClick: function(data) {
},
onItemMouseover: function(elm, data) {
popoverContent = data.detailContent;
alert(popoverContent);
},
onAddClick: function(dt, rowId) {
alert("Empty space clicked - add an item!");
},
onRender: function() {
if (window.console && typeof console.log === "function") {
console.log("chart rendered");
}
}
});
$(".gantt").popover({
selector: ".bar",
title: function _getItemText() {
return this.textContent;
},
container: '.gantt',
content: function () {
return popoverContent;
},
trigger: "hover",
placement: "auto right"
});
[...]
Using ExtJS Classic 7.3.0
Trying to animate the window while it is showing, but the title of the window is not ending up at the specifications in 'TO' config. Fiddle is here: Sencha Fiddle
If you try to drag the window by clicking on the "blue title", you will see the entire title how it should be, but thats it.
Anyone know if I need to specify something else here?
I tinkered with it a bit and found that it worked if you set the width property on the window:
width: Ext.getBody().getViewSize().width / 2,
Full code:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Window', {
id: 'win',
title: "Window",
width: Ext.getBody().getViewSize().width / 2,
html: "<h1>Hello</h1> ",
listeners: {
show: function (win) {
var el = win.getEl();
var size = Ext.getBody().getViewSize();
el.animate({
from: {
opacity: 0,
width: 0,
height: 0,
x: size.width/2,
y: size.height/2
},
to: {
opacity: 100,
width: size.width/2,
height: size.height/2,
x: size.width/4,
y: size.height/4
},
});
},
beforeclose: function (win) {
if (!win.shouldClose) {
win.getEl().fadeOut({
duration: 2000,
callback: function () {
win.shouldClose = true;
win.close();
}
});
}
return win.shouldClose ? true : false;
}
}
}).show();
}
});
width: '50%'
also seems to work.
I have the following code:
<script type="text/javascript">
function createDialog(text, id) {
return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text'>" + text + "</textarea></div>"
.dialog({
dialogClass: "dialogStyle",
title: "Edit Description",
resizable: false,
position: {
my: "right+240 top-200",
at: "center",
of: $("body"),
within: $("body")
},
height: 200,
width: 300,
modal: true,
buttons: {
"Save": function() {
var product = $(this).find('textarea [name="textarea"]').val();
$(this).dialog("close");
$("#" + id).val(product);
},
Cancel: function() {
$(this).dialog("close");
}
},
overlay: {
opacity: 0.5,
background: "black"
}
});
}
</script>
How do i incorporate a character count with max 255 characters for the textarea within the dialog box?
I've looked around for code but placing it within the function createDialog won't work and getting length variable doesn't work either when putting it inside the dialog.
Change your dialog to include a DIV for the count:
return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text'>" + text + "</textarea><div>Characters: <span class='charcount'>0</span></div></div>"
Then add the following JS:
$(document).on("keyup edit paste", ".dialog .texbox", function(e) {
var charcount = $(this).val().length;
if (charcount > 255) {
e.preventDefault();
return;
}
$(this).closest(".dialog").find(".charcount").text(charcount);
});
function createDialog(text, id) {
return $("<div class='dialog'><textarea id='textarea' class ='texbox' name='textarea' value='text' placeholder='"+text+"'></textarea><div>Characters: <span class='charcount'>0</span></div></div>")
.dialog({
dialogClass: "dialogStyle",
title: "Edit Description",
resizable: false,
position: {
my: "right+240 top-200",
at: "center",
of: $("body"),
within: $("body")
},
height: 200,
width: 300,
modal: true,
buttons: {
"Save": function() {
var product = $(this).find('textarea[name="textarea"]').val();
$(this).dialog("close");
$("#" + id).val(product);
},
Cancel: function() {
$(this).dialog("close");
}
},
overlay: {
opacity: 0.5,
background: "black"
}
});
}
$("#button").click(function() {
createDialog("This is a message", "foo");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<button id="button">Show dialog</button>
<input id="foo"/>
You would want to use delegation for this. You could do something like this:
$(document).on('input propertychange', '#textarea', function() {
var text = $('#textarea').val();
if (text.length > 255) {
$('#textarea').val(text.substring(0,255));
}
//Maybe some code to display a message to the user, or update a character count element or something?
});
I have this code.
tooltip: function() {
$(".form-item-label.info")
.append("<p title='' class='icon-info-sign info'></p>")
.tooltip({
tooltipClass: "tool",
show: null,
position: {
my: "right bottom",
at: "right top",
using: function(position, feedback) {
$(this).css({top: position.top+80, left: position.left-30});
$("<div>")
.addClass("tooltip-arrow")
.appendTo(this);
}
},
content: function() {
var msg = "<p>Some text</p>";
return msg;
}
});
});
How I can add style in my tooltip function? not from styles, but from key value like tooltipClass:"tool", show: null, position... content... STYLE: ?
There is no way to do it with default tooltip code.
You have to modify the library, you could fork tooltip.js and apply style/class attribute to tooltip element.
I use JQuery Ui Autocomplete and position the suggestion box above the input field as shown in the image below. When I use autoFocus: true I can set a focus on the first element of the list.
Now, I want that the last element of the list is in focus (i.e., the element which is the closest to the input field). How can I do that? How can I select the last element in the list?
Javascript:
$input.autocomplete({
source: someUrl,
minLength: 2,
autoFocus: true,
position: { my : "left bottom", at: "left top", collision: "none" }
}); // end autocomplete
$input.autocomplete(someUrl, {
matchContains: true, minChars: 1, scroll:true, autoFill: false, scrollHeight: 240,
formatItem: function (row, i, max, term) {
return row.display;
},
formatResult: function (row) {
return row.value;
},
displayPosition: "left"
});