Tuesday, January 11, 2011
HTML Radio Buttons and JavaScript
Here is a quick tutorial that shows how to read the selected value or selected index from a group of radio buttons using JavaScript.
I present the sample within the DeveloperCaster namespace (like all the samples in this blog); however, I decided to create a sub namespace for Forms so we will access these functions by calling DeveloperCaster.Forms.
var DeveloperCaster = {
Forms: {
}
}
Finding the selected index
The function goes straight to the point. We check if it is a valid object otherwise we return -1; then, we loop through every object in the collection until we find the checked item to return the index (-1 will be returned if no item is checked).
RadioSelectedIndex: function (id) {
if (typeof ($(id).length) != 'undefined') {
var index = -1;
var _obj = $(id);
for (var i = 0; i < _obj.length; i++) {
if (_obj[i].checked) {
index = i;
break;
}
}
return index;
}
return -1;
}
Finding the selected value
This function simply utilizes our previous function; so, we check if the selected index is not equal to -1 and then return the selected index value.
RadioSelectedValue: function (id) {
var index = DeveloperCaster.Forms.RadioSelectedIndex(id);
if (index != -1) {
return $(id)[index].value;
}
return "";
}
Here is the complete set of functions:
var DeveloperCaster = {
Forms: {
RadioSelectedIndex: function (id) {
if (typeof ($(id).length) != 'undefined') {
var index = -1;
var _obj = $(id);
for (var i = 0; i < _obj.length; i++) {
if (_obj[i].checked) {
index = i;
break;
}
}
return index;
}
return -1;
},
RadioSelectedValue: function (id) {
var index = DeveloperCaster.Forms.RadioSelectedIndex(id);
if (index != -1) {
return $(id)[index].value;
}
return "";
}
}
}
Usage
Note: Tutorial for the AddEvent function can be found here.
Compress this code here: http://www.jscompressor.com/
Usage
Note: Tutorial for the AddEvent function can be found here.
<html>
<head>
<script language=”javascript”>
window.onload = function () {
DeveloperCaster.AddEvent('btnValue', 'click', function () {
alert(DeveloperCaster.Forms.RadioSelectedValue('group1'));
});
DeveloperCaster.AddEvent('btnIndex', 'click', function () {
alert(DeveloperCaster.Forms.RadioSelectedIndex('group1'));
});
}
</script>
</head>
<body>
<input type="radio" name="group1" value="One"> One<br>
<input type="radio" name="group1" value="Two" checked>Two<br>
<input type="radio" name="group1" value="Three"> Three
<br />
<input type="button" name="btnValue" value="Selected Value" />
<input type="button" name="btnIndex" value="Selected Index" />
</body>
</html>
Compress this code here: http://www.jscompressor.com/
Motorola Xoom Table
This year's CES was about Tablet's and the Motorola Xoom running Android 3.0 was one of the better ones shown at the show.
What they are saying around the Web:
Tuesday, December 14, 2010
Kinect tech firm releases open-source drivers | Game Development | News by Develop
PrimeSense, the company behind the technology used by Microsoft's Kinect device has released open source drivers for both PC and MAC according to various blogs around the web.
Friday, December 10, 2010
Microsoft To Announce Second Major WP7 Update At MWC?
WP7 major updates coming according rumors floating around the web (see here). The updates will be announced during the upcoming Mobile World Congress that will be held between the 14-17 of February 2011, in Barcelona (see here). The updates should bring better controls to developers as well as information about Silverlight 5 for WP7. I am yet to begin working on WP7 but I have been playing with the tools and so far I am impressed.
JavaScript DOM ready function
For years we have relied on the window.onload event to trigger the execution of our JavaScript code; yet, by using such approach our code needs to wait until the last element of our page is loaded. To tell you the truth, relying on the window.onload event does the job most of the time; however, there are instances where we need to execute a piece of code while the page is still loading and that’s where a DOM ready function comes to play. So, in this post I will implement a DOM ready function.
From my previous posts you can tell that I always organize all the functions within a single namespace using JSON notation.
Basic namespace structure:
var DeveloperCaster = {
FunctionToExecuteOnReady: null,
Ready: function (_function) {
},
OnLoad: function (_function) {
}
};
I will need two function and a variable in this namespace.
Variable(s):
FunctionToExecuteOnReady : I will use this variable as a pointer to the function I will be executing.
Function(s):
Ready function: This is the actual DOMReady implementation
OnLoad function: I posted this function last month and it will used as a last resort if all my DOMReady attemps failed.
Ready Function
Ready: function (_function) {//DOM Ready
if (typeof DeveloperCaster.FunctionToExecuteOnReady != 'function') {
DeveloperCaster.FunctionToExecuteOnReady = _function;
} else {
var _current = DeveloperCaster.FunctionToExecuteOnReady;
DeveloperCaster.FunctionToExecuteOnReady = function () {
if (_current) {
_current();
}
_function ();
};
}
var _DOMReady = false;
var _wait = true;
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
DeveloperCaster.FunctionToExecuteOnReady();
_DOMReady = true;
_wait = false;
}, false);
} else {
//Internet Explorer
document.onreadystatechange = function () {
if (document.readyState == "complete") {
DeveloperCaster.FunctionToExecuteOnReady();
_DOMReady = true;
_wait = false;
}
};
}
if (!_wait && !_DOMReady) {
DeveloperCaster.OnLoad(DeveloperCaster.FunctionToExecuteOnReady); //use window.onload as last resort
}
}
First thing I do is to check my pointer to see if there is already a function assigned to it (same idea from the multiple OnLoad functions). So, if it happens to be the first function I will assign that function to the pointer; however, if there is already a function assigned to be executed I will then copy that function into the _current variable and assign a new function to the FunctionToExecuteOnReady to execute my current function (_current) and the new function (_function).
Next I will check if the browser supports the document.addEventListener (Chrome, Firefox, IE9, and safari). If the event is not supported I will try to use the document.onreadystatechange (IE8 and lower). Before I started this processes I declared two variables _DOMReady and _wait which are flags I will use to call the window.onload event in cases where neither of my approaches worked.
Here is the fully implemented function:
var DeveloperCaster = {
DOMExecuted: false,
DOMExecuted: false,
FunctionToExecuteOnReady: null,
Ready: function (_function) {//DOM Ready
if (typeof DeveloperCaster.FunctionToExecuteOnReady != 'function') {
DeveloperCaster.FunctionToExecuteOnReady = _function;
} else {
var _current = DeveloperCaster.FunctionToExecuteOnReady;
DeveloperCaster.FunctionToExecuteOnReady = function () {
if (_current) {
_current();
}
_function ();
};
}
var _DOMReady = false;
var _wait = true;
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
DeveloperCaster.FunctionToExecuteOnReady();
DeveloperCaster.DOMExecuted = true;
}
_DOMReady = true;
_wait = false;
}, false);
} else {
//Internet Explorer
document.onreadystatechange = function () {
if (document.readyState == "complete") {
DeveloperCaster.FunctionToExecuteOnReady();
_DOMReady = true;
_wait = false;
}
};
}
if (!_wait && !_DOMReady) {
DeveloperCaster.OnLoad(DeveloperCaster.FunctionToExecuteOnReady); //use window.onload as last resort
}
},
OnLoad: function (_function) {
var _current = window.onload;
if (typeof window.onload != 'function') {
window.onload = _function;
} else {
window.onload = function () {
if (_current) {
_current();
}
_function();
};
}
}
};
Usage:
DeveloperCaster.Ready(function () {
alert('DOM is ready');
});
Wednesday, December 8, 2010
Add CSS style text to a DOM object in JavaScript
Today I am posting a function to programmatically add CSS text to an object using JavaScript.
Function
Usage
The function request an object id and then you may pass as many CSS parameters as needed.
Function
var DeveloperCaster = {
Css: function (id) {
var styleTxt = '';
if (arguments.length >= 2) {
for (var i = 0; i < arguments[1].length; i++) {
styleTxt += arguments[1][i] + ';';
}
}
//Check for IE
if (window.attachEvent) {
$(id).style.cssText = styleTxt;
} else {
$(id).setAttribute('style', styleTxt);
}
}
}
Usage
The function request an object id and then you may pass as many CSS parameters as needed.
window.onload = function () {
DeveloperCaster.Css('objectId', 'width:300px',
'height:200px',
'border:1px solid #333333');
}
Subscribe to:
Posts (Atom)