What We Are Building

Here is a look at what we’ll be building.  Not too fancy but it gets the job done.  It gives your site a nice little Easter egg for you users to find when surfing.

Getting Started

The first thing we’re going to have to do is image work.  Decide which image you want to reveal.  I just found a picture of a cat on the internet.  Second of all you’re going to have to create a fairly large image that goes from your background color to transparent.  It needs to be large enough to cover even your largest browser.  I made mine about 2000px square with a little texture in the gradation.  Once you have that made, simply save it as a transparent PNG and your ready to go.  The idea here is that the transparent PNG is going to sit on top of your hidden image.  Your PNG is going to scroll up,  but your hidden image is going to stay in place.  Kind of like the curtains at a theatre.

The Code

There is not much to this.  There is a single div wrapper which will have the PNG overlay as it’s background, and the body will have the hidden image as it’s background.  In this tutorial I also added some text and an arrow just to show that it is scrolling.

Just a couple of notes.  For this to work in IE6 your going to have to find a PNG transparency fix.  There are 10 million out there, just pick one.  I used the jQuery pngFix plugin. Also be sure to get rid of any margin padding on the body.  You’re PNG overlay won’t go to the edges if you have this margin in place.

Here is the Code:

That’s all there is too it.  Nice and quick for a pretty cool effect.  Enjoy.

The new effect is a wave like effect.  I don’t know how useful the effect is, but it looks pretty cool, and that’s good enough for me.

Have a look: Example

In the previous CSS the anchor tags had a position of absolute so the jQuery could position the anchor tags properly.  If we switch the position to relative, the jQuery can’t move the anchors freely and it creates a wave affect…kinda cool.

Download the original 3D jQuery tutorial file

Here is the new CSS:

Here is the new coplete code:

I always love happy mistakes, I encourage you to play around with the code and see if you can’t come up with your own cool effects.

3D Tag Clouds..Oh My

What exactly will we be building?  It’s somewhat like a carousel, but we’re going to have the take fade off into the distance like the lone ranger at the end of cheesy “B” western flick….very dramatic. 

We’re also going to have our tag cloud interact with the users mouse.  The further the mouse is away from the center, the faster it will rotate.

Simple HTML

As the sub title suggests the HTML is painfully simple.  Most of the complicated stuff is in the jQuery.  All we’ll need is a list of anchor tags wrapped in a div.  Told you it was simple,  here is the HTML.

Styling the List

For the most part the CSS is just to make the links pretty.  There are a couple of things that need to happen though.  The anchor links need to have a position: absolute.  This way the jQuery can give it x and y co-ordinates and the links will obey.  Also we need to give a height and width of the div wrapper.  The jQuery reference the dimensions of the wrapper to help layout the links.  It might also be a good idea to give the wrapper a position:relative to keep the links inside the wrapper, this isn’t necessary though.

Here is the CSS:

The Fun Part (jQuery)

Now comes the trigonometry….see…your high school teacher was right, you will use this stuff in the real world.  It really isn’t that bad though…3 lines of trigonometry is more than acceptable. I’m not going to go into great detail with the math.  If you want to learn more about the math behind the 3D I recommend reading Kirupa.com tutorial on it. The tutorial is for flash, but you will get the gist of how it works.

Here is the jQuery:

Just to step through what we did.  First we setup the mouse event. We figure out how far the mouse is away from the center and assign it to a variable that controls the speed of the scrolling list.

After that we step through each element in our list and give each one a spot on our 3D circle.  A for loop walks through each one, and evenly assigns an angle to each element. (e.g. 1st = 0 degrees, 2nd = 5 degrees, 3rd = 10 degrees…etc)

After we placed each element on our 3D circle it’s time to animate it.  We use a setInterval to call our render function repeatedly.  The render function steps through each element and figures out where and how it should be displayed.  The trigonometry basically creates a set of numbers that if you plot it on a graph look like a wave. If you apply those numbers to the size of the text, it gives the appearance of going back and forth in space.  If you also apply these numbers to the y, this will give you the appearance that the text is going around in a circle. If you don’t understand the math inside this function not to worry.  I encourage you to play around with the numbers to see how each number effects the outcome.

The Finish Line

That’s all there is to it.  Here is the code all together so you can have a look.  Enjoy.

What we will be building

We’ll be creating an input box that when you type it checks out the database for any words that might match what you typed in.  The database I’ll be using is a dictionary I found on the net.  It seems to be missing quite a few words, but it’ll work for what we will be doing.

