I'm trying to bring Kendo UI Modal Window right next to my button and it not working.
Here is my button click code:
$('#button').click(function() {
var x = $("#button").offset().left;
var y = $("#button").offset().top;
window1 = $('#window1');
if (!window1.data("kendoWindow")) {
window1.kendoWindow({
actions: ["Refresh", "Close"],
width: "450px",
position: {
left: x,
top: y
},
title: "Window Title",
modal: true,
resizable: false
});
}
window1.show();
window1.data("kendoWindow").open();
});
All set.
$("#window1").closest(".k-window").css({
top: y,
left: x
});
Related
I am new to Google earth engine and coding as well. I am trying to create an panel with a dropdown and a text box in google earth engine. The drop down menu has two options 1. link to shapefile and 2. draw your polygon. When the user selects option 1 from the menu, I want the textbox to get active else it needs to stay deactivated. If the user selects second option of drawing a polygon, I want the drawing tools to get active else stay deactivated. How do I achieve this. Please help me, Thanking you in advance.
var panel = ui.Panel();
panel.style().set({
width: '20%',
});
ui.root.insert(0,panel)
var asset = 'Use Shapefile'
var boundary = 'Draw boundary'
var geometry
var aoi
var selectboundary = ui.Select({
items:[asset, boundary],
placeholder:'Select boundary',
style: {padding: '0px 10px', stretch: 'horizontal', color: 'black'}
});
panel.add(selectboundary)
var shapefilelink = ui.Textbox({
style: {
maxWidth: '390px',
padding: '0px 10px',
stretch: 'horizontal',
color: 'black'
},
placeholder: 'users/your_username/asset_name',
onChange: function(input){
var userInput = input;
userInput = ee.String(userInput);
geometry = ee.FeatureCollection(userInput);
},
disabled: true,
});
panel.add(shapefilelink)
var startdate = ui.Textbox({
placeholder: 'Start: yyyy-mm-dd',
style: {
minWidth: '0px',
maxWidth: '200px',
padding: ('0px 0px 0px 10px' ),
color: ('black'),
},
})
var enddate = ui.Textbox({
placeholder: 'End: yyyy-mm-dd',
style: {
minWidth: '0px',
maxWidth: '200px',
padding: ('0px 0px 0px 15px' ),
color: ('black'),
},
})
panel.add(ui.Panel([startdate,enddate],ui.Panel.Layout.flow('horizontal')))
How to increase touch area of control points on mobile device with FabricJS? Because on mobile they are too small for smooth interactive with. But not change size of control points ( for nice view ).
Here is my code:
How to increase interactive of control points = view control points size x 2 ?
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
// test customize control points
var rect = new fabric.Rect({
left: 30,
top: 30,
fill: 'red',
width: 150,
height: 150
});
canvas.add(rect);
rect.set({
transparentCorners: false,
cornerColor: 'white',
cornerStrokeColor: 'rgba(14,19,24,.15)',
borderColor: 'rgba(41,198,203,1)',
selectionLineWidth: 8,
cornerSize: 12,
cornerStyle: 'circle',
});
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
Please show me the way to resolve this problem.
By the way: ( on mobile device ) is there any way to allow drag object only object is selected before?
Thank you very much!
You need to override _setCornerCoords method of object and change the value of cornerHypotenuse.
DEMO
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
var canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
// test customize control points
var rect = new fabric.Rect({
left: 30,
top: 30,
fill: 'red',
width: 150,
height: 150
});
canvas.add(rect);
rect.set({
transparentCorners: false,
cornerColor: 'white',
cornerStrokeColor: 'rgba(14,19,24,.15)',
borderColor: 'rgba(41,198,203,1)',
selectionLineWidth: 8,
cornerSize: 5,
cornerStyle: 'circle'
});
rect._setCornerCoords = function() {
var coords = this.oCoords,
newTheta = fabric.util.degreesToRadians(45 - this.angle),
cornerHypotenuse = this.cornerSize * 2 * 0.707106,
cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta),
sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta),
x, y;
for (var point in coords) {
x = coords[point].x;
y = coords[point].y;
coords[point].corner = {
tl: {
x: x - sinHalfOffset,
y: y - cosHalfOffset
},
tr: {
x: x + cosHalfOffset,
y: y - sinHalfOffset
},
bl: {
x: x - cosHalfOffset,
y: y + sinHalfOffset
},
br: {
x: x + sinHalfOffset,
y: y + cosHalfOffset
}
};
}
}
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.3.2/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
I am trying to display total records in jqgrid.
Here is the code i am using to display.grid is displaying but i am not getting total.
and i am getting Error:footer-row is invalid propert
Can anyone tell me what is mistake?
$("#JqGrid").jqxGrid(
{
pagesize: 5,
source: dataAdapter,
width: 700,
sortable: true,
pageable: true,
autoheight: true,
columnsresize: true,
filterable: true,
showfilterrow: true,
showtoolbar: true,
footerrow: true,
userDataOnFooter:true,
rendertoolbar: function (toolbar) {
var container = $("<div style='overflow: hidden; position: relative; margin: 3px;'></div>");
var exportButton = $("<div style='float: right; margin-right: 5px;'> <img style='position: relative; margin-top: 2px; width: 16px; height: 16px;' src='images/excel.png' /><span style='margin-left: 4px; position: relative; top: -3px;'>Export to Excel</span></div>");
container.append(exportButton);
toolbar.append(container);
exportButton.jqxButton({ width: 150, height: 20 });
exportButton.click(function (event) {
$("#JqGrid").jqxGrid('exportdata', 'xls', 'Report');
});
},
selectionmode: 'checkbox',
//rendertoolbar: function (toolbar) {
// var container = $("<div style='overflow: hidden; position:relative;margin:3px;'></div>");
// var exportButton = $("<div style='float:right;margin-right:20px;'><img style='position:relative;margin-top:2px;width:16px;height:16px' src='./images/excel.png'/><span style='margin-left:4px;position:relative;top:2px'>Export to Excel</span></div>");
// exportButton.jqxButton({ width: '130' });
// container.append(exportButton);
// toolbar.append(container);
//}
columns: [
{ text: 'VillageName', datafield: 'VillageName', width: 'auto' },
{ text: 'Samples Collected', datafield: 'VillageSamples', width: 'auto' }
],
gridComplete: function () {
calculateTotal();
},
});
var themeSetting = { theme: "darkblue" };
$("#JqGrid").jqxGrid(themeSetting);
var calculateTotal = function () {
var gridData = $("#JqGrid").jqGrid('getGridParam', 'data'),
i = 0, totalAmount = 0, totalTax = 0;
for (; i < gridData.length; i++) {
var rowData = gridData[i];
totalAmount += Number(rowData.VillageSamples);
}
$("#JqGrid").jqGrid('footerData', 'set', { name: 'TOTAL', VillageSamples: totalAmount });
}
I am new in Titanium Studio. I am trying to do that when user clicks the any button in window1, it goes the second window. I mean I cannot connect to button1 and button2 in order to pass through the second window.
Here is the my sample code. Can anyone help me please?
Titanium.UI.setBackgroundColor('#000');
var win1 = Ti.UI.createWindow({
layout : 'vertical',
title : 'Welcome to BMI'
});
var button1 = Ti.UI.createButton(
{
title:'Standart',
top : 300,
height: 20,
width: 100
});
button1.addEventListener('click', function(e)
{
win1.close();
win2.open();
});
var button2 = Ti.UI.createButton(
{
title:'Metric',
top : 350,
height: 20,
width: 100
});
button2.addEventListener('click', function(e)
{
win1.close();
win2.open();
});
win1.add(button1);
win1.add(button2);
win1.open();
var win2 = Ti.UI.createWindow({
backgroundColor: 'white',
layout: 'vertical',
title: 'BMI'
});
var label1 = Ti.UI.createLabel({
color: '#900',
font: { fontSize:48 },
shadowColor: '#aaa',
shadowOffset: {x:5, y:5},
text: 'Body Mass Index',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
top: 30,
width: Ti.UI.SIZE, height: Ti.UI.SIZE
});
var label2 = Ti.UI.createLabel({
color:'blue',
text: 'Welcome to BMI',
textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
top: 30,
width: 300, height: 200
});
win2.add(label1);
win2.add(label2);
I think you should not face problem to execute this code but i think you need to do some modification in your code.
Titanium.UI.setBackgroundColor('#000');
function openNewWin(){
var win2 = Ti.UI.createWindow({
backgroundColor: 'white',
layout: 'vertical',
title: 'BMI'
});
var label1 = Ti.UI.createLabel({
color: '#900',
font: { fontSize:48 },
shadowColor: '#aaa',
shadowOffset: {x:5, y:5},
text: 'Body Mass Index',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
top: 30,
width: Ti.UI.SIZE, height: Ti.UI.SIZE
});
var label2 = Ti.UI.createLabel({
color:'blue',
text: 'Welcome to BMI',
textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
top: 30,
width: 300, height: 200
});
win2.add(label1);
win2.add(label2);
win2.open({
modal : true
});
}
var win1 = Ti.UI.createWindow({
layout : 'vertical',
title : 'Welcome to BMI'
});
var button1 = Ti.UI.createButton(
{
title:'Standart',
top : 300,
height: 20,
width: 100
});
button1.addEventListener('click', function(e)
{
win1.close();
openNewWin();
});
var button2 = Ti.UI.createButton(
{
title:'Metric',
top : 350,
height: 20,
width: 100
});
button2.addEventListener('click', function(e)
{
win1.close();
openNewWin();
});
win1.add(button1);
win1.add(button2);
win1.open({
modal : true
});
I am developing an iOS app using Appcelerator.
In this app I got a main wrapper view and some subviews. I need them to be placed under each other using the layout vertical property but they all stack in a pile (not on separate "rows").
What is wrong with the code below?
// Create the padding view
container = Ti.UI.createView({
top: 0,
left: 0,
width: 320,
height: 460,
backgroundColor: '#000'
});
// Create the padding view
wrapper = Ti.UI.createView({
top: 0,
left: 0,
width: 320,
height: 'auto',
layout: 'vertical'
});
// Create the padding view
label = Ti.UI.createLabel({
text: e.label,
color: e.color,
font:{fontSize:36,fontWeight: 'normal'},
top: 10,
width: 'auto',
height: 'auto'
});
// Create the padding view
perks_label = Ti.UI.createLabel({
text: 'Lorem Ipsum is',
color: '#fff',
font:{fontSize:26,fontWeight: 'normal'},
top: 10,
left: 10,
width: 'auto',
height: 'auto'
});
// Create the padding view
perks_data = Ti.UI.createLabel({
text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer',
color: '#fff',
font:{fontSize:12,fontWeight: 'normal'},
top: 10,
left: 10,
width: 'auto',
height: 'auto'
});
// Add label to wrapper
wrapper.add(label);
// Add label to wrapper
wrapper.add(perks_label);
// Add label to wrapper
wrapper.add(perks_data);
// Add wrapper to container
container.add(wrapper);
// Return the row
return container;
It seems like the top and left of perks_label and perks_data should be different. Try setting the perks_data to top:50.
Thanks,
I've hit this wall before. Have you set the layout for the current window to 'vertical'? So, from the window that you add the container to, set its layout to vertical:
var win = Titanium.UI.currentWindow;
win.layout = 'vertical';