Simply Program

Simply programming - It’s a life style

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:
  1. //String
  2. var string = "5.00";
  3.  
  4. //What would happen if we wanted to add another 5.00 to string?
  5. //Well, it would append the 5.00 to the original 5.00 - Example: 5.005.00
  6. //We need to Cast "string" so that we can do numerical calculations.
  7. var numeric = parseFloat(string)+5.00;
  8. //You can use
  9. //parseFloat - number with a decimal point.
  10. //parseInt - whole number.

Simple and effective.

Comments (0) Posted by sp on Thursday, July 10th, 2008

Filed under Programming, Javascript

Please review this great example by Dav Glass:

http://blog.davglass.com/files/yui/animseq/

Comments (0) Posted by sp on Saturday, May 24th, 2008

Filed under Programming, Javascript

Just an example.

CODE:
  1. /**
  2. * Collects all inner elements and resizes accordingly.
  3. * @method resizeAll
  4. */
  5. this.resizeAll = function () {
  6. var tempEL = el;
  7. var tempObj = tempEL.getElementsByTagName("img");
  8. for(i=0;i<tempObj.length;i++){
  9. var tempAnimation = new YAHOO.util.Anim(tempObj[i].getAttribute("id"), this.attributes, this.duration, this.method);
  10. tempAnimation.animate();
  11. }
  12. var tempObj = tempEL.getElementsByTagName("input");
  13. for(i=0;i<tempObj.length;i++){
  14. var tempAnimation = new YAHOO.util.Anim(tempObj[i].getAttribute("id"), this.attributes, this.duration, this.method);
  15. tempAnimation.animate();
  16. }
  17.  
  18. }

Comments (0) Posted by sp on Friday, May 23rd, 2008

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 ;)

Comments (0) Posted by sp on Sunday, October 28th, 2007

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! :)

Comments (0) Posted by sp on Saturday, May 26th, 2007

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:
  1. var attributes = {
  2. width: { to: 0 },
  3. height: { to: 0 },
  4. opacity: { to: 1 },
  5. fontSize: { from: 100, to: 0, unit: '%'}
  6. };
  7.  
  8. var anim = new YAHOO.util.Anim(itemObj,
  9. attributes, 1.0, YAHOO.util.Easing.backOut);
  10.  
  11. anim.animate();

With my new function in place our code looks like this:

JavaScript:
  1. var attributes = {
  2. width: { to: 0 },
  3. height: { to: 0 },
  4. opacity: { to: 1 },
  5. fontSize: { from: 100, to: 0, unit: '%'}
  6. };
  7.  
  8. var anim = new YAHOO.util.Anim(itemObj,
  9. attributes, 1.0,YAHOO.util.Easing.backOut);
  10.  
  11. anim.resizeAll();
  12. 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 :D )
4. Forms
I think that should do it for now. :)

Until my next update!

Comments (0) Posted by sp on Wednesday, May 16th, 2007

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:

JavaScript:
  1. div id="item1"

So, you then register "item1" with the YUI animation controller and do yourself a bit of animating.

JavaScript:
  1. var anim = new YAHOO.util.Anim(itemObj,
  2. attributes, 1.0, YAHOO.util.Easing.backOut);
  3.  
  4. 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 ;)

Comments (0) Posted by sp on Tuesday, May 15th, 2007

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.

Comments (0) Posted by sp on Friday, February 23rd, 2007