i trying to add a perfectScrollBar directive to d3 library
doing something like this
svg.attr('perfectScrollBar', '')
bit its not working.
can anyone please give me example how u add directive in d3 library?
mb it helps someone. I found another solution
use new PerfectScrollBar after your div container is initialized
in my case i add it when mouse entered this container
//'this' is html div container, scrollbar is a variable to have possibility update
//PerfectScrollBar
function onMouseEnter() {
if (!scrollBar) {
scrollBar = new PerfectScrollbar(this, {
wheelPropagation: false
});
} else {
scrollBar.update();
}
}
Related
We use a DatePicker component in our project. Primefes Version 8.0.
The position of the DatePicker popup does not change after the position of the input field has changed (for example, after rotating the tablet). The problem was fixed for the Сalendar component, but we use DatePicker because:
DatePicker is designed to replace the old p:calendar component.
You can see this problem on the official website.
Here are some screenshots:
After changing the screen size, the pop-up position was not updated:
Is there any way to fix this by extending PrimeFaces.widget.Calendar with javascript?
Thank you for any help.
You can fix this right now for yourself just add this Javascript to your page or site.
Example XHTML:
<p:datePicker id="popup" widgetVar="dpPopup" value="#{calendarView.date2}" />
JavaScript to add to your page:
$(window).on('resize.datepicker', function() {
setTimeout(function () {
for (item in PrimeFaces.widgets) {
widget = PrimeFaces.widgets[item];
if (widget instanceof PrimeFaces.widget.DatePicker) {
widget.jq.datePicker('alignPanel');
}
}
}, 10);
});
Issue reported: https://github.com/primefaces/primefaces/issues/5984
Fixed for 9.0: https://github.com/primefaces/primefaces/pull/5985
I am having some trouble with elements being outside scope or something but I am not getting any errors so I am not really sure how to fix it. I've shrunk up my code below to include what is relevant.
(function(){
var zdf = {
theme : $('#zdf_theme')
};
zdf.setupPopup = function(){
zdf.loadThemes();
}
zdf.loadThemes = function() {
zdf.theme
.editableSelect({
effects: 'slide'
})
.on('select.editable-select', function(e, li) {
zdf.theme.attr("data-value", li.attr('value'));
});
});
}
}();
Hopefully I've provided enough code to identify the problem but basically everything is working up until the line
zdf.theme.attr("data-value", li.attr('value'));
It doesn't seem to select the object zdf.theme
If I replace it with the actual selector $('#zdf_theme') it works fine.
The editable select is this code base https://github.com/indrimuska/jquery-editable-select
Any input would be great!
Solution... editable select was replacing my input so I needed to redefine it after initializing the editable select.
I have implemented a simple bar chart,
ive added tooltip feature using highlighter but i am facing an issue with the same.
When i move the mouse down and exit the chart canvas the tooltip doesnt dismiss
I have tried adding
$.jqplot.eventListenerHooks.push(['jqplotMouseMove', handleMove]);
$.jqplot.eventListenerHooks.push(['jqplotMouseLeave', handleMove]);
But it doesnt work , i get the error handleMove is not defined
Here is the code fiddle for the same
https://jsfiddle.net/9j2na3L7/
I finally got this working :)
-- PROBLEM:
Mouse cursor escaping too fast from canvas, prevents event form fireing
-- SOLUTION:
First of all grab a handle of jplot object
var plotBar = $.jqplot('task_brk_bar_chart', [...
So we can use it to manipulate it on run-time.
Then we will use jqplotDataHighlight and jqplotDataUnHighlight events to change the graph properties and replot() function to apply them on fly.
$('#task_brk_bar_chart').bind('jqplotDataHighlight', function () {
plotBar.showTooltip = true;
plotBar.replot();
});
$('#task_brk_bar_chart').bind('jqplotDataUnhighlight', function () {
plotBar.showTooltip = false;
plotBar.repolot();
});
Working fiddle : https://jsfiddle.net/urahara/9j2na3L7/1/
Note: Copy your old css to override my setting, it was for testing purposes only.
Cheers!
When using tinyMCE in a jqueryUI modal dialog, I can't use the hyperlink or 'insert image' features.
Basically, after lots of searching, I've found this:
http://www.tinymce.com/develop/bugtracker_view.php?id=5917
The weird thing is that to me it seams less of a tinyMCE issue and more of a jqueryUI issue since the problem is not present when jqueryUI's modal property is set to false.
With a richer form I saw that what happens is that whenever the tinyMCE loses focus, the first element in the form gets focus even if it's not the one focused / clicked.
Does some JavaScript guru have any idea how I might be able to keep the dialog modal and make tinyMCE work?
This fixed it for me when overriding _allowInteraction would not:
$(document).on('focusin', function(e) {
if ($(event.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
I can't really take credit for it. I got it from this thread on the TinyMCE forums.
(They have moved their bugtracker to github. tinymce/issues/703 is the corresponding github issue.)
It seems there are no propper solution for this issue yet. This is kind of a hack but it really worked for me.
Every time you open the Dialog remove the text area and re add it like following,
var myDialog = $('#myDialog');
var myTextarea = myDialog.find('textarea');
var clonedTextArea = myTextarea.clone(); // create a copy before deleting from the DOM
var myTextAreaParent = myTextarea.parent(); // get the parent to add the created copy later
myTextarea.remove(); // remove the textarea
myDialog.find('.mce-container').remove(); // remove existing mce control if exists
myTextAreaParent.append(clonedTextArea); // re-add the copy
myDialog.dialog({
open: function(e1,e2){
setTimeout(function () {
// Add your tinymce creation code here
},50);
}
});
myDialog.dialog('open');
This seems to fix it for me, or at least work around it (put it somewhere in your $(document).ready()):
$.widget('ui.dialog', $.ui.dialog, {
_allowInteraction: function(event) {
return ($('.mce-panel:visible').length > 0);
}
});
I was wondering if anybody knows how I would go about detecting when the scrollbar appears inside a textarea.
I am currently using mootools for my JavaScript and I am having issues getting it to detect a scrollbar.
function has_scrollbar(elem_id)
{
const elem = document.getElementById(elem_id);
if (elem.clientHeight < elem.scrollHeight)
alert("The element has a vertical scrollbar!");
else
alert("The element doesn't have a vertical scrollbar.");
}
See this jsFiddle http://jsfiddle.net/qKNXH/
I made a jQuery "compatible" version of Tommaso Taruffis code
function resize_until_scrollbar_is_gone(selector) {
$.each($(selector), function(i, elem) {
while (elem.clientHeight < elem.scrollHeight) {
$(elem).height($(elem).height()+5);
}
});
}
It can handle multiple elements and accepts: selectors, jQuery objects, or DOM elements.
It can be called like this:
resize_until_scrollbar_is_gone('textarea');
Tommaso's solution works perfectly, even with a text area. But if the user were to type in the textarea and suddenly the textarea gave itself a scrollbar, your javascript wouldn't know or be triggered.So you might want to add something like
onKeyUp='has_scrollbar("textareaID")'
For React I've found https://github.com/andreypopp/react-textarea-autosize
import Textarea from 'react-textarea-autosize';
...
<Textarea maxRows={3} />