UPDATE

I have released a new version. You no longer have to update the width everywhere, just set the desired size by giving a value to the ul.nice-menu class. The old version is still available for download from here

This short script will show you how to create a colorful, yet simple and elegant navigation menu using nothing but CSS 3. Since the latest version of CSS and mainly it’s animation part is not supported by all ‘major’ browsers the code below will not be working in these browsers, instead it is going to nicely degrade to a similar but inanimated one.

The HTML

Home
About
Portfolio
Blog
Contact
What not?

As you can see the HTML code is quite simple, just an ordinary list filled with anchor elements. Only the main nice-menu class is necessary, the rest is the coloring which is optional. Six colors are available by default: red, orange, green, blue, bright, dark.

Styling

CSS 3 introduced a set of new properties which makes designer’s life even more easier. With these properties you can substitute many of the plain old javascript framework solutions unless you mind those pesky IE browsers. You can read more about CSS animations at Brad Shaw’s amazing website

I’ve implemented two kind of animations: the default one with ease-in and out, and another one with bounce-in and out. To use the latter one you just have to add the bounce class to the ul:

There is one more additional class that you can use: tight, which removes the space between list elements.

Conclusion

Thanks for stopping by. Please feel free to download and customize the code, also I would be grateful for leaving your feedback in the comment section below.

Lately I was in need of a financial gadget that can provide stock exchange and currency data. I guess it goes without saying that you can find many solutions for the problem; in my case though none of them (that I found) was good enough to work with. I needed a free, reliable and highly customizable API. Unfortunately most of the free ones either come with an ugly copyright line which means a no go (why would you want to advertise your competition?), or they have some customization issues.

Since Google is no longer supporting it’s financial APIs (also it was a huge overkill compared to my simple needs) I found that Yahoo!’s Open Data Tables provides exactly what I want. It is well documented, easy-to-use, customizable and free (for my notes about reliability check out the last section of this post).

