We Keep Coding

how to add directive to d3 library in angular

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();
}
}

FullCalendar not rerendering correctly after being hidden

Need advice on this weird bug. I can't really explain it well, but here's an image.
What is supposed to happen is that when the calendar is shown, those stripes denote that the user is unable to add any events unless they fill in the Location and Practitioner fields first.
FullCalendar is able to get the events but I have to resize the page to a smaller width for the events to show up correctly. After you resize the calendar works fine.
The cause of this seems to be because the parent div is hidden initially and after a button is pressed the calendar is shown.
The code looks like this:
HTML:
<button v-on:click="renderCalendar('new')">Show Calendar</button>
<div v-show="calendar_mode !== null">
<FullCalendar ref="fullCalendar" defaultView="timeGridWeek" ....></FullCalendar>
</div>
JS:
renderCalendar(type) {
this.calendar_mode = type;
this.$nextTick(() => {
console.log("rerendering")
let calendarApi = this.$refs.fullCalendar.getApi()
calendarApi.render();
calendarApi.rerenderEvents()
});
},
I've thought of using 'visibility' instead but the parent of this component also uses display:none;
Any help with this would be much appreciated!

Prevent position absolute element from sticking inside scrollable div

Having this issue with multiple items (e.g. a color picker, date picker, and a time picker) where when they pop out and are thus positioned absolute relative to the input, if a user scrolls the newly spawned element also moves with it.
Based on the nature of most plugins (all major bootstrap plugins I've noticed do this) I'm trying to think of a way to target and keep these elements fixed relative to their original location without hacking every plugin if possible.
Below is an example of the issue in which I utilized the bootstrap datepicker. Click on input to spawn datepicker and then scroll and notice the datepicker staying relative to the screen not the input.
Link to JSFiddle: http://jsfiddle.net/GuJR6/1/
Thanks!
.container {
margin-top: 15px;
height:400px;
overflow-y: scroll;
}
.scrolling-content {
height:1000px;
}
<div class="container">
<div class="scrolling-content">
<div class="well text-center">
<input type="text" class="datetimepicker" readonly>
</div>
</div>
</div>
$(".datetimepicker").datetimepicker({format: 'yyyy-mm-dd hh:ii'});

I just forked bootstrap-datetimepicker and added the container option mention by Jan Peapke. You can use it like this:
$(selector).datetimepicker({ container: nativeDOMElement });
$(selector).datetimepicker({ container: jQueryObject });
$(selector).datetimepicker({ container: jQuerySelector });
This allows you to solve your problem:
In your css:
.scrolling-content {
position: relative;
}
Compare: CSS-Tricks
js
$(".datetimepicker").datetimepicker({
format: 'yyyy-mm-dd hh:ii',
container: '.scrolling-content'
});
Fiddle
http://jsfiddle.net/marionebl/GuJR6/2/
The first input in the fiddle applies the explained fix for your issue. The second should behave like before.
Related pull request
https://github.com/smalot/bootstrap-datetimepicker/pull/215

I'm afraid the problem lies with the bootstrap datetimepicker itself.
Instead of attaching it to the same container as the input, it is attached to the body.
I looked up the documentation to see if there is an option to set the parent, but I'm afraid there is not.
As a solution you could try another framework, like jQueryUI or this plugin.
You could also try to correct the position of the picker manually by attaching a click handler to the input field that removes the datepicker from the body, adds it to the content of the scrollcontainer and uses the events mouse coordinates to position it correctly inside the container. Seems like a lot of hassle though. :)
regards,
J

$('YOURCLASSNAME').on('scroll', function () {
var $this = $('.input-group.date');
$this.datepicker('place');
});
Add above code before
Datepicker.prototype = {...}
This is the solution. and works fine on all devices and screen sizes

Even i have been facing this issue.
Found out a solution to this By adding var t;
$('YOURCLASSNAME').on('scroll', function () {
var $this = $('.input-group.date');
window.clearTimeout(t);
t = window.setTimeout(function () {
$this.datepicker('place');
}, 50)
});
Add above code after if (showFocus) this.show();
in this block
var Datepicker = function (element, options) {....} of bootstrap-datepicker.js plugin

