Archive for the 'Javascript' Category...
Filed under Programming, Javascript
In some situations we are required to take a value that was intended to be a string and convert it to a numerical value for calculations.
In this situation we would implement a form of variable control called "Casting".
CODE:
-
//String
-
var string = "5.00";
-
-
//What would happen if we wanted to add another 5.00 to string?
-
//Well, it would append the 5.00 to the original 5.00 - Example: 5.005.00
-
//We need to Cast "string" so that we can do numerical calculations.
-
var numeric = parseFloat(string)+5.00;
-
//You can use
-
//parseFloat - number with a decimal point.
-
//parseInt - whole number.
Simple and effective.
Filed under Programming, Javascript
Please review this great example by Dav Glass:
http://blog.davglass.com/files/yui/animseq/
Filed under Programming, Javascript
Just an example.
CODE:
-
/**
-
* Collects all inner elements and resizes accordingly.
-
* @method resizeAll
-
*/
-
this.resizeAll = function () {
-
var tempEL = el;
-
var tempObj = tempEL.getElementsByTagName("img");
-
for(i=0;i<tempObj.length;i++){
-
var tempAnimation = new YAHOO.util.Anim(tempObj[i].getAttribute("id"), this.attributes, this.duration, this.method);
-
tempAnimation.animate();
-
}
-
var tempObj = tempEL.getElementsByTagName("input");
-
for(i=0;i<tempObj.length;i++){
-
var tempAnimation = new YAHOO.util.Anim(tempObj[i].getAttribute("id"), this.attributes, this.duration, this.method);
-
tempAnimation.animate();
-
}
-
-
}
Filed under Programming, Javascript, CSS
Thank you google toolbar!!
Read more: http://www.htmldog.com/ptg/archives/000017.php
Fix: http://code.jenseng.com/google/
Enjoy 
Filed under Programming, Javascript
Planet Yazaar creates and maintains community-supported additions to the Yahoo User Interface (YUI) Library (Yahoo + Bazaar = Yazaar).
This is an interesting idea - I would like to see a bit better design and system though. Still something worth checking out! 
Filed under Programming, Javascript
We have a function - resizeAll()
Now, what does this function do?
Quite simple, if you read in my earlier post about the issue I found with YUI's animation class you would know what the purpose of this function does.
If you know NOTHING about what I speak, read my post here:
http://simplyprogram.com/yui-interesting-find/
Back to the function -- My initial test was to take one or many images and have them animate the EXACT SAME as the containing element. I am proud to say this has been accomplished!
So when we started this our code looked a little bit like this:
JavaScript:
-
var attributes = {
-
width: { to: 0 },
-
height: { to: 0 },
-
opacity: { to: 1 },
-
fontSize: { from: 100, to: 0, unit: '%'}
-
};
-
-
var anim = new YAHOO.util.Anim(itemObj,
-
attributes, 1.0, YAHOO.util.Easing.backOut);
-
-
anim.animate();
With my new function in place our code looks like this:
JavaScript:
-
var attributes = {
-
width: { to: 0 },
-
height: { to: 0 },
-
opacity: { to: 1 },
-
fontSize: { from: 100, to: 0, unit: '%'}
-
};
-
-
var anim = new YAHOO.util.Anim(itemObj,
-
attributes, 1.0,YAHOO.util.Easing.backOut);
-
-
anim.resizeAll();
-
anim.animate();
Thats it - Simply place anim.resizeAll() within your code and ALL images will take on the same attributes and animation method as your containing element.
What is next for this function?
I am now working to make it pretty much any element you could possibly want to animate!
On the priority list:
1. Other Divs
2. Other font tags
3. OBJECT Codes (Includes Flash 
)
4. Forms
I think that should do it for now.
Until my next update!
Filed under Programming, Javascript
I found something very interesting while working with YUI's Animation Library over the weekend.
When using its sizing controller I noticed that it would only size individual elements - For example, your basic element would look like this:
So, you then register "item1" with the YUI animation controller and do yourself a bit of animating.
JavaScript:
-
var anim = new YAHOO.util.Anim(itemObj,
-
attributes, 1.0, YAHOO.util.Easing.backOut);
-
-
anim.animate();
Now, this is all fine and dandy - what I want you to do now is place some text within "item1". You will notice it does not resize with your registered element. This however is not what I am concered about - YUI understood this issue and created an attribute "fontSize" to handle this problem.
However, place an Image within this element and you will find that it simply sits in the middle of the screen while your div does its animation dance. I have searched all over the developer forums and API documentation to see if there is a function or a way to make every element no matter image, font, or other divs to animate with a SINGLE parent element. So far I have had 0 luck - If ANYONE knows of such a function please let me know! Why do I want to know?
Simple - I have started to construct my own function that removes all elements within the given parent item and registers them with the animation controller. Now, why would I want to waiste all my hard earned time off to do this if it has already been done... right?
Until I hear from someone I will continue to create it on my 1 hour off weekends
Filed under Programming, Javascript
Aaron Wormus a fellow developer and friend of mine introduced me to Yahoo's YUI library and widgets... I must admit this is quite a wonderful system. I am used to working with the javascript prototypes and packages like scriptaculous. Now, I've worked with scriptaculous a lot in my day doing many drag & drop systems for my customers, I've always used scriptaculous. In my following posts I will be examining YUI and picking apart how it works... Get ready for some coding - Lets see if it wins the race againts scriptaculous.