The code utilizes built-in ajax feature of jQuery. The URL of the request consists of three parts: the base url (http://query.yahooapis.com/v1/public/yql), the YQL query (you can read more about YQL here) and the configuration parameters (format=JSON etc.).

Query Processing

function YQLRequest( queryString, callback ){
  var url = "http://query.yahooapis.com/v1/public/yql?q=" + queryString +
         "&format=json&env=http://datatables.org/alltables.env&callback=?",
  jQuery.getJSON(url, callback);
}

Stock Quote

function getQuotes(){
  var q = escape( 'select * from yahoo.finance.quotes where symbol in ("AAPL","GOOG")' );
  YQLRequest( q, processQuotes );
}         

function processQuotes( data ){
  var quotes = data.query.results.quote;
  for( var i in quotes ) {
    // Do whatever you want with your data
    alert( quotes[i].Name + ' - ' + quotes[i].Ask + ' - ' + quotes[i].Bid );
  }
}

Exchange Rates

function getExchangeRates(){
  var q = escape( 'select * from yahoo.finance.xchange where pair in ("EURUSD","USDCAD")' );
  YQLRequest( q, processExchangeRates );
}         

function processExchangeRates( data ){
  var rates = data.query.results.rate;
  for( var i in rates ) {
    // Do whatever you want with your data
    alert( rates[i].Name + ' - ' + rates[i].Ask + ' - ' + rates[i].Bid );
  }
}

Reliability

While I was working on the script I had noticed some unexpected issues: null values and rejected requests. The latter one might be caused by the usage limit (1000 requests / hour / IP), but the problem was persistent even after an IP renewal. For this reason I implemented a cache which checks whether the response contains the expected values, if not, it serves the previous version from the cache.

To whom it may concern

When you work with YQL you might want to consider the following few rules and notes taken from the official site. You can find out more at the Yahoo! Developer Network.

Notice

• YQL can be used for commercial purposes
• If we’re going to shut down YQL, we will give you at least 6 months notice with an announcement on this web page and in our forum
• YQL has a performance uptime target of over 99.5%

Usage Limits

• Per application limit (identified by your Access Key): 100,000 calls per day
• Per IP limits: /v1/public/*: 1,000 calls per hour; /v1/yql/*: 10,000 calls per hour

Additional Notes

• All rates are subject to change
• You may also be subject to the underlying rate limits of other Yahoo! and 3rd party web services
• YQL relies on the correct operation of the web services and content providers it accesses

1st UPDATE

Since jQuery has introduced getJSON method I decided its time to refactor my code. This method is basically just a shortcode for an AJAX call optimized for JSON, but possible could save some bytes and improve readabilty.

2nd UPDATE

It turned out that Internet Explorer doesn’t want to play nicely with cross domain requests (thanks everyone for the feedbacks). To resolve the issue I appended the callback parameter to the URL to force jQuery to use JSONP instead of plain JSON. The new version should support IE from now on.

Download Source Files

The idea

I few weeks ago I was asked to create a counter for a website. The first thing came into my mind was an old-school ticker used on old cassette players. The key is the seamless flow of numbers. To achieve the effect I’ve created an image with all the digits below each other from 9 to 0 then I added 9, 8 and 7 to the end of it. I needed to be careful and place the numbers to their exact position. By doing so you make everything a lot more easier later on, because you won’t have to doodle with adjusting.

In the next step I created a new Movie Clip and I put the digits into it, then converted them to MCs as well. Here is the class for digits:

package  {

	import flash.display.MovieClip;
	import com.greensock.*
	import com.greensock.easing.*

	public class Digit extends MovieClip{

		private var currentValue:Number = 0;
		private var nextDigit:Digit = null;
		private var assoc:Array = new Array(-135, -105, -75, -45, -15, 15, 45, 75, 105, -165);
		private var speed:Number = 0.09;

		public function Digit() {

		}

		public function setCurrentValue(v:Number):void {
			currentValue = v;
			this.y = assoc[v];
		}

		public function setNextDigit(d:Digit):void {
			nextDigit = d;
		}

		public function setSpeed(s:Number):void {
			speed = s;
		}

		public function s(v:Number):void {
			currentValue = v;
			update();
		}

		public function update():void {
			if(currentValue == 0) if(nextDigit) nextDigit.update();
			if(currentValue == 8 ) TweenLite.to(this, speed, { y:this.assoc[currentValue], onComplete:isEight } ); else TweenLite.to(this, speed, { y:this.assoc[currentValue] } );
			currentValue++;
			if(currentValue == 10) currentValue = 0;
		}

		public function isEight(){
			 this.y = -195;
		}

	}

}

One of the most important part is the assoc array. It stores the assigned coordinates of the digits, you can fine tune them if needed. I tried to name and make everything self-explanatory. The best is to download the source code and check how things related to each other.

Have fun

Supported (major) browsers: Firefox 3.5+, Safari 4+, Chrome 2+

This little “app” creates a very simple, minimalist analog clock using CSS3′s transform property. Even though CSS3 supports transitions and effect can be made by using only pure CSS I have decided to implement the update function in javascript since Firefox doesn’t support the transition property (yet; because Firefox 4 will do).

The Code

HTML

The CSS

div#clock {
	width: 300px;
	height: 300px;
	background: #EEEEEE;
	border: 1px solid #AAAAAA;
	-moz-border-radius: 150px;
	-webkit-border-radius: 150px;
	border-radius: 150px;
	position: relative;
}

div#clock div {
	position: absolute;
	-webkit-transform-origin: bottom;
	-moz-transform-origin: bottom;
}

div#hand {
	width: 2px;
	height: 130px;
	background: #FF0000;
	margin-left: 152px;
	margin-top: 20px;
	-moz-border-radius: 5px;
}

div#minutehand {
	width: 5px;
	height: 130px;
	background: #000000;
	margin-left: 150px;
	margin-top: 20px;
	-moz-border-radius: 5px;
}

div#hourhand {
	width: 5px;
	height: 90px;
	background: #000000;
	margin-left: 150px;
	margin-top: 60px;
	-moz-border-radius: 5px;
}

var s = 0;
var m = 0;
var h = 0;

function setup(){
	var angle = 360/60;
	var date = new Date();
	var hour = date.getHours();
	if(hour > 12) hour = hour - 12;
	var minute = date.getMinutes();
	var second = date.getSeconds();
	var hourAngle = (360/12)*hour + (360/(12*60))*minute;
	m = angle*minute;
	s = angle*second;
	h = hourAngle;
	rotatehand();
	rotateminute();
	rotatehour();
	setInterval(rotatehand, 1000);
}			

function rotatehand(){
	var style = "-moz-transform: rotate(" + (s) + "deg);";
	style += "-webkit-transform: rotate(" + (s) + "deg);"
	$("#hand").attr("style", style);
	if(s%360==0) { rotateminute(); rotatehour(); }
	s = s + 6;
}

function rotateminute(){
	var style = "-moz-transform: rotate(" + (m) + "deg);";
	style += "-webkit-transform: rotate(" + (m) + "deg);"
	$("#minutehand").attr("style", style);
	m = m + 6;
}

function rotatehour(){
	var style = "-moz-transform: rotate(" + (h) + "deg);";
	style += "-webkit-transform: rotate(" + (h) + "deg);"
	$("#hourhand").attr("style", style);
	h = h + 0.5;
}

A nice, little contact form. Hope you like it; feel free to use it on your site. Design idea by Beata Szabo.

I’ve started this plugin a few months ago after the first “meeting” with jParallax. I was amazed by the idea; it is so simple but still provides a real-life experience. I was thinking about possible usages, but I was quite busy that time so I could not go any further. Then, somehow I obtained some extra time, so I came up with this:

The Plugin

The plugin itself is very lightweight, only a few rows of code. There are two major “functions” which make everything alive: the initialization part sets the timer of the JavaScript engine to a specified frame rate; you can change this value by passing the frameRate variable to the plugin at instantiation. In the next step the plugin binds the mouse movement event to the parent object. The naming may be a little misleading, but it’s trying to say to which object the floating box should be bound to. There is another variable I would like to clarify: the stage. Usually the parent and the stage are the same. But if you want your box float in a different “co-ordinate system” other than the parent’s you have the possibility to do so, just provide a new stage. Back to the mouse event. When the event occurs, the code checks the position of the mouse within the parent object (so NOT the absolute coordinates).

The update function is the responsible for the “flying”. From the cursor position it calculates how many pixels should the box move. This is where the easing is applied. The math:

Delta = (End position – Actual Position) * Easing Factor

Actual Position = Actual Position + Delta

And that’s it. There is an additional motion blur effect which is using the CSS 3 box-shadow and text-shadow properties.

The full option list

Additional info

Probably you will notice some performance issues while playing with the demo. I’m still working on the plugin to make it faster. Right now it will eat up at least 30-40% of CPU. With a dual core processor is not a big problem, but on slower computers it could cause some problems. In the demo section you find an HTML 5 version as well. I wrote it to check the differences in HTML 5. Unfortunately I didn’t have time yet, but I promise now I’ll do it as soon as possible. If you are interested in the result please come back later for the updates.

If you have anything to say about the plugin leave a comment or find me in email at info@marcelljusztin.com.

The plugin

This little jQuery image gallery plugin is basicly recreates the standard built-in window scrolling with a smooth easing effect. It is still in an early, development state, thus it may suffer from issues; but I will be working on it to make jReelGallery a more solid and robust widget.

The idea came while I was browsing the internet for available galleries for jQuery. I have seen a lot of good solutions but none of them fullfilles all the requirements I have been looking for. I decided to create a new plugin with all the features I need or consider as important: simplicity, usability and light-weight code.

Usability

Nowdays usability should be a very important and crucial part of a any web project. By extending the availability of your site and presenting it to wider audience, you increase the probability of achieving more visits which is leading to more sales, conversions and success.

In programming soemtimes it is really hard but not impossible at all to be light-weight and userfriendly at the same time. Sometimes you need to sacrifice a few things to stay between of the limits. This time the sacrifice was to give up the degradation when javascript is turned off. Whats left is a nice navigation: the plugin provides several ways to scan through the gallery. Mainly all the default(?) features, namely mouse scrolling, up and down arrow keys, home and end buttons, you would use while browsing in a window are available. In the future I would like to widen the “shortcuts” to include page down / up as well. Moreover, make it possible to configure it as you wish.

Usage

HTML

<ul id="jreel-gallery">
	<li><img src="images/1.jpg" alt="1.jpg" /></li>
	<li><img src="images/2.jpg" alt="2.jpg" /></li>
	<li><img src="images/3.jpg" alt="3.jpg" /></li>
</ul>

JavaScript

jQuery(document).ready(
	function(){
		$('#images').css('height',$(window).height()); /* I set the height by javascript to fill the full screen */
		$("ul#jreel-gallery").reelGallery();
	}
);