bootstrap-datepicker does not scroll when scrolling the modal

I am using bootstrap-datepicker and would like to show the date-picker on the modal of bootstrap 2. The problem I got is the date-picker is not scrolling accordingly when scrolling the modal, it is still remained.
The code:
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Launch Modal</button>
<div id="myModal" class="modal hide fade" style="height: 400px; overflow: scroll">
<div style="height:300px"></div>
<div>Choose Date:
<input class="calendar" />
</div>
<div style="height:300px"></div>
</div>
and javascript:
var datePicker = $(".calendar").datepicker({});
The jsfiddler: http://jsfiddle.net/csrA5/
Is there any solution to make it scroll when scrolling the modal?

There is option datepicker('place') to update position . I have updated jsfiddle
var datePicker = $(".calendar").datepicker({});
var t ;
$( document ).on(
'DOMMouseScroll mousewheel scroll',
'#myModal',
function(){
window.clearTimeout( t );
t = window.setTimeout( function(){
$('.calendar').datepicker('place')
}, 100 );
}
);

Here is another way using jQuery
var checkout = $(".calendar").datepicker({});
$( "#myModal" ).scroll(function() {
$('.calendar').datepicker('place')
});

Try to add the event scroll in bootstrap-datepicker.js, in function "Datepicker.prototype"
[$(window), {
resize: $.proxy(this.place, this),
scroll: $.proxy(this.place, this)
}]

I dont know why, but positioning is based on scrolling so you need to find this code in bootstrap-datepicker.js
scrollTop = $(this.o.container).scrollTop();
and rewrite it to
scrollTop = 0;
This helped me, i hope it will help another people.

Solution provided by rab works but still not perfect as the datepicker flickers on scroll of bootstrap modal. So I used the jquery's scroll event to achieve smooth position change of datepicker.
Here's my code:
$( document ).scroll(function(){
$('#modal .datepicker').datepicker('place'); //#modal is the id of the modal
});

I too faced the same issue while using bootstrap datepicker in my project. I used an alternate method where in i created a hidden transparent layer inside the datepicker template inside bootstrap-datepicker.js (with classname 'hidden-layer-datepicker') and gave fixed position and occupying full height and width of the html.
DPGlobal.template = '<div class="datepicker">'+ '<span class="hidden-layer-datepicker"></span><div class="datepicker-days">
Now when the datepicker modal pops up, the newly created layer will occupy the entire page width and height and when the user scrolls since the modal is appended to body, the datepicker modal too scrolls with it. With the introduction of the new layer, the inner scroll of the container in which the datepicker input field is present, will be negated while the modal is open.
One more thing to do is to update the datepicker modal closing event when clicking on the hidden layer and that is done using the below code inside bootstrap-datepicker.js.
// Clicked outside the datepicker, hide it
if (!(
this.element.is(e.target) ||
(this.picker.find(e.target).length && e.target.className != "hidden-layer-datepicker") ||
this.picker.is(e.target) ||
this.picker.find(e.target).length
)){
this.hide();
}

I ran into this problem aswell with Stefan Petre's version of Bootstrap-datepicker (https://www.eyecon.ro/bootstrap-datepicker), the issue is the Datepicker element is attached to the body which means it will scroll with the body, fine in most cases but when you have a scrollable modal you need to attach the Datepicker to the scrollable modal's div instead, so my fix was to change Stefan's bootstrap-datepicker.js as follows -
line 28, change
.appendTo('body')
to
.appendTo(element.offsetParent)
and line 153, change
var offset = this.component ? this.component.offset() : this.element.offset();
to
var offset = this.component ? this.component.position() : this.element.position();
Early tests shows it scrolls perfectly.
In addition you may need to change the z-order of the Datepicker element to make it sit above the modal (this was my initial fix which did not deal with scrolling, I have not backed this change out yet so dont know if its still needed)
I haven'y checked but I suspect the Github version of Bootstrap-datepicker.js is doing the same thing (the sourcecode is much different to what I have from Stefan though)

TinyMCE opened in jqueryUI modal dialog

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);
}
});