background preloader

Glossy.js (now with IE 6/7 support)

Glossy.js (now with IE 6/7 support)
<form name="lst" id="lst" method="post" action=".. glossy.js 1.8 allows you to add corners and shading and shadow to images on your webpages (alternatively: corner.js). It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.CVI-lab: Get a fast impression of the effects and their illustration qualities. Shows some of the things glossy.js does. 6 images with class = "glossy iradius50" cvi_glossy_lib.js supports additional appearances. Empty gif with class = "glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow" 3 images with class = "glossy" Images used are copyrighted and are used for demonstration only.

Loupe.js (now with IE 6/7 support) <form name="lst" id="lst" method="post" action=".. loupe.js 2.0 allows you to add photorealistic loupes (magnifier) to images on your webpages. The design is changeable by use of an image editing program. jQuery test // set constants var $pageheight = 189; // our single page height var $pagewidth = 146; // our single page width var $pageYpos = 0; // current Y position of our bg-image (in both pages) $(document).ready(function(){ // When the page is ready /* left page turner */ $("#leftpage").click( function() { $pageYpos = $pageYpos + $pageheight; // update Y postion $("#leftpage").css("background-position", "0px "+$pageYpos+"px");// move the background position setTimeout ('$("#flip").css("background-position", "top center");', 200); setTimeout ('$("#rightpage").css("background-position", "146px "+$pageYpos+"px");', 200); }); // close leftpage click function /* right page turner */ $("#rightpage").click( function() { $pageYpos = $pageYpos - $pageheight; // note: minus page height $("#rightpage") .css("background-position", "0px "+$pageYpos+"px"); }); // close rightpage click function }); // close doc ready

What is Rich Internet Application (RIA)? - a definition from Wha A rich Internet application (RIA) is a Web application designed to deliver the same features and functions normally associated with deskop applications. RIAs generally split the processing across the Internet/network divide by locating the user interface and related activity and capability on the client side, and the data manipulation and operation on the application server side. By submitting your email address, you agree to receive emails regarding relevant topic offers from TechTarget and its partners. You can withdraw your consent at any time. Contact TechTarget at 275 Grove Street, Newton, MA. You also agree that your personal information may be transferred and processed in the United States, and that you have read and agree to the Terms of Use and the Privacy Policy. An RIA normally runs inside a Web browser and usually does not require software installation on the client side to work.

Instant.js (now with IE 6/7 support) <form name="lst" id="lst" method="post" action=".. instant.js 2.4 allows you to add an instant picture effect (including tilt) to images on your webpages (alternatively: slided.js or filmed.js). It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.CVI-lab: Get a fast impression of the effects and their illustration qualities. Shows some of the things instant.js does. First image with class = "instant itiltleft icolorFFFCE9 ishadow40 historical", next image with class = "instant nocorner itxtalt" and next two images with class = "instant itxtalt". Images used are copyrighted and are used for demonstration only. Download instant.js and include it into your webpage. // only if you want to use the annotation feature...

JavaScript Made Easy: Free JavaScripts Tutorials Example Code Corner.js (now with IE 6/7 support) <form name="lst" id="lst" method="post" action=".. corner.js 2.1 allows you to add corners (and also shading and shadow) to images on your webpages (alternatively: glossy.js). It uses unobtrusive javascript to keep your code clean. It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+. On older browsers, it'll degrade and your visitors won't notice a thing.CVI-lab: Get a fast impression of the effects and their illustration qualities. Shows some of the things corner.js does. class = "corner ishade50" class = "corner ishadow20" class = "corner ishade50 ishadow20" class = "corner ishadow40 inverse" class = "corner iradius16" class ="corner iradius24 ishadow33 inverse" class ="corner iradius20 ishadow33" class ="corner iradius8 ishade75 ishadow33" class ="corner iradius16 ishade66 ishadow30" class ="corner iradius32 ishade50 ishadow25" class ="corner iradius48 ishade33" If you want flexibility, use "cvi_corner_lib.js" instead of "corner.js". Set defaults using Javascript

Layout Gala: a collection of 40 CSS layouts based on the same ma All layouts use valid markup and CSS, and have been tested successfully on Internet Explorer/win 5.0, 5.5, 6 and beta 2 preview of version 7; Opera 8.5, Firefox 1.5 and Safari 2. Each of the columns could be the longest, and for testing columns length I've used the script filler text on demand. Each layout could represent a site with five main sections: header, content, navigation, other stuff and footer. The basic markup, common to every layout, is the following: <div id="container"> <div id="header">Header</div> <div id="wrapper"> <div id="content">Content</div> </div> <div id="navigation">Navigation</div> <div id="extra">Extra stuff</div> <div id="footer">Footer</div> </div> It's almost minimal, apart from an extra wrapper around the content. Talking about CSS: each of the layouts uses float and in most of the cases negative margins.

Thirteen Simple Rules for Speeding Up Your Web Site The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories. Minimize HTTP Requests tag: content 80% of the end-user response time is spent on the front-end. One way to reduce the number of components in the page is to simplify the page's design. Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. CSS Sprites are the preferred method for reducing the number of image requests. Image maps combine multiple images into a single image. Inline images use the data: URL scheme to embed the image data in the actual page. Reducing the number of HTTP requests in your page is the place to start. top | discuss this rule Use a Content Delivery Network tag: server The user's proximity to your web server has an impact on response times. top | discuss this rule top | discuss this rule tag: css

Data Tables and Cascading Style Sheets Gallery What is this about? The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results. Every once in a while there are emails on discussion lists asking for nicely designed tables and they are prone to go off-topic and ending in a holy war why tables are bad and why you shouldn't use them. Basically the thread/email that gave me the idea was this request on the evolt list. Well, there are legitimate uses for tables, for tabular data they are the best solution, as - properly marked up - they structure the data for the visual user and make it easy to follow for blind visitors or those using user agents without table rendering. There are some good tutorials on styling tables on the web already, but a showcase site was missing, so here you go. Table and CSS tutorials May the following off-site resources give you wisdom and inspiration: Most blatantly stolen from Laura L.

cssdoc - Trac

Related: