Adobe brings your e-Seminar sessions packed with the hottest and most-requested features.
Learn the very latest tips, tricks and advanced techniques that will give you the required skills to stand out in a competitive market and take your ideas and creativity to a whole new level.

All sessions are for one hour – 11:00 AM to 12:00 PM

Design sessions

Photoshop killer tips – WED, 7th October
In -design Killer Tips – Wed, 11th November
Illustrator Killer tips – Web, 18th November

Web Sessions

Flash Killer Tips – Web, 23rd September
Dreamweaver Killer Tips – Wed, 14th October
Flash Action Scripting – Web, 4th November

Technical Writers’ Sessions

Easily Author and publish using Framermaker9 – Web, 28th October
Beyond Screen Capture Adobe Captivate – Friday, 30th October

What do you need to Participate?

Online live seminars are scheduled events simulcast over the web via Adobe Acrobat connect Pro.
You’ll need a computer with a browser, Abode Flash Player and internet connection. Audio is available via telephone (Local telephone numbers would be provided or dial in to the conference). Access details will be provided once you register.

Register

This session is conducting by – Channel Technologies (P) Ltd.

Using xajax  You can directly call php functions from your javascript code.

Xajax will do the rest.

For example, if you are going to write a javascript function Capitalize which captilaze your textbox content when you press a button.

Here is the pure html/javascript code for that:

=============================================

<script>

 function Capitalize()

 {

var t = document.getElementById(’cap’).value;

document.getElementById(’update’).innerHTML = t.toUpperCase() ;

 }

</script>

<input type=”text” id=”cap” name=”cap” />

<input type=”button” id=”capbutton” value=”Capitalize” onclick=”Capitalize()” />

==============================================

Now see the difference when we use xajax, we can write this Capitalize function in php code and can call from javascript.

function Capitalize($value)

{

$objResponse = new xajaxResponse();

$objResponse->assign(”update”,”innerHTML”,strtoupper($value));

return $objResponse;

}

and you can call from your button’s onclick function:

 onclick=”xajax_Capitalize(document.getElementById(’cap’).value)” 

Here the same functionality we moved from client to server. Thus the point is you can simply call all the functions you written in php (Server Side) from javascript code via onClick, onMouseOver or window.onLoad etc.

You can get the full source code of Capitalize example here:

Download

To download and for documentation go:

http://xajaxproject.org/

By Vibha Babbar

What comes to our mind when we talk about an SEO friendly site? Keyword rich content, link building, optimized meta tags, and few other search engine techniques. These criterion can be easily achieved. The other SEO features that work from back-end are generally not looked into. These features when structurally followed, can produce an effective online presence for your business.

Following are the few techniques that can be used to improve your website.

Keywords

Lately, it has become a myth that more the number of keywords, the better would be the ranking. Search engines have become much more smarter and unique. They consider the content on the basis of reasonably placed keywords. So no point rushing madly after keywords. An optimum and sensible use would do magic.

Meta tags

Meta tags include meta title, description, and keywords. It would not be wrong to say that meta tags control the content. They are the gateway to your site. Both the search engines, as well as the visitors judge the site by reading meta tags. Using the maximum number of keywords, along with a brief intro would do in your favor. Try incorporating all the main keywords here.

Coding language

It’s better to code the content of your website in HTML, so that the search engines can read it. Consider that search engines are lazy enough to go through the complicated site made in Flash, or one that includes many PDF documents in it. The search engines are not able to see the text in these languages, and that earns a bad point from SEO perspective.

Valuable content

As mentioned earlier, search engines have become way much smarter. All the major search engines like Google and Yahoo! judge the site on the basis of information provided. More the information, more would the spiders index towards your site. Also, these search engines have a deep dislike for identical content. Make sure the content you post is original and unique.

Avoid excessive use of images

Upload images wherever necessary. Overuse of images doesn’t help in SEO. On the contrary, it makes the site heavy, and difficult to run. For SEO purposes, use Alt tags for images. Alt tag is the background text to help SEO in images.

(by Carlos)

