Keep going techie...!: December 2016

Saturday, 17 December 2016

Get inline dots with middle vertical align like in facebook but only with css -Dot in middle- using CSS and HTML

CSS:
.dot:before {
content: "\2022";
}

HTML:
<i style="font-size: 7pt;" class="dot"></i>

Monday, 12 December 2016

Run a controller function whenever a view is opened/shown

.controller('MyCtrl', function($scope) {
$scope.$on('$ionicView.enter', function() {
// Code you want executed every time view is opened
console.log('Opened!')
})
})

Sunday, 11 December 2016

ionic-plugin-keyboard

Keyboard
The cordova.plugins.Keyboard object provides functions to make interacting with the keyboard easier, and fires events to indicate that the keyboard will hide/show.

cordova plugin add ionic-plugin-keyboard --save
Methods

cordova.plugins.Keyboard.hideKeyboardAccessoryBar
cordova.plugins.Keyboard.close
cordova.plugins.Keyboard.disableScroll
cordova.plugins.Keyboard.show
Properties

cordova.plugins.Keyboard.isVisible
Events

These events are fired on the window.

native.keyboardshow
A number keyboardHeight is given on the event object, which is the pixel height of the keyboard.
native.keyboardhide
API reference
Keyboard.hideKeyboardAccessoryBar
Hide the keyboard accessory bar with the next, previous and done buttons.

cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);
Supported Platforms

iOS
Keyboard.close
Close the keyboard if it is open.

cordova.plugins.Keyboard.close();
Supported Platforms

iOS, Android, Blackberry 10, Windows
Keyboard.disableScroll
Prevent the native UIScrollView from moving when an input is focused. The telltale sign that this is happening is the top of your app scrolls out of view (if using Ionic, your header bar will disappear).

This does not prevent any DOM elements from being able to scroll. That needs to happen from CSS and JavaScript, not this plugin.

cordova.plugins.Keyboard.disableScroll(true);
cordova.plugins.Keyboard.disableScroll(false);
Supported Platforms

iOS, Windows
Keyboard.show
Force keyboard to be shown. This typically helps if autofocus on a text element does not pop up the keyboard automatically

cordova.plugins.Keyboard.show();
Supported Platforms

Android, Blackberry 10, Windows
native.keyboardshow
This event fires when the keyboard will be shown or when the keyboard frame resizes (when switching between keyboards for example)

window.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
alert('Keyboard height is: ' + e.keyboardHeight);
}
Properties

keyboardHeight: the height of the keyboard in pixels

Supported Platforms

iOS, Android, Blackberry 10, Windows
native.keyboardhide
This event fires when the keyboard will hide

window.addEventListener('native.keyboardhide', keyboardHideHandler);

function keyboardHideHandler(e){
alert('Goodnight, sweet prince');
}
Properties

None

Supported Platforms

iOS, Android, Blackberry 10, Windows

Friday, 9 December 2016

Pass values entered in one html page having a form to another html page

index.html:

<!DOCTYPE html>
<html>
<body>
<form action="display.html" method="GET">
<input type="text" name="serialNumber" />

<input type="submit" value="Submit" />

</form>
</html>
</body>

display.html:

<!DOCTYPE html>
<html>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="geturi.js"></script>

<script type="text/javascript">
$(document).ready(function(){
var id = decodeURI(getUrlVars()["serialNumber"]);
alert(id);
})
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < hashes.length; i++) {
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</script>

</body>
</html>

Download source code:

https://firebasestorage.googleapis.com/v0/b/test-5b8d6.appspot.com/o/mani%2Fgeturi.zip?alt=media&token=ae290a10-752c-4b01-9481-c0bc8db7cad5

Thursday, 8 December 2016

Html - CSS3- ionic - image as a radio button

HTML:
<div class="cc-selector">
<div style=" padding: 0px; " class="row">
<div class="col col-33">
<input ng-model="choice.value" id="lessSpicy" type="radio" name="credit-card" ng-value="'1'" />
<label class="drinkcard-cc lessSpicy" for="lessSpicy"></label>
</div>
<div class="col col-33">
<input ng-model="choice.value" id="spicy" type="radio" name="credit-card" ng-value="'2'"/>
<label class="drinkcard-cc spicy"for="spicy"></label>
</div>
<div class="col col-33">
<input ng-model="choice.value" id="extraSpicy" type="radio" name="credit-card" ng-value="'3'"/>
<label class="drinkcard-cc extraSpicy" for="extraSpicy"></label>
</div>
</div>
</div>

CSS:

.cc-selector input{
margin:0;padding:0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;

}

.lessSpicy{background-image:url("../img/spice/Mild.png");}
.extraSpicy{background-image:url("../img/spice/Hot.png");}
.spicy{background-image:url("../img/spice/Medium.png");}

.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .1;}
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
-webkit-filter: none;
-moz-filter: none;
filter: none;
opacity: .9;
}
.drinkcard-cc{
cursor:pointer;
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
width:80px;height:70px;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
-webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
-moz-filter: brightness(1.8) grayscale(1) opacity(.7);
filter: brightness(1.8) grayscale(1) opacity(.7);
opacity: .5;

}