elem.onmousedown = function(e){ return false; };
elem.onselectstart = function(){ return false; };
But sometimes you want to be able to interact with those child elements... I found some nice CSS over here that prevents text & element highlighting when you're dragging with a mousemove or a touchmove event:
p {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
class MapsLoader
constructor: ->
load: (successCallback,isMobileDevice) ->
@isMobileDevice = isMobileDevice
@successCallback = successCallback
if @hasLoaded != true
@loadGoogle()
else
@mapsLoaded()
loadGoogle: =>
# reference google loader callback to local method - clean up after callback
window.loadMaps = @loadMaps
apiKey = "-----your-api-key-here-----"
script = document.createElement("script")
script.src = "https://www.google.com/jsapi?key=#{apiKey}&callback=loadMaps"
script.type = "text/javascript"
document.getElementsByTagName("head")[0].appendChild(script)
loadMaps: =>
otherParams = if @isMobileDevice then "sensor=true" else "sensor=false"
google.load("maps", "3", {other_params: otherParams, "callback" : @mapsLoaded});
mapsLoaded: =>
@hasLoaded = true
window.loadMaps = null
if @successCallback
@successCallback()
@successCallback = null
@MapsLoader = new MapsLoader()
var hideKeyboard = function() {
document.activeElement.blur();
$("input").blur();
};
UPDATE: As a modern replacement for the jquery statement above, here's a simple, modern alternative:
var hideKeyboard = function() {
document.activeElement.blur();
var inputs = document.querySelectorAll('input');
for(var i=0; i < inputs.length; i++) {
inputs[i].blur();
}
};
// set up vars
var curPos = 0;
var distance = 2000;
var friction = 0.8;
var velocity = distance / ( friction * ( 1 / ( 1 - friction ) ) );
// in timer:
setInterval(function(){
velocity *= friction;
curPos += velocity;
},30);
The curPos value will ease into the target distance, no matter what you set as the friction and distance. Friction must be a decimal between zero and one.
find ./ -type l -exec ls -l {} \;
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=true"></script>The library provides a very easy way to display a path, add points realtime, store this path as an encoded & compressed string, and feed that string back into a new map when you're ready to display it later. You can see a live example here.
var encodedPath = google.maps.geometry.encoding.encodePath( _poly.getPath() ).replace(/\\/g,'\\\\');You can then feed that encoded string into a new Map's Polyline instance like so:
_poly.setPath( google.maps.geometry.encoding.decodePath( encodedPath ) );It seems like an oversight that this double-backslash issue isn't mentioned in the Google documentation. I spent hours before trying to figure out the problem in my mobile app before coming across the fix.
var bounds = new google.maps.LatLngBounds();
var path = _poly.getPath();
path.forEach(function( latlng ) {
bounds.extend( latlng );
});
_map.fitBounds( bounds );
// A static class for converting between Decimal and DMS formats for a location
// ported from: http://andrew.hedges.name/experiments/convert_lat_long/
// Decimal Degrees = Degrees + minutes/60 + seconds/3600
// more info on formats here: http://www.maptools.com/UsingLatLon/Formats.html
// use: LocationFormatter.DMSToDecimal( 45, 35, 38, LocationFormatter.SOUTH );
// or: LocationFormatter.decimalToDMS( -45.59389 );
function LocationFormatter(){
};
LocationFormatter.NORTH = 'N';
LocationFormatter.SOUTH = 'S';
LocationFormatter.EAST = 'E';
LocationFormatter.WEST = 'W';
LocationFormatter.roundToDecimal = function( inputNum, numPoints ) {
var multiplier = Math.pow( 10, numPoints );
return Math.round( inputNum * multiplier ) / multiplier;
};
LocationFormatter.decimalToDMS = function( location, hemisphere ){
if( location < 0 ) location *= -1; // strip dash '-'
var degrees = Math.floor( location ); // strip decimal remainer for degrees
var minutesFromRemainder = ( location - degrees ) * 60; // multiply the remainer by 60
var minutes = Math.floor( minutesFromRemainder ); // get minutes from integer
var secondsFromRemainder = ( minutesFromRemainder - minutes ) * 60; // multiply the remainer by 60
var seconds = LocationFormatter.roundToDecimal( secondsFromRemainder, 2 ); // get minutes by rounding to integer
return degrees + '° ' + minutes + "' " + seconds + '" ' + hemisphere;
};
LocationFormatter.decimalLatToDMS = function( location ){
var hemisphere = ( location < 0 ) ? LocationFormatter.SOUTH : LocationFormatter.NORTH; // south if negative
return LocationFormatter.decimalToDMS( location, hemisphere );
};
LocationFormatter.decimalLongToDMS = function( location ){
var hemisphere = ( location < 0 ) ? LocationFormatter.WEST : LocationFormatter.EAST; // west if negative
return LocationFormatter.decimalToDMS( location, hemisphere );
};
LocationFormatter.DMSToDecimal = function( degrees, minutes, seconds, hemisphere ){
var ddVal = degrees + minutes / 60 + seconds / 3600;
ddVal = ( hemisphere == LocationFormatter.SOUTH || hemisphere == LocationFormatter.WEST ) ? ddVal * -1 : ddVal;
return LocationFormatter.roundToDecimal( ddVal, 5 );
};
<html>
<head>
<style>
.notbroken {
position:absolute;
top:10000px;
}
.broken {
position:absolute;
-webkit-transform: translate3d(0px, 10000px, 0px);
}
</style>
</head>
<body>
<div class="notbroken">Scrollbars, please.</div>
</body>
</html>
Both css classes position the div 10,000 pixels down the page, but if you use the .broken version, you won't get scrollbars, and you'll never be able to see the content.
function GestureCallback( element, endCallback, changeCallback ) {
this.element = element;
this.end_callback = endCallback;
this.change_callback = changeCallback;
this.scale = 1;
this.rotation = 0;
this.init();
}
GestureCallback.prototype.init = function() {
// scope functions for listener removal
var self = this;
this.gestureStart = function(e){ self.onGestureStart(e) };
this.gestureChange = function(e){ self.onGestureChange(e) };
this.gestureEnd = function(e){ self.onGestureEnd(e) };
// really no need to check for IE stupidness, but maybe they'll support gestures someday? oy.
if( this.element.attachEvent ) this.element.attachEvent( "touchstart", this.gestureStart ); else this.element.addEventListener( "touchstart", this.gestureStart, false );
if( this.element.attachEvent ) this.element.attachEvent( "gesturestart", this.gestureStart ); else this.element.addEventListener( "gesturestart", this.gestureStart, false );
};
GestureCallback.prototype.onGestureStart = function ( e ) {
if( this.element.attachEvent ) this.element.attachEvent( "gesturechange", this.gestureChange ); else this.element.addEventListener( "gesturechange", this.gestureChange, false );
if( this.element.attachEvent ) this.element.attachEvent( "gestureend", this.gestureEnd ); else this.element.addEventListener( "gestureend", this.gestureEnd, false );
};
GestureCallback.prototype.onGestureChange = function ( e ) {
this.scale = e.scale;
this.rotation = e.rotation;
if( this.change_callback ) this.change_callback( this.scale, this.rotation );
};
GestureCallback.prototype.onGestureEnd = function ( e ) {
if( this.element.detachEvent ) this.element.detachEvent( "gesturechange", this.gestureChange ); else this.element.removeEventListener( "gesturechange", this.gestureChange, false );
if( this.element.detachEvent ) this.element.detachEvent( "gestureend", this.gestureEnd ); else this.element.removeEventListener( "gestureend", this.gestureEnd, false );
this.scale = e.scale;
this.rotation = e.rotation;
if( this.end_callback ) this.end_callback( this.scale, this.rotation );
};
GestureCallback.prototype.dispose = function() {
if( this.element.attachEvent ) this.element.detachEvent( "touchstart", this.gestureStart ); else this.element.removeEventListener( "touchstart", this.gestureStart, false );
if( this.element.attachEvent ) this.element.detachEvent( "gesturestart", this.gestureStart ); else this.element.removeEventListener( "gesturestart", this.gestureStart, false );
this.element = null;
this.end_callback = null;
this.change_callback = null;
this.gestureStart = null;
this.gestureChange = null;
this.gestureEnd = null;
};
And the instantiation:var pinchCallback = new GestureCallback( yourElement, function( scale, rotation ){
console.log('done: '+scale+','+rotation);
if( scale < 1 ) {
// leave the section, since we've pinched it closed
}
}, function( scale, rotation ){
console.log('changing: '+scale+','+rotation);
});
And when you're done with your gesture needs, collect your garbage:
pinchCallback.dispose(); pinchCallback = null;
Exception in thread "Animation Thread" java.lang.UnsatisfiedLinkError: quicktime.QTSession.Gestalt(I[I)S Caused by: java.lang.UnsatisfiedLinkError: /System/Library/Java/Extensions/libQTJNative.jnilib: no suitable image found. Did find: /System/Library/Java/Extensions/libQTJNative.jnilib: no matching architecture in universal wrapperThe above error was fixed by switching the JVM that Eclipse was using in the "Run..." configuration. On my Macbook, I simply switched to an alternate JVM 1.5, and it got rid of the problem:
The movie file already exists. Please delete it first.Here's a little timestamp code I wrote to help prevent file name conflicts:
_timestamp = "" + String.valueOf( p.year() ) + "-" + String.valueOf( p.month() ) + "-" + String.valueOf( p.day() ) + "-" + String.valueOf(p.hour()) + "-" + String.valueOf(p.minute()) + "-" + String.valueOf(p.second()); _mm = new MovieMaker( p, p.width, p.height, "output/render-"+_timestamp+".mov", _framesPerSecond, MovieMaker.ANIMATION, MovieMaker.HIGH );
quicktime.std.StdQTException[QTJava:7.6.6g],-2014=invalidDuration,QT.vers:7668000
-d32 -Xmx1024M -Xms1024M
# recursively(!) scrapes directories and prints out each email address to a new line
egrep -o -h -r '[a-zA-Z0-9_-\+\.]+@[a-zA-Z0-9_-\+\.]+?\.[a-zA-Z]{2,3}' *.* | sort | uniq > email_addresses.txt
Credit: I started with a command from Linux.com, and customized it until the output was correct, and nicely formatted.
newSection.fadeIn( 300 , function(){
newSection.css( { width:320, height:480 } );
});
I tried other css properties first, but width and height are the magic properties that prevent the element from being hidden. Quick, someone tell Steve Jobs :p
package com.cache.util
{
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.geom.Rectangle;
/**
* @author justin - http://uihacker.blogspot.com/
*/
public class ImageEdit
{
/**
* Return a snapshot of a DisplayObject
*/
public static function getBitmapData( vSource:DisplayObject, vW:Number=NaN, vH:Number=NaN, vTransparent:Boolean=true, vColor:int=0xFF00FF, vMatrix:Matrix=null ):BitmapData
{
// set defaults.
var vWidth:int = ( isNaN( vW )) ? vSource.width : vW;
var vHeight:int = ( isNaN( vH )) ? vSource.height : vH;
// create BitmapData object.
var vBmp:BitmapData = new BitmapData( vWidth, vHeight, vTransparent, vColor );
// draw contents of source clip into target.
if ( vMatrix == null ) vBmp.draw( vSource, null, null, null, null, true );
else vBmp.draw( vSource, vMatrix, null, null, null, true );
return vBmp;
}
/**
* Build & return a matrix to use to scale a bitmap
*/
public static function getScaleMatrix( scale:Number ) : Matrix
{
var matrix:Matrix = new Matrix();
matrix.scale(scale, scale);
return matrix;
}
/**
* Pass these constants into the getResizedBitmapData() function
*/
public static const RESIZE_SCALE:String = 'ImageEdit.resizeScale';
public static const RESIZE_LETTERBOX:String = 'ImageEdit.resizeLetterbox';
public static const RESIZE_CROP:String = 'ImageEdit.resizeCrop';
/**
* Return a resized BitmapData copy of the original
*/
public static function getResizedBitmapData( sourceBitmap:BitmapData, targetWidth:Number, targetHeight:Number, resizingMethod:String = '', disposeSourceBmp:Boolean = true ) : BitmapData
{
// get current dimensions
var curW:Number = sourceBitmap.width;
var curH:Number = sourceBitmap.height;
// get ratios of 2 sides
var ratio_w:Number = targetWidth / curW;
var ratio_h:Number = targetHeight / curH;
var shorterRatio:Number = ( ratio_w > ratio_h ) ? ratio_h : ratio_w;
var longerRatio:Number = ( ratio_w > ratio_h ) ? ratio_w : ratio_h;
// apply sizing
switch( resizingMethod )
{
case RESIZE_CROP :
// get shorter ratio, so we fill the target area
var resizedWidth:int = Math.round( curW * longerRatio );
var resizedHeight:int = Math.round( curH * longerRatio );
// create copy of, and resize the source bitmap
var resizedSourceBmp:BitmapData = new BitmapData( resizedWidth, resizedHeight, false, 0x00000000 );
// create scale matrix
var matrix:Matrix = new Matrix();
matrix.scale( longerRatio, longerRatio );
// take resized snapshot
resizedSourceBmp.draw( sourceBitmap, matrix );
// draw into destination bitmap, letterbox/pillowbox style
var destBitmap:BitmapData = new BitmapData( targetWidth, targetHeight, false, 0x00000000 );
var offset:Point = new Point( targetWidth / 2 - resizedWidth / 2, targetHeight / 2 - resizedHeight / 2 );
destBitmap.copyPixels( resizedSourceBmp, new Rectangle( -offset.x, -offset.y, resizedSourceBmp.width, resizedSourceBmp.height ), new Point() );
// clean up temp BitmapData
resizedSourceBmp.dispose();
if( disposeSourceBmp ) sourceBitmap.dispose();
return destBitmap;
break;
case RESIZE_LETTERBOX :
// get shorter ratio, so we fill the target area
var resizedWidth:int = Math.round( curW * shorterRatio );
var resizedHeight:int = Math.round( curH * shorterRatio );
// create copy of, and resize the source bitmap
var resizedSourceBmp:BitmapData = new BitmapData( resizedWidth, resizedHeight, false, 0x00000000 );
// create scale matrix
var matrix:Matrix = new Matrix();
matrix.scale( shorterRatio, shorterRatio );
// take resized snapshot
resizedSourceBmp.draw( sourceBitmap, matrix );
// draw into destination bitmap, letterbox/pillowbox style
var destBitmap:BitmapData = new BitmapData( targetWidth, targetHeight, false, 0x00000000 );
var pastePoint:Point = new Point( targetWidth / 2 - resizedWidth / 2, targetHeight / 2 - resizedHeight / 2 );
destBitmap.copyPixels( resizedSourceBmp, new Rectangle( 0, 0, resizedSourceBmp.width, resizedSourceBmp.height ), pastePoint );
// clean up temp BitmapData
resizedSourceBmp.dispose();
if( disposeSourceBmp ) sourceBitmap.dispose();
return destBitmap;
break;
case RESIZE_SCALE :
default :
// create output bitmap
var vBmp:BitmapData = new BitmapData( targetWidth, targetHeight, false, 0x00000000 );
// create scale matrix
var matrix:Matrix = new Matrix();
matrix.scale( ratio_w, ratio_h );
// snapshot with scale & return
vBmp.draw( sourceBitmap, matrix );
// clean up temp BitmapData
if( disposeSourceBmp ) sourceBitmap.dispose();
return vBmp;
break;
}
return null;
}
}
}
perspective( 1.0f, 1.5f, 1f, 200000f );The 200,000 value is the maximum depth that the camera will be able to see in OPENGL mode, which was large enough to view some of my distant objects that had been disappearing.
ruby -e "$(curl -fsSLk https://gist.github.com/raw/323731/install_homebrew.rb)"
brew install wget
curl http://feeds.feedburner.com/ffffound/everyone | egrep -o source\ url=\"http://[^[:space:]]*.\(jpg\|png\|gif\) | egrep -o http://[^[:space:]]*.\(jpg\|png\|gif\) | xargs wget -nc -P ~/Pictures/ffffound
bash ~/Pictures/ffffound_sssswiped.sh
public class App extends DroidGap {
// declare the original size of the iPad app
protected float ORIG_APP_W = 768;
protected float ORIG_APP_H = 1004;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
// set some defaults
this.appView.setBackgroundColor(0x000000);
this.appView.setHorizontalScrollBarEnabled(false);
this.appView.setHorizontalScrollbarOverlay(false);
this.appView.setVerticalScrollBarEnabled(false);
this.appView.setVerticalScrollbarOverlay(false);
// get actual screen size
Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
int width = display.getWidth();
int height = display.getHeight();
// calculate target scale (only dealing with portrait orientation)
double globalScale = Math.ceil( ( width / ORIG_APP_W ) * 100 );
// make sure we're all good
Log.v( "ORIG_APP_W", " = " + ORIG_APP_W );
Log.v( "ORIG_APP_H", " = " + ORIG_APP_H );
Log.v( "width", " = " + width );
Log.v( "this.appView.getMeasuredHeight()", " = " + height );
Log.v( "globalScale", " = " + globalScale );
Log.v( "this.appView.getScale()", "index=" + this.appView.getScale() );
// set some defaults on the web view
this.appView.getSettings().setBuiltInZoomControls( false );
this.appView.getSettings().setSupportZoom( false );
this.appView.getSettings().setGeolocationEnabled( true );
this.appView.getSettings().setLightTouchEnabled( true );
this.appView.getSettings().setRenderPriority( RenderPriority.HIGH );
// set the scale
this.appView.setInitialScale( (int)globalScale );
}
}
I also updated the AndroidManifest.xml file to lock the app into portrait orientation, work on tablet-sized devices, have a nice app name, and give the device access to the Internet and geolocation:<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.phonegap.testapp"
android:versionCode="1"
android:versionName="1.0">
<application android:icon="@drawable/icon"
android:label="@string/app_name"
android:debuggable="true">
<activity android:name=".App"
android:label="Test App"
android:configChanges="orientation|keyboardHidden"
android:noHistory="true"
android:stateNotNeeded="true"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<!-- allows access to phonegap hardware features -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<!--<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<supports-screens
android:largeScreens="true"
android:normalScreens="false"
android:smallScreens="false"
android:resizeable="true"
android:anyDensity="true"
/>
</manifest>
And finally my res/layout/main.xml file, though I'm not sure if this is different from the Phonegap default:<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<WebView android:id="@+id/appView"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
/>
</LinearLayout>
I hope this helps someone port their hybrid html5 iPad app to Android tablets.
function clearAnimation( element ) {
if( typeof element.style.webkitTransform !== 'undefined' && element.style.webkitTransform ) { // 2nd conditional fixes bug in Chrome on windows
element.style.webkitTransition = '';
element.style.webkitTransform = '';
}
}
This will prevent any overlap when switching between animatiions and instant repositioning.
element.addEventListener( "touchstart", function(e){ onStart(e); }, false );
function onStart ( touchEvent ) {
if( navigator.userAgent.match(/Android/i) ) {
touchEvent.preventDefault();
}
}
This bug is documented here: #trackbar {
width:100%;
height:50px;
cursor:hand;
cursor:grab;
cursor:-moz-grab;
cursor:-webkit-grab;
}
#trackbar.custom_cursor {
cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}
#trackbar.grabbing {
cursor:grabbing;
cursor:-moz-grabbing;
cursor:-webkit-grabbing;
}
#trackbar.custom_cursor.grabbing {
cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}
The 3 cursor attributes looked great in most modern browsers, but didn't work in IE (obviously) or Chrome. I looked at some code in Google Maps and gleaned the custom cursors, which you can pull down locally, but you have to reference the .cur files absolutely, or they won't work in IE. Awesome. So, because we'd rather use CSS, we only apply the custom cursor files if you're in IE or Chrome. Something like this:if( navigator.userAgent.match(/MSIE/i) || navigator.userAgent.match(/Chrome/i) ) document.getElementById('trackbar').className = 'custom_cursor';
I'm not sure if there's any way around it, but it doesn't seem like IE will change cursors after you mouse down. So if you add the "grabbing" class on a mousedown event, IE will block your grabby hands :(
StringUtil.searchReplace( myStr, _dummyChar, '<span class="textDummy"> </span>' );This now fails to insert a space. I tried just using an actual space, but since this is an html textfield, multiple consecutive spaces don't keep making more room. So, I added a space after the , and magically, it works like it had in previous years:
StringUtil.searchReplace( myStr, _dummyChar, '<span class="textDummy"> </span> ' );Whew fun!