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/

Raphaël – a JavaScript library for creating vector images

Raphaël enables you to create geometric shapes / vector images in your web page without needing to know the syntax of Vector Markup Language (VML) or Scalable Vector Graphics (SVG). You can follow Raphaël on Twitter.

Sample code (example from website) shows how easy it is to work with.

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");

Animation of the shapes created can also be done with it (e.g. circles into squares).

Pure Accessible JavaScript Tabs

Found some code I did a while ago (pre jQuery) of a simple tabbed navigation implementation using JavaScript and basic CSS. Posting if anyone is interested.

HTML

<ul id="tabnav">
 <li><a href="#tab1">Tab 1</a></li>
 <li><a href="#tab2">Tab 2</a></li>
 <li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tabs">
 <div id="tab1"><a name="tab1"></a>
  <h1>Tab 1</h1>
  This is the contents of Tab 1
 </div>
 <div id="tab2"><a name="tab2"></a>
  <h1>Tab 2</h1>
  This is the contents of Tab 2
 </div>
 <div id="tab3"><a name="tab3"></a>
  <h1>Tab 3</h1>
  This is the contents of Tab 3
 </div>
</div>

CSS

#tabnav {
 width: 100%;
 overflow: hidden;
 list-style-type: none;
 margin: 0;
 padding: 0;
}
#tabnav li {
 float: left;
 padding: 6px;
 margin: 0;
}
#tabnav li.activetab {
 font-weight: bold;
}

JavaScript (hopefully the inline comments should explain how it works). Add in script tag after HTML

// setup tabs, default is 'tab2'
setupTabs("tab2");
 
function setupTabs(tabDefault) {
 if (document.getElementById) {
  // get tab navigator
  var tabnav = document.getElementById('tabnav');
  if(tabnav) {
   // get list items in tab navigator
   var tablist = tabnav.getElementsByTagName('li');
   // loop through list items
   for (i=0;i<tablist.length;i++) {
    // get tab links (i.e. anchor tags)
    var tablinks = tablist[i].getElementsByTagName('a');
    // loop through tab links
    for (j=0;j<tablinks.length;j++) {
     // get hash for current tablink (i.e. the #tabname portion)
     var hash = tablinks[j].hash;
     // set onclick attribute to toggle the tabs (does not work in IE)
     tablinks[j].setAttribute("onclick","toggleTabs('"+hash.substring(1)+"'); return false;");
     // detect IE (other browsers don't support attachEvent)
     if (tablinks[j].attachEvent) {
      // set onclick to toggle tabs
      tablinks[j].onclick = Function("toggleTabs('"+hash.substring(1)+"'); return false;");
     }
     // if has is default tab
     if (hash == ("#" + tabDefault)) {
      // set parent nodes css class to 'activetab' (i.e. 'li' tag) and show tab
      tablinks[j].parentNode.className = "activetab";
      showTab(tabDefault);
     } else {
      // set parent nodes css class to empty (i.e. 'li' tag) and hide tab
      tablinks[j].parentNode.className = ""
      hideTab(hash.substring(1));
     }
    }
   }
  }
 }
}
function showTab(tabId) {
 if (document.getElementById) {
  // get current tab
  var currentTab = document.getElementById(tabId);
  // show tab by setting display style to blank string
  currentTab.style.display = "";
  // get anchor tags in current tab
  var currentTabAnchors = currentTab.getElementsByTagName('a'); 
  // loop through anchor tags
  for (k=0;k<currentTabAnchors.length;k++) {
   // if anchor tag has same name as current tag id, hide it
   if(currentTabAnchors[k].name==tabId) {
    currentTabAnchors[k].style.display = "none";
   }
  }
 }
}
function hideTab(tabId) {
 if (document.getElementById) {
  document.getElementById(tabId).style.display = "none";
 }
}
function toggleTabs(tabId) {
 if (document.getElementById) {
  // an array of all the sections
  var sectionnames = new Array();
  // get tab navigator
  var tabnav = document.getElementById('tabnav');
  // get list items in tab navigator
  var tablist = tabnav.getElementsByTagName('li');
  // loop through list items
  for (i=0;i<tablist.length;i++) {
   // get tab links (i.e. anchor tags)
   var tablinks = tablist[i].getElementsByTagName('a');
   // loop through tab links
   for (j=0;j<tablinks.length;j++) {
    // get hash for current tablink (i.e. the #tabname portion)
    var hash = tablinks[j].hash;
    // add has to sections array
    sectionnames.push(hash.substr(1));
    // if hash is selected tab
    if (hash == ("#" + tabId)) {
     // set parent nodes css class to 'activetab' (i.e. 'li' tag)
     tablinks[j].parentNode.className = "activetab";
    } else {
     // set parent nodes css class to empty (i.e. 'li' tag)
     tablinks[j].parentNode.className = ""
    }
   }
  }
  // get tabs
  var tabs = document.getElementById('tabs');
  // get tab sections
  var sections = tabs.childNodes;
  // loop through sections
  for (i=0;i<sections.length;i++) {
   // if node is not a div, then continue to next loop item
   if (sections[i].nodeName!='DIV') continue;
   // if current section id matches tabId show it
   if(sections[i].id==tabId) {
    showTab(sections[i].id);
   } else {
    // get child anchor nodes
    var atags = sections[i].getElementsByTagName("a");
    // if anchor nodes have been found
    if (atags.length > 0) {
     // loop through the section names
     for (j=0;j<sectionnames.length;j++) {
      // if first anchor tags name matches the current section id, hide the tab
      if(sectionnames[j] == atags[0].getAttribute("name")) {
       hideTab(sections[i].id);
      }
     }
    }
    
   }
  }
 }
 return false;
}