Getting Started

Since we’ll be starting where we left off in the tutorial Beginners Guide to using AJAX with jQuery it might be a good idea to pick up the original files if you want build it out yourself.  There are two files.  One being the HTML file with the jQuery and the other being the PHP file that process the AJAX request. 

Here is a look at where we left off:

PHP:

The Database

The database we’ll be creating consists of one table called “Words”. In that table there is only one column called “Word”.  Here is the CSV file that I used to populate the database we’ll be using. 

The first thing we’re going to do is connect to the database.

PHP:

Getting Results from the Database

After connecting to the database, our goal now is to pull words from the database that match what was passed to the PHP via AJAX.   The SQL we’ll be using to query the database isn’t too difficult.

The SQL statement simply means select 5 rows from the “Words” table where the column “Word”  starts with whichever value we pass in. $value is a PHP variable, and % is a wild card meaning any value.

Here is the PHP to Query the Database:

After we get the results back, we’ll want to output any results we get back as an unordered list. If there aren’t any results we’ll output an empty value so we know we didn’t get any results back.

Let the Beautification Begin

As of right now we should have a list of words that show up after each character we type in.  Now we just have to beautify it a bit.  We’ll have to make it so that the list doesn’t appear until the user starts typing, and disappear after the input box loses focus.  We’ll also make it so that when you click on one of the words in the list it will populate the input box with that value.  Additionally we should handle when a user presses the down or up button, but we’re not going to for the sake of keeping things simple for this tutorial.

Here is the jQuery:

CSS:

Bringing it All Together

That’s all the code we’ll need for now.  The auto complete feature can definitely be improved, but hopefully this tutorial showed a useful use of AJAX with jQuery.

Here is all the code together:

PHP:

The Plan

Unfortunately browsers allow limited skinning of select boxes.  So the plan is to use jQuery to change a select box into a text box and a unorded list for the dropdown.  When a user clicks on the text box it will display the list below the textbox, just like a regular select box, but it’s easier to style.

Getting Started

The first thing we’ll need is a select box.  Nothing special here, just a regular select, but we’re going to give it an id so we can reference it later in the jQuery.

The jQuery

To save a little time we are going to use a plugin to handle converting the select into a text box.  I’ll be using the plugin from brainfault.com. From my experience this plugin is far less painful then other ones I’ve tried. It’s as simple as importing the plugin and running a method.  Here is the code to get it up and running.

Basically we’ve just imported the CSS which styles everything, jQuery, and the plugin.  Once we have those then we just have to run the selectbox method on the select boxes we would like to style.  We could have done something like $(‘select’) if we wanted to apply it to all select boxes.

The CSS

The CSS in selectbox.css isn’t too difficult, the most important part is applying the background image to the newly created text box.  Really you don’t need to touch anything in the CSS and just change the image.  In our case we want to make a couple of changes.  We’re simply going to change the font size and width inside the selectbox class.

The full CSS file can be seen here:

The Image

The last thing we need to handle is creating the image that will be the background for our text box.  On the far left of the image is the button and to the left will be the background of the select box.  Here is the image we will be using.

That’s it, after we’ve created the image we’re good to go.  I recommend looking at the plugin code to get an idea how it all works. This is a fantastic plugin so be sure to give your props over at www.brainfault.com .

Here is the code all together.

The CSS:

Beautifying Hyperlinks

Hyperlinks can link to any number of different sources (pdfs, emails, external links, popups). By placing an icon beside each of these types it will take the surprise out of clicking on a hyperlink for the user.  The plan is to do this in an intelligent manner so users don’t have to worry about placing a class on each link.  This is especially handy if you’re building for CMS users that aren’t HTML savvy.

A couple of notes.  The CSS we will be using doesn’t work in IE7 unless you’re using a strict doctype. Also this does not work in IE6 (surprise, surprise), you will have to use JavaScript if you want it to work.  Personally I usually use strict doctype and IE6 is dying, so I think it’s a viable solution for future use.

Creating the Hyperlinks

We will just need to create some plain jane anchor tags, like you’ve done a million times before.  All the magic lies in the CSS. It will create the icons without having to do anything special with your HTML.

Here is the HTML:

How the CSS is Going to Work

The magic lies in the CSS selector.  We’ll be using a selector that is similar to regular expression.  So for example, you can specify that you want to style any item that has an href value that ends, starts, or contains a specific value.  This opens up a world of possibilities.

