Using Summernote in airMode, the popover toolbar launches on a mouseUp event.
Is there a way to make it launch on other events (specifically, mouseEnter)?
This is obviously a hack, and risks being broken on new releases, but it does the job. Put this code in the Summernote onInit event:
callbacks: {
onInit: function () {
let summernote = $(this).data("summernote"); // Get the summernote data object
$(summernote.layoutInfo.editable).mouseenter(function (ev) {
summernote.modules.airPopover.$popover.css({
display: 'block', // Set the css to display the popover
left: ev.clientX - 20, // Offsets to position popover relative to pointer
top: ev.clientY + 10
});
});
$(summernote.layoutInfo.editable).mouseleave(function () {
setTimeout(function () {
// Delay so that moving over popover doesn't immediately close it
summernote.modules.airPopover.hide(); },1000);
});
}
}
}
Does the job, but I'd prefer something actually supported by the library.
Related
I have a slick-carousel that a have some accordion tabs inside.
I need to be able to react to the bootstrap accordion collapse/expansion and adjust the height of the carousel.
It adjusts with the adaptive height correctly but only once done a full rotation.
How would I go about this.
so have established this so far. I are actually using velocityjs for the accordion.
if ($(this).hasClass('active')) {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', false).velocity('slideUp', {
easing: 'easeOutQuad'
}, { complete: resize_slider() });
$(this).attr('aria-expanded', false).removeClass('active');
} else {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', true).velocity('slideDown', {
easing: 'easeOutQuad'
}, { complete: resize_slider() });
$(this).attr('aria-expanded', true).addClass('active');
}
function resize_slider() {
var sliderAdaptiveHeight = function () {
var heights = [];
let items = $('.slick-active')
items.each(function () {
heights.push($(this).height());
});
$('.slick-list').height(Math.max.apply(null, heights));
}
sliderAdaptiveHeight();
$('.slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {
sliderAdaptiveHeight();
});
}
the resize_slider function is being triggered however the height adjustments are back to front.
ie when expanding the slick slider height retracts and when collapsing the slick slider expands.
any thoughts
I seem to be encountering issues when attempting to scroll between a regular scrollify panel and interstitialSection. I need to add the elements within the interstitialSection to the standardScrollElements as they need to be scrollable.
When you scroll quickly on a desktop there is flickering and when using a mobile it exhibits other issues like not enabling scrollify on scrolling. When you clear the 'StandardScrollElements' it stops the flickering but doesn't allow scrolling of the content on the slide mainly on mobile.
$.scrollify({
section: ".slide",
scrollbars: true,
easing: "easeOutExpo",
scrollSpeed: 800,
updateHash: false,
standardScrollElements: ".footer-content,.news",
interstitialSection: ".slide-content,.clients,footer",
before: function () {
},
after: function (i) {
$.scrollify.current().find("[data-animated]").each(function () {
var animClass = $(this).attr("data-animated");
$(this).addClass("animated");
$(this).addClass(animClass);
});
},
afterRender: function () {
$.scrollify.current().find("[data-animated]").each(function () {
var animClass = $(this).attr("data-animated");
$(this).addClass("animated");
$(this).addClass(animClass);
});
}
});
I need to have a pie chart that will have disable tooltip and another that will have a tooltip enabled. I have tried to enable the tooltip per series but it didn't work.
{
category: "Asia",
value: 53.8,
color: "#9de219",
tooltip: {
visible: true
}
}
Here is the dojo
http://dojo.telerik.com/OKOLE
I have made it through series hover event.
seriesHover: e => {
if(e.category == 'disabledCategory') {
e.preventDefault();
}
}
I want to know the coordinates of the mouse pointer when I r-click on CKEditor
I added a few items to the context menu of CKEditor.
i want when I select a certain item, the other a notice appeared also in place i r_click
$(document).ready(function () {
var ck = CKEDITOR.replace('txtNoidungBR', 'vi');
var $DK = $('#divAddDK');
/*Thêm điều kiện*/
ck.on('instanceReady', function (e) {
ck.addCommand("addDK", {
exec: function (ck) {
/*I want to set coordinates to $DK = coordinates of context menu when i r-click*/
$DK.css({ 'left': 600, 'top': 400 }).toggle(300);
}
});
ck.addMenuGroup('BRDT');
var addDK = {
label: 'Thêm điều kiện',
command: 'addDK',
group: 'BRDT'
};
ck.contextMenu.addListener(function (element, selection) {
return {
addDK: CKEDITOR.TRISTATE_OFF
};
});
ck.addMenuItems({
addDK: {
label: 'Thêm điều kiện',
command: 'addDK',
group: 'BRDT',
order: 1
}
});
});
});
help me. thaks
You'll need to track the mouse yourself, as ckeditor doesn't give you the mouse event.
See this answer for details on that:
How to get the mouse position without events (without moving the mouse)?
Iam using the waypoints plugin, but am open for others.
so far i have managed to get the div to fadeIn when iam scrolling down and its rached 30%:
element.waypoint(function(){
$(this).animate({ opacity: 1 }, 500);
},{
offset: '30%'
});
But iam not able to make it fadeout again, when its getting out of view again.
Thanks for the help.
is this a too hard question for mighty stackoverflow? ...
You can do different things depending on the direction you are scrolling when you cross that waypoint trigger spot using the direction parameter that is passed to the function:
element.waypont(function(direction) {
if (direction === 'down') { ... }
else { ... }
}, { offset: '30%' });
You can also create multiple waypoints with different offsets, so you can react to the element hitting different parts of the page:
element
.waypoint(function(direction) {
$(this).toggleClass('visible');
}, { offset: '10%' })
.waypoint(function(direction) {
$(this).toggleClass('visible');
}, { offset: '90%' });