This animated JavaScript tooltip script is very easy to use and lightweight at only 2kb. It is tested working in IE6+, Firefox, Opera and Safari. Jacob Gube of Six Revisions has posted the script and a walk-through of the code and the logic. As always, don’t hesitate to send questions or bug reports to michael@leigeber.com. I look forward to upcoming guest posts by Jacob on this blog as well.

Click here to visit the post at Six Revisions.

Click here for the demo.

Click here to download the script.

This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”. The markup for the script is very simple as below…

<div class="menu">
<ul id="menu">
<li><a href="#">JavaScript</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">HTML</a></li>
<li value="1"><a href="#">User Interface</a></li>
<li><a href="#">CSS</a></li>
</ul>
<div id="slide"></div>
</div>

In the above code the default menu selection is identified by the value=”1″ attribute on the appropriate list item. To initialize the script simply call the function as below…

menuSlider.init('menu','slide')

The first variable is the id of the unordered list and the second is the id of the slider div. This script has been tested in IE6, IE7, FireFox, Opera and Safari. Please send any bug reports to michael@leigeber.com. This code is free to use for any personal or commercial projects.

Click here to download the script.

This versatile 1kb horizontal accordion script can be used for menus, images, presentation content and more. I had seen a similar looking feature on the mootools homepage and set out the replicate the functionality as a standalone script and as lightweight as possible. The script will automatically adjust to the number of elements in the accordion and the dimensions of the accordion.

The front-end markup for the script is a simple unordered list as in the example below…

<ul id="sm" class="sm">
<li><img src="images/1.gif" alt="" /></li>
<li><img src="images/2.gif" alt="" /></li>
<li><img src="images/3.gif" alt="" /></li>
<li><img src="images/4.gif" alt="" /></li>
</ul>

To build the accordion call the function below onload…

slideMenu.build('sm',200,10,10,1)

The first parameter is the id of the unordered list you would like to bind the accordion to. The second is the width you would like the accordion selection to expand to. The third is the timeout variable to control how quickly the sliding function is called. The fourth is the speed of the accordion with 1 being the fastest. The last is optional and is the integer that corresponds to the section you would like to be expanded when the accordion is loaded.

This script has been tested working in IE6, IE7, Firefox, Opera, and Safari. Please send any bug reports or questions to michael@leigeber.com. Feel free to use the script for any personal or commercial projects.

Click here to download the original script.

Click here to download the script that collapses onmouseout.

Update 5/26/2008 - Removed a line of unnecessary code and resolved an issue with IE6.
Update 5/26/2008 - Tweaked width parsing code, thanks to realazy for the suggestion.
Update 6/05/2008 - Added download for version that reverts back the the uniform collapsed positions.

This animated JavaScript flyout menu is clean and lightweight at only 1.6kb. The script is based on the post a few weeks ago of a horizontal dropdown menu. The markup is the same so visit the horizontal menu post for details.

This script has been tested in IE6/IE7, FF, Opera and Safari. Feel free to use it in any personal or commercial projects. Send any bug reports to michael@leigeber.com.

Click here for the demo.

Click here to download the source.

I have stripped down the previous WordPress theme for Leigeber.com and uploaded it for download if anyone is interested. It is very simple, clean and coded with valid XHTML and CSS. Hopefully this can be a good starting point for anyone looking to create their own template. This is tested working in IE6/IE7, Firefox, Opera and Safari. If you have any problems or questions shoot me an email at michael@leigeber.com.

Click here for the demo.

Click here to download the theme.

This extremely lightweight JavaScript image gallery and slideshow script clocks in under 3kb packed and includes a number of cool features. Recently I was looking for a nice existing script for a client project. I wanted something elegant, simple and lightweight. What I found were a number of scripts built on JavaScript frameworks and a few others that really lacked any appealing interface or were over 30kb. I challenged myself to build a full-featured slideshow gallery under 4kb. Hopefully I will be add a few more features to the script soon and make it a little mode user-friendly.

Here is an example of the markup…

<div id="gallery">
<div id="imagearea">
<div id="image">
<a href="javascript:slideShow.nav(-1)" id="previmg"></a>
<a href="javascript:slideShow.nav(1)" id="nextimg"></a>
</div>
</div>
<div id="thumbwrapper">
<div id="thumbarea">
<ul id="thumbs">
<li value="1"><img src="thumbs/1.jpg" alt="" /></li>
<li value="2"><img src="thumbs/2.jpg" alt="" /></li>
<li value="3"><img src="thumbs/3.jpg" alt="" /></li>
<li value="4"><img src="thumbs/4.jpg" alt="" /></li>
<li value="5"><img src="thumbs/5.jpg" alt="" /></li>
</ul>
</div>
</div>
</div>

The list section is the important element to the gallery. Each li has a value property that is set to the name of the full-size image. The interface is very flexible and can easily be altered in the HTML and CSS.

You will also need to setup the variables below and include the slideshow JavaScript…

<script type="text/javascript">
var imgid = 'image'; // id of image div //
var imgdir = 'fullsize'; // full-size image directory //
var imgext = '.jpg'; // full-size image extension //
var thumbid = 'thumbs'; // id of the thumbnail container //
var auto = true; // automatic rotation toggle //
var autodelay = 5; // seconds before the image rotates //
</script>
<script type="text/javascript" src="packed.js"></script>

This script isn’t completely polished yet but I wanted to go ahead and get it out there for anyone that can put it to use. It is tested working in IE6/IE7, FF, Opera and Safari. Feel free to use it in any personal or commercial projects. Please send any bug reports, questions or suggestions to michael@leigeber.com.

Click here for the demo.

Click here to download the source.

Update 5/16/2008 - Updated CSS and added outline:none for the next and previous links.
Update 5/26/2008 - Updated the CSS to resolve an issue with resizing the window in IE6. Thanks to Jon Stoski for reporting.
Update 5/28/2008 - Pushed script inside global namespace. Fixed a couple IE related bugs.

If you have any suggestions or requests before the new site goes live I would appreciate it. There will be a number of new features and enhancements in the upcoming version. Feel free to email me at michael@leigeber.com or post a response here.

This versatile and lightweight JavaScript clocks in at less than 3.5kb unpacked. The above example is one of four scenarios I have demonstrated on the demo page.

To setup a scroll/slide area create a container with the following CSS properties…

position:relative; overflow:hidden; height:XXXpx;

Inside the scroll area container create another div that will house your actual content. It needs the positioned absolutely within the previous div. Each sliding or scrolling area on the page needs to have a unique ID for this div.

position:absolute;

Inside the content div you can need to create a section for each area of content, be it 1 or 50. For each section after the “prefix-” numerate the order from 1 onwards. The prefix (ie section, newssection, imgsection, etc) needs to be unique to the current sliding/scrolling container’s sections.

<div id="section-1" class="section"></div>

You can call functions to incrementally scroll up or down, scroll to a particular section and initiate autoscroll/cancel the autoscroll. Take a look at the source code for examples. You might also consider dynamically adding some currently static CSS properties such as overflow:hidden and the height to allow for better degradation without JavaScript support.

This script has been tested working in IE6/IE7, Firefox, Opera and Safari. Please report all bugs to michael@leigeber.com. This code is free for both personal and commercial projects.

Click here for the demo.

Click here to download the source.