You’ll notice the $ before the =, this is specifying that we want what is at the end of the href.  There are more tags like this to specify different locations.

• $=   End of String
• ^=   Beginning of String
• ~=  String contains the word and is separated from other words by spaces.
• *=   String contains the word. (doesn’t have to be separated by spaces)

Building the CSS

Now that we have a basic understanding of how this is going work, lets jump in and get our hands dirty.  We’re going to create a style for each anchor tag that we created earlier.

Here is the CSS:

Bringing it All Together

I encourage you to get out there and experiment with this.  There are so many possible uses for these selectors.

Here is the code all together:

What We Are Building

We are going to build a header that animates it’s background.  We will also encase the header in shadow for the little extra dramatic effect.

How it’s Going to Work

The header background image is going to be super tall. Here is the important part, we’re making a header that is 300px tall.  The image’s top 300px and bottom 300px have to be the same.  This will allow us to scroll our header seamlessly.  So dust of your Photoshop skills you’re going to need them.  Not to fret, it’s not that difficult.  Just copy the top 300px of your image and paste them on the bottom.  Then blend what was originally on your background with what you pasted in.

Now that we have our background image, we will also need to create a shadow overlay image. This will basically be a png with a transparent center that gradually turns to black on the edges.  With the CSS we are going to lay this on top of our header to give a dramatic effect.

After that it’s just a matter of animating the background image with jQuery so it scrolls.

Getting Started

The first thing we’re going to need is the HTML in place.  It’s pretty straight forward.  We have a wrapper div to center the website, a header div for the animation, another div within the header for the shadow overlay, and finally divs for the navigation and body copy.  It’s a lot of divs, but what do you expect, it’s the framework

Here is the HTML:

The CSS

We aren’t going to do anything too difficult here. Here is a list of what was done:

• Center the website
• Give the header a height and a background image
• Style and position the text within the header
• Create a shadow overlay
• Give basic style to the header and navigation bar.

Here is the CSS:

Just a note, the png transparency won’t work in IE6.  If you choose to optimize for IE6 you will need to add this piece of code to use the overlay.

HTML:

The jQuery

There are a couple ways of animating the background with jQuery.  You can use the jQuery plugin that allows you to animate the CSS background-position attribute.  This is the same plugin we used for making a table row highlighter in jQuery. I opted not to use this as I found the performance was lagging.  Instead I went with an interval that calls a function repeatedly.  It’s a little uglier to look at but the performance is a lot better.

Here is the jQuery:

Bring it All Together

That’s all there is to it.  Here is the code all together.

What We Are Building

We be making a simple image viewer that has 4 tabs on the left and a main picture on the right.  When the user clicks on one of the tabs it shows the new image.

Prepping the Images

First thing we’ll need are images.  In this example I’ve used landscape images, but this could be promotional content, or whatever you like.  I made the main image 500×300, and the tabs 75×125.  I just picked a size for the main image, than divided the height by how many tabs I wanted. (e.g.. 300 / 4 = 75)  This gives me the height of my tabs. The width of tab was arbitrary, I just resized the main image to the height of 75 and the width is whatever it falls at, in this case 125.

The Theory

The theory behind how this is all going to work really isn’t that difficult.  We’re going to use anchor tags to jump from one image to the next. This is much like a “Back to Top” link that jumps to the top of the page when you click on it.  The only difference is the images are going to be scrolling within a div wrapper instead up jumping up and down the page.

The HTML

The HTML itself is pretty simple.  For the tabs it’s just an unordered list, with images inside of anchor tags. For the images they’re all wrapped in a div (this is important as we are going to hide the overflow so it only displays your selected image) Also each individual image is wrapped in a div along with a named anchor tag.  These divs are there incase you want to use background images instead of regular images, we really don’t need them in this instance, they’re just there incase we change our mind.

Here is the HTML:

The CSS

What we’re going to do with the CSS is setup the tabs so they sit to the left and are stacked on top of one another.  We’re also going to make it so the tabs originally sit at an opacity of 40%, then when a user rolls over the tab it will change to 100% opacity.  Probably the most important part of the CSS will be for div wrapping the images.  We just have to make sure the overflow is set to hidden.

Here is the CSS:

Putting it All Together

The last thing we need to do is put the HTML and CSS together.  Of course you change around the appearance of where the tabs sit and how many tabs there are.  The important thing to take from this tutorial is the idea of using anchor tags as a means of switching images.

Here is all the code together: