Make a simple and cool bootstrap form.

All you have to do is, just add a class ‘alo-form’ to your form element and add the following styles to your stylesheet. All of a sudden your form looks like this. Styles ======== .alo-form .form-group:first-child { border-top-right-radius: 4px; border-top-left-radius: 4px; } .alo-form .form-group { display: table; width: 100%; margin-bottom: -1px; border: 1px solid #ccc; […]

Continue reading


Bootstrap wysihtml5 Editor

Bootstrap-wysihtml5 is a javascript plugin that makes it easy to create simple, beautiful wysiwyg editors with the help of wysihtml5 and Twitter Bootstrap. Files To reference <link rel=”stylesheet” type=”text/css” href=”/css/bootstrap.min.css”></link> <link rel=”stylesheet” type=”text/css” href=”/css/bootstrap-wysihtml5.css”></link> <link rel=”stylesheet” type=”text/css” href=”/css/wysiwyg-color.css”></link> <script src=”js/jquery-1.10.2.js”></script> <script src=”js/bootstrap.min.js”></script> <script src=”js/wysihtml5-0.3.0.js”></script> <script src=”js/bootstrap-wysihtml5.js”></script> Usage <textarea id=”some-textarea” placeholder=”Enter text …”></textarea> Script $(‘#some-textarea’).wysihtml5(); Note: […]

Continue reading


How to align the div center both horizontally and vertically for kiosk

CSS code .page-wrapper { /*margin: 10% 0 10% 0; */ width: 100%; height: 100%; margin: 0; padding: 0; background: url(“~/../img/grey_wash_wall.png”) repeat #004B8D; } .page-wrapper .jumbotron { width: 80%; height: 90%; background-color: #fff; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; max-width:100%; max-height:100%; overflow:auto; } HTML <div class=”page-wrapper”> <div class=”container”> <div class=”jumbotron”> <p>Hello World!</p> </div> </div> </div>

Continue reading


Reference websites for developing kiosk web applications

Reference websites for learning about kiosk application development with HTML5, css, Twitter bootstrap, jquery, backbonejs. http://www.sitepoint.com/tips-developing-kiosk-web-applications/ http://www.sitepoint.com/google-chrome-kiosk-mode/ http://www.sitepoint.com/gumby2-backbone-bootstrap/ https://github.com/sdeering/gumby2-backbone-bootstrap http://www.sitepoint.com/touch-swipe-function-debounce-script/ Codepen demo for HammerJs http://codepen.io/jtangelder/pen/lgELw http://www.sitepoint.com/web-app-image-preloading-setup-2mins/ https://github.com/CreateJS/PreloadJS Bootply demo http://www.bootply.com/116789

Continue reading