Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts
Thursday, February 23, 2012
Free Intro To JavaScript Book Online
If you need a easy to follow JavaScript into book and don't mind having to read it off your monitor screen you can check the free online version of Sams Teach Yourself JavaScript in 24 Hours.
Sunday, May 8, 2011
JavaScript rollover images
Here is a quick tutorial to show you a function to make JavaScript rollovers.
The function
var devc = {
rollover: function (id, img1, img2) {
this.addEvent(id, 'mouseover', function () {
$(id).src = img2;
});
this.addEvent(id, 'mouseout', function () {
$(id).src = img1;
});
},
addEvent: function (id, _event, _function) {
_object = $(id);
if (_object.addEventListener) {
_object.addEventListener(_event, _function, false);
} else if (_object.attachEvent) {
if (_event.length > 2) {
if (_event.substring(0, 2) != "on") {
_event = 'on' + _event;
}
}
_object.attachEvent(_event, _function);
}
}
};
I added the addEvent function from our previous post for convenience; however, you can see the original post from the link in the resource section of this post.
The rollover function simply adds two functions to the onmouseover and onmouseout events. The JavaScript on mouse over assigns image 2 to the image object and onmouseout adds image 1 to the image object.
Usage:
JavaScript
window.onload = function () {
devc.rollover('roll', 'star.png', 'starover.png');
};
HTML
<img id='roll' src="star.png" />
Monday, May 2, 2011
Using JavaScript to Change Opacity of an Object
I will show you how to change the opacity value of an object using JavaScript. I will create a function that can be use in conjunction with the animation function posted earlier (see resources below).
The function is simple
var developercaster = {
opacity: function (id, opacity) {
var o = $(id).style;
o.opacity = (opacity / 100);
o.MozOpacity = (opacity / 100);
o.KhtmlOpacity = (opacity / 100);
o.filter = "alpha(opacity=" + opacity + ")";
}
}
See usage example:
Set opacity to 0 on object id = ‘i’
developercaster.opacity(’i’, 0);
However, the function by itself is not as useful but when combined with our previously posted animation function it can be a neat tool to have. So, I will add two of our extra functions to this example:
var developercaster = {
opacity: function (id, opacity) {
var o = $(id).style;
o.opacity = (opacity / 100);
o.MozOpacity = (opacity / 100);
o.KhtmlOpacity = (opacity / 100);
o.filter = "alpha(opacity=" + opacity + ")";
},
animate: function (params) {
var speed = Math.round(params.speed / 1000);
var timer = 0;
if (params.start > params.end) {
for (var i = params.start; i >= params.end; i--) {
(function (i, _f, speed, timer) {
setTimeout(function () { _f(i); }, (timer * speed));
})(i, params.func, speed, timer);
timer++;
}
} else if (params.start < params.end) {
for (var index = params.start; index <= params.end; index++) {
(function (i, _f, speed, timer) {
setTimeout(function () { _f(i); }, (timer * speed));
})(index, params.func, speed, timer);
timer++;
}
}
//Callback
if (typeof (params.callback) != 'undefined') {
if ((typeof (params.callback) == 'function')) {
window.setTimeout(function () {
params.callback(); //Execute callback
}, (speed * timer));
}
}
},
addEvent: function (id, _event, _function) {
_object = $(id);
if (_object.addEventListener) {
_object.addEventListener(_event, _function, false);
} else if (_object.attachEvent) {
if (_event.length > 2) {
if (_event.substring(0, 2) != "on") {
_event = 'on' + _event;
}
}
_object.attachEvent(_event, _function);
}
}
};
Usage example:
JavaScript
window.onload = function () {
developercaster.opacity('i', 0);
developercaster.addEvent('show', 'click', function () {
developercaster.animate({
speed: 5000,
start: 0,
end: 100,
func: function (i) {
developercaster.opacity('i', i);
}
});
});
developercaster.addEvent('hide', 'click', function () {
developercaster.animate({
speed: 5000,
start:100,
end: 0,
func: function (i) {
developercaster.opacity('i', i);
}
});
});
};
HTML
<input name="show" type="button" value="Show Object" />
<input name="hide" type="button" value="Hide Object" />
<div id="i" style="width:300px; height:200px; border:1px solid #333333;background-color:Red">
Box
</div>
Resources:
Dollar function source code: here
AddEvent original post: here
Animate function previous post: here
Monday, April 18, 2011
Load an External JavaScript File Dynamically
Let’s say that you have an external JavaScript Library that is used in some instances but not needed all the time so you wonder how you can load this file only when needed. Here is a short code snippet that will help you dynamically load JavaScript file using none other than
JavaScript itself.
The first time I needed this feature I fell into the trap of using the XMLHttpRequest object (AJAX route) with the evil eval() function; I don’t need to explain why this is not safe (hint: cross site scripting attack).
var developercaster = {
script: function (_src) {
var tag = document.createElement('script');
tag.setAttribute('type', 'text/javascript');
tag.setAttribute('src', _src);
document.getElementsByTagName('head')[0].appendChild(tag);
}
};
The breakdown
Create new “script” tag using document.createElement, set the “type” and “src” attributes, and finally append it to the “head” element (yes, it’s that simple).
Usage
Let’s create an external JavaScript file called “getLocation.js” and add the following function to it:
var getLocation = {
current:window.location.href
};
Now to load the “getLocation.js” file dynamically we would proceed as follows:
<script language="javascript" type="text/javascript">
window.onload = function () {
if (typeof getLocation == 'undefined') {
developercaster.script('getLocation.js');
}
alert(getLocation.current);
};
</script>
Monday, April 11, 2011
Augmenting functions in JavaScript
This trick comes from Douglas Crockford’s JavaScript the good parts book (a must read); which, pour some syntactic sugar on our JavaScript code.
First we extend the global Function object via prototypal inheritance with a new method called "method". This method will allows us to skip the prototype call every time we need to extend an object.
Function.prototype.method = function (name, _function) {
this.prototype[name] = _function;
return this;
};
And we are done.
Usage:
<script language="JavaScript" type="text/JavaScript">
function mainOperation() {
this.main = 'main';
}
mainOperation.method('callMain', function () {
alert('hi '+this.main);
});
window.onload = function () {
var m = new mainOperation();
m.callMain();
};
</script>
First we created a new object called "mainOperation()". Then, we augmented this object with the method "callMain" by using our new "method" property. Finally, to demonstrate what we just did we create on the window.onload a new instance of "mainOperation" and called the new "callMain" method.
Output:
Recommended Reading:
Friday, March 25, 2011
Adding a Callback to the Basic JavaScript Animation Function
Note(s):
AddEvent source code can be found here.
$ function source code can be found here.
Original post can be found here.
I while ago I posted a snippet on how to create a general purpose animation function in JavaScript. The function was simple and to the point; yet, lacking a lot of details. In this post I will add the ability to specify a callback function once the animation has ended.
We begin with the original function:
var DeveloperCaster = {
Animate: function (params) {
var speed = Math.round(params.speed / 1000);
var timer = 0;
if (params.start > params.end) {
for (var i = params.start; i >= params.end; i--) {
(function (i, _f, speed, timer) {
setTimeout(function () { _f(i); }, (timer * speed));
})(i, params.func, speed, timer);
timer++;
}
} else if (params.start < params.end) {
for (var index = params.start; index <= params.end; index++) {
(function (i, _f, speed, timer) {
setTimeout(function () { _f(i); }, (timer * speed));
})(index, params.func, speed, timer);
timer++;
}
}
}
//Here is where our callback code will go
}
The callback function will be provided as an extra member of the params variable (a JSON object).
Example:
var params = {
speed:0,
start:0,
end:0,
func:function (i) {},
callback:function(){}
};
Adding a callback is simple:
We check to see if the parameter exists (if not we just ignore it)
if (typeof (params.callback) != 'undefined') {
}
Then, we need to ensure that the parameter is a function
if (typeof (params.callback) != 'undefined') {
if ((typeof (params.callback) == 'function')) {
}
}
Finally, we need to delay the execution until our animation has completed and we can do that by adding a timeout.
//Callback
if (typeof (params.callback) != 'undefined') {
if ((typeof (params.callback) == 'function')) {
window.setTimeout(function () {
params.callback(); //Execute callback
},(speed * timer));
}
}
Complete Function:
var DeveloperCaster = {
Animate: function (params) {
var speed = Math.round(params.speed / 1000);
var timer = 0;
if (params.start > params.end) {
for (var i = params.start; i >= params.end; i--) {
(function (i, _f, speed, timer) {
setTimeout(function () { _f(i); }, (timer * speed));
})(i, params.func, speed, timer);
timer++;
}
} else if (params.start < params.end) {
for (var index = params.start; index <= params.end; index++) {
(function (i, _f, speed, timer) {
setTimeout(function () { _f(i); }, (timer * speed));
})(index, params.func, speed, timer);
timer++;
}
}
//Callback
if (typeof (params.callback) != 'undefined') {
if ((typeof (params.callback) == 'function')) {
window.setTimeout(function () {
params.callback(); //Execute callback
},(speed * timer));
}
}
}
}
Usage Demo:
window.onload = function () {
DeveloperCaster.AddEvent("b", "click", function () {
DeveloperCaster.Animate({
speed: 2500,
start: 100,
end: 300,
func: function (i) { $('i').style.width = i + "px"; },
callback: function () {
//Callback
DeveloperCaster.Animate({
speed: 2500,
start: 20,
end: 200,
func: function (i) { $('i').style.height = i + "px"; }
});
}
});
});
};
Compress this code at: http://www.jscompressor.com
Subscribe to:
Posts (Atom)