A simple mega menu implementation with CSS and jquery

I’ve been skinning quite a few ecommerce sites with the magento platform and wanted a simple way to explode the navigation menus. Some sites end up getting a long list of categories and sub-categories, so I wanted to do a mega-menu style navigation. One way to do it was to rewrite the html code for the navigation and pop each column into another nested unordered list. I’m not a fan of doing this because one – I didn’t want to manipulate the html. I like the simplicity of ul navigation with a clear flat list of li elements. Of course for nested sub-navigation any li can contain another ul. I wanted to just use some css and maybe javascript to visually accomplish the same thing. I also wanted it to be portable, so I could take it and use it on a wordpress install or even a plain html site. I went to my favorite: jquery. I knew there was a likely plugin out there already that would do something similar, but nothing after my initial search, but I realized that it was a simple procedure and mostly accomplished with some css.
mega menu screenshot
I’ll walk you through the process here and let you inspect the code yourself and see it in action on the demo page. Assign each ul to be a default width of 15em, then each li element we float:left and also give it a width of 15em. This way we can change the ul width to 30em and automatically I have 2 columns! Assigning the nested ul a specific width according to it’s class is done through css, mm-0 will be 15em and incrementally each next one will be 15em more. mm-1 is 30 and mm-2 is 45. Then we use jquery to determine the number of elements in the list and assign it a class accordingly. This involves some math and some preferences. Using the magic ui number 7, I determined that a menu with more than 7 elements should explode into multiple columns. So anything less than or equal to 7 I assign the class ‘mm-1′ which in the css sets the width to the standard 15em (ie 1 mega menu column). More than 7 should pop into columns no more than 8 tall. So dividing the total by 8 will give us the number of columns we want. We’ll add a class of mm-x, where x would be the number of columns. And the li elements will float to the left and fill in the space in columns.
One specific issue is the last element in the menu, sometimes we need to style that element differently. I’ll loop through each child of the nested ul element and if it is on the bottom row apply a class of ‘last’. But this was a little tricky in calculating which would be last because were never sure how many elements there will be or how many columns. I just used the remainder after dividing the total by the number of columns, then if the remainder could be used to know which elements are on the bottom row.

OK, now that that’s out of the way, let’s look at the code.

HTML

This I won’t show, you can inspect the source of the demo if you wish to see it, it a basic nested collection of unordered lists. It’s the standard that is created by magento, wordpress and most other CMS platforms.

CSS

html, body { margin:0; padding:0; }
ul { list-style:none; }

/********** < Navigation */
.nav-container { float:left; background: #186C94; margin: 10em 0; width: 960px; }
#nav { border: 0px none; padding:3px 0 2px 44px; margin:0; font-size:13px; }

/* All Levels */
#nav li { text-align:left; position:relative; }
#nav li.over { z-index:999; }
#nav li.parent {}
#nav li a { display:block; text-decoration:none; }
#nav li a:hover { text-decoration:none; }
#nav li a span { display:block; white-space:nowrap; cursor:pointer; }
#nav li ul a span { white-space:normal; }

/* 1st Level */
#nav li { float:left; }
#nav li a { float:left; padding:5px 10px; font-weight:normal; color: #fff; text-shadow: 1px 1px #111; }
#nav li a:hover { color: #fff; text-shadow: 1px 1px 3px #ccc; }
#nav li.over a,
#nav li.active a { color:#fff; }

/* 2nd Level */
#nav ul { position:absolute; width:15em; top:26px; left:-10000px; border:1px solid #104A65; border-width: 0 1px 2px 1px; background:#186C94; padding: 6px 0 6px; }
#nav ul div.col { float:left; width: 15em; }
#nav ul li { float:left; padding: 0; width: 15em; }
#nav ul li a { float:none; padding:6px 9px; font-weight:normal; color:#FFF !important; text-shadow: 1px 1px #111; border-bottom:1px solid #104A65; background:#186C94; }
#nav ul li a:hover { color:#fff !important; text-shadow: 1px 1px 3px #ccc; background: #135575; }
#nav ul li.last > a { border-bottom:0; }
#nav ul li.last.parent > a { border-bottom:0; }

#nav ul li.over > a  { font-weight:normal; color:#fff !important; background: #104A65; }
#nav ul.mm-1 { width: 15em; }
#nav ul.mm-2 { width: 30em; }
#nav ul.mm-3 { width: 45em; }
#nav ul.mm-4 { width: 60em; }
/* 3rd+ leven */
#nav ul ul { top:-6px; background: #104A65; }

/* Show Menu - uses built-in magento menu hovering */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:14em; }
#nav li.over ul ul { left:-10000px; }

