I have a Kendo window created using kendoWindow, which is called on a div. This correctly shows this div in a Kendo Window. If at some later point I then try to simply show the div using the show function, to make it appear on the page instead of in a window,
which worked perfectly fine before creating the Kendo
Window, the show doesn't work. How do I get it to show the div?
if (GC.ViewModels.Dashboard.IsSubscriberLoaded()) { // ***CREATES MY KENDO WINDOW
var $kwin = $('#complaint-dashboard-container').kendoWindow({
width: "1400px",
title: "", // ??
modal: true,
actions: ["Close"]
});
$($kwin).data("kendoWindow").center().open();
} else { // *** WON'T SHOW THE div if above has been executed at some point
$('#complaint-dashboard-container').show();
}
Answer : once you bind the div and make a widget it does not act as a normal div , if you need show the content i suggest you to get the html of the content and show in a different div
Just to get you up to speed, I have set-up my CKEditor instance so that when viewing the WYSIWYG (live) mode [image:abc123] is replaced with the actual URL to the image.
So for example in the HTML source view, you see this:
<img src="[image:abc123]" />
But when you view the WYSIWYG (live) mode, it shows this:
<img src="/file/image/abc123" />
This is all working great. An issue I am now having is when you edit the image in Image properties. As the image does not exist, it show's the red x.
http://img405.imageshack.us/img405/104/jzny.png
My question is, is there a way to customise the Image Properties dialog so that if it matches [image:abc123], it loads a different image URL in the Preview window?
This code doesn't work but might make it a little clearer what I'm trying to achieve here.
CKEDITOR.on('dialogDefinition', function(evt) {
if (evt.data.name == 'image') {
var image_url = ???;
var preview_image = ???;
var file_id = image_url.value.match(/\[image:([a-zA-Z0-9-]+)\]/);
if (file_id)
preview_image.src = '/file/image/' + file_id[1];
}
});
Thanks in advance!
I am trying to use Kendo's Mobile widgets inside of my PhoneGap Durandal project.
See sample source project here: https://github.com/rodneyjoyce/DurandalKendoMobile/tree/master/App
I don't understand where to put the Kendo initilisation code (the widgets do not render without this):
window.kendoMobileApplication = new kendo.mobile.Application($(document.body), {
skin: "flat"
});
I have tried to put it into the Index.html, shell.html and into a particular Durandal page view (x.html), shell.js, main,js and x.js but none of these work.
My Index page has these links in it:
<script src="css/telerik/js/kendo.all.min.js"></script>
<link href="css/telerik/styles/kendo.mobile.flat.min.css" rel="stylesheet" />
My Durandal View has the following HTML with Kendo Mobile widgets:
<section>
1
<div id="kendoindex">
<div data-kendo-role="view" data-kendo-title="View">
<header data-kendo-role="header">
<div data-kendo-role="navbar">
<span data-kendo-role="view-title">Title</span>
</div>
</header>
<ul data-kendo-role="listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
2
</section>
and my ViewModel for this View:
define(function (require)
{
function viewModel()
{
var self = this;
self.activate = activate;
function activate()
{
//window.kendoMobileApplication = new kendo.mobile.Application($("#kendoindex"), {
// skin: "flat"
//});
}
}
var vm = new viewModel();
return vm;
});
If I don't call kendoMobileApplication then the Kendo Mobile widgets are not rendered (it just shows "1 Title 2" with no CSS (ie. Kendo is not transforming them).
Everything seems to be keyed on where to call this: kendoMobileApplication in Durandal.
I followed the Durandal guidelines to give the Kendo bindings their own namespace: http://durandaljs.com/documentation/KendoUI/
UPDATE 1
I have created a simple Durandal 1.2 project which highlights the problem with Kendo Mobile and Durandal (and PhoneGap, but irrelevant here)), namely:
The only way to get the Mobile controls to render properly is to call kendo.mobile.Application. However this cannot find the right HTML element if it is put into a different file and loaded with Durandal.
I cannot find the right place to put this init code as it throws this error: “Uncaught Error: Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.”
kendoIndex.html is NOT Durandal but shows how it should be rendered if the kendo.mobile.Application is called correctly (Run this first to see what we are trying to achieve)
Shell : Has the Kendo Layout which does not get rendered.
Home View: Has the simple Kendo Mobile view – this does not get rendered.
About: A simple HTML page without Kendo
Source is on Guthub – if anyone can get Kendo Mobile working with Durandal I would appreciate it (or at least confirm if it is impossible (Telerik are no help at all on this)).
https://github.com/rodneyjoyce/DurandalKendoMobile/tree/master/App
Here's a working demo, which shows the correct start screen, but doesn't show the about view on navigation click. There's probably some extra work required to either remove kendo's or Durandal's router functionality.
http://rainerat.spirit.de/DurandalKendoMobile/App/#/
There were a couple of things required to make it work.
https://github.com/RainerAtSpirit/DurandalKendoMobile/commits/master
Kendo requires that the host element and all 'view' and 'layout' elements are in the DOM and that 'view' and 'layout' are child of the container element. After updating the view html to reflect this the right place to create the kendo app would be home.js
define(function( require ) {
var ctor = function() {
};
ctor.prototype.activate = function() {
console.log("Home activate");
};
ctor.prototype.viewAttached = function() {
var $kendoHost = $('#kendoHost');
// Workaround for height = 0.
// Additional code required to calculate on windows.resize
$kendoHost.height($(window).height());
this.app = new kendo.mobile.Application($kendoHost, {
skin: "flat"
});
console.log("Home viewAttached", this.app, $kendoHost.height());
};
return ctor;
});
Last kendo determines kendoHost height as 0, which prevents that the correctly rendered view show up. As a workaound I'm using $kendoHost.height($(window).height()); right before creating the app addresses.
As said in my comment above I'm still not sure if I'd recommend combining those two SPA frameworks as you might encounter more glitches like that while building your app. That said I'd love to hear about your progress :).
I've got everything working well except the drop area element doesn't hide after moving back off the page.
For example, if I drag something to the page, the drop area element shows, but then if I decide not to drop, it stays visible instead of hiding. It looks like in the demos on the site, it should hide again.
I've been studying this page: http://docs.fineuploader.com/branch/master/integrating/options/fineuploader.html#draganddrop-option-properties
There doesn't seem to be a callback for when there is no longer a file about to be dropped in the browser window. My code looks just like the examples, but has my own element id and class names, both of which work.
Any ideas?
Update - here is some code:
<div id="file-upload-well" class="well text-center">
<div id="file-upload-drop-area" style="display:none;">Drop files here</div>
Upload Files
</div>
and here is the DND js:
var dragAndDropModule = new qq.DragAndDrop({
dropZoneElements: [document.getElementById('file-upload-drop-area')],
classes: {
dropActive: "dropActive"
},
callbacks: {
processingDroppedFiles: function () {
$('#file-upload-drop-area').hide();
},
processingDroppedFilesComplete: function(files) {
uploader.addFiles(files);
}
}
});
The issue was setting the hideDropZonesBeforeEnter is set to false by default and needed to be set to true.
Both the variable name and the help documentation make it seem it will only show the drop zone when a file is directly over it, but instead it hides and shows the dropdown when a file is over a compliant browser.
I have been trying to put an image with a hyperlink on it into a google apps script ui. I first thought of using createAnchor(), but that only allows text. Then I thought of using a button, but as far as I know you cannot open a new tab/window and redirect in a callback function.
I also tried createHTML(), but the element is not handled by it as yet.
I have seen people overlay transparent buttons over images, but still have same issue in callback.
My research has not found an answer to this. Does anyone have any solutions/examples?
Thanks
This worked for me on Chrome20 and IE9
// Container for box and results
var imageContainer = app.createFlexTable();
// Setup the button
var button = app.createButton("ImageButton");
button.setStyleAttribute("background", "url(dontshowimagehere.JPG) no-repeat");
button.setStyleAttribute("position", "absolute");
button.setStyleAttribute("color", "transparent");
button.setStyleAttribute('zIndex','1');
button.setStyleAttribute("border", "0px solid black");
imageContainer.setWidget(0, 0, button);
// image to click
var image = app.createImage("image.jpg").setId(imageId);
imageContainer.setWidget(1,0, image);
The image has a slight (3px) offset. If important, this looks to fix it http://www.w3schools.com/css/css_positioning.asp (use relative for the flex table and top etc for the image and button)
Did you try a transparent Anchor overlaying the image?
function doGet() {
var app = UiApp.createApplication().setTitle("Image Anchor");
var panel = app.createAbsolutePanel().setWidth('50%').setHeight('50%');
var image = app.createImage().setUrl("https://lh6.googleusercontent.com/-v0Q3gPQz03Q/T_y5gcVw7LI/AAAAAAAAAF8/ol9uup7Xm2g/s512/GooglePlus-512-Red.png").setStyleAttribute("width", "28px").setStyleAttribute("height", "28px");
var anchor = app.createAnchor("?", "https://plus.google.com/u/1/116085534841818923812/posts").setHeight("28px").setWidth("28px").setStyleAttribute("opacity", "0.1").setTarget("blank");
panel.add(image,100,50);
panel.add(anchor,100,50);
app.add(panel);
return app.close();
}
app.createAbsolutePanel()
.add(app.createImage('https://www.google.com/images/logos/google_logo_41.png'))
.add(app.createAnchor('','https://www.google.co.uk/intl/en/about/')
.setStyleAttributes({position:'absolute',top:'0px',left:'0px',width:'201px',height:'47px',opacity:'0'}))
This is a tested one. It works fine.
It doesn't work with positioning the image (as 'absolute').
It doesn't work with .setHorizontalAlignment(UiApp.HorizontalAlignment.CENTER)
I don't believe this is possible with the widgets available. I would suggest altering your UI's design to utilize an Anchor widget instead.
Use HTML Box if you are coding directly on your page. Click "Edit" to edit your page and go to "Insert>HTML Box" in your menu. It will accept javascript too! There are a few caveats - when using javascript, HTML Box will not accept links...too bad, but too many exploits there.
If you are coding in apps script, you could try to place the image on a panel and use absolute panel and position your link over your image. Another method could be to use the .setStyleAttribute for CSS styling and utilize the zIndex parameter to place a panel over top of your image....like so:
var panel = app.createSimplePanel();
// add your image to the simple panel or whatever panel you wish to choose in your GUI
var popPanel = app.createSimplePanel()
.setStyleAttribute('top','Y')
.setStyleAttribute('left','X')
.setStyleAttribute('zIndex','1')
.setStyleAttribute('position','fixed');
// add your anchor to the popPanel
app.add(panel).add(popPanel);
Not 100% sure if you can make this panel transparent, but you could try something like:
.setStyleAttribute('background',transparent')
or change the opacity via:
.setStyleAttribute('opacity','.5')
Hopes this gives you a few ideas!
I managed to do it with a single Anchor object and using CSS3.
It works on Chrome, I did not test it in other Browsers.
gui.createAnchor("", false, "$DESTINATION_URL$")
.setStyleAttributes({ "display":"block",
"width":"$IMAGE_WIDTH_IN_PIXEL$",
"height":"$IMAGE_HEIGHT_IN_PIXEL$",
"background":"url($URL_OF_THE_IMAGE$)",
"background-size":"100% 100%",
"background-repeat":"no-repeat" })
Of course you have to replace the $......$ with your data.
Thierry
If you first create all your HTML in a string, you can then replace the content of a page with the HTML you want like this:
var myString = 'the html you want to add, for example you image link and button';
var page = SitesApp.getSite('example.com', 'mysite').getChildByName('targetpage');
var upage = page.setHtmlContent('<div>' + myString + '</div>');