I am trying to instantiate a pdf viewer to be defaulted to FitToWidth but I cannot find a way to start it out with that option selected,
I tried setting its defaultPageSize settings by setting width with auto but I get the page size to be Automatic Width, is there another value that is set on this property or any other property to initiate the viewer with FitToWidth?
I got help from the Telerik Team and they provided the following answer, I will share it with the community,
it seems that you can set the default zoom scale only on the first render like so
<script>
var firstRender = true;
$(document).ready(function () {
var vr= $("#pdfViewer").kendoPDFViewer({
pdfjsProcessing: {
file: "https://demos.telerik.com/kendo-ui/content/web/pdfViewer/sample.pdf"
},
width: "100%",
height: 1200,
render: function(e) {
if (firstRender) {
e.sender.toolbar.zoom.combobox.value("fitToWidth");
e.sender.toolbar.zoom.combobox.trigger("change");
firstRender = false;
}
}
}).getKendoPDFViewer();
});
</script>
Related
Normally to make colorbox adjust it's size to the content I use this snippet:
$('#colorbox').colorbox({
onComplete: function () {
$(this).colorbox.resize();
}
});
But this time it does not work, when I try the same thing in an ajax function, after the success response:
$.ajax({
data:number,
dataType: "json",
type:"POST",
url : "payment/request1",
cache: false,
success: function (response) {
console.log(response);
if(response === true){
$.colorbox({html:'<div id="paymentblock"><div><h2 style="color:#444;">Open app in your phone</h2></div><div style="text-align:center;"><p>Payment with '+number+'</p><img src="/images/giphy.gif"></div>'});
$('#edit-commerce-payment-payment-details-number').css('background','#fff').val('');
$('#colorbox').colorbox({
onComplete: function () {
$(this).colorbox.resize();
}
});
}else{
$.colorbox({html:'<div id="paymentblock"><div><h2 style="color:#444;">An error occurred</h2></div><div style="text-align:center;"><p>Kontakta oss.</p></div>'});
$('#colorbox').colorbox({
onComplete: function () {
$(this).colorbox.resize();
}
});
}
}
});
The result is that the colorbox opens with a too small size and don't resize to fit the content. What am I doing wrong?
I created a custom function to resize the colorbox after loading content, after resizing the browser window or, on mobile, after an orientation change that also effectively changes the browser window width.
Modern web design has to deal with widely varying browser widths, especially with so many users on cell phones and tablets, so the content you are loading should be responsive, from about a 320 pixel width on up. Then, let the colorbox size be determined by the available browser width as well as a maximum reasonable size for aesthetic reasons.
This goes in a javascript file included at the bottom of each page:
/* Colorbox resize function */
var resizeTimer;
var resizeColorBox = function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if ($("#cboxOverlay").is(":visible")) {
$.colorbox.resize({maxWidth:"400px",width:"95%"});
}
}, 300);
};
// Resize Colorbox when resizing window or changing mobile device orientation
$(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);
Then, the colorbox function itself has a few parameters that need to be set correctly. Note that I have closebutton set to false because my HTML content includes a close button that calls the colorbox close function.
$.colorbox({
width:"95%",
maxWidth:400,
maxHeight:"95%",
speed:300,
closeButton:false,
onComplete : function() {
$(this).colorbox.resize({width:"95%",maxWidth:400});
$(window).trigger("resize");
},
html:'Your HTML Here'
});
So, your code need only call the resizeColorBox() function after loading AJAX content and you should be good to go. Plus, it handles other resize situations.
[Edit] If you REALLY need to resize to the width of inner content, then the resize function should first get the width of the container div of the inner content, then resize to that width (possibly plus the width of colorbox padding, etc). In that case, the resize function would be more along the lines of:
var resizeColorBox = function() {
var w = $('content_container').width() + padding_w;
var h = $('content-container').height() + padding_h;
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
if ($("#cboxOverlay").is(":visible")) {
$.colorbox.resize({width:w, height:h});
}
}, 300);
};
Just had this same problem. I dealt with this issue by calling the resize method from inside of page being requested. (May not be possible for you)
Inside the page being called:
<script>
// This resize doesn't respect the maxHeight set when initializing
// So we calculate again, for this example 80%
var maxHeight = parent.innerHeight * 0.8
document.addEventListener('DOMContentLoaded', function(event) {
// Get document height after loaded
var documentHeight = document.documentElement.scrollHeight
// Resize
parent.$.colorbox.resize({
innerHeight: Math.min(documentHeight, maxHeight),
})
})
</script>
Hope this helps someone in the future (or myself if I forget).
I have an application that needs the inline CKEditor but without toolbar. For the inline CKEditor part I have:
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline('editable', {on: {
instanceReady: function() {periodic();}
}});
var periodic = (function() {
var data, oldData;
return function() {
if ((data = editor.getData()) !== oldData) {
oldData = data;
$.post("update.php", {txt:data});
}
setTimeout(periodic, 1000);
};
})();
Then for the toolbar hiding part I found this: CKEditor 4 Inline: How to hide toolbar on demand?
//Whenever CKEditor loses focus, We will hide the corresponding toolbar DIV.
function hideToolBarDiv(event) {
// Select the correct toolbar DIV and hide it.
//'event.editor.name' returns the name of the DIV receiving focus.
$('#'+event.editor.name+'TBdiv').hide();
}
Problem is that I have no clue how to combine these two together :) I appreciate for any hint. Thank you.
I found another link that seems to solve my problem: Can I use CKEditor without a toolbar?
The script seems to be working alright though I am still not sure if it is a correct way to do it:
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline('editable', {
removePlugins: 'toolbar',
allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height]'
on: {instanceReady: function() {periodic();}}
});
var periodic = (function() {
var data, oldData;
return function() {
if ((data = editor.getData()) !== oldData) {
oldData = data;
$.post("update.php", {txt:data});
}
setTimeout(periodic, 1000);
};
})();
In my eyes, I have done it in two ways:
1) Using the removePlugins option and just remove the toolbar:
CKEDITOR.inline( 'textarea', {
removePlugins: 'toolbar'
} );
here, you can also use allowedContent to allow the contents for ACF
CKEDITOR.inline( 'editable', {
removePlugins: 'toolbar',
allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height];'
} );
2) Using CSS - Not the standard approach: (little tricky)
Just make css to display:none the toolbar, like
.cke_inner {
display: none;
}
Hope it will help someone.
I am trying to use a modal window within another window as a confirm/message popup, but there are some issues I am not sure if I can't get around.
Here's a jsfiddle of my situation: Fiddle
The problems I am trying to fix are:
Using a modal window while also using appendTo seems to have issues with the back drop, I see its there until you click elsewhere, then it disappears.
It would be great if I could center the modal within my window rather than the Window
Even though dragging is disabled on the modal, if you grab the modal title bar, it will move the outside window.
If I click the 'X' to close the inner modal, it closes my external window.
Can anyone suggest solutions to any of these issues?
$('<div id="confirmModal"><div id="confirmWindow">Is This Correct?<p><input type="button" id="btnYes" value="Yes" /><input type="button" id="btnNo" value="No" /></p></div></div>').prependTo('#Window');
$('#confirmWindow').kendoWindow({
modal: true,
resizable:false,
draggable:false,
appendTo: '#Window',
close: function() {
setTimeout(function(){
$('#confirmWindow').kendoWindow('destroy');
}, 200);
}
});
$('#confirmWindow').find('#btnNo').click(function () {
$('#confirmWindow').kendoWindow('close');
});
$('#confirmWindow').find('#btnYes').click(function () {
$('#confirmWindow').kendoWindow('close');
});
Edit
I have edited the fiddle as the first one was an older version of what i meant to post.
From appendTo documentation:
The element that the Window will be appended to. Note that this does not constrain the window dragging within the given element.
So, Kendo windows are floating, they are not constrained to the element that you append it to. This means that does not make sense prepend the confirmation window to an HTML element and then append it to that same element.
Check response from a telerik enginer
http://www.kendoui.com/forums/kendo-ui-web/window/kendowindow-appendto-boundaries.aspx
<script type="text/javascript">
$(document).ready(function () {
$("#windowName").data("kendoWindow").dragging._draggable.bind("drag", function (e) {
var wnd = $("#window").data("kendoWindow");
var position = wnd.wrapper.position();
var minT = 0;
var minL = 0;
//Get the Window width and height and
//place them in position of the hard-coded width and height
var maxT = 600 - wnd.wrapper.height();
var maxL = 900 - wnd.wrapper.width();
if (position.left < minL) {
coordinates = { left: minL };
$(wnd.wrapper).css(coordinates);
}
if (position.top < minT) {
coordinates = { top: minT };
$(wnd.wrapper).css(coordinates);
}
if (position.left > maxL) {
coordinates = { left: maxL };
$(wnd.wrapper).css(coordinates);
}
if (position.top > maxT) {
coordinates = { top: maxT };
$(wnd.wrapper).css(coordinates);
}
})
})
</script>
I'm using the latest version of jqPlot (v1.0.0b2_r1012) to plot my histograms.
To catch a single click event I'm using 'jqplotDataClick' as follows:
$('#myHistogram').bind('jqplotDataClick', function(ev, seriesIndex, pointIndex, data) {
// Do something
});
Is it possible to catch a double click event instead?
Unfortunately I've been unable to find such event in jqplot.barRenderer.js.
Update:
I've made the following two changes to my jqplot.barRenderer.js file:
Register jqplotDblClick event
$.jqplot.BarRenderer.prototype.init = function(options, plot) {
...
...
plot.postInitHooks.addOnce(postInit);
plot.postDrawHooks.addOnce(postPlotDraw);
plot.eventListenerHooks.addOnce('jqplotMouseMove', handleMove);
plot.eventListenerHooks.addOnce('jqplotMouseDown', handleMouseDown);
plot.eventListenerHooks.addOnce('jqplotMouseUp', handleMouseUp);
plot.eventListenerHooks.addOnce('jqplotClick', handleClick);
plot.eventListenerHooks.addOnce('jqplotDblClick', handleDblClick);
//$.jqplot.eventListenerHooks.push(['jqplotDblClick', handleDblClick]); I've also tried this but without any luck
plot.eventListenerHooks.addOnce('jqplotRightClick', handleRightClick);
};
Implement handleDblClick function
function handleDblClick(ev, gridpos, datapos, neighbor, plot) {
if (neighbor) {
var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
var evt = jQuery.Event('jqplotDataDblClick');
evt.pageX = ev.pageX;
evt.pageY = ev.pageY;
plot.target.trigger(evt, ins);
}
}
And then I bind jqplotDataDblClick in my JavaScript file as follows:
$('#myHistogram').bind('jqplotDataDblClick', function(ev, seriesIndex, pointIndex, data) {
alert("Ohayo!"); // Good morning in Japanese
});
However the double click event doensn't get fired when I double click on one of my vertical bar graphs. I've tried binding "jqplotRightClick" but that doesn't work either. If I use "jqplotClick" then everything works as expected.
Does anyone know what I am doing wrong here?
Update 2:
RE: I've tried binding "jqplotRightClick" but that doesn't work either. (see above)
I've just found out that in order to catch this event you have to set the following:
captureRightClick: true,
See: How to capture right click event
From the "cursor" plugin, they handle it like this:
if (c.dblClickReset) {
$.jqplot.eventListenerHooks.push(['jqplotDblClick', handleDblClick]);
}
EDITS
I can capture the double click by just binding the 'jqplotDblClick'. I did not have to push the event. Sorry for the misdirection, my answer above meant to show that the event already existed. See working fiddle here. The only additional thing I added was CSS rules to make the div un-selectable since a double-click will select it.
HTML:
<div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px; -moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;"></div>
JS:
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var s1 = [2, 6, 7, 10];
var ticks = ['a', 'b', 'c', 'd'];
plot1 = $.jqplot('chart1', [s1], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
});
$('#chart1').bind('jqplotDblClick',
function (ev, seriesIndex, pointIndex, data) {
alert('hi');
});
});
I have a button at which when the user hovers over I display a tooltip.
function createTooltp(toolTipId) {
tooTip = new Ext.ToolTip({
target: toolTipId, //The button
anchor: 'left',
autoWidth: true,
autoHeight: true,
closable: false,
autoHide: true,
autoHeight : true,
closable: false,
contentEl: 'content-tip'
});
tooTip.show();
}
Now when the user hovers away obviously it would hide since I mentioned autoHide:true,.
But when the user hovers to the actual tooltip which is displayed. I want that tooltip to be there till the mouse is on top of it and hide when the mouse is not on the target(button) or on the actual tooltip. How could this be achieved?
Don't rely on Ext to hide the tooltip for you (autoHide: false). Instead, start a delayed hide using window.setTimeout when you leave the tooltip target and when you leave the tooltip, but cancel the hide if you hover back over the tooltip. That way, it will only hide when you're not on the tooltip after 500ms.
var toolTip = Ext.create('Ext.tip.ToolTip', {
target: targetId,
html: 'ToolTip',
anchor: 'left',
dismissDelay: 0,
showDelay: 0,
autoHide: false
});
toolTip.on('show', function(){
var timeout;
toolTip.getEl().on('mouseout', function(){
timeout = window.setTimeout(function(){
toolTip.hide();
}, 500);
});
toolTip.getEl().on('mouseover', function(){
window.clearTimeout(timeout);
});
Ext.get(targetId).on('mouseover', function(){
window.clearTimeout(timeout);
});
Ext.get(targetId).on('mouseout', function(){
timeout = window.setTimeout(function(){
toolTip.hide();
}, 500);
});
});
My two cents: I had task to add same behavior for tooltips inside grid panel columns, and it doesn't have way to pass config or tooltips inside it (or maybe I missed it in the docs and while reading sources, please comment if I had). So I solved it by adding small override to my app
Ext.define('App.overrides.ToolTip', {
override: 'Ext.tip.ToolTip',
dismissDelay: 0
});
Try this:
function createTooltp(toolTipId) {
var tooTip = new Ext.ToolTip({
target: toolTipId, // The button
anchor: 'left',
showDelay: 0,
hideDelay: 0,
trackMouse: true
});
tooTip.show();
}
Learn more from this reference: ToolTip
I did it with a work around (jQuery). And used Span and CSS to create my own tooltip.