Feb 28, 2008
Using Text-Overflow: Blakems.com
I am sure many of you have used the css property overflow. It works great for making divs scroll or getting that pixel perfect box. Well, I was rummaging through gmail’s source code (which they have made quite difficult to do) and ran across the text-overflow property, and what a beauty this one is. I usually go to our programmer when I need to have a limit on the number of characters allowed in a paragraph or table cell. No more do I need his help with this matter.
Automatic image/photo caption
Auto captions in photos Using Javascript to add image caption from Alt attribute
Feb 27, 2008
Listutorial: Step by step CSS list tutorial
Listutorial takes you through the basics of building background image lists, rollover lists, nested lists and horizontal lists.
- Tutorial 1. Background images for bullets
- Tutorial 2. Rollover list
- Tutorial 3. Nested lists
- Tutorial 4. Horizontal lists
JavaScript Tabifier automatically create an html css tabs interface
- Converts your HTML into a dynamic tabbed interface.
- Does not require you to set up a list of links, or anchors for the tabs.
- Plug and play: no need to know JavaScript, just make a few simple changes to your HTML.
- Use CSS to customize the appearance of the tabs.
- Gracefully degrades if JavaScript is not present and allows a different set of styles to be applied when JavaScript is not present.
- Gracefully supports printing (try a print preview on the example.html page) and allows a different set of styles to be applied when printing.
- Multiple tab sets on a page - you can even nest one tab set within another.
- Set the initial tab to be displayed.
- Use javascript to control which tab is displayed.
- Define onLoad and onClick callback functions to perform more advanced functions, such as loading the tab content dynamically using AJAX.
- Use a cookie to remember which tab was selected so it remains selected when you return to the page.
- Object-oriented, extensively-commented code.
- MIT license so you can modify and use in commercial projects.
phatfusion : slideshow
phatfusion : slideshow
Fade, Slide and Wipe transitions
loops
Play, Stop, Next and Previous controls
Inits from array of image src's, a list of images on the page or using the href of an a tag like the lightbox
Fade, Slide and Wipe transitions
loops
Play, Stop, Next and Previous controls
Inits from array of image src's, a list of images on the page or using the href of an a tag like the lightbox
Mootools
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
MooTools code respects strict standards and doesn't throw any warnings. It's well commented and has meaningful variable names: a joy to browse and a snap to understand.
MooTools code respects strict standards and doesn't throw any warnings. It's well commented and has meaningful variable names: a joy to browse and a snap to understand.
Slimbox, the ultimate lightweight Lightbox clone · digitalia.be
Slimbox, the ultimate lightweight Lightbox clone · digitalia.be
Slimbox is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.
Slimbox is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar, written using the ultra compact mootools framework. It was designed to be small, efficient, more convenient and 100% compatible with the original Lightbox v2.
Highslide JS - JavaScript thumbnail viewer
Highslide JS - JavaScript thumbnail viewer: "What is Highslide JS?Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. It streamlines the use of thumbnail images and HTML popups on web pages. The library offers these features and advantages:
No plugins like Flash or Java required.
Popup blockers are no problem. The content expands within the active browser window.
Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
Compatibility and safe fallback. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a fallback HTML page."
No plugins like Flash or Java required.
Popup blockers are no problem. The content expands within the active browser window.
Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
Compatibility and safe fallback. If the user has disabled JavaScript or is using an old browser, the browser redirects directly to the image itself or to a fallback HTML page."
Feb 15, 2008
Feb 14, 2008
Feb 11, 2008
Feb 10, 2008
CSS - Clearing floats
CSS - Clearing floats: "A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way."
Feb 9, 2008
CSS Page Layouts
Max Design Here are a range of CSS page layouts, including 2 column and 3 column layouts - free to use and abuse as needed.
In Search of the Holy Grail
A recent project has brought my personal grail quest to an end. The technique I’ll describe will allow you to deploy the Holy Grail layout without compromising your code or your flexibility. It will:
- have a fluid center with fixed width sidebars,
- allow the center column to appear first in the source,
- allow any column to be the tallest,
- require only a single extra div of markup, and
- require very simple CSS, with minimal hacks patches.
Subscribe to:
Posts (Atom)