Skip to content

Instantly share code, notes, and snippets.

View hanislovingit's full-sized avatar

Chuck Han hanislovingit

View GitHub Profile
@hanislovingit
hanislovingit / test.html
Created July 13, 2015 04:34
just-a-test
<div class="sign-in-box">
<div class="sign-in-box-logo"></div>
<form id="SSTAuthForm" name="SSTAuthForm" method="post" action="/">
<input type="hidden" id="returnUrl" name="returnUrl">
<div class="sign-in-box-input-box">
<input class="sign-in-box-input-box-text" type="email" id="UserName" name="UserName" placeholder="Email">
<input class="sign-in-box-input-box-text" type="password" id="Password" name="Password" placeholder="Password">
</div>
<div class="sign-in-box">
<div class="sign-in-box-logo"></div>
<form id="SSTAuthForm" name="SSTAuthForm" method="post" action="/">
<input type="hidden" id="returnUrl" name="returnUrl">
<div class="sign-in-box-input-box">
<input class="sign-in-box-input-box-text" type="email" id="UserName" name="UserName" placeholder="Email">
<input class="sign-in-box-input-box-text" type="password" id="Password" name="Password" placeholder="Password">
</div>
@hanislovingit
hanislovingit / Tello-guide-example-sign-in-component.css
Last active August 29, 2015 14:24
Tello-guide-example-sign-in-component
@media only screen and (max-width: 900px) and (min-width: 751px),
only screen and (max-width: 1280px) and (min-width: 901px),
only screen and (min-width: 1281px)
.sign-in-box {
width: 520px;
height: 290px;
margin: 250px auto;
border-radius: 5px;
background-color: #ddd;
padding: 40px 36px;
@hanislovingit
hanislovingit / css-example-with-high-specificity.css
Created July 9, 2015 23:28
CSS example with high specificity
#mainContainer div p.product-desc span {
color: #ff0000;
font-weight: bold;
font-size: 14px;
}
@hanislovingit
hanislovingit / Mapbox-creation-api-tileLayer-bing-wrapper.js
Created April 22, 2015 03:00
Mapbox-creation-api-tileLayer-bing-wrapper
// In our project, I had to use a custom wrapper for Mapbox's TileLayer
// b/c our ASP.NET MVC controller endpoint was originally created to
// conform to Bing map url template that uses "quadkey".
// I found this StackOverflow thread about a wrapper for Mapbox/Leaflet
// L.tileLayer to load tiles from Bing-formated urls (with "quadkey")
// http://stackoverflow.com/questions/17154781/use-bing-quadkey-tiles-instead-of-x-y-z-tiles-in-leafletjs-map
// Read about Bing Map Tile System to understand how to convert the
// two-dimensional tile XY coordinates into one-dimensional strings called "quadkeys".
var BingLayer = L.TileLayer.extend({
@hanislovingit
hanislovingit / Mapbox-creation-api-tileLayer.js
Created April 22, 2015 02:57
Mapbox-creation-api-tileLayer
// create the url template
var url = 'http://{s}.somedomain.com/blabla/{z}/{x}/{y}.png';
// construct the tile layer using the url template and add it to the map
var tileLayer = L.tileLayer(url, {
zIndex: 10,
maxZoom: 20
}).addTo(map);
@hanislovingit
hanislovingit / Bing-map-creation-api-tileLayer.js
Created April 22, 2015 02:56
Bing-map-creation-api-tileLayer
// Create the tile layer source
var tileSource = new Microsoft.Maps.TileSource({
uriConstructor: 'http://www.microsoft.com/maps/isdk/ajax/layers/lidar/{quadkey}.png'
});
// construct the tile layer using the tile source and make it visible on map
var tileLayer = new Microsoft.Maps.TileLayer({
zIndex: 10,
mercator: tileSource,
visible: true
@hanislovingit
hanislovingit / Mapbox-creation-api-map-locate.js
Created April 22, 2015 02:46
Mapbox-creation-api-map-locate
// try to locate the user
map.locate();
// handle location found
map.on('locationfound', function (e) {
// add a circle marker having the center at the location
L.circleMarker(e.latlng)
.setRadius(200)
.addTo(map);
@hanislovingit
hanislovingit / Bing-map-creation-api-geoLocationProvider.js
Created April 22, 2015 02:43
Bing-map-creation-api-geoLocationProvider
// Initialize the location provider
var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
// Get the user's current location and pass data to callbacks
geoLocationProvider.getCurrentPosition({
errorCallBack: function() {
// code here to handle error
},
successCallback: function (data) {
// code here to handle success
@hanislovingit
hanislovingit / Mapbox-creation-api-layerGroup.js
Created April 22, 2015 02:34
Mapbox-creation-api-layerGroup
// create a LayerGroup object for collecting markers
var markersLayerGroup = L.layerGroup();
// add some markers to the collection
markersLayerGroup.addLayer(marker1);
markersLayerGroup.addLayer(marker2);
// add the collection of markers LayerGroup to the map.
markersLayerGroup.addTo(map);
// or