I am new to using PhoneGap on iOS and was stuck at cropping an image using imgAreaSelect JS plugin. The code works well in the web browsers while doesn't show any change in the iOS simulator. The image is being imported from a local folder.The code used is as below:
$('#testimg').imgAreaSelect({
handles: true,
aspectRatio: '16:9'
});
Please let me know if there any other way to crop an image using PhoneGap? This is how it looks in the web browser and the same does not happen in the iOS simulator.
The plugin imgAreaSelect probably wouldn't work. I have tried JCrop-http://deepliquid.com/content/Jcrop.html and it works perfectly fine. They explicitly mention that they have Touch support for iOS, Android, etc. Just follow the demo on the link.
Jcrop Does'nt support touch event in phone gap so there is no need to use I have spend 3 hour on it. I just want to crop after upload image from camera or salary in phonegap. I use following it is working fine.
https://github.com/acornejo/jquery-cropbox
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$targ_w = 640;
$targ_h=280;
$jpeg_quality = 90;
$save=dirname(__FILE__).'/files/abcd.jpg';
$src = dirname(__FILE__).'/img/img.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-Type: image/jpeg');
imagejpeg($dst_r,null ,$jpeg_quality);
exit;
}
?>
<!DOCTYPE html>
<!-- saved from url=(0041)http://acornejo.github.io/jquery-cropbox/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery-cropbox</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<link type="text/css" media="screen" rel="stylesheet" href="js/jquery.cropbox.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/hammer.js"></script>
<script type="text/javascript" src="js/jquery.cropbox.js"></script>
<script type="text/javascript" defer="">
$( function () {
$(function () {
var r = $('#results'),
x = $('.cropX', r),
y = $('.cropY', r),
w = $('.cropW', r),
h = $('.cropH', r);
$('#cropimage').cropbox({
width: 500,
height: 240
}).on('cropbox', function (event, results, img) { console.log("on crop");
x.text(results.cropX);
y.text(results.cropY);
w.text(results.cropW);
h.text(results.cropH);
$("#x").val(results.cropX);
$("#y").val(results.cropY);
$("#w").val(results.cropW);
$("#h").val(results.cropH);
});
});
});
</script>
</head>
<body>
<form action="index.php" method="post" onsubmit="return checkCoords();">
<div style="width:100%;">
<img id="cropimage" alt="" src="img/img.jpg" />
</div>
<div id="results"> <b>X</b>:
<span class="cropX"></span>
<b>Y</b>: <span class="cropY"></span>
<b>W</b>: <span class="cropW"></span>
<b>H</b>: <span class="cropH"></span>
<input type="text" name="x" id="x" size="4" />
<input type="text" name="y" id="y" size="4" />
<input type="text" name="w" id="w" size="4" />
<input type="text" name="h" id="h" size="4" />
</div>
<input type="submit" />
</form>
</body></html>
Related
I installed LazyLoading jquery plugin and try to use it in my bootstrap mvc project. In examples that I saw, address of just one image is set to tag. I don't know how does it work.
How can I show all images by scrolling page. This is my Code.
<script src="~/Scripts/jquery-2.2.3.min.js"></script>
<script src="~/scripts/js/modernizr.custom.js"></script>
<script src="~/Scripts/jquery.lazyload.js"></script>
<script src="~/Scripts/js/bootstrap.min.js"></script>
<!--Custom-Theme-files-->
<!--theme-style-->
<link href="~/Content/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="~/Content/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="~/Content/css/products.css" rel="stylesheet" type="text/css" media="all" />
<div class="LazyImage">
<div class="container">
<div>
<div class="col-md-9 ">
<div>
<div class="col-md-4 product-left p-left">
<div class="product-main simpleCart_shelfItem">
<img class="lazy" src="~/Content/images/grey.gif" data-original="../Content/images/LazyLoad/example.jpg" width="200" height="200" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript" charset="utf-8">
$(function () {
$("img.lazy").lazyload({
//threshold = 100,
//event = "sporty",
placeholder : "/Content/images/grey.gif",
event : "lazyload",
effect : "fadeIn",
effectspeed : 2000
});
});
$(window).bind("load", function () {
var timeout = setTimeout(function () {
$("img.lazy").trigger("lazyload")
}, 6000);
});
$(window).load(function () {
$("html,body").trigger("scroll");
});
</script>
I'm trying to make an app with an login form (index.html) and a mini control panel (panel.html), but when i try to login the app only show the Notificaction and dont redirect to the panel.html page.
This is the code of my index.html
<script type="text/javascript">
function loginTrue() {
Ti.UI.currentWindow.setURL("app://panel.html");
}
function showNotify(title, message) {
var notification = Ti.Notification.createNotification({
'title': title || 'Sin Titulo',
'message': message || 'Sin mensaje',
'timeout': 10
});
notification.show();
}
</script>
<script type="text/javascript">
</script>
<script type="text/python">
import MySQLdb
import os
db = MySQLdb.connect(host="localhost",user="root", passwd="toor", db="db")
cursor = db.cursor()
def login():
username= document.getElementById('usuario').value;
passw= document.getElementById('contrasena').value;
cursor.execute("SELECT * FROM usuarios WHERE userlUsuario='"+username+"' and userContrasena='"+passw+"'" )
res = cursor.fetchone()
if(res==None):
showNotify("Error!", "Datos Invalidos, intente de nuevo.");
else:
showNotify("Acceso!", "Login Correcto!");
loginTrue();
</script>
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/style.css" media="all" />
</head>
<body class="login">
<div class="login">
<section id="login">
<h1><strong>Login</strong></h1>
<form method="link">
<input id="usuario" type="text" placeholder="Usuario" />
<input id="contrasena" type="password" placeholder="Contraseña" />
<button class="blue" onclick="login()">Entrar</button>
</form>
</section>
</div>
</body>
</html>
I found it, the problem was with the Login form that redirects the page to it self when someone click on the submit button, i resolve it adding "javascript:void(0);" as action of the form.
<form action="javascript:void(0);">
I am using the instagram ruby gem. If i do more than 2 requests below is what the error i get.
Now, for the first two request it shows this
Processing by HomesController#index as JS
Processing by HomesController#index as */*
So when the third request happens now, it erros into (as said above) this
Completed 500 Internal Server Error in 4525ms
JSON::ParserError (757: unexpected token at '<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" class="hl-en not-logged-in ">
<head>
<meta charset="UTF-8" />
<title>Page Not Found • Instagram</title>
<meta name="robots" content="noimageindex" />
<link rel="Shortcut Icon" type="image/x-icon" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon-precomposed" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-144x144-precomposed.png" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/jquery.js"></script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/bluebar.js"></script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/strings/strings_en.js"></script>
<script>
window._csrf_token = 'NOTPROVIDED';
window._jscalls = [
];
</script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/polyfills/polyfill_old.js"></script>
<script data-main="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/modules/main.js" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/require.js"></script>
<link rel="stylesheet" type="text/css" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/bluebar/bluebar_new.css" />
<link rel="stylesheet" type="text/css" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/distillery/dialog-main.css"/>
</head>
<body class=" p-error dialog-404">
<div class="root">
<div class="page">
<header class="top-bar top-bar-new">
<div class="top-bar-wrapper">
<h1 class="logo">Instagram</h1>
<div class="top-bar-left">
<ul class="top-bar-actions">
<li>
<a class="top-bar-home" href="/" label=Home><i></i></a>
</li>
</ul>
<div class="top-bar-search" id="top-bar-search">
</div>
</div>
<div class="top-bar-right account-state" id="top_bar_right">
<ul class="top-bar-actions">
<li id="link_profile" class="link-signin">
<a href="javascript:;" class="loginLink">
<i></i>
<strong>Log in</strong>
</a>
</li>
</ul>
</div>
</div>
</header> <!-- .top-bar -->
<div class="main">
<div class="error-container">
<h2>Page Not Found</h2>
<p>This page could not be found.<br />You might have followed an incorrect link.</p>
</div>
</div> <!-- .main -->
</div> <!-- .page -->
<footer class="page-footer" role="contentinfo">
<div class="wrapper">
<nav>
<ul>
<li>About us</li>
<li>Support</li>
<li>Blog</li>
<li>API</li>
<li>Jobs</li>
<li>Privacy</li>
<li>Terms</li>
</ul>
</nav>
<p class="copyright">© 2013 Instagram</p>
</div>
</footer>
<div id="reactModalMountPoint"></div>
</div> <!-- .root -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18105282-1']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>'
I think something is wrong with the header? Since I am doing the process via ajax, how can I force it to process it through JS? since thats what seems to work here I believe.
Here is my ajax code
{
$.ajax({
url: /home,
method: "post",
data: {
// data goes here
},
success: function(html)
{
if(html)
{
// html goes here
}else
{
// html goes here</center>');
}
}
I think instagram is blocking your request if you do to many request in a specific time
Instagram is serving up an error page instead of the JSON you expect. You need to check the response's status code (in this case it would be 404 instead of 200) to find out if the payload is JSON or HTML in the case of the error page.
After so much work on this, I found out for my case that it is because something in the content of the JSON data is screwing things around. That was my situation (and I hate how 500 status is so vague about the error, too)
I am trying to attach onBlur and onFocus handler to a SSN input field. However, I am seeing an error saying object has no method 'ON'. The code is at http://jsfiddle.net/H4Q5f/
As you can see, I commented out to figure out the details, however had no luck so far. Any help is appreciated. For convenience, here is the code:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="../../appjavascript/ssa/mkwr/mytest.js"></script>
</head>
<body>
<div data-role="page" id="MyTestPage">
<div data-role="header" data-position="fixed" data-logo="true" data-tap-toggle="false" data-fullscreen="false" >
<h1> Page Title </h1>
</div>
<div data-role="content">
<div class="content-primary divcontent">
<h1 class='h1title'>Using This App</h1>
<p> Here are the instructions </a>
</p>
</div>
<div class="inputdata">
<br /> <br />
<input type="text" name="accessCode" id="AccessCode" value="" placeholder="Access Code:" /> <br />
<input type="text" id="ssn1" class="ssn" value="" placeholder="SSN1:" /> <br />
<input type="text" id="ssn2" class="ssn" value="" placeholder="SSN2:" /> <br />
</div>
<input type="button" id="myalert" value="Next" />
</div>
<!-- /content -->
</body>
</html>
And here is the java script
if (typeof TEST == "undefined" || !TEST) {
var TEST = {};
}
( function() {
TEST.mkwr = {
init : function() { // this is a public function
$("[data-role='page']").on("pagebeforeshow", TEST.mkwr.hideError());
$("[data-role='page']").on("pageshow", TEST.mkwr.setHandlers());
},
// On Blur, we need to add the '-'s if they doesn't exist so the user
// view edit the entered value formatted
ssnOnBlurHandler : function(input) { // Auto format SSN on blur
if ($(input).val().length == 9) {
var _ssn = $(input).val();
var _ssnSegmentA = _ssn.substring(0, 3);
var _ssnSegmentB = _ssn.substring(3, 5);
var _ssnSegmentC = _ssn.substring(5, 9);
$(input).val(
_ssnSegmentA + "-" + _ssnSegmentB + "-" + _ssnSegmentC);
}
}, // _ssnOnBlurHandler
// On focus, we need to remove the '-'s if they exist so the user
// can edit the entered value
ssnOnFocusHandler : function(input) {
// allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
if ($(input).val().length == 11) {
var _ssn = $(input).val();
var _ssnSegmentA = _ssn.substring(0, 3);
var _ssnSegmentB = _ssn.substring(4, 6);
var _ssnSegmentC = _ssn.substring(7, 11);
$(input).val(_ssnSegmentA + _ssnSegmentB + _ssnSegmentC);
}
}, // _ssnOnFocusHandler
// Hide all errors
hideError : function() {
$(".error").hide(); // Hide all errors
},
setHandlers : function() {
alert("Set Handlers");
// $(".ssn").each( function() {
// var input = this; input.blur(TEST.mkwr.ssnOnBlurHandler(input))
// });
// $(".ssn").each( function() {
// var input = this; input.focus(TEST.mkwr.ssnOnFocusHandler(input))
// });
}
};
})(); // end the anonymous function
$("[data-role='page']").bind("pageinit", TEST.mkwr.init());
I found a couple of issues with the code on the jsfiddle. Here is an updated one that is working to fire handlers and parse code. It looks like your ssn logic might need to be fixed a little but everything is getting you to there.
http://jsfiddle.net/H4Q5f/10/
The problems I saw were partly what was mentioned before you were using .on instead of .bind given the jquery version. But also you were not setting your handlers but rather firing your handlers. You had this:
input.bind("blur",TEST.mkwr.ssnOnBlurHandler(input))
which would return the result of the function to the set method which is not what you were looking for. So I changed it to this:
input.bind("blur",TEST.mkwr.ssnOnBlurHandler)
So now you are passing the handler to the set method so that it will fire when the event takes place.
Hope this makes sense.
The .on() function was introduced in jQuery 1.7. The code you've posted above includes jQuery 1.6.4 (<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>), which doesn't have that function. You can either upgrade to the latest version of jQuery (recommended) or use the equivalent function - .bind() - for the older versions.
When run, if I click the link at the bottom of the index page to get to the map page, I see the map briefly, filling a quarter of the screen, before it vanishes. What am I doing wrong?
Here is the code for the index page, which creates the map page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript">
function initialize(){
if(!window.navigator.onLine){
alert("An internet connection is required to use the MetPetDB App. Please find a connection and reopen the app.");
var element = document.getElementById("mainPage");
element.parentNode.removeChild(element);
document.getElementById("mainBody").innerHTML = "<p>An internet connection is required to use this app.</p>";
}
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
initializeMap(42,-73);
});
function initializeMap(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
</head>
<body id="mainBody" onload="initialize()">
<div id="mainPage" data-role="page" data-theme="e">
<div data-role="header">
<!-- <img src="headerlogo.png" />-->
<br />
<p style="text-align:center">To begin searching for samples, select one of the following search methods.</p>
</div>
<div data-role="content" style="height: 100%;">
<a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
<a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
<a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
Testing
</div>
</div>
</body>
</html>
And here is the map page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
</head>
<body>
<div data-role="page" data-theme="e" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>
</body>
</html>
The following code works: jsfiddle
I took your code, simplified it (using a single page template instead of the multi page one, but just to make it easier for jsfiddle) and moved all scripts inside the head.
Also be careful with phonegap, you should handle the onDeviceReady event, and not the body onload event. Even then there's a different method there to check if you're online.