In this web roundup, we have handpicked some of the best free Flash photo galleries on the Internet. From web based scripts, to Flash components ready to be integrated on your website. And on top of that, we’ve also included some cool tutorials that will help you to learn how to create your own 2D and 3D Flash Galleries and how to turn it in a Flash Component.

FlashFlickr PhotoGallery

A gallery from Sephiroth.it, based on Flex and Actionscript 3.0 that uses the famous Flickr API.

Flashmo 3d Grid

Flashmo is a well known free flash templates site, where you can find several cool interfaces like this 3D Grid gallery.

PhotoDiary 1.0

PhotoDiary is a Flash based gallery, cool for people that don’t have flash skills or would like to have an application where easily could manage the photos on a normal php back end.

Tony Photo Album

FlashMo Stack Photo Gallery

Another cool gallery from FlashMo.

3D Album

This 3D album component is based on the bellow "Building a 3D album with FIVe3D and TweenLite" tutorial .

Slideroll Gallery AV

Another very easy to manage flash gallery, that allows you to insert caption on each image.

WS-Slideshow

Imagin Flash Photo Gallery

FlashMo Circle Gallery

Art Flash Gallery

Zen Flash Gallery

Flash Mo Grid Gallery

AutoViewer

Cool gallery, with a very easy navigation and clean layout.

Flash Gallery

PostcardViewer

This gallery it causes a somewhat interactivity wit a cool zoom effect.

FlashMo Photo Gallery

InventMedia FlashGallery

dfGallery 2.0

A Dezinerfolio application, with lots of features ready to use. They have even included a cool video explaining how to install and customize this cool gallery.

Polaroid Gallery

This is an impressive image gallery that can load data either from a xml file or flickr rss. You can use it on a portfolio or something like that. This is an open-source application, so if you have some actionscript skills, you can add additional features to it.

Flash Image Gallery

Free Flash Gallery

Andrew Bergs Flash Photo Browser

A very cool interactive stack gallery.

flShow Carousel

A nice caroussel kind gallery.

Simple Viewer

Another cool gallery, ready to use.

Veppa Photo Album

XML Photo Album

Tutorials

Building a 3D album with FIVe3D and TweenLite

This tutorial explain how to create an awesome Flash 3D Album using the FIVe3D framework and TweenLite.

Build a Dynamic Flash Gallery with Slider Control

Another cool tutorial showing how to create a flash gallery controlled by a slider and using xml data.

Simulating PicLens with Flex and Away3D

A 3 part tutorial, creating from scratch a 3D application similar to the famous PicLens.

Flash Slideshow Image Gallery

Learn How-to Create Flash Components using Actionscript 3.0, XML and Flickr API

If you want to create your own gallery, or if you want to add some features to some of the above mentioned examples, why don’t you compile it as a flash component, ready to deploy in your following projects? And better than that, you can sale it in several sites such as the Adobe Exchange.

Hope you enjoyed all the Galleries.

Don’t forget to share this with others.

Flash websites more and more get popular among Internet users. And though many of them still complain that Flash web pages are slow as a snail, it doesn’t prevent them from enjoying the beauty and creativity of Flash sites. These websites continue to impress us with dynamism, interactivity, fresh unique ideas and spontaneity but still require lots of patience. And when we enter such a website it often takes some time to load. But Flash developers and designers tried to brighten up this waiting time and created the attractive preloaders – custom-built flash components that inform the viewer that content is being loaded into the Flash player.

Flash preloaders can range from a simple, static waiting message to a dynamically updated animation that reflects the status of the content loaded. And this blogpost presents the most creative and stunning Flash preloaders of all times. And I admit, we should give credit to Flash designers for their vivid imagination. Enjoy the collection!

—————————————————————————————————————-

Sergey Tyukanov Artworks

Visit the website

—————————————————————————————————————-

EducationIsEverywhere

Visit the website

—————————————————————————————————————-

ProblemPlayground

Visit the website

—————————————————————————————————————-

Oddodesign.com

Visit the website

—————————————————————————————————————-

Kaiserinteractive.com

Visit the website

—————————————————————————————————————-

Scruffs-game.com

Visit the website

—————————————————————————————————————-

Ishothim.com

Visit the website

—————————————————————————————————————-

Dead-line.com

Visit the website

—————————————————————————————————————-

