Sliding Boxes and Captions with jQuery

Add an extra layer of information to your images with sliding boxes. This is now a plugin! Check out the announcement post for the Mosaic jQuery plugin. The Basic Idea All of these sliding box animations work on the same basic idea. Confused? From this basic idea we can play around with animations of the sliding element to either show or cover up the viewing area, thus creating the sliding effect. Step 1 – CSS Foundation Work Given the basic structure outlined in the helpful image above, we will need to use a little bit of CSS to make it work as intended. The following defines the viewing window (.boxgrid) and sets the default position for images within it to the top left. If you aren’t using the semi-transparent captions you are done with CSS – move to Step 2. Opacity that plays nice in all browsers is a rough topic, educate yourself if you need to. Now we’ll need to set up the default starting point for the caption box. Step 2 – Adding the Sliding Animations Step 3 – The HTML Google+

Starter Templates - CU3ER CU3ER team is continuously improving the choice of new starter templates, releasing a number of new ones each month. Utilizing variety of options CU3ER has, it can look just any way you want, thus we are inviting you to send us designs of sliders you reckon would be appealing enough to be created as templates. In order to send us your ideas, use our contact page. If it happens your design is chosen by our team, you will be awarded 1 PRO license! Preview the templates below by hovering and clicking Preview button to preview Flash version or Preview JS to preview Javascript version.Please note that Javascript 3D version will run in Chrome and Safari browsers including iPad and iPhone. Other browsers will display simple Javascript version. Showcase 940x300 Showcasing the beauty of CU3ER Products Stand 500x470 Display products on a stand Polaroid 608x556 Nice looking photo template Picture Frame 780x373 Display slides in picture frame Billboard 475x603 Billboard like slider Laptop 848x501

Web Design, Development, and Business - Build Internet! FancyZoom 1.1 Update: Version 1.1 released 2/8/08. Good bug fixes + Opera compatibility! ...so I fought back the charging Guanaco, immediately hopped on my paraglider, and basically caught the first flight out of Chile — but not without dealing with some cantankerous customs inspectors while drinking a cool glass of chicha. Really sorry it took so long! But hey, two years later, it's finally done! Smooth Javascript Image Zooming For Your Web Pages This much-requested chunk of Javascript to zoom images inline, originally written for this blog but later rolled out to the Panic website and used for screenshots, is now polished up, bug-fixed, available for you to use on your website! Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoom's raison d’être (French for "raisin-determination") is providing a smooth, clean, truly Mac-like effect, almost like it's a function of Safari itself. Instructions 1 Download the FancyZoom package, right here: 5Whoah. Example

How to Create a Simple News Ticker | Nettuts+ In this tutorial we’ll be looking at how we can transform some semantic and accessible underlying HTML into an attractive and functional news ticker that smoothly scrolls its contents. Some news tickers are horizontal and some are vertical; the one that we’re going to create today will be vertical. The context of the example is a news scroller so we’ll be working with plain text, but we should be able to put whatever we wanted into the underlying mark-up; images, or links, or whatever. The Underlying HTML In a new page in your text editor add the following code: Save this as simpleTicker.html in a directory containing jQuery 1.3.2. On the page is the content that we’ll progressively enhance into the news ticker; it’s made up of a simple definition-list element, which feels appropriate for our purposes. The code is minimal and highly accessible; browsers, mobile devices and screen-readers should all have no difficulty interpreting and rendering it. Providing Default Styling Fixing IE Summary

Fancybox - Fancy jQuery lightbox alternative Tooltip Plugins and Tutorials If you are looking to give your readers the option of a little bit more information or optional extra navigation, a great solution is to use Tooltips. Tooltips are a “common graphical user interface element, that are used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with extra information regarding the item being hovered over” (via Wikipedia). In this post we have collected 25 of the best jQuery Tooltip Plugins and Tutorials to help with your next project. qTip – The jQuery Tooltip Plugin View DemoSource BeautyTips, a jQuery Tooltip Plugin View DemoSource jQuery Tooltip – Tooltips done right View DemoSource Prototip 2 – Create Beautiful Tooltips with Ease View DemoSource jGrowl View DemoSource Simpletip – A simple jQuery Tooltip Plugin View DemoSource jQuery plugin EZPZ Tooltip View DemoSource Coda Popup Bubbles View DemoSource jQuery Input Floating Hint Box View DemoSource vTip View DemoSource View DemoSource

remy sharp's b:log