Category: Web Design

Object JavaScript – Building Stateful jQuery UI Plugin Using Widget Factory

imageIn this post, you will learn step-by-step to build your own custom, reusable, testable jQuery UI widget.

You will extend the jQuery library with custom UI code and then use it on a page. The initial plug-in will be trivial to demonstrate the jQuery Widget Factory pattern. You will provide properties that you can change to change the look of your widget and you will provide some methods that will respond to user input.

In this post example, you will learn how to create a simple click counter. Click a button, increase the count. The idea is to show you the steps to create a jQuery UI Widget.

The Widget Factory system manages state, allows multiple functions to be exposed via a single plugin, and provides various extension points.

Continue reading

Advertisements

Object JavaScript – Building a Reusable Stateless jQuery Plugin

6327_image_58FAEDFAIn this post, you will learn step-by-step to build your own custom, reusable, testable jQuery Plugin.

There are times where you will want to reuse code that performs a series of operations on a selection.

For example, you may want to embed information a span element and then have that information displayed in a references section near the end of the document. In this case, the jQuery plugin is stateless.

In the next post, Building Stateful jQuery UI Plugin Using Widget Factory, you will see how to create a stateful jQuery plugin using jQuery Widget. And you will see how the widget is a better solution for plugins that require user interaction, because the Widget factory helps you maintain state.

Continue reading

Snippet – Using FontAwesome, Bootstrap, MVC for Checkbox, Radio Controls

imageSo how can you use the check-boxes from Font Awesome, and get the box to check/uncheck. When a user clicks, how do I show the right icon?

When checked: icon-check ; unchecked: icon-check-empty.

The basic idea is to select spans:before that is next to input you want..

image 

image

If you are using less/sass, you could just include the .icon-glass:before declarations, to make it all easier to maintain & modify. Continue reading

Single Page App – isLoading jQuery Plugin to Indicate Content Loads

imageWhen you’re loading information using jQuery AJAX, you may want to provide visual feedback when loading data or for any action that would take time.

In this Snippet, you will learn how to:

  • Load JSON data from a getJSON call to our server.
  • Show and hide a spinning indicator inside a div.
  • Bind the incoming data to a view model object.
  • Use the view model to populate an external template.

image

Then once the page is loaded, it will display the data based on an external template.

image

And we’ll provide some tips on how you you can use the IsLoading library to display the loading indicator on top of the page while loading and on top of the div itself.

Continue reading

Single Page Apps – Notes on Search Engine Optimization (SEO)

imageOne of my readers has mentioned that there are issues regarding search engine optimization (SEO) for single page apps. Because content is dynamically loaded via JavaScript calls rather than as part of the initial page load, search engine crawlers won’t see all the content.

Let me explain.

Continue reading

Snippet — Custom Fonts Fix

css3_logoFont embedding enables fonts used in the creation of a document to travel with that document, which ensures that a user views the document exactly as the author intended.

Modern browsers support the W3C standard for custom fonts, WOFF, at http://caniuse.com/#search=wof. WOFF is compressed TrueType/OpenType font that contains information about the font’s source. You can learn more about these at CSS3 Tutorial – Custom Fonts.

But what about earlier browsers?

Continue reading

Object JavaScript – Introduction to Templates in MVVM Using Knockout.js, Mustache

knockoutYou can use template feature in Knockoutjs to render your data. Templates are a straight forward way to build complex UI structure, often with repeating or nested blocks. You can use templates to show repeating data, such as data in tables or portfolios.

From the point of view of Object JavaScript, templates help you further separate out the code that gets and sets the data, from the code that renders the data. Templates provide you a way to reuse similar views throughout your application. And they help you isolate the view that deals with data in a way that you can find and understand in your own code.

Templates as they are used in this post, are reusable chunks of HTML that relate to your observables in Knockout.

There are two main ways of using templates:

  • Native templating where you use foreach, if, with and other control bindings. The control flow bindings use the HTML markup in your element and render against your data. The feature is built into Knockout.
  • String-based templating connects Knockout to third-party template engine, such as jQuery Templates, MustacheJS, or underscore.

In this post, you will learn the basics of using templates in your HTML application using JavaScript.

Continue reading

Object JavaScript – Dynamic UI Using Observables with MVVM Using Knockout.js

knockoutIn our previous posts, you learned how to build modules. In the next series of posts, you will learn how you can connect up modules to the user interface. You will learn, step by step how to use observables for your user interface to dynamically update itself.

Knockout.js makes it easier to create rich, responsive UIs with JavaScript. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainable.

Knockout helps you build rich client-side interactivity by using an MVVM-like (Model, View, and ViewModel) pattern. It does this by helping you separate the UI behavior and the data structures. To do this, you will use declarative bindings with observable data.

Knockout is free, open source, and available for your projects using the MIT License.

Knockout helps you:

  • Synchronize JSON models with HTML elements using Observable Properties.
  • Synchronize arrays, using Observable Arrays.
  • Provide calculated properties using Computed Properties.

Continue reading

HTML5 Tutorial – Captioning video tracks

imageThe <track> element represents a timed text file to provide users with multiple languages or commentary for videos. You can use multiple tracks and set one as default to be used when the video starts.

You can provide a transcript of the video.

This article introduces how can use WebVTT (Web Video Text Tracks) and Media Multiple Text Tracks API as part of your video.

Continue reading

HTML5 Tutorial – Custom Controls for Multimedia

imageWhen you display video in HTML5, you have may want to display a set of controls to the user. The HTML5 video tag has a control attribute that lets you display the controls that come with the browser.

But you may want to build custom controls using its media API, and the media events. Play, pause, and seek in the entire video, change the volume, mute, change the playback rate (including going into negative values).

This post shows how you can build a custom media player using different the media API attributes, events, and methods.

Continue reading

HTML5 Tutorial – Video, Audio Multimedia

imageHTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the video element, but you may need multiple files to support the video formats.

For this demo, I’m using a video that is in the public domain, Popeye for President.

Continue reading

HTML5 Tutorial – SVG Introduction to Filter Effects, Animation

image_thumb1SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. It is a language for describing 2D-graphics and graphical applications in XML.

With SVG, you can use XML and JavaScript to create web graphics that respond to user actions with sophisticated effects such as highlighting, tool tips, audio, and animation.

This post provides an introduction to the cool effects you can produce with filter effects and animation.

Continue reading

HTML5 Tutorial – SVG Clipping, Gradient, Transforms

image_thumb1SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. It is a language for describing 2D-graphics and graphical applications in XML.

You can find an overview of SVG a previous section, you’ll learn about Basic Shapes, Path, Text, and Fonts. In this section, you will learn more things you can do with shapes and text, such as clipping, gradients, tranforms.

With SVG, you can use XML and JavaScript to create web graphics that respond to user actions with sophisticated effects such as highlighting, tool tips, audio, and animation.

The most recent browser versions support most of SVG 1.1.

Continue reading

HTML5 Tutorial – SVG Events

image_thumb1SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. It is a language for describing 2D-graphics and graphical applications in XML.

With SVG, you can use XML and JavaScript to create web graphics that respond to user actions with sophisticated effects such as highlighting, tool tips, audio, and animation.

Continue reading

HTML5 Tutorial – SVG Basic Shapes, Viewport, Path, Text, Fonts

image_thumb1SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. It is a language for describing 2D-graphics and graphical applications in XML.

You can find an overview of SVG in our previous post. In this section, you’ll learn about Basic Shapes, Path, Text, and Fonts.

With SVG, you can use XML and JavaScript to create web graphics that respond to user actions with sophisticated effects such as highlighting, tool tips, audio, and animation.

Continue reading