Communicatorworld.com

Visit the website

—————————————————————————————————————-

Arihirvonen.com

Visit the website

—————————————————————————————————————-

Ladio.ru

Visit the website

—————————————————————————————————————-

Okaydave.com

Visit the website

—————————————————————————————————————-

Elipseagency.com

Visit the website

—————————————————————————————————————-

Conceptm.nl

Visit the website

—————————————————————————————————————-

Escriba.es

Visit the website

—————————————————————————————————————-

Farmrio.com

Visit the website

—————————————————————————————————————-

Instinct.ru

Visit the website

—————————————————————————————————————-

Yosry.com

Visit the website

—————————————————————————————————————-

Prismgirl.org

Visit the website

—————————————————————————————————————-

Limbus.fr

Visit the website

—————————————————————————————————————-

Marilynmanson.com

Visit the website

—————————————————————————————————————-

Bio-bak.nl

Visit the website

—————————————————————————————————————-

Laplanete.sldimension.com

Visit the website

—————————————————————————————————————-

Mon-monde.com

Visit the website

—————————————————————————————————————-

Mattwiggins.net

Visit the website

—————————————————————————————————————-

Typographykicksass.com

Visit the website

—————————————————————————————————————-

Zunejourney.net

Visit the website

—————————————————————————————————————-

Unlimited.orange.co.uk

Visit the website

—————————————————————————————————————-

Sir-patroclo.com

Visit the website

So don’t waste your time and let’s start some creative thoughts.

If you know any creative Flash preloaders, let’s share with me..

Awesome Color Picker by “eyecon” which similar like Photoshop Color picker, We can change the color using the pointer or we can write the RGB code or Hex code.

They did have different types of color pickers which we could integrate in our views.

Let’s check it out once.

Features

• Flat mode – as element in page
• Powerful controls for color selection
• Easy to customize the look by changing some images
• Fits into the viewport

Code

Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to images and change colors to fit your site theme.

<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
<script type="text/javascript" src="js/colorpicker.js"></script>

Invocation code

All you have to do is to select the elements in a jQuery way and call the plugin.

 $('input').ColorPicker(options);

Options

A hash of parameters. All parameters are optional.

Set color

If you want to set a new color.

$('input').ColorPickerSetColor(color);

The ‘color’ argument is the same format as the option color, string for hex color or hash for RGB and HSB ({r:255, r:0, b:0}).

View Demo Download

Papervision3D (PV3D) is a popular open source 3D engine for Flash. It enables to create advanced three-dimensional objects displayed real time right in the web browser. With Papervision3D designers bring an impressive visual experience and user interaction to the web visitors. Interactive environment captivates and gives an opportunity to enjoy navigation and content exploring process. PV3D provides great solutions for product showcasing websites, advertising campaigns and portfolio designs.

Below you can find a collection of impressive Papervision3D websites and tutorials that hopefully will inspire you and give you an idea about how this technique can be used in your projects. It is important to remember that being based on Flash, Papervision3D often has similar issues in usability and is not recommended to be used in developing websites where simplicity and accessibility are essential.

Creative Papervision3D Websites

Portfolios

X-PRIME

A stylish and unobtrusive portfolio design featured with a nifty Papervision3D image gallery which can be displayed in a few ways.

Hatica 2009

This website reminds of a little fairy-tale world floating in shining light space. Navigation is quite easy and enjoyable.

HOOK

Hook’s portfolio is a picture of a truly creative and beautiful design. Everything here is about brilliant individuality and attention to details.

Lab9

It’s a great example of clean and neat Papervision3D interface.

SapientNitro

This digital styled website performs awesome transitions, typography visualization and sound effects.

Zara Media Design Group

Nice and minimalist PV3D-powered website. Open a three-dimensional book to meet Zara Media Design Group.

Oval Design

Portfolio of Oval Design Studio provides an amazing interaction experience. Website represents the whole universe you can explore on a controllable spacecraft.

13flo

Florian Bernard’s portfolio is done in a sleek cyber-punk style and offers a wonderful 3D performance. The thumbnail displaying mechanism implies the 360-degree rotation and can be transformed in several ways.

Dasai