Shrink Image (JavaScript)

This function shrinks an image, so its dimensions are no bigger than the maximum dimensions you define.

// get new dimensions so it fits within the maximum
// o = original dimensions / image, m = maximum dimensions
function shrink(o, m)
{
    // r = resized
    var r = {width: o.width, height: o.height};
    // if an image, rather than an object, resize it
    if(o.nodeName && o.nodeName.toLowerCase() == "img") r = o;
    if(r.width > m.width)
    {
        r.height = r.height * (m.width / r.width);
        r.width = m.width;
        if(r.height > m.height)
        {
            r.width = r.width * (m.height / r.height);
            r.height = m.height;
        }
    }
    else if(r.height > m.height)
    {
        r.width = r.width * (m.height / r.height);
        r.height = m.height;
    }
    return r;
}

To use, simply supply the image and the dimensions to constrain it to:

var image = document.getElementById("image");
var max = {width: 1024, height: 768};
shrink(image, max);

It also works with an object instead of an image, for non-image related dimension calculation.

var original = {width: 1200, height: 960};
var max = {width: 1024, height: 768};
var shrunk = shrink(original, max);

Code generation with jQuery

Update: changed post title (content still same)

Sometimes, when you are developing in javascript, you need to reference many form inputs on a page, which can be time consuming (typing each one out). With jQuery, you can reduce the time by using jQuery to write the code (which you then copy and paste). For example (simplified, as you probably would not have fields named field1, field2, field3 etc):

var $field1 = $("[name='field1']");
var $field2 = $("[name='field2']");
var $field3 = $("[name='field3']");
var $field4 = $("[name='field4']");
var $field5 = $("[name='field5']");
var $field6 = $("[name='field6']");
var $field7 = $("[name='field7']");
var $field8 = $("[name='field8']");
var $field9 = $("[name='field9']");

This simple script can be used to create the aforementioned code. Includes an ASP.NET fix (if you don’t want names like $ctl00$Content1$Field1)

$(
 function()
 {
  var $inputs = $(":input");
  var $textarea = $("<textarea>").css({width: "100%", height: "200px"});
  $inputs.each(
   function()
   {
    // $textarea.append("var $" + this.name + " = $("[name='" + this.name + "']");n");
    // ASPNET fix to get the name as set server side
    $textarea.append("var $" + ASPNETFix(this.name) + " = $("[name$='" + ASPNETFix(this.name) + "']");n");
   }
  );
  $("body").append($textarea);
 }
)

function ASPNETFix(name)
{
 return name.split("$").pop();
}

Simply save this into a separate JavaScript file (tweaking as needed), include on your page, then copy the text generated in the textarea at the bottom of the page.

This could also save time in other languages, as you control the output (could be C#, VB.NET, PHP, Python etc).