TinyBox JavaScript Popup Box – 3.5KB
Posted by admin | Filed under User Interfaces
TinyBox is a lightweight and standalone modal window script. At only 3.5KB it doesn’t include any slideshow capabilities built-in but allows for any AJAX or HTML input so the sky is the limit. Future versions will include additional features. It can also be used for images and auto hiding alerts. The popups fade in/out and dynamically size based on the content if enabled. The styling is completely customizable through the simple CSS. I have a couple tutorials and a few scripts I will be posting very soon so check back.
To display a popup box use the following code:
TINY.box.show('advanced.html',1,300,150,1,3)
There is nothing to initialize, just start using the script. The TINY.box.show function takes 6 parameters: the HTML content for the box or the relative path to the AJAX source, a toggle (true/false or 1/0) if the content is via AJAX, the width of the window (use 0 for auto), the height of the window (use 0 for auto), a toggle (true/false or 1/0) to animate the window, and the time in seconds to wait before auto hiding the popup (optional).
TinyBox has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. Please send bug reports to michael@leigeber.com with the subject “BUG REPORT”. This script is available free of charge for any project, personal or commercial, under the creative commons license and is offered AS-IS, NO FREE SUPPORT provided. Hopefully I will have the support forum live shortly. Click here to inquire about paid support.
Click here to download the source code.
TinyTable JavaScript Table Sorter – 2.5KB
Posted by admin | Filed under User Interfaces
This updated table sorter script is easy to use and feature packed at only 2.5KB. New features include column highlighting, optional pagination, support for links, and date/link parsing. A few other features are alternate row highlighting, header class toggling, auto data type recognition and selective column sorting. More updates will follow soon.
To initialize a table sorter follow the pattern below:
var sorter = new TINY.table.sorter("sorter");
sorter.head = "head"; //header class name
sorter.asc = "asc"; //ascending header class name
sorter.desc = "desc"; //descending header class name
sorter.even = "evenrow"; //even row class name
sorter.odd = "oddrow"; //odd row class name
sorter.evensel = "evenselected"; //selected column even class
sorter.oddsel = "oddselected"; //selected column odd class
sorter.paginate = true (false); //toggle for pagination logic
sorter.pagesize = 15 (20); //toggle for pagination logic
sorter.currentid = "currentpage"; //current page id
sorter.limitid = "pagelimit"; //page limit id
sorter.init("table",1);
Before initialization, a new table sorter object must be created. The parameter taken by TINY.table.sorter is the variable name used for the object. The object.init function takes 2 parameters: the id of the table and the initially sorted column index (optional). If you want to exclude a column from sorting add class=”nosort” to the appropriate table header. Table styling is completely customizable via the CSS.
TinyTable has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. Please send bug reports to michael@leigeber.com with the subject “BUG REPORT”. This script is available free of charge any project, personal or commercial, under the creative commons license and is offered AS-IS, no free support provided. Click here to inquire about paid support.
Click here to download the source code.
Animated JavaScript Slideshow – 5KB
Posted by admin | Filed under User Interfaces
This dynamic JavaScript slideshow is feature packed and under 5KB. It is the long awaited update to my previous script here. A few new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status. This script was built ground-up and will soon be included at scriptiny where all my scripts will be added as they are updated, debugged and incorporated in the new TINY namespace. I will also document the scripts more thoroughly and publish multiple examples. I will continue to publish scripts there and support as I have time via the new community forum. I will try and post more frequently here on a wide range of web development related topics.
Here is an example of the markup to build a slideshow…
<ul id="slideshow">
<li>
<h3>Image One</h3>
<span>photos/image-one.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<a href="#"><img src="thumbnails/image-one.jpg" alt="Image One" /></a>
</li>
<li>
<h3>Image Two</h3>
<span>photos/image-two.jpg</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut urna. Mauris nulla. Donec nec mauris. Proin nulla dolor, bibendum et, dapibus in, euismod ut, felis.</p>
<img src="thumbnails/image-two.jpg" alt="Image Two" />
</li>
</ul>
Each “li” above represents an image. The “h3″ content becomes the title for the image and the “p” the description. The “span” content is the path to the fullsize image. If you want to link the image wrap an “a” tag around the “img” tag which is the thumbnail image.
The following are the parameters that can be set on the object… more complete documentation will follow soon. Default values are displayed as (10) and recommended values as [1-20].
Images
imgSpeed = int; (10)
navOpacity = int; (25)
navHover = int; (70)
letterbox = “string”; (#000) required color for letterbox on portrait images
link = “string”; class name for link hover state
Auto Slideshow
auto = boolean; (false)
speed = int; (10)
Information Dialog
info = boolean; (true)
infoID = “string”; required for information dialog
infoSpeed = int; (10)
Thumbnail Slider
thumbs = “string”; id of thumbnail slider, disabled if not set
scrollSpeed = int; [1-20] (5)
thumbOpacity = int; [0-100] (70)
active = “string”; required for thumbnail active border
spacing = int; (5) spacing between thumbnails
left = “string”; id of left navigation link, required for slider
right = “string”; id of right navigation link, required for slider
Here is an example calling the script…
<script type="text/javascript" src="compressed.js"></script>
<script type="text/javascript">
$('slideshow').style.display='none';
$('wrapper').style.display='block';
var slideshow=new TINY.slideshow("slideshow");
window.onload=function(){
slideshow.auto=true;
slideshow.speed=5;
slideshow.link="linkhover";
slideshow.info="information";
slideshow.thumbs="slider";
slideshow.left="slideleft";
slideshow.right="slideright";
slideshow.scrollSpeed=4;
slideshow.spacing=5;
slideshow.active="#fff";
slideshow.init("slideshow","image","imgprev","imgnext","imglink");
}
</script>
The init function takes 5 parameters (id of the slideshow content placeholder, the id of the image placeholder, the id of the previous image placeholder, the id of the next image placeholder, the id of the image link placeholder).
This script has been tested in Firefox, Internet Explorer, Opera, Safari and Chrome. Please send any bug reports to michael@leigeber.com with the title “BUG REPORT”. This script is available for any personal or commercial projects under the creative commons license and is offered AS-IS, NO FREE SUPPORT PROVIDED.
Click here to download the source.
Accordion Script With Multi-Level Support
Posted by admin | Filed under User Interfaces
This updated accordion script is powerful and lightweight at only 1.4kb. It now includes multi-level support, the option to allow multiple panels to expand concurrently, and a hide/show all toggle. I have reverted the markup to a div based structure to eliminate any validation issues with the definition tables in the previous version. Check back for more posts and scripts soon.
To initialize an accordion use the following code:
var accordion=new TINY.accordion.slider("accordion");
accordion.init("accordion","h3",false,0,"selected");
You must create a new accordion object before initialization. The parameter taken by accordion.slider is the variable name used for the object. The object.init function takes 5 parameters: the id of the accordion “ul”, the header element tag, whether the panels should be expandable independently (optional), the index of the initially expanded section (optional) and the class for the active header (optional).
There is no other JavaScript that needs to be added to the HTML. The init function parses the unordered list and adds the appropriate mouse events to the headings as provided. This has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. Please send any bug reports to michael@leigeber.com with the title “BUG REPORT”. This script is available for any personal or commercial projects. SORRY, NO FREE SUPPORT PROVIDED.
I apologize If I have not responded to emails you may have sent. I get many emails each day and simply do not have time to answer all of them nor can I neglect my paying clients. Please contact me if you are interested in paid support otherwise a support forum will be available very soon for community support.
Click here to download the source code.
JavaScript Table Sorter
Posted by admin | Filed under User Interfaces
A new version of this script is available here.
This JavaScript table sorting script is easy to use, fast and lightweight at only 1.7KB. It includes alternate row formatting, header class toggling, auto data type recognition and selective column sorting. It will currently sort strings, numbers and currency. More features will follow.
To initialize sorting use the following code:
var sorter=new table.sorter("sorter");
sorter.init("sorter",1);
You must create a new table sorter object before initialization. The parameter taken by table.sorter is the variable name used for the object. The object.init function takes 2 parameters: the id of the table and the index of the initially sorted column (optional). If you want to exclude a column from sorting then add class=”nosort” to the appropriate table header. The styling of the table is totally customizable via CSS.
This script has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. Please send any bug reports to michael@leigeber.com with the title “BUG REPORT”. This script is available for any personal or commercial projects and is offered AS-IS, no free support provided.
Click here to download the source code.
I would also like to thank my first sponsor, WebbyNode, and encourage you all to sign up for their beta Xen VPS Service by visiting their website.
Animated JavaScript Accordion V2
Posted by admin | Filed under User Interfaces
A new version of this script is available here.
This lightweight (1.16 KB) animated JavaScript accordion is an update to the original accordion script posted on April 18th. It is now smaller, faster, supports multiple instances and includes an active header class toggle. The markup is also improved through the use of definition lists and the CSS has been simplified as well.
On a side note, you may have noticed that I have not posted in over 4 months. I have moved from Colorado to North Alabama and am now working for Summit Technology focusing on SharePoint development. This change has really taken a lot of my time and hopefully now I will be able to post again. I will begin by updating many of my existing scripts.
If I have not responded to an email you have sent I apologize. I will try and get to them all in time. I will now be taking donations (via PayPal at michael@leigeber.com) and accepting a few advertisers to support my time here. Unfortunately, due to the massive amount of email I get, I will not longer be offering any free support via email. Please contact me if you are interested in paid support.
To initialize an accordion use the following code:
var mySlider=new accordion.slider("mySlider");
mySlider.init("slider",0,"open");
You must create a new accordion object before initialization. The parameter taken by accordion.slider is the variable name used for the object. The object.init function takes 3 parameters: the id of the “dl”, the index of the initially expanded section (optional) and the class for the active header (optional).
There is no other JavaScript that needs to be added to the HTML. The init function parses the definition list and adds the appropriate mouse events to the headings. This has been tested in Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome. Please send any bug reports to michael@leigeber.com with the title “BUG REPORT”. This script is available for any personal or commercial projects.
Click here to download the source code.
Update 11/24/2008 – Updated logic to allow hover state when no sections are initially expanded. Consolidated some code to drop the weight by 15%.
Fading JavaScript Tooltips 2kb
Posted by admin | Filed under User Interfaces
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.