I have a very simple question, which I can't find a solution.
when I use the click event; I log this.id, which return undefined when I am on a rendered HighCharts.
Why is that? How can I actually get the elementID where the chart is, so I can use functions that call that element? The chart is rendered on a div class, which is used for all the charts on my page (each with different ID obviously).
Event.target returns me a rect, which I can use to a certain extent, with document.mouseup, but I would like to learn how you actually identify the chart, fi I want to access it
For example, I would like to use fancybox, but it require an ID to work
$("#ID").fancybox();
EDIT:
I am able to open the chart using the href parameter, where I render the chart; but still; I have no clue how to identify programmatically a chart, once is rendered, in the click event.
Assuming you are using the chart click event and you want the original div container:
chart: {
events: {
click: function (event) {
var myDiv = this.container.parentElement;
}
}
},
This will return the element.
Related
I'm using react-highcharts and I'm trying to find a way to trigger an event when one of the Y-axis categories is being clicked. I'm using xrange graph.I want to get the offset of the value that was clicked. For example, if i have:
CatA
Catb
CatC
If I will click on CatB I will get 1.
I found a jquery solution, which give me the value itself. Its not a problem to get all the elements and iterate over them and found the offset myself. The solution of jquery:
$("#container .highcharts-yaxis-labels text").click(function() {
alert($(this).text());
});
I'm looking for react/react-highcarts solution for that.
Update
Thanks Kamil Kulig! Im getting trouble with the library. I import the library as
import HighchartsCustomEvents from 'highcharts-custom-events';
And nothing happned, also i added this code at componentWillMount function:
template.yAxis.events.click = function () {
alert(1);
};
I saw the docs and I didnt find any offset function, which means that sould I use jquery anyway? or do u have any idea?
Highcharts offers the custom events module that is able to handle the actions that you require.
Module reference on npm: https://www.npmjs.com/package/highcharts-custom-events
Module reference on Highcharts website: https://www.highcharts.com/products/plugin-registry/single/15/Custom-Events
Sample code:
yAxis: {
labels: {
events: {
click: function () {
// do something
}
}
}
}
I'm having trouble creating and applying a tooltip to each of the images inside a div. The text of the tooltip should be the img's id. This seems like it would be fairly simple, so there must be something I am missing, or not understanding. Here's what I'm using:
$("#myDiv img").tooltip({
content:$(this).attr('id'),
track:true
});
Additionally, these images will be replaced depending on what the user clicks — once the images are deleted (by calling .empty on the containing div), do I need to delete the tooltips, or will they be automatically deleted from memory?
Sorry for the novice question!
You're attempting to get the id of all the img elements. Use .each to parse each element separately.
$("#myDiv img").each(function(){
$this = $(this);
$this.tooltip({
content: $this.attr('id'), // $this[0].id is faster
track: true
});
});
There is no need to remove the tooltip manually; the event bindings are deleted when the element is removed from the DOM.
Try this instead:
$("#myDiv").tooltip({
items: "img",
content: function() {
var el = $(this);
return el.attr( "id" ); // $this[0].id is faster
},
track: true
});
jsFiddle Demo
Reference:
http://jqueryui.com/tooltip/#custom-content
I'm using jquery UI for my tooltips. I would like to have more than one on the same page and have them open and close on click. I found a solution for having them open on click:
http://jsfiddle.net/rjGeS/83/
(taken from this link -> jQueryUI tooltip Widget to show tooltip on Click)
What I need help with is having multiple tooltips on one page.
I tried altering the code slightly to make it work, but its just opening them all
$('#tooltip_1').click(function() {
var $this = $(this);
$(".tooltip").html(function() {
$('.ttip').css({
left: $this.position() + '20px',
top: $this.position() + '50px'
}).show()
}).fadeIn();
});
$('#tooltip_2').click(function() {
var $this = $(this);
$(".tooltip").html(function() {
$('.ttip').css({
left: $this.position() + '20px',
top: $this.position() + '50px'
}).show()
}).fadeIn();
});
The example code you've posted actually has nothing to do with jQueryUI Tooltips, I'll give a clean example instead.
You can use the open() and close() functions to show and hide tooltips programmatically. If you also need to stop the default tooltip functionality (as in, showing them on mouseover events) the easy way to do that is to use the disabled option.
Since you didn't specify if this should be click-once-show-all or not, here's a fiddle doing it for all: http://jsfiddle.net/wuL9M/ and here's a fiddle doing it individually: http://jsfiddle.net/qnYRy/
Note this line:
$(".tooltip").off("mouseleave focusout");
It disables the default closing behaviour while the tooltip is open.
If you want to partially preserve only some of the default tooltip functionality, you can use a custom flag (instead of the disabled option), or you can attach extra event handlers to tooltipopen and tooltipclose. It's all pretty well documented here.
ADD: You can use the content option to customise the tooltip with any (potentially non-static) data. eg: http://jsfiddle.net/qnYRy/1/ You can change it after initialisation with the option function:
$("#myTooltip").tooltip("option", "content", "My updated tooltip data");
$("#myTooltip").tooltip("option", "content", function() { return "My updated tooltip data"; });
For obvious reasons this would require you to set the content for each tooltip separately. Also note that it will ignore any html title attribute you may have.
I have a custom select menu (multiple) defined as follows:
<select name="DanceStyles" id="DanceStyles" multiple="multiple" data-native-menu="false">
Everything works fine except that I want to move the header's button icon over to the right AND display the Close text. (I have found some mobile users have a problem either realising what the X icon is for or they have trouble clicking it, so I want it on the right with the word 'Close' making too big to miss.) There don't seem to be any options for doing that on the select since its options apply to the select bar itself.
I have tried intercepting the create event and in there, finding the button anchor and adding a create handler for that, doing something like this (I have tried several variations, as you can see by the commenting out):
$('#search').live('pagecreate', function (event) {
$("#DanceStyles").selectmenu({
create: function (event, ui) {
$('ul#DanceStyles-menu').prev().find('a.ui-btn').button({
create: function (event, ui) {
var $btn = $(this);
$btn.attr('class', $btn.attr('class').replace('ui-btn-left', 'ui-btn-right'));
$btn.attr('class', $btn.attr('class').replace('ui-btn-icon-notext', 'ui-btn-icon-left'));
// $(this).button({ iconpos: 'right' });
// $btn.attr('class', $btn.attr('class').replace('ui-btn-icon-notext', 'ui-btn-icon-left'));
// // $btn.attr('data-iconpos', 'left');
$(this).button('refresh');
}
});
}
});
});
So I have tried resetting the button options and calling refresh (didn't work), and changing the CSS. Neither worked and I got weird formatting issues with the close icon having a line break.
Anyone know the right way to do this?
I got this to work cleanly after looking at the source code for the selectmenu plugin. It is not in fact using a button; the anchor tag is the source for the buttonMarkup plugin, which has already been created (natch) before the Create event fires.
This means that the markup has already been created. My first attempt (see my question) where I try to mangle the existing markup is too messy. It is cleaner and more reliable to remove the buttonMarkup and recreate it with my desired options. Note that the '#search' selector is the id of the JQ page-div, and '#DanceStyles' is the id of my native select element. I could see the latter being used for the id of the menu, which is why I select it first and navigate back up and down to the anchor; I couldn't see any other reliable way to get to the anchor.
$('#search').live('pagecreate', function (event) {
$("#DanceStyles").selectmenu({
create: function (event, ui) {
$('ul#DanceStyles-menu').prev().find('a.ui-btn')
.empty()
.text('Done')
.attr('class', 'ui-btn-right')
.attr("data-" + $.mobile.ns + "iconpos", '')
.attr("data-" + $.mobile.ns + "icon", '')
.attr("title", 'Done')
.buttonMarkup({ iconpos: 'left', icon: 'arrow-l' });
}
});
});
The buttonMarkup plugin uses the A element's text and class values when creating itself but the other data- attributes result from the previous buttonMarkup and have to be removed, as does the inner html that the buttonMarkup creates (child span, etc). The title attribute was not recreated, for some reason, so I set it myself.
PS If anyone knows of a better way to achieve this (buttonMarkup('remove')? for example), please let us know.
the way i achieved it was changing a bit of the jquery mobile code so that the close button always came to the right, without an icon and with the text, "Close"
not the best way i agree. but works..
I got a similar case, and I did some dirty hack about this :P
$("#DanceStyles-button").click(function() {
setTimeout(function(){
$("#DanceStyles-dialog a[role=button]").removeClass("ui-icon-delete").addClass("ui-icon-check");
$("#DanceStyles-dialog .ui-title").html("<span style='float:left;margin-left:25px' id='done'>Done</span>Dance Styles");
$("#DanceStyles-dialog .ui-title #done").click(function() {
$("#DanceStyles").selectmenu("close")
});
},1);
} );
Anyone know good sample code using jQuery UI's autocomplete widget that can autocomplete words in the middle of a text box, not just autocomplete of the word at the end only?
I'm using the jquery UI autocomplete widget for a component that supports entry of multiple tags. It's like like stack overflow's tag editor, but simpler: no fancy formatting in the autocomplete dropdown, no "tag" background images in the edit box. I started with the jQuery UI Autocomplete Multiple sample and modified it.
It's working OK, except autocomplete doesn't work for tags in the middle of a multi-tag string. For example, if I type C Fortran and then put the caret right after C and type +, I'd expect to see C++ in the autocomplete list but instead I see Fortran again.
Here's the code so far: http://jsfiddle.net/WCfyB/4/
This is the same problem described by autocomplete in middle of text (like Google Plus), but the problem in that question was simpler because he could rely on an empty # in the text to signal when to show the autocomplete. In my case, I can't just rely on the text-- I actually need to find out where the caret is and autocomplete for the word where the caret is.
I could build this myself using caret or another plugin, but was wondering if there was already a jQuery-UI-based sample online that I could use without re-inventing another wheel, especially if there are browser-specific corner cases to worry about. Ideally, it'd behave like this: whenever the user places the caret inside or at the end of a tag (where tags are always separated by 1+ spaces), autocomplete is shown for that tag. Know a good sample?
I don't know of any examples like this, but here's something that you could start with:
var availableTags = [ ... ];
function split(val) {
return val.split(/ \s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags")
.bind("keydown", function(event) {
// don't navigate away from the field on tab when selecting an item
if (event.keyCode === $.ui.keyCode.TAB
&& $(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function(request, response) {
var results = [],
selectionStart = this.element[0].selectionStart
term = extractLast(request.term.substring(0, selectionStart));
if (term.length > 0) {
results = $.ui.autocomplete.filter(availableTags, term);
}
response(results);
},
focus: function() {
return false; // prevent value inserted on focus
},
select: function(event, ui) {
var terms = split(this.value.substring(0, this.selectionStart));
terms.pop(); // remove the current input
terms.push(ui.item.value); // add the selected item
this.value =
$.trim(terms.join(" ") + this.value.substring(this.selectionStart)) + " ";
return false;
}
});
Example: http://jsfiddle.net/WCfyB/7/
The major caveat here is that the selectionStart method does not work in IE. You can replace those function calls with one of those plugins you mentioned in your question.