/* Show Menu - uses css only, not fully across all browsers but, for the purpose of the demo is fine by me */
#nav li:hover > ul { left:0; z-index: 100; }
#nav li:hover > ul li:hover > ul { left:14em; z-index: 200; }
#nav li:hover ul ul { left:-10000px; }

Javascript

Don’t forget to include jQuery (I prefer using the google hosted version at http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js)

jQuery(document).ready(function() {
    //clean up the row of the mega menu. add css class to each element on bottom row.
    //only if more than 7 elements. if more than 16, mm-3
    jQuery('#nav li ul').each(function(ulindex, ulele){
        $total = jQuery(this).children('li').size();
        if ($total <= 7) {
            jQuery(this).addClass('mm-1');
        }
        else {
            $cols = Math.floor(($total) / 8) + 1;
            $remainder = $total % $cols;
            jQuery(this).addClass('mm-' + $cols + ' total-' + $total + ' rem-'+$remainder );

            jQuery(this).children().each(function(liindex, liele){
                //alert("total: "+$total+", remainder: "+ $mod+", ulindex: "+ulindex+", liindex: "+liindex);
                if( liindex + $remainder >= $total || $remainder == 0 && liindex + $cols >= $total ){
                    //alert("total: "+$total+", remainder: "+ $remainder+", index: "+liindex);
                    jQuery(this).addClass('last');
                }
            });
        }
    });

});

See the demo in action

Posted in tutorial | Tagged , , , , , , , , , , , , , , , , | 12 Comments

Web Design and Carpenters

Does your website pass the big bad wolf test?

I’ve been building websites for years and always enjoy the immediacy of designing and coding a site and having it live relatively quickly. Compare web production to the construction industry where projects span out years and even decades in some cases. Even though the web does foster a faster deliverable, there are many lessons from the physical world that help us better understand and manage web projects.

What is the point of a building? It’s a roof over your head, but more importantly it’s a location. People visit and expect it to be there next week. A website is a location as well in fact url even stands for Uniform Resource Locator and a domain name is your address. There are whole sciences about how to attract people to a certain location online and keep them coming back for more. For those with a brick-and-mortar business a website is a portal or even a drive-thru window to permit easy shopping access and a gallery to showcase your products. It allows your visitors to browse and interact with your products or content from their own home. A physical store that is confusing and messy won’t sell much, but clean it up and get some Feng Shui master in there and the same space can be transformed into a pleasant, functional and usable location. So from the tangible world we can learn that we want a location that is memorable, a layout that is intuitive and agreeable and a presence that is easy and pleasing to our visitors.

Building a website also follows the same process as building a house?

good cheap fast
First a house takes planning and preparation. It’s best to make sure you understand what it is you want in your house, what materials will be used and how much it will cost. Long ago, construction crews figured out it cost way to much time and money to change projects on the fly and now require them to be nailed down even before groundbreaking. Web designers have not all learned this lesson yet and have been lenient with demanding a spec. Some clients think they can say “I want a website for x” and then expect the designers and developers to telepathically know all the elements of the site and build it correctly the first time. I’ve worked for so-called visionary gurus and they wanted a new website and didn’t take the time upfront to plan the site and subsequently I redesigned their website daily! Trust me, that kept the site from being functional or usable.

Building a house takes a construction crew, with a website it may be considerably less people, but it does help to have a few people each with their expertise. The main goal here is to make sure you’ve got someone who can handle each piece of the project. An architect will draw up the plans for your house after the requirements are discussed. So these blueprints or wireframes as we call them in web design contain the details needed for the project to be completed. They are written with all the policies and codes in mind so that in the end the structure can be valid, functional and above all- usable.

The website, like a house, sometimes isn’t even recognizable until the very final stages of the project. We don’t complain to the foreman that the walls aren’t the right color when the windows aren’t yet hung and the drywall mud is still wet. When constructing a house first the foundation is set and everyone knows that a weak foundations will ruin the whole project from the get go. Once the foundation is solid the framing begins, and although while the house is being framed there are holes in the house all will turn out fine in the end. Looking at a website before it’s actually complete when even possible can be a very scary thing: things don’t fully connect, layouts are screwy, links may be broken and graphics are totally wrong or missing, but all will turn out in the end as long as the construction crew know what they are doing and the client let’s them focus on doing it.