Nice and amusing website with a good use of space and easy navigation. You can find the information about Spanish web agency Dasai exploring a small green planet of the same name.

TBC

Portfolio of Baltimore-based advertising and public relations company TBC features original and usable content presentation. All the information can be browsed without leaving the home page.

Scalena Agency

Chic website. Both in style and technical execution.

Barcinski&Jeanjean

Barcinski&Jeanjean studio offers so much interaction in their portfolio. Website has a special option – wear 3D-glasses and enjoy all the fascination of three-dimensional environment. You can also play ping-pong while the site is loading. Excellent work!

Freedom+Partners

Totally original website with a top-class PV3D realization and innovative navigation. It keeps up with usability as well – turn off 3D mode for quicker access to content.

WHITEvoid

Elegant minimalist design and handy navigation structure provide a remarkable visual experience. It proves that usable Flash websites do exist.

Advertising & Social Campaigns

Air Jordan 2009

Clean and fresh design of this site is not less inspiring than personal stories of famous sportsmen collected in a 3D video gallery.

Coors Light Project Cold

3D beer can model creates a cool tactile effect. Cans seem to be good containers not only for beer but for content as well.

Bankers’ stories

This promo website of the French bank Societe Generale shows how PV3D may come in handy to create social, communication-oriented mediums.

Panasonic: Everything matters

The statement “Everything matters” reflects the design guideline of this website ideally. Flash version of the site provides a creative and dynamic product presentation with cool transition effects and colorful animations. HTML version is also available for viewing.

Pepsi Music Challenge

Fantastic Papervision3D website. Pepsi Music Challenge project delivers an exciting interaction experience by allowing visitors to play a funny music related game. GuitarHero fans will love it!

The Baileys Lounge

Another creative idea realized by means of Papervision3D – dive into the Baileys Lounge while turning over the pages of virtual folding book.

The Economist: Thinking Space

The main purpose of The Economist’s research project “Thinking Space” is to learn where people get their ideas and inspiration. You can submit your own thinking space and get a section in the massive 3D construction on the main page.

SpringHill Suits

It is a nice and clean website providing interesting visual effects and interaction. A good idea for an online hotel tour.

The Cigarette Is Dead

Now comes a dark-styled website using PV3D for displaying timeline. The overall horror-movie style can probably leave a bad aftertaste, it is a powerful solution for anti-smoking campaign though.

The Wrong Door

Official website of BBC comedy sketch show is a successful mix of beautiful graphics, funny animations (sometimes containing adult and toilet humor) and lively 3D surroundings.

UFC 100

This is the second PV3D-based website for Ultimate Fighting Championship official web presentations. (UFC84 was the first one) Excellent usage of this technique can be observed in both cases.

Summerfestival 2009

Burst of colors, psychedelic balloons and original navigation form a quite imaginative website.

FOXTEL: I’m Unique

IamuniQue project lets you build an interactive 3D portrait of yourself and share it with other users. New fun for social networking enthusiasts.

Watchmen Motion Comic

Wonderful presentation of Watchmen Motion Comic features superb interactivity, great dynamics and transparent navigation.

Foot Locker

Another example of fabulous PV3D effects and unique creativity in product presentation.

Absolut

“Doing things differently leads to something exceptional”. The following website contains exceptional videos and beautiful minimalist 3D gallery.

Concave Scream: Soundtrack For A Book

Dancing particles and dreamy music will take you far away from your desktop. It is probably the most unusual website from our collection.

Papervision3D.org

Official site

The home page of Papervision3D official site is nothing but a three-dimensional underwater world visualization. The work shines for itself.

carlosulloa.com

Website of Papervision3D founder Carlos Ulloa is done in minimalist style. Controllable 3D car model and good use of thumbnail lighting give it a subtle flavor.

HelloEnjoy

This is a new home of carlosulloa.com. It features PV3D engine powerful capabilities enabling to play around with 3-dimensional text.

Tutorials

Papervision3D Flash Gallery

Three-dimensional image gallery is a good way to enrich your website with interactivity and visual attractiveness. This is a very detailed and informative tutorial on how to create a Papervision3D Flash gallery.

Introduction to Augmented Reality