CSS

ul#jreel-gallery {
	width: 400px;
	height: 1px; /* In the example I set the height by javascript, see above */
	margin: 0 auto;
	padding: 0px 50px;
	overflow: hidden;
}

ul#jreel-gallery li {
	width: 400px;
	height: 300px; // Important! See below
	background: #fff;
	margin: 35px 0px;
	position: relative;
}
ul#jreel-gallery img {
		width: 400px;
		height: 300px; // Important! See below
	}

Note: I use precise dimensions for the images. It is not necessary to give the proper size of each and every image, but it comes with a price. The code itself contains an algorithm for this case that will calculate the all the heights by measuring the images. Problem is solves, or isn’t? No, because to calculate the proper size all the images, they have to be loaded before the algorithm is running. This means you need to use a preloader for your website or otherwise you are forced to give the dimensions by hand. It’s up to you. I suggest using a preloader.

In the demo I’m using a preloader, because I want to show the full potential of the plugin. I combined it the famous thickbox plugin and a PHP on-the-fly thumbnail generator.

Options

Sources

• jQuery MouseWheel by Brandon Aaron
• Thickbox 3.1 – One Box To Rule Them All by Cody Lindley
• Query Loader by Gaya Kessler

The blog is built on the latest wordpress 3.0 release and it is using a custom theme created by me. It still has some minor issues and by time I will expand it to achieve smoother user experience.

If you have any questions or just would like to say hello, please feel free to leave a comment below or send me an email.

Have a nice day!