Once the house is up and walls are in and there’s a roof overhead is when things actually start to look right. Now is the time to be focused on the content of the site and putting everything in the right place. Get the walls the right colors and eventually even hanging pictures and accents in each room. Final tweaks to the place or feel of the place, but now is not the best time to start thinking – ‘What if we moved the kitchen to the basement!’ or ‘Oh, We forgot the elevator/fireplace!’. While these drastic changes are likely possible, they will have more of an after-thought and will be either very difficult or very expensive to correctly put into play, or both.

Once last thing to say in this endless analogy comparing a brick and mortar construction to a website project, what about when it’s “done”. When the house is done and the dust has settled and you’ve moved in. There are always things that still need doing: tweaks, fixes, customizations, just plain maintenance, appliances break and plumbing clogs. Not to scare anyone from the american dream, but it happens, even online. Plugins need updating, security holes are found, bugs come up, things need updated. It happens. The trick is to expect things to happen. For a house you can find any number of Home Warranties that protect you from the sudden costs of repairs. Most web design shops will have a similar maintenance plan that warrants a certain amount of work in a certain amount of time to account for such surprises.

And finally the big bad wolf test. Would your website survive a big bad wolf coming to blow your site down? Make sure that whoever is building your website knows enough to not build your house out of straw or sticks. They need to be up on current technologies and you need to be confident in their ability to give you a valid site that can withstand any visitors at your very own online location.

Posted in Article | Tagged , , , , , , | Leave a comment

Why I {heart} Flash and a Smart Point for Adobe

nytimes example of adobe ad Checking out an interesting article about Diaspora (back the project and the cause if you can) on NYTimes and then I noticed the words adobe and Apple in the same space. The ad reads “We Love Apple” and is followed by the Adobe logo. What a joke I thought, it takes a lot of gumption for Adobe to say they love Apple right now, but I’m sure they really do. Despite all the negative things Apple has been doing and saying towards Flash and Adobe in general. I admit I’m biased, but…

I {heart} flash

I would rather stop using Apple than stop using Adobe. I agree with the openness and empowering software that Adobe provides. True, it’s expensive and true it’s not perfect, but I’ve found Adobe to be a great company that cares about the web and progress. During the whole Flash/iPhone debate I’ve been bothered by the lack of response from Adobe. It was nice that they were above the name calling and flat out lying that Steve Jobs and Apple have turned to, but to be honest- a little disheartening that they had nothing to say. Then the ‘Thoughts on Flash’ came out and I was amazed at the silence from Adobe. This is the perfect and genius response to the unprofessional lashes from Apple. From the 3.3.1 iPhone developer clause to the sheer CLOSEDness of Apple in general. I used to be a big fan of Apple because they made a great product. Perhaps I gave them a little boost because who doesn’t like an underdog. But they have proven to me at least to be more closed and more evil than even Microsoft when they packaged IE with their OS. (Although Apple has done that too with Safari and iTunes, but I digress).

What we don’t love is anybody taking away your freedom to choose what you create, how you create it, and what you experience on the web.

I give props to Adobe. They were surely disturbed when Apple declared war on flash, but rather than stooping to the level of Steve Jobs, they thought it out and made an honorable move. I know it’s not the end, but if things continue a check-mate/game-point-match may be in order by the end of the decade…

Learn more at adobe. We love choice and the Truth about Flash.
ADOBE LOVES CHOICE
Flash Truth Stats

Posted in review | Tagged , , , , , , , , | Leave a comment

Cornerstone Media Group | Atlanta Web Design

csmediagroup redesignI’ve joined Cornerstone Media Group of Atlanta as the Senior Web Designer and Front-End coder! A bit stale as far as news goes, I’m going on 6 months already. The reason I bring it up now is that we’ve just relaunched our website. This new look is not just about new appearances and aesthetics, it is about a new approach. The redesigned website has new features that make the user experience easier and more intuitive. There is a dynamic portfolio and the company blog is tied more into the site and more into the business. Most employees are signed on as an author on the blog. We’ll do our best to flood the inter-web with good content related to what we do and our expertise. Three of our most popular business solutions now are highlighted buttons that can take you straight to landing pages with more in depth information on each solution; SEO, Web Design and E-Commerce. The redesigned website offers a freshness that comes with change. We hope you enjoy your new experience at cornerstone. If you’re in need of any web services chances are we’ll have a solution at CSMediaGroup.

