maplace.js – simple map with markers

Maplace.js is a library for google maps. This snippet creates a map creates 2 marker applies some “style” to this map https://github.com/danielemoraschi/maplace.js <div id=”map” style=”height: 300px”></div> <script src=”https://code.jquery.com/jquery-2.2.4.min.js” integrity=”sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=” crossorigin=”anonymous”></script> <script src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyAMgZvDq9HAESOi_JbgZdA5RPYxKBgNYTg&callback=initMap” async defer></script> <script src=”maplace.min.js”></script> <script> function initMap() { var data = [ { lat: 45.9, lon: 10.9, title: Read more…

parsley js: bootstrap validation

Parsley is a javascript form validation library. This snippets configures parsley for bootstrap input elements. var parsleyInstance = $(‘#checkout’).parsley({ errorClass: ‘has-error’, successClass: ‘has-success’, errorsWrapper: ‘<div></div>’, errorTemplate: ‘<span class=”help-block”></span>’, classHandler: function (ParsleyField) { return ParsleyField.$element.parent(); } }); parsley options reference: http://parsleyjs.org/doc/annotated-source/defaults.html

Check if a form has changes before unload the page

Html: <form data-js-dirtyform-check=”true”> <!– form inputs –> </form> Javascript: // dirty form check to avoid going back in history and lose data $(“[data-js-dirtyform-check]”).each(function () { var _isDirtyAndNotSubmit = false; $(this).find(“:input”).on(“change.js-dirtyform-check”, function () { _isDirtyAndNotSubmit = true; }); $(document).on(“submit.js-dirtyform-check”, function () { // on window submit, disable the dirt check _isDirtyAndNotSubmit Read more…

jslint / jshint – my notes

global browser variables, window, document … /*jslint browser: true*/ suppress linting for jQuery ($) /*global $:false*/ suppress linting for unused params /*jslint unparam: true*/ // statement /*jslint unparam: false*/ suppress linting for new operator /*jshint nonew: false*/ suppress linting for ++ operator /*jslint plusplus: true */   A Comparison of Read more…

Making a websites’s mega menu accessible for tablets and below

The goal is to allow click events on the first level for desktop browsers, and to trigger a hover event for mobile browsers. How to detect a mobile browser? I chose this approach: http://stackoverflow.com/a/14301832/4074710 The mega menu: <nav> <ul> <li> <a href=”#”>Item</a> <ul> <li><a href=”#”>Subitem</a></li> <li><a href=”#”>Subitem</a></li> </ul> </li> <li> <a href=””>Item</a> <ul> <li><a Read more…

File upload by ajax with Laravel and jQuery

Some Controller method in Laravel 4.2, with some JSON responses: public function postUpload() { Input::file(‘uploadfile’)->move(storage_path(‘temp/’), ‘import.xls’); try { Artisan::call(‘importexcelfile’, [ ‘file’ => ‘app/storage/temp/import.xlsm’, ]); return Response::json([ ‘result’ => 1 ]); } catch (Exception $e) { return Response::json([ ‘result’ => -1, ‘message’ => $e->getMessage(), ]); } } Some jQuery code, which handles Read more…

angularjs: a simple registry with change event

This example shows how I used the angular service to build a application registry. I also wanted to listen on registry changes. The service app.service(“Registry”, [“$rootScope”,function($rootScope) { var registryService = { items: [], set: function(key, value) { this.items[key] = value; $rootScope.$emit(“registry.”+key); }, get: function(key) { return this.items[key] || undefined; } }; Read more…

notify user for unsaved changes

This script notifies the user before he leaves the page for unsaved changes. It fires at the page unload event and opens a special alert box. The user can now decide if he wants to proceed or cancel. var isDirty = false; $(“form :input, form textarea”).on(“change”, function(event){ isDirty = true; }); $(“form”).on(“submit”, function(event){ Read more…

angularjs: summary

General If you uglify angular scripts, remember to use bracket annotation for dependency injection. Modules var myModule = angular.module(“myModule”, [“otherModule”]); Singleton // singleton app.factory(“Service”, function() { var Service = { […] }; return Service; }); Class // function app.factory(“Item”, function() { function Item() { […] }; return Item; }); Configration: Read more…

angularjs: inject html

Angluar dont let you inject HTML content directly. The solution is to create a filter which makrs the html as trusted. app.filter(‘trust’, [‘$sce’, function($sce){ return function(text) { return $sce.trustAsHtml(text); }; }]); In the view the syntax looks like the following: <div ng-bind-html=”item.htmlContent | trust”></div> Source http://stackoverflow.com/questions/19415394/with-ng-bind-html-unsafe-removed-how-do-i-inject-html

first approach to angularjs

Playing around with angularjs, I created an app where you can create and edit items inside a content area. Github: https://github.com/alexwenzel/angular-tryout The facts: an app item, which can be modified by position, color and content an area, where items are displayed an area, where items can be created or edited a Read more…

creating an on page search with jQuery

The mission is to create an on page search with jQuery on a table of elements. The search only display rows with the given search term in it. All other rows are hidden. This is a quick prototype: The markup <input type=”text” id=”search” placeholder=”searchterm”> <table> <tbody> <tr> <td>searchterm</td> </tr> <tr> <td>searchterm</td> </tr> Read more…