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

 

parsley js: bootstrap validation

Parsley is a javascript form validation library. This snippets configures parsley for bootstrap input elements.

parsley options reference: http://parsleyjs.org/doc/annotated-source/defaults.html

Check if a form has changes before unload the page

Html:

Javascript:

 

jslint / jshint – my notes

global browser variables, window, document …

suppress linting for jQuery ($)

suppress linting for unused params

suppress linting for new operator

suppress linting for ++ operator

 

A Comparison of JavaScript Linting Tools

override a method for a Bootstrap JavaScript plugin

Here the method checkPosition() from the affix plugin is overridden.

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:

The javascript:

Of course this is not THE perfect solution, but it works.

File upload by ajax with Laravel and jQuery

Some Controller method in Laravel 4.2, with some JSON responses:

Some jQuery code, which handles the form submit and the results of the upload. Additionally we have notifications for the user.

 

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

The usage

javascript: fastest substring check, string replace and loop

Substring check

Performance Tests: http://jsperf.com/substring-test/3

String replace

Performance Tests: http://jsperf.com/htmlencoderegex

Loops

Performance Tests: http://jsperf.com/loops

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.

 

angularjs: summary

General

If you uglify angular scripts, remember to use bracket annotation for dependency injection.

Modules

Singleton

Class

Configration: variables, constants

Links

 

Directives

Directive Controller

Attributes

 

Links

angularjs: inject html

Angluar dont let you inject HTML content directly. The solution is to create a filter which makrs the html as trusted.

In the view the syntax looks like the following:

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 global item repository

The result is looking like this:

angularjs

 The HTML

The create form

The edit form

The app item

The angular app

The styles (LESS)

 

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

 

The JavaScript

This code is case insensitive and also removes all tags and newlines.

jQuery: add a class, wait some time and remove it again

This technique, combined with Animate.css or CSS3 Transitions will give you some nice effects:

Add a CSS class to an element, wail till the transition is finished, and then remove the class.