We Keep Coding

How to set maximum cropbox size in cropperjs?

Hello i just want to ask how can i set the maximum size of my cropbox? Because i got a image frame which have a 400x400 image size then inside of it is a box container which going to be the place where the cropped image from the cropbox go.
I have this jQuery code
var img = $('#image');
$('#image').on('load', function () {
img.cropper({
aspectRatio : 1,
scalable : true,
rotatable : true,
checkOrientation : true,
cropBoxResizable : true,
dragMode : 'move',
minCropBoxWidth : 346,
minCropBoxHeight : 269,
minContainerHeight : 400,
minContainerWidth : 400,
minCanvasWidth : 400,
minCanvasHeight : 400,
viewMode : 1
});
img.cropper("setCropBoxData", { width: "346", height: "269" });
}
It works normal but no changes have been made with my cropbox. It only set its minimum size but not the maximum. Any solutions will help thanks.

You can add this :
autoCropArea: 1,

Try adding style="max-height:80vh !important" to the parent container for the cropper-container cropper-bg class.

Popup screen not working on Android, but does on iOS

I'm trying to create an popup that contains help information. The below code works perfect on iOS, but on Android the labels aren't displayed (the close button is).
I'm hoping there is an easy fix ;-)
Thanks in advance!
function helpPopup() {
var myModal = Ti.UI.createWindow({
backgroundColor : 'transparent',
navBarHidden:true
});
var wrapperView = Ti.UI.createView(); // Full screen
var backgroundView = Ti.UI.createView({ // Also full screen
backgroundColor : '#000',
opacity : 0.5
});
backgroundView.addEventListener('click', function () {
myModal.close();
});
var containerView = Ti.UI.createView({ // Set height appropriately
height : 300,
backgroundColor : '#FFF'
});
var someLabel = Ti.UI.createLabel({
text : 'Here is your modal',
top : 40
});
var contactName = Ti.UI.createLabel({
text :'Name',
top :60
});
var closeButton = Ti.UI.createButton({
title : 'Close',
bottom : 40
});
closeButton.addEventListener('click', function () {
myModal.close();
});
containerView.add(someLabel);
containerView.add(contactName);
containerView.add(closeButton);
wrapperView.add(backgroundView);
wrapperView.add(containerView);
myModal.add(wrapperView);
myModal.open({
animate : true
});
}

It turns out that Android uses white as a default label color.... iOS uses black.
So after I changed the font color it worked on both Android on iOS:
var someLabel = Ti.UI.createLabel({
text : 'Here is your modal',
top : 40,
color : '#000'
});

Dojo charting - rightmost axis title getting cut in half

I am using dojo to create a bar chart with multiple vertical axes (one for an actual count, the other for a percentage), and when I do, the title for the right axis always gets cut off (i.e., the half of it that's furthest from the chart gets cut off by the edge of the chart). I've already tried using chart.resize(w,h), but this only shrinks the data in the chart, while maintaining the same margins from the edge (and thus the same title cut as before). Does anyone know how to get the title to properly display? For reference, here's the code I'm using, both to create the div node and the chart.
chartNode = domConstruct.create("div", {
id : this.context.viewid + "_ChartNode",
}, this.context.element, "first");
domStyle.set(chartNode, {
width : "800px",
height : "400px"
});
var chart = new Chart(chartNode);
chart.addPlot("default", {
type : "Columns",
markers : true,
gap : 5
});
chart.addPlot("something", {
type : "Columns",
vAxis : "percent"
});
chart.addAxis("x", {
title : "Person",
titleOrientation : "away",
minorTicks : false,
majorTickStep : 1,
dropLabels : false
});
chart.addAxis("y", {
vertical : true,
fixLower : "includeZero",
title : "Count",
min : 0,
max : data[0].totalSubmitted
});
chart.addAxis("percent", {
title : "Percentage",
titleGap : 20,
vertical : true,
leftBottom : false,
fixLower : "includeZero",
min : 0,
max : 100,
})
chart.addSeries("y", data);
chart.render();
Edit: This is what my code is actually generating, with the cutoff being highlighted in red.

Swipe gesture not swiping container off

I am trying to swipe a container and it's children elements off the screen. However when I run the following code, the child element I swipe goes off the screen as opposed to both elements.
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title : 'Tab 1',
backgroundColor : '#fff'
});
var viewContainer = Titanium.UI.createImageView({
backgroundColor : 'white',
width : '100%',
height : '100%',
top : 0
});
var view = Titanium.UI.createImageView({
backgroundColor : 'green',
width : '100%',
height : '100%',
top : 0
});
var view1 = Titanium.UI.createView({
backgroundColor : 'red',
width : '100%',
height : 100,
bottom : 0
});
viewContainer.addEventListener('swipe', function(e) {
if (e.direction == "right") {
//TODO: add functionality here
} else if (e.direction == "left") {
var anim = Ti.UI.createAnimation({
left : -300,
duration : 200,
curve : Ti.UI.ANIMATION_CURVE_EASE_OUT
});
anim.addEventListener('start', function(_startanicallback) {
});
anim.addEventListener('complete', function(_anicallback) {
});
e.source.animate(anim);
}
});
viewContainer.add(view);
viewContainer.add(view1);
win1.add(viewContainer);
win1.open();
I have a :
ViewContainer - where the event listener is attached too.
Inside that , view and view1 both child elements.
Not sure why this is happening.
Cheers.

The reason for only one of the elements being swiped is this line :
e.source.animate(anim);
If you will replace it with viewContainer.animate(anim); the swipe will work as you want.
Hope it helps.

jPaginate - Help Determining Which Page was clicked?

I am using jQuery's jPaginate plugin to sort data on one of my websites. The problem I am having is determining which page was click on jPaginate. I have posted my code below.
This code loads the plugin on Document Ready.
$("#demo2").paginate({
count : a,
start : 1,
display : 10,
border : false,
text_color : '#888',
background_color : '#EEE',
text_hover_color : 'black',
cookies : true,
onChange : function(){alert(); console.log($(this))},
background_hover_color : '#CFCFCF'
});
See screenshot: http://screencast.com/t/SbxHjn7H
The problem is I need to know what page was clicked whenever the user clicks on a number 1-5.. Any help or further understanding of this will be greatly appreciated. Thanks.

I actually was able to figure this out on my own..
You need to get the current page by writing a function to fire on the 'onChange' event within the jPaginate plugin.
$("#demo2").paginate({
count : a,
start : '<?=intval($page + 1);?>',
display : 10,
border : false,
text_color : '#888',
background_color : '#EEE',
text_hover_color : 'black',
cookies : true,
onChange : function(){
var getPage = $('.jPag-current').html();
var minusPage = getPage - 1;
},
background_hover_color : '#CFCFCF'
});