Augmented reality is an ActionScript library used in combination with Papervision3D. With Lee Brimelow’s video tutorial you will learn the basics of how to get stated with this new trendy effect.

Papervision3D For Beginners

This is a collection of video tutorials covering some basics of Papervision3D. A good introductory set for beginner users.

Papervision3D Collada Basics

This video guide describes how to create and import 3D textured models for use in PV3D.

Build A Wiimote Controlled Lightsaber Using WiiFlash and Papervision3D

Learn how to use a Wiimote within Flash and how to blend it with Papervision3D to get an interactive lightsaber.

Interactive 3D Cube

Another great tutorial from Lee Brimelow shows you how to use Papervision3D 2.0 to create an interactive cube navigator.

Geocoding in Papervision3D with Yahoo Maps

This article shows how to use PV3D and Yahoo mapping API to display any location you enter on a 3D globe of the world. You can also watch a video presentation of the PV3D Geocoding application

I love the Coda Slider plugin for jQuery. I’ve used it recently to build a couple of tabbed “widgets”. Just kind of a fun way to show lots of content in a small area. I also used it on an article for NETTUTS for a similar purpose.

Both of these examples use the Coda Slider pretty much “out of the box”. Sure the design was heavily altered to fit the job, but the actual functionality wasn’t altered in any way. I recently had the calling to build a “featured content area”. The Coda Slider fit the bill almost perfectly, but it needed a little functionality surgery to do what I wanted it to do. Special thanks to Benjamin Sterling for helping me out and figuring out some quirks for me.

View Demo Download Files

Functionality Checklist

Like I said, the Coda Slider was 90% there already. There is a main content area (panels, if you will), which slide from left to right each with different unique content. There is generally a set number of panels, but the code is written in such a way that adding or removing panels isn’t a huge pain. There are links which act as navigation to quickly jump to any particular panel. These links can be anything (text hyperlink, thumbnail, etc) and link to a unique hash value URL (each panel has a unique URL if need be). Coda Slider provides all of this out of the box.

Here is what we need in addition:

• Different types of custom content in the panels. We can already put whatever we want in the panels, but to make it easier on ourselves, there will be a couple of different formats ready to go. The main one being an image the size of the entire panel, but featuring a text-overlay.
• Auto-play. You can still click the thumbnails to jump to any panel, but left onto itself, the slider will slowly cycle through the panels.
• Arrow indicator. To serve as a visual indication of which panel you are currently viewing, a small arrow will display above the thumbnail pointing into the panel.

Let’s go through the HTML, CSS, and JavaScript.

The HTML

Here is the framework HTML for just the slider itself:

<div class="slider-wrap">
	<div id="main-photo-slider" class="csw">
		<div class="panelContainer">

			<div class="panel" title="Panel 1">
				<div class="wrapper">
					<!-- REGULAR IMAGE PANEL -->
					<img src="images/tempphoto-1.jpg" alt="temp" />
					<div class="photo-meta-data">
						Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
						<span>"Free Tibet" Protest at the Olympic Torch Rally</span>
					</div>
				</div>
			</div>
			<div class="panel" title="Panel 2">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>
			<div class="panel" title="Panel 3">
				<div class="wrapper">
					<!-- EXAMPLE OF OTHER PANEL POSSIBILITIES -->
					<img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>

					<h1>How to Cook a Scotch Egg</h1>

					<ul>
						<li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
						<li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
						<li>1/2 cup AP flour</li>
						<li>1-2 eggs, beaten</li>
						<li>3/4 cup panko-style bread crumbs</li>
						<li>Vegetable oil for frying</li>
					</ul>
				</div>
			</div>
			<div class="panel" title="Panel 4">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>
			<div class="panel" title="Panel 5">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>
			<div class="panel" title="Panel 6">
				<div class="wrapper">
					<!-- PANEL CONTENT -->
				</div>
			</div>

		</div>
	</div>

	<!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
          AND THE CLASS="CROSS-LINK" ARE REQUIRED -->

	<a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
	<div id="movers-row">
		<div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
		<div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
	</div>

</div>

The CSS

The full CSS for this example has a basic reset, some utility styles and basic structure. Below, I’ll just show you the CSS relevant to the slider itself, but you can view the full CSS here.

