I'm using zoomcharts geomap in a div in my page. While I place the cursor over the map and scroll, then the map will zoom. I want to disable the zoom functionality and I want to scroll the page if I scroll while cursor is over the map.
I tried to disabled the zoom using the zoomcharts documentation below.
Interaction: {
zooming: {
enabled: false
}
}
This helps to disable the zoom only but I want the page to scroll. any idea on how to do the same?
You can do it like this:
chart = new GeoChart(options);
setTimeout(function(){
chart._impl._map.scrollWheelZoom.disable();
}, 100);
Related
I have a top 10 chart that works (using a fake group) how all other bar-charts work with cross-filter. If I select one of the things on the top 10 chart it filters all the other charts which is not what I want to have happen. I just want the chart display the chart.title text (the hover-text) while disabling its ability to be clickable.
So far I've looked into dc.js itself to see if there was a configuration for the bar-chart to get what I need and I couldn't find anything.
I've tried using this
ng-click="stopClick($event)"
$scope.stopClick = function (event) {
event.preventDefault();
event.stopPropagation();
};
That didnt do anything to the chart.
I've tried using inline css for the chart
style="pointer-events: none;"
But that disables the hover-text completely.
Any help would be greatly appreciated.
Huh, you would expect .brushOn(false) to do this, but I guess it has no effect for bar charts with ordinal x scale.
Instead, you can disable the event handler manually:
chart.on('pretransition', function(chart) {
chart.selectAll('rect.bar').on('click', null);
});
I wasn't having luck with the chosen answer but Gordon's answer to a different question did work https://stackoverflow.com/a/50702979
chart.onClick = function() {}
I am using Datatable ver 1.10, I enable the vertical scrolling. now datatable showing window default scroll style.
Is it possible to change/implement some other scrollBar on datatable scrollbar? to make it more beautiful and fancy.
I tried this solution at stackoverflow but it squeez the header.
also I want header and footer fixed position.
here is my working code
// when initialization is completed then apply scroll plugin
"fnInitComplete":function(){
$('.dataTables_scrollBody').perfectScrollbar();
},
//apply scroll on this height
"scrollY": 450,
//on paginition page 2,3.. often scroll shown, so reset it and assign it again
"fnDrawCallback": function( oSettings ) {
$('.dataTables_scrollBody').perfectScrollbar('destroy').perfectScrollbar();
},
I have a div with images scrolling throw responsive slides and next to this div I have navigation buttons to change pages.
I need that buttons to be centered vertically with the images and I have a function to do it:
function CenterArrow()
{
var posV=($("#slider1").height() - $("#navegacao").height())/2;
$("#navegacao").addClass(" visible-lg visible-md");
$("#navegacao").css('top',posV+'px');
}
$(function()
{
$("#slider1").responsiveSlides({
maxwidth: 400,
speed: 800,
timeout: 4000,
after: function(){
CenterArrow();
}
});
$("#slider1").show();
});
In the responsive slides there is an adjust of some image's height, so I need to call CenterArrow after resposive slides.
I tried to put it in the after callback, as you can see in the code above, but in the first slide the navigation buttons don't show.
I've also tried in the before callbakc, and although it shows a few seconds earlier it still doesn't show in the first slide.
Is there a ready callback, or something similar?
Thanks
Basically i have 2 instances of ckeditor on a single page. One on the left and another in the right side of the page.
The left editor uses a div rather than traditional iframe. I've done this by removing the iframe plugin and including the div editing area plugin.
The right editor loads in an iframe and but is also div based(i can use the iframe editor as well on the right if required, not an issue).
Now if the cursor/focus is on the right editor's content area then the left editor should scroll along with it. I've tried to use the code as provied by Reinmar in below url but it seems to work only with editors based on iframe on both sides. Also please note that i'm using jquery adapter for initializing the editors.
CKEDITOR how to Identify scroll event
I initialized the editor on left as below:
var editor_left = $( '#editor_left' ).ckeditor();
And below is my code for the right editor:-
var editor_right = $( '#editor_right' ).ckeditor();
editor_right.editor.on( 'contentDom', function() {
var editable = editor_right.editor.editable();
editable.attachListener( editable.getDocument(), 'scroll', function() {
alert('scroll detected');
parent.$('#left_editor_content_area').scrollTop($(this).scrollTop())
});
});
If i use the iframe based editor on the right then i'm able to get the "scroll detected" alert. But the scrollTop() function still does not work as expected
Any help will be appreciated.
The code that you mentioned is right. You got to update scrollTop property of the div-based editable with the scroll position of the window inside the iframe-based editor (JSFiddle).
var editor_div = CKEDITOR.replace( 'editor_div', {
extraPlugins: 'divarea'
} );
CKEDITOR.replace( 'editor_iframe', {
on: {
contentDom: function() {
var editable = this.editable(),
win = this.document.getWindow(),
doc = editable.getDocument();
editable.attachListener( doc, 'scroll', function( evt ) {
// Get scroll position of iframe-based editor.
var scroll = win.getScrollPosition();
// Update scroll position in the div-based editor.
editor_div.editable().$.scrollTop = scroll.y;
} );
}
}
} );
Is there any way to resize highcharts rendered image after window resize?
I have set up a fiddle file here.
events: {
load: function() {
var img = this.renderer.image('http://www.highcharts.com/demo/gfx/skies.jpg', (200),30,200,300);
img.add();
}
}
Click on the window restore down button, then you will see the image is not at the correct place. Can someone help me with this?
try using the redraw event to re-size the image
Fiddle Demo Here that should give you a start,
make sure you have a reference for the image var img; so you can remove it and added with the redraw event