Posted in personal, portfolio, work | Tagged , , , , , , , , , , , , , , , | Leave a comment

Apple and Flash and HTML5 | Flash not dead

The main reason I decided to write this was foxtrot:
foxtrot ipad flash

The “community” is bringing out so-called enemies of flash. But I think the web is what it is today to a great part because of flash. I hope apple will one day open up and actually make the best web experience possible by putting flash on the iProducts (but seriously doubt Mr Jobs will ever come to his senses). The way I see it, blocking flash on apple products is a business decision (as flash would compete with the cash flow of the app store) cloaked in a technical and sorry excuse and passing the blame onto the very company (Adobe) which has repeatedly tried to work with mac to achieve improvements.

HTML5 killing flash? Flash not dead!

I could write paragraphs about it, I for one am very excited about the new possibilities with html5 and css3 and even cs5! I could go on but I’ll just reference some of the best articles I’ve seen:
//links links links

Posted in review | Tagged , , , , , , , , | 1 Comment

CSS3 Tool, CSS3Please

With all the buzz about new improvements in CSS3 I’ve been meaning to write about it, but…

css3 please screen shot

I couldn’t find any excuses when I stumbled on Paul Irish’s new css3please.com: a cross-browser css3 rule generator. Just had to do a quick post to spread the word.

It’s great for cross-browser testing as well as generating the code for many css3 rules:

  • border-radius
  • box-shadow
  • gradient background
  • rgba backgrounds
  • transform (rotate)
  • @font-face

and more coming soon!

Posted in review | Tagged , , , , , , , , | 1 Comment

Flashvars and as3

flashvars_as3_thumbFlashvars and actionscript 3! Flashvar is a way that in your html embed codes (object tags) you can send variables and values into your swf file. These variables can then be grabbed internally and used your programming! Examples of these could be images that you want to use in your swf but don’t want to import or hardcode them into the flash file or paths to xml or flv files to use as well. Actionscript 3 has a different procedure than as2 did as to how you read these flashvars from the actionscript side. The embed codes and html side of things are still the same, but in case your new to actionscript altogether, I’ll give an example of the html as well.

<object width="200" height="200" type="application/x-shockwave-flash" data="flashvars_as3.swf">
<param name="flashvars" value="colors=0x012345,0x123456,0x234567,0x345678,0x456789,0x567890,0x678901,0x789012&delay=.11&loop=true&random=false"/>
</object>

In actionscript 3 we use the loaderInfo object to access the flashvars. The parameters Object of the loaderInfo will contain all the flashvar variables and values.

this.loaderInfo.parameters

As an example of something that is visual I’ve created this little app to read some options from flashvars about colors. An app that will read a list of colors and update a box that is on the stage already to those colors with the specified delay. I always have fun with randomness so I threw in the option for random colors as well. This file looks for certain flashvars: color, loop, delay and random. These are the keys or names of the variables and they are followed by the values you want them to hold. Note that flashvars can be set in any order, so you don’t have to start with color and end with random.

In this example I’m looking for 4 flashvars specifically (in any order):

  • colors:String – a comma delimited list of hex colors or simply a string “random” for randomly generated colors (the hex for black #000000 needs to be 0×000000 in flash) (default is random)
  • loop:Boolean – whether or not to repeat these colors (default is true)
  • delay:Number – the delay between colors (in seconds). (default is 1 second)
  • random:Boolean – determines whether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)

This is much more than is required for this example, but I was having fun playing with random colors and timing and options. I figured it diesn’t hurt to show the effect you can have with a couple different variables on one file. Here is an example using the object tags above:

Get Adobe Flash player

And here are some more (please don’t have a seizure!)

Here’s the full source if you’re interested:

/*
circlecube.com

App to demonstrate the process of getting flashvars from embed code to actionscript (as3)

Displays colors specified.

looking for 4 flashvars specifically (in any order):
colors:String - a comma delimited list of hex colors or simply a string "random" for randomly generated colors (the hex for black #000000 needs to be 0x000000) (default is random)
loop:Boolean - wether or not to repeat these colors (default is true)
delay:Number - the delay between colors (in seconds). (default is 1 second)
random:Boolean - determines wether to cycle through colors in given order or randomize. selecting random overrides the loop to true. (default is false)

*/


