Originally got this from this codepen http://codepen.io/netsi1964/pen/iyglK and then just adapted it to make it really simple. I used Inkscape for the SVG & literally just drew a couple of shapes and then opened up the SVG using a text editor. Everyting in the SVG was then just pasted in where the code below shows "<svg class="" etc., I just kept the class name. You can hide the intial strokes by making the width 0 in the raw SVG.
Check it out on this Codepen
| Had some 'fun' doing this the first time around, so posting it here for myself & hopefully will help others too :-) | |
| Not going into all the details, you should have Cordova, Android SDK, etc installed, your app created & tested etc, this is for the point where you want to submit your glorious new shiny app to the Google Play Store and you suddenly realize that you're running into things like, how to get a release APK created using Cordova. | |
| 1. Create a key if you don't have one, e.g. http://developer.android.com/tools/publishing/app-signing.html#cert | |
| 2. Alter your ...\platforms\android\AndroidManifest.xml, set debuggable to false: | |
| android:debuggable="false" | |
| 3. Create file 'custom_rules.xml' under platforms\android, put this in there: |
| //some close-to-real JSON data to play with | |
| var data = { | |
| "result": [ | |
| { | |
| "rname": "Auntie Cora's Bakery & Restaurant", | |
| "rcontent": [ | |
| { | |
| "raddress": "18190 Old Town Front St Tem" | |
| }, |
| <!-- I needed an expanding search bar that was not heavily dependant on JavaScript to work, so I came up with this --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Expanding Search Bar CSS Only</title> | |
| <link href="css/style.css" rel="Stylesheet"></link> | |
| </head> | |
| <body> | |
| <h1>Expanding Search Bar CSS Only</h1> |