.slider-wrap{ width: 419px; position: absolute; top: 87px; left: 40px; }
.stripViewer .panelContainer
.panel ul{ text-align: left; margin: 0 15px 0 30px; }
.stripViewer{ position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel{ float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav	{ display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row { margin: -43px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data { background: url(images/transpBlack.png); padding: 10px; height: 30px;
											  margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span  { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -14px;
											  position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb { background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }

Anything in there that starts with “.strip” is core to the slider itself, getting those panels set up and the wrapper around them, all the CSS magic needed to make a slider do its thing. From “.nav-thumb” on down is stuff specific to this example. The thumbnails have thin black borders. The meta-data section is pushed off the panel by the image, but then is forced back up with a negative top margin and a transparent black background applied.

The “.active-thumb” class is very important too, if a thumbnail has this class, it gets the special background applied, which is the white arrow we wanted to indicate the current panel. This class will get applied and removed in the JavaScript.

The JavaScript

In the header section of your HTML, you’ll need to include jQuery and all the plugin files. The bare minimum basics look like this:

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>

<script type="text/javascript">
	$(function(){

		$("#main-photo-slider").codaSlider();

	});
</script>

That will activate the slider, but remember we have some extra functionality to get cooking here. Instead of altering the plugin itself, we can add the extras by writing our own little function on top of it. In essence, to achieve the “auto-play” effect, we are going to trigger a click event on the next thumbnail in line every 3 seconds. We’ll call the function “theInterval”, and we’ll need a couple of variables, so we’ll set those up first.

var theInt = null;
var $crosslink, $navthumb;
var curclicked = 0;

theInterval = function(cur){
	clearInterval(theInt);

	if( typeof cur != 'undefined' )
		curclicked = cur;

	$crosslink.removeClass("active-thumb");
	$navthumb.eq(curclicked).parent().addClass("active-thumb");
		$(".stripNav ul li a").eq(curclicked).trigger('click');

	theInt = setInterval(function(){
		$crosslink.removeClass("active-thumb");
		$navthumb.eq(curclicked).parent().addClass("active-thumb");
		$(".stripNav ul li a").eq(curclicked).trigger('click');
		curclicked++;
		if( 6 == curclicked )
			curclicked = 0;

	}, 3000);
};

We aren’t done yet though. We need to call our function, for one thing. But we also need to handle a manual click event on one of our thumbnails properly. We want a manual click event to use the same function, so that the “current” thumbnail can be reset properly and we don’t see any weird jumping around. Right after our function, we can now add this final code, to be fired when the DOM is ready:

$(function(){

	$("#main-photo-slider").codaSlider();

	$navthumb = $(".nav-thumb");
	$crosslink = $(".cross-link");

	$navthumb
	.click(function() {
		var $this = $(this);
		theInterval($this.parent().attr('href').slice(1) - 1);
		return false;
	});

	theInterval();
});

Couple more things to note. Notice the number “6″ is hardcoded in our function. If you change the number of thumbs, you’ll have to change it here as well. Also, you may have noticed the seemingly strange element that click event is being triggered on (”.stripNav ul li a”… where is that?!). You’ll notice that isn’t anywhere in our HTML. Actually, the Coda Slider plugin automatically generates this unordered list from the number of panels when it runs. Very handy sometimes we we have hidden it in the CSS in our example. We are using them in our function though, as they will be the most reliable elements for the click event. They will exist no matter what, and this example will continue to work and be auto-play regardless if we use the thumbnail navigation or not.

View Demo Download Files

I’d like to get a “stop” button in there at some point!

The most common problem of the front end web developers or designers is having their output looks and behave the same to different browsers. One of the solutions is using CSS hacks to apply different rules in a specific browser.

A CSS hack is simply an ugly and inelegant way of getting a browser to behave the way you want it to. CSS hacks are typically used to get around specific browser bugs such as IE’s proprietary box model. Unfortunately, the term hack has rather negative connotations and implies that there is a better way of doing something when often there isn’t. Therefore, some people favor the term patch to indicate that it is actually incorrect browser behavior that is being dealt with.

CSS hacks can use filters to apply one rule to one browser and a different rule to another. Alternatively, hacks can use incorrect CSS implementation to “trick” browsers into behaving the way you want them to. In essence, a CSS filter is a specific type of hack used for filtering different browsers. Unfortunately, most people tend to use the generic term hack to describe filters. As such, when people talk about CSS hacks, they are usually talking specifically about filters.

1. The child selector hack

The safest filters rely on unimplemented CSS rather than browser bugs. As these filters use valid CSS selectors to apply valid declarations, they are not, strictly speaking, filters at all. They are simply valid CSS rules that certain browsers fail to understand. The first of these filters is known as the child selector hack. IE 6 and below on Windows does not support the child selector, so you can use it to hide rules from those browsers. For this filter to work, you must make sure that there is no whitespace before or after the child selector. In this example, the child selector hack is being used to hide a transparent background PNG image from IE 5-6/Win:

html>body {
background-image: url(bg.png);
}

IE 7 is expected to support the child selector. It is also expected to support native PNG transparency. By using the child selector filter in this way, you are building in forward compatibility by allowing newer versions of IE to view the transparent background without needing to revisit the code.

2. Attribute selector hack

Another interesting way to filter rules is by using the attribute selector. Many modern browsers such as Safari and Firefox support the attribute selector, but it is not supported by IE 6 and below. As such, you can use the attribute selector as a way of styling classes and IDs for more advanced browsers. In this example, the attribute selector is being used to apply a background PNG to the content div on more compliant browsers:

div[id="content"] {
background-image: url(bg.png);
}

Again, both the attribute selector and PNG alpha transparency support are scheduled for IE 7, which means this method should work seamlessly when IE 7 launches.

3. The star HTML hack

One of the best-known and possibly most useful CSS filters is known as the star HTML hack. This filter is incredibly easy to remember and targets IE 6 and below. As you are aware, the HTML element is supposed to be the first, or root, element on a web page. However, all current versions of IE have an anonymous root element wrapping around the HTML element. By using the universal selector, you can target an HTML element enclosed inside another element. Because this only happens in IE 6 and below, you can apply specific rules to these browsers:

* html {
font-size: small;
}

Adding a universal selector followed by an html type selector to the start of any regular CSS rule will hide that rule from everything other than IE. The most common way to use

this filter is to set a rule that you want all browsers other than IE to apply, and then override that rule in IE using the star HTML hack. For example, IE renders 1-pixel dotted lines as ugly dashed lines by mistake. To avoid these ugly dashed lines, you could set the hover border style on your anchors to dotted but override this in IE, making them solid instead:

a:hover {
border: 1px dotted black;
}
* html a:hover {
border-style: solid;
}

It is very unlikely that this bug will appear other browsers, and it is expected to be fixed in IE 7. Therefore, the star HTML hack provides a relatively safe way of targeting IE 6 and below.

4. IE/Mac commented backslash hack

Another useful filter is known as the commented backslash hack. IE 5 on the Mac incorrectly allows escaping inside comments, so this filter works by adding a backslash in front

of the closing comment identifier. All other browsers will ignore this escape and apply the following rules. However, IE 5/Mac will think that the comment is still open, ignoring everything until the next close comment string.

/* Hiding from IE5/Mac \*/
#nav a {
width: 5em;
}
/* End Hack */

By combining these two rules, it is possible to apply rules to IE 6 and below on Windows:

/* Hiding from IE5/Mac \*/
* html {
height: 1px;
}
/* End Hack */

This can be very useful for attacking and fixing all kinds of Windows-specific IE bugs, and is possibly one of the most used filters around.

5. The escaped property hack

IE 5.x on Windows ignores escape characters. This bug forms the basis of the mid-pass filter you learned about earlier. It also forms the basis of the much easier escaped property filter. As the name suggests, this filter works by adding an escape character within a property. All modern browsers should ignore this escape character, but IE 5.x/Win thinks this is part of the property name and, not recognizing the property, ignores the declaration.

#content {
w\idth: 100px
}

As such, the escaped property filter provides a simple way of hiding styles from IE 5.x/Win. However, you need to be careful when using this filter as the backslash character cannot come before the numbers 0 to 9 or the letters a to f (or A to F). This is because these values are used in hex notation and may therefore get escaped.

6. Tantek’s box model hack

Tantek’s box model hack was one of the first CSS filters ever invented. This filter works by passing one width to IE 5 on Windows and another width to all other browsers.

div.content {
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}

Unfortunately, Opera 5 has the same parsing bug as IE 5.x/Win. As such, a second rule is required to give Opera the correct width:

html>body .content {
width:300px;
}

If it weren’t for this filter, pure CSS layout may never have been possible. However, these days it is seen as an ugly and complicated filter, best avoided. I have included it in here purely for its historical significance and because you will still see it being used in older stylesheets. These days, it is much more common to use the modified simplified box model hack.

7. The modified simplified box model hack

The escaped property hack can be combined with the star HTML hack to create the modifiedsimplified box model hack, or MSBMH for short. This hack is used for working around

IE’s proprietary box model by providing one length value to IE 5.x/Win and then the correct length value to IE 6/Win and all other browsers:

* html #content {
width: 80px;
w\idth: 100px;
}

html #content {
width: 100px;
padding: 10px;
}

The modified simplified box model hack is easier to remember and much cleaner than Tantek’s box model hack, and so is currently the preferred box model hack. This filter can

be used for more than just box model hacks, so don’t let the name limit you.

8. The !important and underscore hacks

There may be some instances where you wish to apply one declaration to IE 6 and below on Windows and another to all other browsers, within the same rule. To do this, you could use the commented property hack, or you could use the !important or the underscore hack. For more on the history of this, and several other filters, see Tantek Çelik’s excellent

article, “Pandora’s Box (Model) of CSS Hacks and Other Good Intentions,” at http://tantek.com/log/2005/11.html.

The !important hack works because IE 6 and below on Windows has problems dealing with multiple properties in a single rule:

#nav {
position: fixed !important;
position: static;
}

IE 4-6/Win will ignore the first declaration and apply the second. All other browsers will apply the first declaration because it is using the !important keyword, which increases the rule’s priority within the cascade. Similar to the !important hack is the underscore hack. By placing an underscore in front of a property, compliant browsers will no longer recognize that property and the declaration will be ignored. However, IE 6 and below on Windows ignores the underscore and thus applies the rule. So in this example, all modern browsers will apply a position of fixed, skipping the unknown second rule. IE 4-6/Win will ignore the underscore and will override the first rule, setting the position to static.

#nav {
position: fixed;
_position: static;
}

