Tag: JavaScript

AngularJS – isolate scope – ‘&’ (function reference)

AngularJS – isolate scope – ‘&’ (function reference)

Introduction This blog demonstrates how to pass a reference to a function to an angular directive/template. The way in which the child directive/template calls the parent is also demonstrated. The example is available as a working JSFiddle here. This tutorial details creating directive/templates in general (without an isolated scope). This […]

AngularJS – isolate scope – ‘=’ (pass by reference)

AngularJS – isolate scope – ‘=’ (pass by reference)

Introduction This blog will explore the concept of passing object to angularJS directives / templates using by reference. When an object is passed by reference both the parent (controller or parent directive) and the child directive/template have access to the object. The relationship is bidirectional. This tutorial details creating directive/templates […]

AngularJS – isolate scope – ‘@’ (pass by value)

AngularJS – isolate scope – ‘@’ (pass by value)

Introduction Objects can be passed into an angularJS directive in any one of the following ways: By value using ‘@’ By reference using ‘=’ As a reference to a function in the parent controller using ‘&’ The next few blogs will detail each of these techniques. This blog will detail the […]

Rounding a number up to it’s nearest order of ten

Rounding a number up to it’s nearest order of ten

I’m hopeless at math, this is just for future reference as it really bugged me. How to round a number up to it’s upper order of 10. Not a simple as it may seem. Examples: 800 -> 1000 125 -> 1000 80 -> 100 43 -> 100 8 -> 10 9 […]

Using templates with AngularJs

Using templates with AngularJs

The purpose of this blog is to demonstrate how to use templates in AngularJS. A fully worked example is provided via jsFiddle. The example is simple and easy to follow. A detailed but succinct explanation of the code is provided. The template is “complex html” that we’ll want to reuse. […]

A jQuery plugin: delayedClickAction

A jQuery plugin: delayedClickAction

A jQuery plugin to allow an element to be clicked many times before a specified action is performed. The action/event-handler will be invoked after a specified delay. Why? Example: Increment a qty multiple times by clicking before an ajax call is made. Applies to any jQuery query. i.e. a bunch […]

Resolving AngularJS minimization / obfuscation issues

Resolving AngularJS minimization / obfuscation issues

AngularJs uses Dependency Injection (DI) to supply objects/variables during configuration. Variables that begin with the $ character tend to be injected, therefore if a minimizor and/or obfuscater changes the variable name, the DI will not be performed. This Angular Crash Course provides a detailed intro on AngularJS. This blog details a common solution to the […]

AngularJS – A crash course – in processing AJAX JSON

AngularJS – A crash course – in processing AJAX JSON

I’ve recently started using AngularJS http://angularjs.org/ . It’s very impressive. It’s extremely useful for handling/processing AJAX JSON results. This blog demonstrates the following: Setting up an AngularJS “application”. Binding (dynamic) JSON data to the view. I.e. processing an AJAX callback. Invoking an AngularJS Controller function externally from outside the AngularJS […]

jQuery – Fly to basket (and fly from basket)

jQuery – Fly to basket (and fly from basket)

The example below is a fully working Fly to Basket implementation. The image will fly to the center of the basket or fly from the basket back to where it came from.

CSS – Removing the (new-line) spaces between inline elements

CSS – Removing the (new-line) spaces between inline elements

Observe the gap between the checkbox and the label on the second instance! This is a “feature” with inline (or inline-block) elements on a page. A new-line /carriage-return in the code is treated as white space between inline elements. While good advice would be to work with this rather […]

jQuery-UI : change the color of a button using CSS classes

jQuery-UI : change the color of a button using CSS classes

In many web applications it’s necessary to have more than one color button, primary and secondary for example.

This tutorial demonstrates how to achieve this using only CSS.

jQuery-UI : Specifying different Button Icon colors using only CSS classes

jQuery-UI : Specifying different Button Icon colors using only CSS classes

Doing this:

Results in This tutorial demonstrates how changing the icon color can  be achieved.

jQuery-UI : Applying an Icon to a button using CSS classes

jQuery-UI : Applying an Icon to a button using CSS classes

This tutorial simply demonstrates a generic reusable JavaScript snipped which will allow you to specify Button Icon’s using only CSS classes. I.e. no need to apply Icons using JS anymore.

jQuery-UI : Changing the color of an icon

jQuery-UI : Changing the color of an icon

This quick tutorial demonstrates how to change the color of jQuery UI icons. e.g.

will result in red and blue icons respectively

Spring 3 MVC – Adding Objects to a List element on the fly at form submit – (Generic method)

Spring 3 MVC – Adding Objects to a List element on the fly at form submit – (Generic method)

Edit 10-Feb-2015 A much better approach to this problem is simply to use JSON. A number of comments below are in regard to nested lists. The solution detailed here does not readily facilitate nested lists. The solution outlined in this blog does: http://outbottle.com/spring-4-web-mvc-json-handling/. JSON is the recommended way of achieving “Adding […]

Permit CSS, JS and other resources in a Spring application

Permit CSS, JS and other resources in a Spring application

In Spring 3 Web MVC applications every request is sent through an @Controller method. This is undesirable for CSS, JS and image files. Overcome the problem as so.

.NET MVC 3 Custom AJAX Error Handling

.NET MVC 3 Custom AJAX Error Handling

Custom Message From AJAX Error Handling with jQuery and MVC 3 An exception on the server-side will invoke the JavaScript AJAX error handling function. This blog will detail two methods to provide custom error handling, overriting the default. Both methods allow specific error messages to be returned to the client […]

jQuery load() – dynamically loaded content scripts are accessible and can access parent scripts?

jQuery load() – dynamically loaded content scripts are accessible and can access parent scripts?

The answer is yes actually. $(‘#dyn’).load(‘dynamic.html’) The scripts on the existing page can call the dynamically loaded scripts and the dynamically loaded scripts can call the existing static scripts.