I'm using the Fancybox JQuery plugin, but am coming across an issue because of my html and body CSS properties. Currently, the overflow-y property is set to scroll in an attempt to hide jittery animations that adjust the page's length.
Because Fancybox is invoking a second HTML element (I think), a second scroll bar appears when it is called, which again, causes a jittery animation or effect.
I'm trying to use the beforeShow and beforeClose callbacks of Fancybox in order to fix this, and it seems to be effective in some regards.
The beforeShow callback works seamlessly, in that when Fancybox is called, no second scrollbar appears. The beforeClose callback, however, does work in a sense that the original scrolling properties are returned, but there is a small 'blip' that occurs causing the screen to jitter and all of the body's elements to resize/reshape as if there was a second scrollbar to begin with.
I'm not sure why this is occurring, because technically there is no second scrollbar, but closing Fancybox acts as if there was. Are there CSS rules I can modify, or different callbacks to prevent this?
My Fancybox script:
jQuery('.fancyboox').fancybox({
fitToView : false,
width : '90%',
height : '90%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none',
beforeShow : function() {
$('body, html').css('overflowY','hidden');
},
afterClose : function() {
$('body, html').css('overflowY','auto');
}
});
A demo that emulates the same effect - http://jsfiddle.net/NVHWw/ - If you'll notice, the second scrollbar appears then disappears very quickly upon closing the lightbox.
Many thanks, SO. Very appreciated.
Just add the helpers API option to disable the overlay lock like :
helpers: {
overlay: {
locked: false
}
}
... no need of beforeShow and/or afterClose callbacks.
See JSFIDDLE
Related
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'm using the Cytoscape Qtip extension to display qtips when you click nodes.
Usually you can prevent qtips from hiding when with the hide: false option. When this is used, you can still hide the qtips if it has a button.
However, when using cytoscape, this appears to not work. When clicking else where, a hide event will be triggered.
cy.elements().qtip({
content: function(event, api){
api.set('content.button', true);
return 'Example qTip on ele ' + this.id();
},
position: {
my: 'top center',
at: 'bottom center'
},
hide: false,
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
events: {
hide: function(event, api){
console.log(event);
}
}
});
I can prevent the hide event from following through with event.preventDefault(), but this will also stop the the close button from hiding the event, which is a bit messy.
Any idea while it's behaving this way?
Here's the quick and dirty to make this work (closes on button close only) if you need it:
events:{
hide: function(event, api){
if(event.originalEvent.target.parentElement.parentElement.id != this[0].id){
event.preventDefault();
}
}
Explanation:
Any mouse clicks will trigger a hide event all visible qtips.
We look at target of that mouse click (event.originalEvent.target.parentElement.parentElement.id) to see it close box of the qtip that is currently try to close. If it's not then we preventDefault().
This is potentially pretty bed performance wise, because it run these preventDefault() for every open qtip on every mouse click.
Remember that because this wraps Qtip on non-DOM elements, bindings to Cytoscape graph elements must be made. These bindings are outside of the DOM and outside of Qtip's control (for example, the hide case).
Did you try setting the hide event to the empty string ""?
Cleanest solution I've found is to give a garbage event for the hide event.
Using null, false or "" all don't seem to work.
hide: {
event: "asdf" //garbage event to allow hiding on close button click only
},
I have a Kendo ui chart which displays a column chart from a dynamic data source. But occassionally, the chart opens half the size of the available space. When I click on some links or change the date, it resizes itself. Any idea why its causing it?
In the datasource change event, its showing the container div's width as 0 when it shows this behaviour. I can give more details if needed
I tried the refresh method as given in one of the answers but its not of help
This happens generally when you open a chart in a animated window before it is finished expanding.
My suggestion is to redraw the chart when you are sure everything is loaded and fully opened.
$("#myChart").data("kendoChart").redraw();
If you have not disabled animations you may want to do that before this and re-enable them after.
$("#myChart").data("kendoChart").options.transitions = false;
When you have got all the necessary data in the controller you can call a Javascript CallBack function in which you can set the transition to false and then redraw the chart and set transition to true, also you can hide the chart by default and make it visible on Javascript CallBack function
Try this
var chart=$("#chart").data("kendoChart");
//to check the chart exist or not if exist then redraw it..
if(chart)
{
chart.redraw();
}
Thanks
This is what I using for my charts:
if($("#areaChart").data("kendoChart")) {
$("#areaChart svg").width(Number($('.k-content').width()));
$("#areaChart svg").height(Number($('.k-content').height()));
$("#areaChart").data("kendoChart").refresh();
}
Taken from here
Have you checked the resize() Method?
I fixed it by adding a small delay after calling the CreateChart() function as below:
CreateChart(this.id, this.id + " this week", "week", null);
sleep(1000);
its working fine now
$("#divSensingData").kendoChart({
chartArea: {
width: 900,
height: 500
},
i did face same problem after resize kendo chart.
$(window).resize(function () { $("#chart").data("kendoChart").refresh(); });
it's working
I'm using Qooxdoo 3.0.1 in a standalone application, and need to change the tooltip "hide" timeout for tooltips on a qx.ui.table.Table header. Since the hideTimeout property of Tooltip says it is themable I figured I'd modify the Appearance theme (created by create-application.py like this:
qx.Theme.define("projrep.theme.Appearance", {
extend : qx.theme.modern.Appearance,
appearances :
{
"tooltip" : // from "AppearanceID" for Tooltip
{
base : true,
style : function(states, styles)
{
return { hideTimeout : 10000 };
}
}
}
});
The "style" method gets called, so I know the theme is being used, but tooltips still show for 4 seconds, not ten. There aren't any warnings on the console... any suggestions? Thanks!
Ok, after restarting the browser the tooltips now stay up for 10 seconds... I guess it was a cache problem. Sorry about that, the given code seems to work to change tooltip hide times globally using a theme.
I have an application. In a button clicked I tried to open a Kendo modal window. It's opening. My application is in one domain and the content of the Kendo window is from another domain. Now I want to close the modal window with a button which is inside the Kendo window. Here the issue begins. I cannot close the modal window. I searched using Google it but did not find any solution — do you know one?
After reading your comments to my previous answer I think that you question is misleading. You talk about modal, another domain and close button but seems from your comments that nothing of that is actually relevant. I conclude from your comments that you want to place a button (actually a close button but might be any other) in a KendoUI window and in addition you want to display a page (that incidentally) is in a different domain. If this is what you actually want -and foreseeing problem related to cross-domain and security- I would recommend that you should actually use content.template and define a template including your button and an iframe referencing the page www.xyz.com.
Something like this...
var myWindow2 = $("#id2").kendoWindow({
modal : true,
draggable: false,
content : {
template: 'Close' +
'<iframe src="http://www.xyz.com" frameborder="0" class="k-content-frame"></iframe>'
},
visible : false,
width : 400,
height : 200,
resizable: false,
iframe : true
}).data("kendoWindow");
$("#open2").on("click", function () {
myWindow2.center();
myWindow2.open();
});
$("#close2").on("click", function () {
myWindow2.close();
});
You might even make the button float on top of the rest of the page by defining the following style for close button.
#close2 {
position: absolute;
top: 10px;
left: 10px;
z-index: 10000;
}
The following JavaScript code defines a button for opening a modal kendoWindow. Once clicked you can press a button inside the body of the window for closing it as you want.
JavaScript code:
var myWindow = $("#id1").kendoWindow({
title : "hi",
visible: false,
modal : true
}).data("kendoWindow");
$("#open").on("click", function () {
console.log("opening");
myWindow.center();
myWindow.open();
});
$("#close").on("click", function () {
console.log("closing");
myWindow.close();
})
and the HTML:
Open
<div id="id1">
<p>this is the content of my window</p>
Close
</div>