//initialize vars
var myflashvars:Object = new Object()
var myColors:Array = new Array("random");
var myLoop:Boolean = true;
var myDelay:Number = 1;
var randomOrder:Boolean = false;
var allRandom:Boolean = false;
//read flashvars in actionscript3
//if colors flashvars doesn't exist use these defaults
if (!this.loaderInfo.parameters.colors){
    myflashvars = {colors: "random", delay: 1};
}
else{
    myflashvars = this.loaderInfo.parameters;
}
//assign flashvars to variables within flash
for (var item:String in myflashvars) {
    trace(item + ":\t" + myflashvars[item]);
    if (item == "colors"){
        myColors = myflashvars[item].split(',');
    }
    else if(item == "loop"){
        myLoop = parseBoolean(myflashvars[item]);
    }
    else if(item == "delay"){
        myDelay = myflashvars[item];
    }
    else if(item == "random"){
        randomOrder = parseBoolean(myflashvars[item]);
    }
}

//use my variables!
if (myColors[0] == "random"){
    allRandom = true;

}
var counter:Timer = new Timer(myDelay * 1000);
counter.addEventListener(TimerEvent.TIMER, nextColor);
trace ("color number: 0", "color hex: "+myColors[0]);
setColor(myBox, myColors[0]);

counter.start();
stop();
function nextColor(e:Event):void{
    //cycle through colors
    if (!allRandom && !randomOrder){
        if (counter.currentCount+2 > myColors.length){
            if (myLoop == true || myLoop == "true"){
                counter.reset();
                counter.start();
            }
            else{
                counter.stop();
            }
        }
        trace ("color number: "+counter.currentCount, "color hex: "+myColors[counter.currentCount]);
        setColor(myBox, myColors[counter.currentCount - 1]);
    }
    //randomly select a color from the myColors array
    else if (!allRandom && randomOrder){
        var randomColor = Math.floor(Math.random() * myColors.length);
        trace ("random number: "+randomColor, "color hex: "+myColors[randomColor]);
        setColor(myBox, myColors[randomColor]);
    }
    //randomly create colors
    else{
        trace ("number: "+counter.currentCount, "color hex: "+myColors[0]);
        setColor(myBox, myColors[0]);
    }
}
function setColor(item:DisplayObject, col):void{
    if (col == "random"){
        setRandomColor(item);
    }
    else{
        setHexColor(item, col);
    }

}
function setHexColor(item:DisplayObject, col:Number):void {
    var myColor:ColorTransform  =  item.transform.colorTransform;
    //check color bounds
    if (col > 16777215) col = 16777215;
    else if (col < 0) col = 0;
    myColor.color = col;
    item.transform.colorTransform = myColor;
}
function setRandomColor(item:DisplayObject):void{
    setColor(item, (Math.floor(Math.random() * 16777215)));
}
function parseBoolean(str:String):Boolean
{
    switch(str.toLowerCase())
    {
        // Check for true values
        case "1":
        case "true":
        case "yes":
        return true;

        // Check for false values
        case "0":
        case "false":
        case "no":
        return false;

        // If all else fails cast string
        default:
        return Boolean(str);
    }
}
Posted in tutorial | Tagged , , , , , , , , , , | 10 Comments

Tutorial to Create a Responsive Image Scroller in ActionScript 3.0

responsive-images-scroller-as3-thumb

I’ve written a tutorial which is published over at flash.tutsplus. This tutorial demonstrates how to create a horizontally scrolling image viewer and covers xml parsing, loading and resizing external images, and creating intuitive and responsive scrolling!

Get Adobe Flash player

So check out the Tutorial to Create a Responsive Image Scroller in ActionScript 3.0 over at flash.tutsplus.com!

sourcedemomilestone

You’ll find full source code available for download as well as the demo files and step by step milestones all throughout the tutorial.

Posted in portfolio, review, tutorial | Tagged , , , , , , , , , , , , , , , | 7 Comments

circlecube's New Clothes – Theme Redesign

blog-circlecube-com pageThanks for your patience as I’ve been tinkering with the theme, layout and css of circlecube.com.

old theme

old theme

The last theme I used was badly broken with the wordpress 2.8 update and then I noticed the developer actually discontinued support for the theme! So I had an opportunity to delve into wordpress theming. I’d been reading about child themes and wanted a nice stable basic parent theme to build from. Cue thematic framework. It was a great learning experience building a child theme for myself, many thanks to Ian Stewart for all the tips help and tuts to help me though it, not to mention for creating thematic .

