Archive for the ‘JavaScript’ Category

Modernizr browser feature detection

None

Jul
04

I’ve recently invested a great deal of time investigating the full immediate potential of HTML5, CSS3, among other technologies for web sites and mobile sites/apps a like.

One thing that became abundantly clear was the need to fully detect browsers feature capabilities to provide a rich user experience for users without neglecting half the market, I.e. progressive enhancement.

On looking around for a solution I came across Modernizr, a JavaScript library that “adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any JavaScript to use it.”

For example:

“Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that! The syntax is very intuitive, too:”

.multiplebgs div p {

/* properties for browsers that

support multiple backgrounds */

}

.no-multiplebgs div p {

/* optional fallback properties

for browsers that don’t */

}

This library could open the door to greater level of adoption of the HTML5 and CSS 3 standards allowing developers more creative freedom and confidence with the work they produce knowing that they can ensure a wide coverage of their sites functionality.

Modernizr currently detects support for the following:

  • @font-face
  • Canvas
  • Canvas Text
  • HTML5 Audio
  • HTML5 Video
  • rgba()
  • hsla()
  • border-image:
  • border-radius:
  • box-shadow:
  • opacity:
  • Multiple backgrounds
  • CSS Animations
  • CSS Columns
  • CSS Gradients
  • CSS Reflections
  • CSS 2D Transforms
  • CSS 3D Transforms
  • CSS Transitions
  • Geolocation API
  • localStorage
  • sessionStorage
  • SVG
  • SMIL
  • SVG Clipping
  • Drag and Drop
  • hashchange
  • X-window Messaging
  • History Management
  • applicationCache
  • Web Sockets
  • Web Workers
  • Web SQL Database
  • IndexedDB
  • Input Types
  • Input Attributes

This library should definitely be high on your list of libraries to consider whilst undertaking a project, definitely worth a play at the very least.

Have a look at Modernizr browser feature detection (Progressive Enhancement)

Why not also check out this Modrenizr tutorial

Flash on the iPhone?! No, but it’s a step in the right direction…

None

Jun
07

It’s obviously been big news for a while now, how can you get Flash onto the iPhone, iPad, iPod?  Well technically you still can’t, however, Smokescreen certainly seems like a step in the right direction, or maybe a good alternative anyway.

In simple terms Smokescreen is; “a new open-source project aimed at converting Flash to JavaScript/HTML5 to run where it previously couldn’t and better interoperate with webpages where it previously could.”

Provisionally it is being promoted as a Flash ad replacement technology for devices that do not support the Flash plugin.

On first impressions it does indeed appear to be a good option for opening the web to platforms and devices that restrict Flash, although work is still required on the JavaScript size, currently standing at 175kB

At present it is, seemingly, limited to Flash Ad replacement due to the complexity of rendering anything larger or more detailed with JavaScript, but it’s a fantastic first attempt and it will be very interesting to see how this technology takes off and how developers implement it.

Keep your eye on: http://smokescreen.us/

JavaScript made easy with Pines Notify and jQuery

None

May
27

Whether you’re developing an admin system and want a simple yet stylish way to display system messages to your users or you just want to display latest news notifications on your website, Pines Notify is the script for you.

Simple to use and stylish out of the box, Pines Notify could certain save you a great deal of time and money.

Features include:

  • Timed hiding with visual effects.
  • Sticky (no automatic hiding) notices.
  • Optional hide button.
  • Supports dynamically updating text, title, icon, type…
  • Stacks allow notice sets to stack independently.
  • Control stack direction and push to top or bottom.
  • Supports HTML (including forms) in title and text.
  • Variable opacity.
  • Supports Pines icons/jQuery UI icons/any CSS based icons.
  • Supports custom classes for individual notice styling.
  • Standard and custom effects.
  • Optional drop shadows.

You can find the code and examples on Sourceforge.

jQuery Parallax Effect

None

May
16

If you’re looking for a JavaScript library that can offer unbeatable parallax effects then this library is for you.  It’s called Spritely and it’s a jQuery plugin that really impresses with the speed/smoothness of its animation and the versatility/ease of use.

If you have a look at the Spritely gallery page you can see some very interesting implementations that begin to highlight the potential power of this great little plugin.

Have a look for yourself at: Spritely.net

jQTouch for easy iPhone development

None

May
16

If you have been looking for a simple yet effective route into the iPhone application market, but you don’t want to invest hours/weeks/months into learning Objective-C then jQTouch might be the way forward for you.

If you don’t know much about iPhone development then you probably won’t know about the simplest approach to build an app using web views, or in simple terms calling HTML pages within the application.  This is where jQTouch really shines.

Using a combination of any of your favourite languages/platforms (I.e. PHP, MySQL, HTML, CSS, JavaScript) you can develop live data driven applications for the iPhone that will knock your client’s socks off.  jQTouch enables you to take full advantage of web views and your preferred languages whilst fully embarrassing the iPhone’s style and animation effects.  In fact you will be hard pushed to distinguish between a regular application and a jQTouch based app.

The slick, smooth and wide ranging animations it provides between screens offer a mind blowing effects that is sure to impress users, and that doesn’t even include its AJAX capabilities.

I would thoroughly recommend you all have a look:  jQTouch

« Previous Entries