This update to the TinyDropdown dropdown menu script offers improved stability, speed, and features. Added features include animation toggles, a speed toggle, a rollout timeout, and improved style handling. The script is still very lightweight at only 1.7KB packed and should perform noticeably better than the previous version. Styling is completely flexible through the CSS… you can even make this a vertical menu with a few tweaks.

The script is executed by passing an object to the init function. A sample call would look like the following:

var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover', fade:true, slide:true, timeout:200});

Parameters include (tag – description (type) – default):

id - ID of the navigation (string - required) - ''
active - CSS class for active state (string) - ''
fade - toggle fade tween (bool) - true
slide - toggle slide tween (bool) - true
speed- toggle slide tween (1-9) - 5
timeout - time in milliseconds to pause before hide on rollout (int) - 200

Click here for the demo.

Click here to download.

This script is tested in IE7+, FF, Chrome, Opera, and Safari and is available free of charge for both personal or commercial projects under the creative commons license. I welcome any bug reports. Head to the Scriptiny QA for community support.

This update to the TinyBox modal box script brings a ton of new features and still clocks in under 5KB. The script now supports iframes and images natively. You can POST with Ajax. Clicking ESC will close the window. Callback functions can be passed for load and close events. You can set CSS IDs to override the default styling. CSS position can be toggled between fixed and absolute. The mask opacity can be sent. You have full control over window location. And of course there is now a close button out of the box you can toggle.

The script is now executed by passing an object due to the large number of options. There is nothing to initialize, just call the function on whatever mouse or browser event you like. A sample call would look like the following:

TINY.box.show({url:'advanced.html',width:300,height:150})

Parameters include (tag – description (type) – default):

html - HTML content for window (string) - false
iframe - URL for embedded iframe (string) - false
url - path for AJAX call (string) - false
post - post variable string, used in conjunction with url (string) - false
image - image path (string) - false
width - preset width (int) - false
height - preset height (int) - false
animate - toggle animation (bool) - true
close - toggle close button (bool) - true
openjs - generic function executed on open (string) - null
closejs - generic function executed on close (string) - null
autohide - number of seconds to wait until auto-hiding (int) - false
boxid - ID of box div for style overriding purposes (string) - ''
maskid - ID of mask div for style overriding purposes (string) - ''
fixed - toggle fixed position vs static (bool) - true
opacity - set the opacity of the mask from 0-100 (int) - 70
mask - toggle mask display (bool) - true
top - absolute pixels from top (int) - null
left - absolute pixels from left (int) - null
topsplit - 1/x where x is the denominator in the split from the top (int) - 2

Nearly all of the parameters above are optional. Of course you must include either the html, iframe, url, or image parameters as they drive the content. Height and width are option and will be calculated based on offsetWidth and offsetHeight in the case of HTML or Ajax content else by actual width and height with images. Iframe calls must include a height and width. By default the box will animate in the center of the screen in a fixed position.

Click here for the demo.

Click here to download.

This script is tested in IE7+, FF, Chrome, Opera, and Safari and is available free of charge for both personal or commercial projects under the creative commons license. This is a never-ending work in progress and I welcome any bug reports.

To begin, let’s create a wrapper object for our functions. It will return two functions: an initialization function and a tween function that will handle the animation. For the init function, we will pass the ID of the element we want to animate as the first parameter. The second parameter will be a toggle (1 or -1) to determine the direction of the fade. The third will be the target (0-100) which will default to 0 or 100 based on the direction.

var fadeEffect=function(){
	return{
		init:function(id, flag, target){
		},
		tween:function(){
		}
	}
}();

Now let’s fill in the first function…. here is a breakdown of the lines followed by the code:

1. Create an object variable to reference the element we are fading
2. Clear any active fading on the element
3. Set the target opacity to the passed variable else check the direction to determine the default
4. Set the internal flag to 1 or -1 based on the boolean (0/1) passed as the parameter
5. Get the opacity off the DOM if available else assume it is 0 (for purposes of this demo)
6. Set the tween function to be executed every 20 milliseconds until cancelled

this.elem = document.getElementById(id);
clearInterval(this.elem.si);
this.target = target ? target : flag ? 100 : 0;
this.flag = flag || -1;
this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
this.si = setInterval(function(){fadeEffect.tween()}, 20);

Next we complete the tween function to update the opacity/alpha on the previously set interval.

1. Check if the current opacity is equal to the target opacity
2. If previous is true clear the interval/exit
3. Else
4. Calculate the new opacity with easing (modify the “.05″ value to control speed)
5. Divide the calculated value by 100 for standard CSS opacity (0-1)
6. Set the IE based opacity filter (0-100)

if(this.alpha == this.target){
	clearInterval(this.elem.si);
}else{
	var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
	this.elem.style.opacity = value / 100;
	this.elem.style.filter = 'alpha(opacity=' + value + ')';
	this.alpha = value
}

And all together now…

