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.

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.fader.fade('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.

TinyEditor is a simple JavaScript WYSIWYG editor that is both lightweight (8KB) and standalone. It can easily be customized to integrate with any website through CSS and the multitude of parameters. It handles most of the basic formatting needs and has some functionality built in to help keep the rendered markup as clean as possible. The icons are courtesy of famfamfam and have been combined into a sprite so there are only a few HTTP requests for the editor. I plan on adding some updates in the future to support font color, a full-screen mode, and a paste from Word option.

To initialize the script use the following:

new TINY.editor.edit('editor',{
	id:'input', // (required) ID of the textarea
	width:584, // (optional) width of the editor
	height:175, // (optional) heightof the editor
	cssclass:'te', // (optional) CSS class of the editor
	controlclass:'tecontrol', // (optional) CSS class of the buttons
	rowclass:'teheader', // (optional) CSS class of the button rows
	dividerclass:'tedivider', // (optional) CSS class of the button diviers
	controls:['bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'orderedlist', 'unorderedlist', '|' ,'outdent' ,'indent', '|', 'leftalign', 'centeralign', 'rightalign', 'blockjustify', '|', 'unformat', '|', 'undo', 'redo', 'n', 'font', 'size', 'style', '|', 'image', 'hr', 'link', 'unlink', '|', 'cut', 'copy', 'paste', 'print'], // (required) options you want available, a '|' represents a divider and an 'n' represents a new row
	footer:true, // (optional) show the footer
	fonts:['Verdana','Arial','Georgia','Trebuchet MS'],  // (optional) array of fonts to display
	xhtml:true, // (optional) generate XHTML vs HTML
	cssfile:'style.css', // (optional) attach an external CSS file to the editor
	content:'starting content', // (optional) set the starting content else it will default to the textarea content
	css:'body{background-color:#ccc}', // (optional) attach CSS to the editor
	bodyid:'editor', // (optional) attach an ID to the editor body
	footerclass:'tefooter', // (optional) CSS class of the footer
	toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'}, // (optional) toggle to markup view options
	resize:{cssclass:'resize'} // (optional) display options for the editor resize
});

The first parameter taken by TINY.editor.edit is the variable name used for the object instance. Keep in mind that before posting you will need to call the instance.post() function to ensure that the latest changes in the WYSIWYG translate into the text area. 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.

Click here for the demo.

Click here to download the source code.

1/8/2010 – Resolved a couple IE and Chrome issues and added some cleanup for Safari/Chrome. Thanks for the reports.

1/12/2010 – Resolved issue with conversion to lower case and the header row class.