new theme

new theme

I’ve kept the color scheme and general look of the site the same. So the reason I’m going on about it is I think I’m finished… and I’m asking you to let me know if you see anything that looks odd or fishy, or even just want to make a suggestion or comment on how much you like/hate the redesign. Comment on this post or contact me!

And as always, if there’s something you would like me to write about or have questions you can also contact me. I’ve even set up a poll in the sidebar showing post ideas I have which you can vote on and encourage me to write the one(s) you want most first! So let me know what you want, it encourages me to write more. And be sure to subscribe to the circlecube rss feed so you won’t miss anything that’s coming up!

Posted in portfolio | Tagged , , , | Leave a comment

Stomper999

Interactive Design project for StomperNet’s tease of the announced reveal on 09/09/09 at 09:09:09!

“Online Marketing Changes Forever!”

stomper999-black
Wanted it to be unexpected, and I think we hit it! Check it out live at stomper999.com!
stomper999-white

Details:
For this project I used flash, html, css and javascript. Tweener for the fading effects. Found a nice stock flash from activeden for the countdown and used jquery and the easing and color plugins.

Posted in portfolio | Tagged , , , , , , , , , , , , , , , , | Leave a comment
  • Recent Posts

    Touch Specific Media Queries in CSS4

    Proposals in the works for new media queries specific to touch enabled devices. Examples include pointer, which will differentiate wether the device has a fine or coarse pointer (finger vs mouse) and hover, which would say if the device supports hover states. I can see this being helpful and useful for building mobile friendly sites [...]

    Responsive Image Dispute and Tourists – Analogy

    Jason explains the root of the problem and why no one has been able to devise a solution that makes everyone happy yet. The browsers (in their awesome drive to make browsing faster) are prefetching images and developers want to only use one image based on criteria the browser doesn't know until the layout is [...]

    Google Moog Keyboard Synthesizer Detailed

    This post on creativejs picks apart how this doodlue was made. Nice they they are able to support HTML5 audio even if it is only supported on chrome and the rest fall back to – you guessed it – flash. Embedded Link Google Moog synth tear-down Yesterday we featured Google's web-based analogue synth Moog tribute [...]

    Synth Emulator on Google Japan Doodle Today

    Synth Emulator on Google Japan Doodle Today Embedded Link Moog 自分のオリジナル曲を創って、 #moogdoodle で共有しよう。

    WordPress updates plugin directory

    New additions to the plugin directory include: favorites, incorporating support forums into it's own tab for each plugin as well as support stats being displayed! Great! I think we also need the ability to give plugins ratings and reviews (bonus points if it can be done from within a wordpress admin dashboard when installing plugins). [...]

    Short Head

    Use zipf's short head to tune your website rather than redesign the whole thing. To make a website successful it needs to meet the needs of the users. Find out what those needs are by using the short head philosophy to equate most searched things as the biggest needs of the users. Use personas to [...]

    Img Set?

    Great article at a list apart discusing the state of the industry regarding responsive images. This picks apart the set attribute of the img element from a surprisingly objective view coming from someone so close to the picture element. Insightful discussion about the principle behind the proposals than the actual solution too. If the working [...]

    Triudo

    A mesmerizing animated triangle-ish shape form. Embedded Link triduo triduo

    Git – the paradigm shift

    A great developer story about the differences on what Git is vs other version control and what Git is not. This is how we should learn it. I heard over and over that it was distributed, but never grasped what that meant, so here are a few links and explanations that will help unlearn version [...]

    Tweening Lib comes to Javascript!

    I'm very excited to share the news that the tween library from GreenSock (hands down the best tweening library I used in flash) is not ported for use in javascript! This will be great! I missed that simple syntax from as3 when animating javascript, and now I can have my cake and eat it too. [...]

  • Recent Comments

    Bruce Brownlee

    Bruce Brownlee

    Ah IE6. I'd have 2 more years of sleep without IE6. Margin doubling, no properties,...
    versaena

    versaena

    how to give color at runtime…… thank you
    Mobile Websites

    Mobile Websites

    I disagree, mobile websites are the future – desktop websites and mobile websites...
    Matt Fasick

    Matt Fasick

    That's cool. I like the ripple effect as well.
    Nico

    Nico

    hi! really great job guy! very impressive.. just a question… do u have a solution to do a refresh...
    Evan Mullins

    Evan Mullins

    Agreed! I've just seen some people get pretty heated about separating all functionality...