var fadeEffect=function(){
	return{
		init:function(id, flag, target){
			this.elem = document.getElementById(id);
			clearInterval(this.elem.si);
			this.target = target ? target : flag ? 100 : 0;
			this.flag = flag || -1;
			this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
			this.si = setInterval(function(){fadeEffect.tween()}, 20);
		},
		tween:function(){
			if(this.alpha == this.target){
				clearInterval(this.elem.si);
			}else{
				var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
				this.elem.style.opacity = value / 100;
				this.elem.style.filter = 'alpha(opacity=' + value + ')';
				this.alpha = value
			}
		}
	}
}();

You can call the function like so:

fadeEffect.init('fade', 1, 50) // fade in the "fade" element to 50% transparency
fadeEffect.init('fade', 1) // fade out the "fade" element

Click here for the demo.

Click here to download.

This full-featured and standalone JavaScript slider is easily configurable and visually customizable using CSS. It also clocks in at a tiny 3KB. Features included from the first version include automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and a direction toggle (vertical or horizontal). Updates include more fluid motion, an elastic tween option, continuous sliding without rewind, and a couple other fixes/tweaks. It accepts any content and gracefully degrades when JavaScript isn’t available. Stay tuned for an updated TinyBox soon.

To initialize the script use the following:

var slideshow=new TINY.slider.slide('slideshow',{
id:'slider',
auto:4, // false for no automation else the number of seconds between slides
resume:false, // continue auto sliding after interruption
vertical:false,
navid:'pagination', // ID of pagination UL
activeclass:'current', // active class for pagination
position:0, // initial position index
rewind:false, // toggle "rewinding", else the slides will be continuous
elastic:true, // toggle the bouncing effect of the slides
left:'slideleft', // ID of left nav, to cancel cursor selection
right:'slideright' // ID of left nav, to cancel cursor selection
});

The first parameter taken by TINY.slider.slide is the variable name used for the object instance. You can also manually set the width/height parameter for the applicable direction you are sliding. If it is not set the width or height will be automatically calculated using the first list element. This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details. Images are copyrighted by Warner Bros.

Click here for the demo.

Click here to download.

1. URL (required)
2. ID of the output element (pass a zero/false for no response output)
3. String of function to be evaluated and called on completion (optional)
4. Post content – example: id=22&action=1 (optional)

I will be posting more small snippets soon as well as some updates to previous scripts, new code, and tutorials. Last year was roller coaster with getting my business off the ground and it shows in my lack of time for this site. That being said, I plan to take more time to give back  this year and grow my own skills so expect to see much more of me on here. I cleaned up the forums and implemented DISQUS to help everyone get the most out of this site.

On a side note, I have formed a new company this year with a partner and we are opening an office in historic downtown Franklin, TN. We will be looking for some good people to work with us so if you or anyone you know is in the Nashville area, please have them drop me a line.

TINY={};

function T$(id){return document.getElementById(id)}

TINY.ajax=function(){
    return{
        call:function(u,d,f,p){
            var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
            x.onreadystatechange=function(){
                if(x.readyState==4&&x.status==200){
                    if(d){
                        var t=T$(d);
                        t.innerHTML=x.responseText
                    }
                    if(f){
                        var c=new Function(f); c()
                    }
                }
            };
            if(p){
                x.open('POST',u,true);
                x.setRequestHeader('Content-type','application/x-www-form-urlencoded');
                x.send(p)
            }else{
                x.open('GET',u,true);
                x.send(null)
            }
        }
    };
}();

A call would look something like the following:

TINY.ajax.call('get.php?id=32', 'content', 'display("red")'); // GET
TINY.ajax.call('post.php', 'content', 'display("green")', 'id=32'); // POST

Click here for the demo.

Click here to download PHP example.

Keep in mind that this will not work on your local computer unless you are running a web server like Apache. This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here.

This 1.4KB fading slideshow script can easily be customized with CSS. It is a slight variation from the TinySlider script and is still completely standalone and uses a simple unordered list structure to support any content. It even gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume, an active class on a navigation list if applicable, and an initial display toggle.

Self-employment has kept away from my blog for quite awhile but I hope to be spending more time here soon. I will be addressing all of the accumulated requests and bug reports for all of my scripts as soon as I possibly can. I also have a couple updated script versions and completely new scripts in the works as well as some post ideas. If you have emailed me anytime in the last 6 months or so I sincerely apologize if I did not get back with you, I just had too much going on to deal with all to all correspondence.

To initialize the script use the following:

var slideshow=new TINY.slider.slide('slideshow',{
	id:'slides', // ID of the parent slideshow unordered list
	auto:3, // Seconds to auto-advance, defaults to disabled
	resume:true, // Resume after interrupted, defaults to false
	navid:'pagination', // Optional ID of direct navigation UL
	activeclass:'current', // If navid, class to set on the current LI
	visible:true, // Initially display the first slide vs fading it in
	position:0 // Initial slide position, defaulting to the 0 index
});

The first parameter taken by TINY.fader.fade is the variable name used for the object instance. This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here.

Click here for the demo.

Click here to download the source code.

9/30/2010 – Resolved IE bug.