9. The Owen hack

All of the filters so far have been aimed at various versions of IE. This is partly because IE has more bugs than most current browsers. However, it is also because IE is by far the most prevalent browser, so more bugs get found and documented. But there are other buggy browsers out there, including Opera 6 and below. The Owen hack allows authors to hide styles from Opera 6 and below, as well as from IE 6 and below on Windows. This filter works because these browsers do not implement the first-child selector. Because there can only ever be one head element, it is always a firstchild. The body tag always comes after the head tag, and so can be targeted using an adjacent sibling selector. The resulting selector is understood by more compliant browsers, while being ignored by version 6 and below of Opera and IE on Windows. In the following example, the Owen hack is being used to add a background PNG image on the body tag for more compliant browsers, hiding it from IE/Win and Opera, versions 6 and below:

head:first-child+body {
background-image: url("bg.png");
}

If you only want to target Opera 6 and below, you need to combine the Owen hack with the child selector hack. Say you wanted to display an upgrade notice to Opera 6 users. You would first use the child selector hack to show your upgrade message to every browser except IE 6 and below on Windows. You could then use the Owen hack to hide the message from more modern browsers:

html>body #getFirefox {
display: static;
}
head:first-child+body #getFirefox {
display: none;
}

In this web design tutorial, you’ll learn how to create a beautiful, green, and sleek layout in Photoshop. You’ll learn popular design techniques such as creating a 3D ribbon and professional-looking color gradient effects.

Final Result

Check out the preview of what we’re about to create together. Don’t forget to click on the image to see the full-scale version of the web layout.

Download

You can download the Photoshop (PSD) source file free of charge so that you may study it to enhance your learning.

Download (ZIP, 15.8 MB)