jQuery Numeric Plugin Update

Long time since I’ve posted, but have updated my jQuery numeric plugin for allowing only numbers in input boxes, fixing a couple of bugs and adding functionality (removing from input and allowing integers only). See code updates via GitHub, or download the latest stable version zipped. In the future might set it so you can restrict how many characters you can put after the decimal point (so could be useful for currency input).

jQTouch

jQTouch is a jQuery plugin for creating mobile applications with just HTML, CSS & JavaScript.

»

Bookmark & Share

jQTouchX

No matching services.
AIM
Amazon Wishlist
Ask
Backflip
BallHype
Bebo
Blogger
Blogmarks
Buzz
Delicious
Digg
Diigo
Email
Facebook
Fark
Faves
Favorites
FriendFeed
Google
Hatena
Kaboodle
kIRTSY
Link-a-Gogo
LinkedIn
Live
Menéame
Mister Wong
Mixx
Multiply
myAOL
MySpace
Netvibes
Netvouz
Newsvine
Nujij
Plaxo
Print
Propeller
Reddit
Segnalo
Simpy
Slashdot
StumbleUpon
Stylehive
Technorati
ThisNext
Tip’d
Tumblr
Twitter
TypePad
WordPress
Y! Bookmarks
Yardbarker
Message sent! Share again.

AddThis for Firefox

Bookmark, email or share any page, anytime.

255 character limit
Bookmark & SharejQTouch
Email
Favorites
Print
Delicious
Digg
Google
MySpace
Live
Facebook
StumbleUpon
Twitter
More… (54)

A jQuery plugin for mobile web development on the iPhone, Android, Palm Pre, and other forward-thinking devices.

Link: http://www.jqtouch.com/

jQuery Quick Tip: Extract CSS Background Image

jQuery allows you to get the background image of any element on a web page:

$("#myelement").css("background-image");

However, this returns it in an undesirable format: url(http://example.com/images/image.jpg) or url("http://example.com/images/image.jpg"). With a bit of string replacement, you can get extract the URL:

function extractUrl(input)
{
 // remove quotes and wrapping url()
 return input.replace(/"/g,"").replace(/url(|)$/ig, "");
}

So now you can just do this:

extractUrl($("#myelement").css("background-image"))

Which will return the URL on its own http://example.com/images/image.jpg.

Changing jQuery UI’s Dialog widget’s default options

While jQuery UI’s Dialog widget has good default options, there may be circumstances when you want to change them. For instance, you may want all dialog windows to be modal windows, with a semi-transparent background and the bgiframe plugin applied. Place this code at the end of the page, or within $(document).ready.

$.extend($.ui.dialog.defaults, {
 overlay : { background: "#000", opacity: 0.8},
 modal: true,
 bgiframe: true
});

Pixie – small, simple, website maker

Recently, I have been looking at Pixie, to see how it works as a simple system for managing websites. It is open source (GPL v3), written to web standards (XHTML Strict, Microformats) and powered by jQuery and PHP/MySQL.

It consists of several page types – dynamic (blog, news), static or module (e.g. contact form, events, links etc). Plugins add additional functionality to modules (like allowing comments on blog posts). Blocks allow you to add content alongside your content (e.g. display RSS content from BBC News).

Easy enough to extend, with detailed guides for module development (so you can create additional ones to those that are bundled with Pixie) block development and theme development.

A few additional blocks I have created: News (latest content from a page named ‘news’) and Google Maps. These can then be shown on any page (so you can see news on your home page for example).

jQuery newsticker Demo Page

Some may have noticed, the demo page for the newsticker jQuery plugin has not been working in Internet Explorer 7. This is due to it being experimental code for allowing pausing, resuming and clearing of any active news ticker’s on the page. It should now work in IE7 (and hopefully IE6 as well).

There are a few additions to the plugin that should be of benefit. Set up the news ticker as usual:

var $news = $("#news").newsticker();

After doing so, you may pause, resume and clear it in your own functions. For example, clicking on elements with id’s pause, resume or clear will perform the relevant action:

$("#pause").click(
  function()
  {
    $.newsticker.pause($news);
    return false;
  }
);

$("#resume").click(
  function()
  {
    $.newsticker.resume($news);
    return false;
  }
);

$("#clear").click(
  function()
  {
    $.newsticker.clear($news);
    return false;
   }
);

The code available for download via jQuery SVN doesn’t have this functionality, but should work fine in IE7.

jQuery Validation Plugin Tip: Highlight Field

The validation plugin for jQuery is a very useful plugin for validating forms before they are submitted. This tip shows you how you can highlight the field if there is an error with it.

var validator = $("#myform").validate({
 onblur: function(el)
 {
  if(validator.check(el))
   $(el).removeClass(validator.settings.errorClass);
  else
   $(el).addClass(validator.settings.errorClass);
 },
 onkeyup: function(el)
 {
  if(validator.check(el))
   $(el).removeClass(validator.settings.errorClass);
  else
   $(el).addClass(validator.settings.errorClass);
 }
});

This adds the errorClass (normally ‘error’) to the field being validated, which can then be styled via CSS:

input.error { border: 1px solid #c00; background: #fee }

jQuery appendToArray plugin

With jQuery, I found no real way of grouping elements together (other than using a class, and using filter), so I thought about adding jQuery objects to an array (or multiple arrays), which can then be iterated over with jQuery.each. I tried appendTo (on the off chance that it would work with plain arrays), but no such luck. So I created a simple plugin:

jQuery.fn.appendToArray = function()
{
 var a = arguments;
 for(var i = 0; i < arguments.length; i++) a[i][a[i].length] = this;
 return this;
}

Through using arguments, it can be appending to multiple arrays at the same time:

var ar1 = [];
var ar2 = [];
var $field1 = $("[name='field1']").appendToArray(ar1, ar2);
var $field2 = $("[name='field2']").appendToArray(ar1);
var $field3 = $("[name='field3']").appendToArray(ar1, ar2);
var $field4 = $("[name='field4']").appendToArray(ar2);
var $field5 = $("[name='field5']").appendToArray(ar2);

You can then loop through the arrays, with specific functions applied:

$.each(ar1, function()
 {
  console.log(this.attr("name") + " is in ar1");
 }
);

$.each(ar2, function()
 {
  console.log(this.attr("name") + " is in ar2");
 }
);