I have a button at which when the user hovers over I display a tooltip.
function createTooltp(toolTipId) {
tooTip = new Ext.ToolTip({
target: toolTipId, //The button
anchor: 'left',
autoWidth: true,
autoHeight: true,
closable: false,
autoHide: true,
autoHeight : true,
closable: false,
contentEl: 'content-tip'
});
tooTip.show();
}
Now when the user hovers away obviously it would hide since I mentioned autoHide:true,.
But when the user hovers to the actual tooltip which is displayed. I want that tooltip to be there till the mouse is on top of it and hide when the mouse is not on the target(button) or on the actual tooltip. How could this be achieved?
Don't rely on Ext to hide the tooltip for you (autoHide: false). Instead, start a delayed hide using window.setTimeout when you leave the tooltip target and when you leave the tooltip, but cancel the hide if you hover back over the tooltip. That way, it will only hide when you're not on the tooltip after 500ms.
var toolTip = Ext.create('Ext.tip.ToolTip', {
target: targetId,
html: 'ToolTip',
anchor: 'left',
dismissDelay: 0,
showDelay: 0,
autoHide: false
});
toolTip.on('show', function(){
var timeout;
toolTip.getEl().on('mouseout', function(){
timeout = window.setTimeout(function(){
toolTip.hide();
}, 500);
});
toolTip.getEl().on('mouseover', function(){
window.clearTimeout(timeout);
});
Ext.get(targetId).on('mouseover', function(){
window.clearTimeout(timeout);
});
Ext.get(targetId).on('mouseout', function(){
timeout = window.setTimeout(function(){
toolTip.hide();
}, 500);
});
});
My two cents: I had task to add same behavior for tooltips inside grid panel columns, and it doesn't have way to pass config or tooltips inside it (or maybe I missed it in the docs and while reading sources, please comment if I had). So I solved it by adding small override to my app
Ext.define('App.overrides.ToolTip', {
override: 'Ext.tip.ToolTip',
dismissDelay: 0
});
Try this:
function createTooltp(toolTipId) {
var tooTip = new Ext.ToolTip({
target: toolTipId, // The button
anchor: 'left',
showDelay: 0,
hideDelay: 0,
trackMouse: true
});
tooTip.show();
}
Learn more from this reference: ToolTip
I did it with a work around (jQuery). And used Span and CSS to create my own tooltip.
Related
I am trying to instantiate a pdf viewer to be defaulted to FitToWidth but I cannot find a way to start it out with that option selected,
I tried setting its defaultPageSize settings by setting width with auto but I get the page size to be Automatic Width, is there another value that is set on this property or any other property to initiate the viewer with FitToWidth?
I got help from the Telerik Team and they provided the following answer, I will share it with the community,
it seems that you can set the default zoom scale only on the first render like so
<script>
var firstRender = true;
$(document).ready(function () {
var vr= $("#pdfViewer").kendoPDFViewer({
pdfjsProcessing: {
file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
},
width: "100%",
height: 1200,
render: function(e) {
if (firstRender) {
e.sender.toolbar.zoom.combobox.value("fitToWidth");
e.sender.toolbar.zoom.combobox.trigger("change");
firstRender = false;
}
}
}).getKendoPDFViewer();
});
</script>
I use this example under jsfiddle.net, to build a drag&drop system and if I create a click event on shirts images (draggables), this event doesn't work.
How to combine drag and click events to the draggables elements with Mootools?
window.addEvent('domready', function(){
$$('.item').addEvent('mousedown', function(event){
//event.stop();
// `this` refers to the element with the .item class
var shirt = this;
var clone = shirt.clone().setStyles(shirt.getCoordinates()).setStyles({
opacity: 0.7,
position: 'absolute'
}).inject(document.body);
var drag = new Drag.Move(clone, {
droppables: $('cart'),
onDrop: function(dragging, cart){
dragging.destroy();
if (cart != null){
shirt.clone().inject(cart);
cart.highlight('#7389AE', '#FFF');
}
},
onEnter: function(dragging, cart){
cart.tween('background-color', '#98B5C1');
},
onLeave: function(dragging, cart){
cart.tween('background-color', '#FFF');
},
onCancel: function(dragging){
dragging.destroy();
}
});
drag.start(event);
});
// This doesn't work
$$('.item').addEvent('click', function(event){
console.log('click');
});
});
the event.stop(); will preventDefault and stopPropagation so the mousedown won't bubble into click.
furthermore, it clones and applies stuff to a new element and somewheere along the lines, mootools-more will stop the event once again.
so replace the event.stop with this.fireEvent('click', event); to bubble it up manually - though strictly speaking, a click is on mouseup and you kind of need to wait for that instead.
http://jsfiddle.net/dimitar/qsjj1jpe/4/
So. I'm having some issues where my panel is not always displaying (though it seems the rest of the add-on is still working). I'm trying to write some logs to find out why this is happening, but there are some things I don't really understand.
To experiment I made a simple add-on as such
// main.js
const panels = require("panel");
const {Cc, Ci} = require("chrome");
const widgets = require("widget");
var my_widget = widgets.Widget({
id: "google-link",
label: "Click me",
contentURL: "http://google.com/favicon.ico",
width: 20,
height: 20,
panel: my_panel,
onClick: function() {
my_panel.show();
console.log('Panel displaying? ' + my_panel.isShowing);
}
});
var my_panel = panels.Panel({
width: 500,
height: 500,
contentURL: "http://google.com",
});
my_panel.port.on("show", function() {
console.log('Panel emitted show');
});
What happens is firstly: the isShowing is always false, even when I clearly see the panel. And the show event never seems to get triggered (I'm really looking to catch the error event, but this is just to find events in the first place).
The fine print: This is using SDK 1.6.1 and Firefox 10ESR. Perhaps this is something that is solved in later versions, I don't know. Either way I'd like to know if I'm thinking right here.
Your code is not quite right, see this variation:
// main.js
const panels = require("panel");
const {Cc, Ci} = require("chrome");
const widgets = require("widget");
var my_widget = widgets.Widget({
id: "google-link",
label: "Click me",
contentURL: "http://google.com/favicon.ico",
width: 20,
height: 20,
panel: my_panel,
onClick: function() {
my_panel.show();
// this is false because the panel is shown asynchronously
console.log('Panel displaying? ' + my_panel.isShowing);
}
});
var my_panel = panels.Panel({
width: 500,
height: 500,
contentURL: "http://google.com",
});
// there is no port property on panel
my_panel.on("show", function() {
console.log('Panel emitted show');
// this is true...
console.log('Panel displaying? ' + my_panel.isShowing);
});
The code is here:
https://builder.addons.mozilla.org/package/161691/latest/
I'm using the latest version of jqPlot (v1.0.0b2_r1012) to plot my histograms.
To catch a single click event I'm using 'jqplotDataClick' as follows:
$('#myHistogram').bind('jqplotDataClick', function(ev, seriesIndex, pointIndex, data) {
// Do something
});
Is it possible to catch a double click event instead?
Unfortunately I've been unable to find such event in jqplot.barRenderer.js.
Update:
I've made the following two changes to my jqplot.barRenderer.js file:
Register jqplotDblClick event
$.jqplot.BarRenderer.prototype.init = function(options, plot) {
...
...
plot.postInitHooks.addOnce(postInit);
plot.postDrawHooks.addOnce(postPlotDraw);
plot.eventListenerHooks.addOnce('jqplotMouseMove', handleMove);
plot.eventListenerHooks.addOnce('jqplotMouseDown', handleMouseDown);
plot.eventListenerHooks.addOnce('jqplotMouseUp', handleMouseUp);
plot.eventListenerHooks.addOnce('jqplotClick', handleClick);
plot.eventListenerHooks.addOnce('jqplotDblClick', handleDblClick);
//$.jqplot.eventListenerHooks.push(['jqplotDblClick', handleDblClick]); I've also tried this but without any luck
plot.eventListenerHooks.addOnce('jqplotRightClick', handleRightClick);
};
Implement handleDblClick function
function handleDblClick(ev, gridpos, datapos, neighbor, plot) {
if (neighbor) {
var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
var evt = jQuery.Event('jqplotDataDblClick');
evt.pageX = ev.pageX;
evt.pageY = ev.pageY;
plot.target.trigger(evt, ins);
}
}
And then I bind jqplotDataDblClick in my JavaScript file as follows:
$('#myHistogram').bind('jqplotDataDblClick', function(ev, seriesIndex, pointIndex, data) {
alert("Ohayo!"); // Good morning in Japanese
});
However the double click event doensn't get fired when I double click on one of my vertical bar graphs. I've tried binding "jqplotRightClick" but that doesn't work either. If I use "jqplotClick" then everything works as expected.
Does anyone know what I am doing wrong here?
Update 2:
RE: I've tried binding "jqplotRightClick" but that doesn't work either. (see above)
I've just found out that in order to catch this event you have to set the following:
captureRightClick: true,
See: How to capture right click event
From the "cursor" plugin, they handle it like this:
if (c.dblClickReset) {
$.jqplot.eventListenerHooks.push(['jqplotDblClick', handleDblClick]);
}
EDITS
I can capture the double click by just binding the 'jqplotDblClick'. I did not have to push the event. Sorry for the misdirection, my answer above meant to show that the event already existed. See working fiddle here. The only additional thing I added was CSS rules to make the div un-selectable since a double-click will select it.
HTML:
<div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px; -moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;"></div>
JS:
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var s1 = [2, 6, 7, 10];
var ticks = ['a', 'b', 'c', 'd'];
plot1 = $.jqplot('chart1', [s1], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
});
$('#chart1').bind('jqplotDblClick',
function (ev, seriesIndex, pointIndex, data) {
alert('hi');
});
});
http://jsfiddle.net/hL6rT/1/
I've created div with a absolute positioned image inside it the idea is to fade the image in and out like a pulse. All went well until IE8 showed up.
See the link for code. Works fine in FF, that is to say the div fades in and out in a continuous loop. But in IE8 it fades in and out once and then stops.
Works fine in FF & IE8 with mootools 1.2.5, but not 1.3 or 1.3 Compatibility Mode.
For some bizarre reason if the alert after 'fadeIn' is included in the onComplete the function will display the alert and the second alert in the 'fadeOut' onComplete, but still NOT fade the div.
Help?
it is probably easier to do just the tween on the element via the oncomplete to make a blink effect:
http://jsfiddle.net/hL6rT/2/
var fadeImg = document.id('lucy');
fadeImg.set("tween", {
duration: 2000,
transition: Fx.Transitions.Quint.easeIn,
onComplete: function() {
this.element.fade(this.element.getStyle("opacity") == 0 ? 1 : 0);
}
}).fade(0);
// how you can cancel it
document.id("stop").addEvent("click", function(e) {
e.stop();
fadeImg.get("tween").cancel(); // this cancels it.
});
to fix your version:
http://jsfiddle.net/hL6rT/4/
works fine if you set the initial value of opacity to 0
var fadeImg = document.id('lucy').setStyle("opacity", 0);
var fadeIn = function() {
var inDiv = new Fx.Morph(fadeImg, {
link: 'cancel',
duration: 2000,
transition: Fx.Transitions.Quint.easeIn,
onComplete: function() {
fadeOut();
//alert('FadeIn Complete');
}
}).start({
'opacity': ['0', '1']
});
};
var fadeOut = function() {
var outDiv = new Fx.Morph(fadeImg, {
link: 'cancel',
duration: 2000,
transition: Fx.Transitions.Quint.easeOut,
onComplete: function() {
fadeIn();
//alert(FadeOut Complete!');
}
}).start({
'opacity': ['1', '0']
});
};
fadeIn();
update IE does not seem to consistently like this particular transition being chained. you may need to remove it and use the default one.