Programming Blog » span class

Drawing Realistic iPad2 in Photoshop

Facebook-Web-Design — Tue, 12 Jul 2011 18:35:52 +0000

iPad 2! Many love it, many want it, but not many can draw it. Surprisingly, drawing it and its smart cover is not hard at all! In this tutorial I’m gonna show you how to create a complete iPad 2 with its smart cover, just exactly like the result below:

We will use lots of layer styles and vector drawing, and may be some passion to complete this sleek product. Let’s get started!

Step 1: iPad Basic Shape

Start by creating a new file with size 1500×800 px. Activate rounded rectangle tool. Set its mode to shape with radius 15 px and color: #f5f5f5.

Add Layer Style Inner Glow and Stroke.

Step 2: Screen

Draw a rectangle inside the iPad.

Add Layer Style Stroke.

Step 3

Let’s create a simple image for the screen content. Create new layer and make sure it is on top of the screen layer. Paint some colors using a soft brush. Convert layer to Clipping mask by pressing Ctrl/Cmd + Alt + G. Everything you paint is now inside the screen.

Step 4: Home Button

Draw an ellipse on lower part of the iPad. Set its Fill to 0%.

Add Layer Style Inner Shadow, Bevel and Emboss, and Gradient Overlay.

Step 5

In the center of the button, draw a rounded rectangle. Set its Fill to 0%. Add Layer Style Stroke.

Step 6: Camera

Draw a small black on top part of the iPad for its camera.

Step 7: Dock

Draw a rectangle covering on lower part of the screen. Set its color to #b1a9a9. Add Layer Style .

Step 8

Hit Ctrl/Cmd + T to perform transformation. Right click and choose Perspective.

Step 9

Pull top corner inward until we get a dock shape.

Step 10

Draw white shape as seen below. Hit Ctrl/Cmd + Alt + G to convert it to Clipping Mask. Reduce its opacity to 50%.

This shape will become a reflection on the dock.

Step 11

Grab a nice iPhone icons set, Aquaticus from marcelomarfil. Place four of them on the screen.

Step 12

Place the icons on a group named icons. Select all icon layers by clicking on the first icon then Shift + click the last icon. Activate move tool. From the option bar click icon Distribute Horizontal Center and Align Vertical Center. You will have a nice alignment and distributed icons on the screen.

Step 13

Repeat previous step to add more icons on screen and on dock.

Step 14

Select icon layers on dock. Hit Ctrl/Cmd + E to merge them into one layer. Hit Ctrl/Cmd + T to perform transformation. Right click and choose Flip Vertical.

Step 15

Add layer mask. Draw linear gradient from white to black until the reflection fades.

Step 16: Screen Reflection

Use lasso polygon tool to create a triangular selection on top right corner of the screen. Fill selection with white.

Step 17

Add layer mask. Draw linear gradient from white to black until the reflection on the screen fades away. Put the reflection layer into a group and name it Screen Reflection.

Step 18

Ctrl/Cmd + click iPad layer to create a selection based on its shape. Add layer mask onto the group. This way, the screen reflection is inside the screen.

Step 19: Smart Cover

Draw following shape. Use #6ebced for its color.

Add Layer Styles Gradient Overlay.

Step 20

Above smart cover draw a rounded rectangle shape and set its Fill to 0%.

Add Bevel and Emboss.

Step 21

Duplicate the shape.

Step 22

Hit Ctrl/Cmd + T to perform transformation. Right click and choose Perspective. Pull top right corner until the shape match smart cover perspective.

Step 23

Draw a rounded rectangle with color: #82858a. Perform perspective transformation again until we have outer side of the smart cover.

Step 24

Add Layer Styles Bevel and Emboss and Gradient Overlay.

Step 26

Draw another rounded rectangle and place it inside shape we have just created.

Step 27

Add Layer Style Bevel and Emboss and set its Fill to 0%.

Step 28

Hit Ctrl/Cmd + Alt + G to convert shape into clipping mask and place the effect inside the cover.

Step 29: Hinges

Draw a rectangle on left side of the cover. Set its color to #6ebced.

Add Gradient Overlay.

Step 30

Draw a smaller rectangle behind previous shape with color: #e6e6e6.

Add Layer Style Gradient Overlay to add three dimensional appearances onto the shape.

Step 31: Shadow

Hold Ctrl/Cmd then click the iPad basic shape layer to create a selection based on its shape. Create new layer and place it under smart cover. Paint a soft shadow on the screen surface using big soft brush.

Step 32

Do not remove the selection. Next, draw a soft shadow with low opacity brush on lower side of the iPad. This will be a soft cast shadow from the floor.

Step 33

Create new layer and place it under all layers. Paint darker shadow under the iPad using a big soft brush. Reduce its Opacity to 50%.

Step 34

Draw bigger and softer shadow. Reduce its opacity to 5%.

Step 35

Now, set your brush to smaller size but keep its hardness to 0% to maintain its softness. Draw darker shadow right under the iPad. Set its opacity to 50%.

Step 36

Zoom in to see smart cover closer. Draw a dark shadow right under the smart cover.

Step 37

Draw shadow on the floor behind smart cover.

This is what the shadow looks like if we hide the smart cover.

Step 38: Final Result

This is the result of our tutorial. I hope you learn new technique and have some fun following this tutorial. Thank you for reading. If you have any questions feel free to ask.

Download PSD

Can’t achieve certain step? Here is the result’s PSD file for you to test and play with.

iPad 2 Tutorial PSD File

Go to Source

Duplicate DeSandro’s CSS Effect

Facebook-Web-Design — Fri, 17 Jun 2011 09:28:51 +0000

I recently stumbled upon David DeSandro’s website when I saw a tweet stating that someone had stolen/hotlinked his website design and code, and he decided to do the only logical thing to retaliate: use some simple JavaScript goodness to inject unicorns into their page. A brilliant idea, if I may say so myself (and I may). David’s design is simplistic but features a few classy CSS effects, one of the most impressive being the footer “made this” animation. Let me show you how David accomplished this effect.

View Demo

The HTML

The system will consist of a wrapper (though it’s not necessarily needed), an link, and a series of SPAN tags:


	
		David
		J. Walsh
		Arsenal
		Legend

You’ll understand the need for SPAN tags with separate classes when you see the CSS.

The CSS

There are a good amount of styles but the most important are applied to the SPAN elements:

/* entire wrapper */
#animationWrapper	{
	width:300px;
	font-family:"proxima-nova-1","proxima-nova-2","Helvetica Neue","Arial",sans-serif;
	background:#222;
	padding:40px;
}

/* link which encapsulates SPANs */
#animationWrapper a {
	font-weight: 800;
	text-transform: uppercase;
	font-size: 42px;
	line-height: 0.9em;
	margin-bottom: 10px;
	display: block;
	position: relative;
	color: #E58;
	text-decoration: none
}

/* span and a - "workers" */
#animationWrapper a, #animationWrapper span {
	-webkit-transition: all 0.12s ease-out;
	-moz-transition: all 0.12s ease-out;
	-o-transition: all 0.12s ease-out;
	-ms-transition: all 0.12s ease-out;
	transition: all 0.12s ease-out;
}

#animationWrapper span {
	display: block;
	color: #555;
	text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;
}

/* special size for the first item */
#animationWrapper .span1 {
	font-size: 76px;
	line-height: 0.8em;
}

#animationWrapper a:hover {
    color: #fff ;
    top: -3px;
    left: -3px;
}

/* all spans become white */
#animationWrapper a:hover span {
	color:#fff;
}

/* different colors for each SPAN */
#animationWrapper a:hover .span1 {
    text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E;
}

#animationWrapper a:hover .span2 {
    text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90;
}

#animationWrapper a:hover .span3 {
    text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7;
}

#animationWrapper a:hover .span4 {
    text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58;
}

The plain state SPAN receives a base text-shadow value and also defines the transition properties which will be played upon hover. Each SPAN contains its own class which controls its text-shadow color and width during hover. The hover state then enacts those text-shadow and color properties.

View Demo

Well done to David for his simple but classy CSS effect. If we’re being honest, those are the best kind.

Go to Source

Five Useful Interactive CSS/jQuery Techniques Deconstructed

Facebook-Web-Design — Thu, 16 Jun 2011 23:10:25 +0000

With the wide variety of CSS3 and JavaScript techniques available today, it’s easier than ever to create unique interactive websites that delight visitors and provide a more engaging user experience.

In this article, we’ll walk through five interactive techniques that you can start using right now. We’ll cover:

Animated text effects,
Animated images without GIFs,
More engaging drop-down menus,
Fancier slideshow navigation,
Animated icons for the hover state of buttons.

Besides learning how to accomplish these specific tasks, you’ll also master a variety of useful CSS and jQuery tricks that you can leverage when creating your own interactive techniques. The solutions presented here are certainly not perfect, so any thoughts, ideas and suggestions on how you would solve these design problems would be very appreciated.

So, let’s dive in and start building more exciting websites!

1. Extruded Text Effect

The footer of David DeSandro’s website uses extruded text that animates on mouseover. This interactive text effect is a quick and impressive way to add some flare to your website. With only a few lines of CSS3, we can make the text appear to pop out of the page in three dimensions.

View the demo

First let’s set up some text (the code is copied from the original site):

Extrude Me

And some basic styling (the code is copied from the original site):

body {
    background-color: #444;
    text-align: center;
}

.extruded {
    color: #888;
    font-family: proxima-nova-1, proxima-nova-2, 'Helvetica Neue', Arial, sans-serif;
    font-size: 48px;
    font-weight: bold;
    text-shadow: #000 3px 3px;
}

Here, we’ve applied some basic styles and added a text-shadow. But this text-shadow doesn’t look three-dimensional; to accomplish the extruded effect, we’ll need to add more text-shadows:

    text-shadow: #000 1px 1px, #000 2px 2px, #000 3px 3px;

This will add three different text-shadows to our text, stacked on top of each other to create the three dimensional appearance we want.

Styling the Hover State

Next, let’s add a hover state with a bigger text-shadow:

.extruded:hover {
    color: #FFF;
    text-shadow: #58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E 5px 5px, #58E 6px 6px;
}

Here, we’ve added three more text-shadows to increase the depth of the extrude effect. But this effect alone is too flat; we want the text to look like it’s popping off the page. So, let’s reposition the text to make it appear to grow taller from the base of the extruded section:

.extruded {
    position: relative;
}

.extruded:hover {
    color: #FFF;
    text-shadow: #58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E 5px 5px, #58E 6px 6px;
    left: -6px;
    top: -6px;
}

Now in the hover state, the extruded text moves up the same distance as our max text-shadow value. We also added position: relative, which must be attached to the base state, not just the hover state, or else it will cause problems when we animate it.

Animating the Transition

Next, we can add a CSS3 transition to our text to animate the color change and extrude effect:

.extruded {
     -moz-transition: all 0.3s ease-out; /* FF3.7+ */
       -o-transition: all 0.3s ease-out; /* Opera 10.5 */
  -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
          transition: all 0.3s ease-out;
}

This triggers a smooth animation for our different CSS changes on hover. While it doesn’t work in all browsers, it does degrade nicely to the basic hover effect.

Bringing it all together:

body {
    background-color: #444;
    text-align: center;
}

.extruded {
    color: #888;
    font-family: proxima-nova-1, proxima-nova-2, 'Helvetica Neue', Arial, sans-serif; /* the original site doesn't use the @font-face attribute */
    font-size: 48px;
    font-weight: bold;
    text-shadow: #000 1px 1px, #000 2px 2px, #000 3px 3px;
    position: relative;
    -moz-transition: all 0.3s ease-out; /* FF3.7+ */
       -o-transition: all 0.3s ease-out; /* Opera 10.5 */
  -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
          transition: all 0.3s ease-out;
}

.extruded:hover {
    color: #FFF;
    text-shadow: #58E 1px 1px, #58E 2px 2px, #58E 3px 3px, #58E 4px 4px, #58E 5px 5px, #58E 6px 6px;
    left: -6px;
    top: -6px;
}

Shortcomings

While applying several CSS3 text-shadows works well when the text is static, it falls a bit short when used alongside the transition animation.

In short, the biggest text-shadow animates just fine, but the other text-shadows aren’t applied until the animation completes. This causes a quick correction: the browser stutters with a basic drop-shadow before filling in the rest diagonally.

Fortunately, we can make this drawback relatively unnoticeable, provided that we follow a few style guidelines. Basically, we want to hide the bulk of the extruded portion with the top text. This means that we should generally use this effect with bolder fonts, such as the Proxima Nova family used by David DeSandro. Also, we should be careful to avoid text-shadows that are too big for the font. Tweak your settings with this in mind until the animated extrude looks believable.

Finally, this technique will not work in IE, because text-shadow is unsupported in all versions of IE (even IE9).

2. Animating A Background Image

While we can easily animate text with a few lines of code, animating an image usually requires bigger and slower assets, such as animated GIFs or Flash or HTML5 video. While complex animations will still depend on these technologies, we can create a compelling illusion of animation using CSS alone.

Love Nonsense uses a hover effect to alter the color of the images on the website. The trick here is to use a transparent PNG with a background color. The color of the PNG should match the website’s background, so that all of the transparent areas in the PNG show up when filled with a background color. Thus, the PNG should contain the negative space of the image you want to display (i.e. the shape you want should be transparent, and everything else should be the same color as the background).

Here’s an example of the Smashing Magazine logo with negative space:

Notice in the demo how when the background color is set to orange, it starts to look more like the real thing.

The Code

View the demo

First, let’s do some basic mark-up:


    
        This is the title you hover over

        
    

    Some more text here.

Here we include a post with a title, our knock-out image and a paragraph of text.

Next, let’s set up some static styles:

.post-wrapper {
    position: relative;
    padding-left: 240px;
}

.post-image {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #bbb;
}

.post-title {
    color: #037072;
}

Here, we’ve set up the post’s wrapper with position: relative and with enough padding on the left side to absolutely position the image to the left of our post. We’ve also added a background color to our image; so now the positive space in our PNG shows up as light gray.

Next, let’s add some hover effects:

.post-title:hover {
    color: #d63c25;
}

.post-title:hover .post-image {
    background-color: #f04e36;
}

Now, when we hover over the title or the image, both will change color.

We can take this effect a step further by animating the transition:

.post-image {
    -webkit-transition: background-color 400ms ease-in;
    -moz-transition: background-color 400ms ease-in;
    transition: background-color 400ms ease-in;
}

.post-title {
    -webkit-transition: color 400ms ease-in;
    -moz-transition: color 400ms ease-in;
    transition: color 400ms ease-in;
}

Here, we’ve added a CSS3 transition to both the image and the title, which will make for a smooth color change animation.

Unfortunately, CSS3 transitions are not currently supported in IE9. However, even in unsupported browsers, the color change will still occur — it just won’t have a smooth animation.

If complete cross-browser support for the animation is important, you could always provide a jQuery version of the animation for unsupported browsers. Bear in mind, though, that jQuery’s animate() method does not support color animations, so you’ll need to use a color plug-in.

Putting all the CSS together:

.post-wrapper {
    position: relative;
    padding-left: 240px;
}

.post-image {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #bbb;
    -webkit-transition: background-color 400ms ease-in;
    -moz-transition: background-color 400ms ease-in;
    transition: background-color 400ms ease-in;
}

.post-title {
    color: #037072;
    -webkit-transition: color 400ms ease-in;
    -moz-transition: color 400ms ease-in;
    transition: color 400ms ease-in;
}

/* add the hover states */

.post-title:hover {
    color: #d63c25;
}

.post-title:hover .post-image {
    background-color: #f04e36;
}

3. Mega Dropdown

One common design problem with dropdown menus is that they often contain a lot of items. Instead of presenting all of its items in a long single column, Bohemia Design uses a multi-column dropdown. This approach not only looks great, but provides an opportunity to group the links and highlight the most important ones.

Let’s recreate this menu using CSS and jQuery.

View the demo

Building the Tabs

Ideally, we would start with a lean and simple mark-up…


    Tab 1
    Tab 2
    Tab 3
    Tab 4
    Tab 5

…and use nav li a, nav > li or nav li to style the list items in the navigation. The child selector doesn’t work in IE6 and nav li would cause problems since there are additional LIs nested in the content area of the dropdown. If you absolutely need the site to work for IE6 users as well (and that’s what you sometimes will have to do), you’ll need to have markup similar to the original mark-up in this example:

Next, let’s style these five tabs:

#main-nav {
    width: 800px;
    height: 50px;
    position: relative;
    list-style: none;
    padding: 0;
}

#main-nav .main-nav-item {
    display: inline;
}

#main-nav .main-nav-tab {
    float: left;
    width: 140px;
    height: 30px;
    padding: 10px;
    line-height: 30px;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    font-size: 18px;
}

Although a lot of the CSS is specific to our example, there are a few important styles to note.

First, we’ve defined a height and width for our overall tab area and matched the total height and width of all five tabs, so that we can position the dropdown correctly. Next, we’ve defined position: relative for the tab wrapper, which will allow us to position the dropdown absolutely.

Then, we added list-style: none to the list wrapper, and display: inline to each list item, to eliminate any list styling.

Finally, we floated all of the tab links to the left.

Building the Dropdown

Now, let’s build the dropdown mark-up in one of our tab wrappers:

    
        Tab 1

        
            
            Column content here
            
        

        
            
            Column content here
            
        

        
            
            Column content here

Next, let’s style this dropdown:

#main-nav .main-nav-dd {
    position: absolute;
    top: 50px;
    left: 0;
    margin: 0;
    padding: 0;
    background-color: #FFF;
    border-bottom: 4px solid #f60;
}

#main-nav .main-nav-dd-column {
    width: 130px;
    padding: 15px 20px 8px;
    display: table-cell;
    border-left: 1px solid #ddd;
    *float: left;
    *border-left: 0;
}

#main-nav .main-nav-dd-column:first-child {
    border-left: 0;
}

Here, we’ve positioned the dropdown absolutely, directly beneath the first tab.

Let’s set display: table-cell on all of the column wrappers, so that they display next to each other. But table-cell is not supported in IE6 or 7, so we’ve used an attribute hack as an alternative for IE6 and 7. This hack places an asterisk (*) before each of the attributes that are specific to IE6 and 7.

Thus, we’ve defined a backup for unsupported IEs, which is simply float: left. This works almost as well as display: table-cell, except that the floated elements don’t match each other’s height, so the borders between columns don’t line up. To avoid this minor issue, we simply remove the border-left using the same asterisk hack.

Finally, we remove the left border from the first column for all browsers. Although the :first-child pseudo-class doesn’t work properly in IE6, fortunately it doesn’t make a difference, because we’ve already hidden the borders in these browsers.

Adding the Interaction

We’ve built the mark-up and styles for our dropdown, but we still need to make the menu interactive. Let’s use jQuery to add a class to show and hide the dropdown:

$(function() {
    var $mainNav = $('#main-nav');

    $mainNav.children('.main-nav-item').hover(function(ev) {
        // show the dropdown
        $(this).addClass('main-nav-item-active');
    }, function(ev) {
        // hide the dropdown
        $(this).removeClass('main-nav-item-active');
    });
});

Here, we’ve attached a hover listener to each list item, which adds and removes the class main-nav-item-active. Attach this to the list item rather than the tab itself, or else the dropdown will disappear when the user mouses off the tab and into the dropdown area.

Now we can use this class hook to hide and show the dropdown with CSS:

#main-nav .main-nav-dd {
    display: none;
}

#main-nav .main-nav-item-active .main-nav-dd {
    display: block;
}

Let’s use the active class to style the active tab:

#main-nav .main-nav-item-active .main-nav-tab {
    background-color: #FFF;
    color: #f60;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

Here, we’ve changed the background and text colors and rounded the top corners (in supported browsers).

Positioning the Dropdown

Now the basic mouse interaction has been built and the dropdown displays on mouseover. Unfortunately, it is still not positioned correctly under each tab, so let’s add some more code to our hover events:

$(function() {
    var $mainNav = $('#main-nav');

    $mainNav.children('.main-nav-item').hover(function(ev) {
        var $this = $(this),
        $dd = $this.find('.main-nav-dd');

        // get the left position of this tab
        var leftPos = $this.find('.main-nav-tab').position().left;

        // position the dropdown

        $dd.css('left', leftPos);

        // show the dropdown
        $this.addClass('main-nav-item-active');
    }, function(ev) {

        // hide the dropdown
        $(this).removeClass('main-nav-item-active');
    });
});

Here, we use jQuery’s position() method to get the left offset from the current tab. We then use this value to position the dropdown directly beneath the appropriate tab.

However, with the tabs on the right side, the dropdown menu will end up poking out of the tab area. Besides looking bad, this could lead to overflow issues, with portions of the dropdown falling outside of the browser window.

Let’s fix the positioning with some JavaScript:

$(function() {
    var $mainNav = $('#main-nav'),
    navWidth = $mainNav.width();

    $mainNav.children('.main-nav-item').hover(function(ev) {
        var $this = $(this),
        $dd = $this.find('.main-nav-dd');

        // get the left position of this tab
        var leftPos = $this.find('.main-nav-tab').position().left;

        // get the width of the dropdown
        var ddWidth = $dd.width(),
        leftMax = navWidth - ddWidth;

        // position the dropdown
        $dd.css('left', Math.min(leftPos, leftMax) );

        // show the dropdown
        $this.addClass('main-nav-item-active');
    }, function(ev) {

        // hide the dropdown
        $(this).removeClass('main-nav-item-active');
    });
});

Here, we start by finding the overall width of the tab area. Because recalculating the width for each tab is not necessary, we can define it outside of our hover listener.

Next, we find the width of the dropdown and determine the maximum left value, which is the overall tab width minus the width of the dropdown.

Finally, instead of always positioning the dropdown directly beneath the tab, we use the Math.min() method to pick the lowest between the tab offset and the maximum left value.

Thus, we confine the dropdown to the area beneath the tabs and avoid any content issues.

Other Approaches

While this script is fully functional, we could still improve the user experience. Currently, when the user mouses away from the dropdown, the menu hides immediately. You could build a delay using setTimeout() to ensure that the dropdown remains visible when the user mouses away and then quickly mouses back. This creates a better experience, because it avoids hiding the dropdown during accidental movements.

If you’d rather avoid setTimeout(), you could also look into the hoverIntent jQuery plug-in, which makes fine-tuned control over mouse actions much easier.

Besides improving the user experience, you could also avoid jQuery altogether in all browsers except IE6.

Instead of using jQuery’s hover() listener, we could use the CSS pseudo-class :hover to hide and show the dropdown.

One downside with the CSS-only solution is that you can’t build a delay for the :hover pseudo-class.

Also, you will have to position the dropdown manually under each tab to avoid the overflow issues. Alternatively, if you aren’t concerned with overflow issues, you could attach position: relative to each list item and avoid setting any positions manually.

Finally, if you’re supporting IE6, make sure to include the script above as a backup for IE6 (but don’t include it for other browsers).

4. Animated Slideshow Navigation

There are a lot of JavaScript slideshow techniques, but the animated navigation on McKinney is a fresh, subtle approach.

Basic jQuery Slideshow

View the demo

Let’s build something similar. We’ll start with some mark-up for a basic slideshow:

Here we’ve set up six slides, which can be filled with any content we need. Let’s set up some CSS to display the slides as a horizontal reel:

#slideshow {
    width: 900px;
    height: 500px;
    overflow: hidden;
    position: relative;
}

#slideshow-reel {
    width: 5400px;
    height: 450px;
    position: absolute;
    top: 0;
    left: 0;
}

#slideshow-reel .slide {
    width: 900px;
    height: 450px;
    float: left;
    background-color: gray;
}

Here, we’ve defined the dimensions of the slideshow, along with overflow: hidden to hide the other slides in the reel. We’ve also defined the dimensions of the reel: with six slides at 900 pixels each, it is 5400 pixels wide. (You could also just set this to a really high number, like 10000 pixels.) Then, we absolutely positioned the reel inside the slideshow (which has position: relative). Finally, we defined the dimensions for all of the individual slides and floated them to the left to fill up our reel.

Basic Slideshow Animation

Now, let’s add some jQuery to animate this slideshow:

$(function() {
    function changeSlide( newSlide ) {
        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1;

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});

Here, we’ve started by creating the function changeSlide(), which animates the slide reel. This function accepts an index for the next slide to show, and it checks to make sure that the value isn’t too high or low to be in the reel.

Next, it animates the slide reel to the appropriate position, and then finishes by setting a new timeout to trigger the next iteration.

Finally, we’ve built the function nextSlide(), which simply triggers changeSlide() to show the next slide in the reel. This simple function is just a shortcut to be used with setTimeout().

The Left and Right Navigation

Next, let’s set up the left and right arrows in the slideshow, starting with the mark-up:

For simplicity’s sake, we’ve added the mark-up to the HTML source. Appending it to the jQuery is often a better approach, to ensure that the controls appear only when they are usable.

Let’s style these arrows with CSS:

#slideshow-prev, #slideshow-next {
    display: block;
    position: absolute;
    top: 190px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 28px 21px;
    border-color: transparent;
    outline: none;
}

#slideshow-prev:hover, #slideshow-next:hover {
    opacity: .5;
    filter: alpha(opacity=50);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

#slideshow-prev {
    left: 0;
    border-right-color: #fff;
}

#slideshow-next {
    right: 0;
    border-left-color: #fff;
}

We’ve positioned the arrows absolutely within the slideshow frame and added an opacity change on hover. In our example, we’ve used a CSS triangle trick to style the arrows with straight CSS, but feel free to use an image if you want richer graphics.

Finally, let’s build the required interaction into our JavaScript:

$(function() {
    function changeSlide( newSlide ) {
        // cancel any timeout
        clearTimeout( slideTimeout );

        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // hide / show the arrows depending on which frame it's on
            if ( currSlide == 0 ) $slidePrevNav.hide();
            else $slidePrevNav.show();

            if ( currSlide == maxSlide ) $slideNextNav.hide();
            else $slideNexNav.show();

            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });

        // animate the navigation indicator
        $activeNavItem.animate({
            left : currSlide * 150
        }, 400, 'swing');
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1,
    $slidePrevNav = $slideshow.find('#slideshow-prev'),
    $slideNextNav = $slideshow.find('#slideshow-next');

    // set navigation click events

    // left arrow
    $slidePrevNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide - 1 );
    });

    // right arrow
    $slideNextNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide + 1 );
    });

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});

Here, we’ve added quite a bit of new interaction. First, look at the bottom of this script, where we’ve added click event listeners to both of our navigational items.

In these functions, we have first set activeSlideshow to false, which disables the automatic animation of the reel. This provides a better user experience by allowing the user to control the reel manually. Then, we trigger either the previous or next slide using changeSlide(). Next, in the changeSlide() function, we’ve added a clearTimeout(). This works in conjunction with the activeSlideshow value, cancelling any hanging iteration from a setTimeout.

Finally, in the callback of the animate() function, we’ve added some code to hide and show the arrow navigation. This hides the left arrow when the slideshow is showing the left-most slide, and vice versa.

Animating the Bottom Navigation

The basic slideshow works with the previous and next arrows. Let’s take it to the next level by adding the animated navigation. Please note that I am using a more complex markup because it avoids the use of images and is ultimately simpler. It would have to use three background images otherwise — one for the center sections and one for each cap to allow the clickable areas to be larger). However, you could clean up the bottom navigation with a background-image.

Here is the jQuery code for animation:

$(function() {
    function changeSlide( newSlide ) {
        // cancel any timeout
        clearTimeout( slideTimeout );

        // change the currSlide value
        currSlide = newSlide;

        // make sure the currSlide value is not too low or high
        if ( currSlide > maxSlide ) currSlide = 0;
        else if ( currSlide < 0 ) currSlide = maxSlide;

        // animate the slide reel
        $slideReel.animate({
            left : currSlide * -900
        }, 400, 'swing', function() {
            // hide / show the arrows depending on which frame it's on
            if ( currSlide == 0 ) $slidePrevNav.hide();
            else $slidePrevNav.show();

            if ( currSlide == maxSlide ) $slideNextNav.hide();
            else $slideNextNav.show();

            // set new timeout if active
            if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
        });

        // animate the navigation indicator
        $activeNavItem.animate({
            left : currSlide * 150
        }, 400, 'swing');
    }

    function nextSlide() {
        changeSlide( currSlide + 1 );
    }

    // define some variables / DOM references
    var activeSlideshow = true,
    currSlide = 0,
    slideTimeout,
    $slideshow = $('#slideshow'),
    $slideReel = $slideshow.find('#slideshow-reel'),
    maxSlide = $slideReel.children().length - 1,
    $slidePrevNav = $slideshow.find('#slideshow-prev'),
    $slideNextNav = $slideshow.find('#slideshow-next'),
    $activeNavItem = $slideshow.find('#active-nav-item');

    // set navigation click events

    // left arrow
    $slidePrevNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide - 1 );
    });

    // right arrow
    $slideNextNav.click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( currSlide + 1 );
    });

    // main navigation
    $slideshow.find('#slideshow-nav a.nav-item').click(function(ev) {
        ev.preventDefault();

        activeSlideshow = false;

        changeSlide( $(this).index() );
    });

    // start the animation
    slideTimeout = setTimeout(nextSlide, 1200);
});

We’ve added a couple of things to our script.

First, we’ve included a second animation in changeSlide(), this time to animate the active indicator in the navigation. This animate() is basically the same as the one we built for the reel, the main difference being that we want to move it only 150px per slide.

Finally, we added a click event listener to the items in the bottom navigation. Similar to the arrow navigation, we start by disabling the automatic animation, setting activeSlideshow to false. Next, we trigger changeSlide(), passing in the index of whichever slide was clicked, which is easy to determine using jQuery’s index() method.

Now the slideshow navigation animation is complete and ready to impress your visitors.

5. Animated Icons

CSS-Tricks has a simple but elegant effect in its footer when the user mouses over various buttons. Besides the color changing and an icon being added, the effect is animated in browsers that support transition, making the icon appear to slide into place.

View the demo

Let’s create a similar effect, starting with some mark-up:


    Panel Title

    Additional information about the panel goes in a paragraph here

One thing to note about this mark-up is that it has block elements nested in an element, which makes sense semantically, but it’s valid only if you’re using the HTML5 doc type.

Styling the Buttons

Let’s set up some basic CSS to style the block in its natural (non-hovered) state:

.hover-panel {
    background-color: #E6E2DF;
    color: #B2AAA4;
    float: left;
    height: 130px;
    width: 262px;
    margin: 0 10px 10px 0;
    padding: 15px;
}

.hover-panel h3 {
    font-family: tandelle-1, tandelle-2, Impact, Sans-serif, sans;
    font-size: 38px;
    line-height: 1;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.hover-panel p {
    font-size: 12px;
    width: 65%;
}

Now let’s add a static hover effect to change some of the colors and add a drop shadow:

.hover-panel:hover {
    background-color: #237ABE;
}

.hover-panel:hover h3 {
    color: #FFF;
    text-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 4px;
}

.hover-panel:hover p {
    color: #FFF:
}

Finally, let’s add a background image that pops into place on hover:

.hover-panel {
    background-image: url(hover-panel-icon.png);
    background-position: 292px 10px;
    background-repeat: no-repeat;
}

.hover-panel:hover {
    background-position: 180px 10px;
}

Here, we’ve added a few important styles to accomplish the hover effect. First, we’ve attached the background image to our .hover-panel. This is normally positioned outside of the button, but on mouseover, it is placed correctly. Also, note that we’ve placed it off to the right side of the panel, so that when we apply the transition animation, the icon will slide in from the right.

Animating the Transition

Finally, let’s add the transition:

.hover-panel {
     -moz-transition: all 0.2s ease; /* FF3.7+ */
       -o-transition: all 0.2s ease; /* Opera 10.5 */
  -webkit-transition: all 0.2s ease; /* Saf3.2+, Chrome */
          transition: all 0.2s ease;
}

The transition effect triggers the animation of the background image. Because we’ve flagged it to apply to all attributes, the transition will also be applied to the background-color change that we applied above.

Although this works in most modern browsers, it will not work in IE9. But even in unsupported browsers, the user will see the color change and icon; they just won’t see the animation effect.

On most websites, this enhancement wouldn’t be necessary for all users. But if support is a priority, look into this jQuery back-up.

Finally, let’s bring all of the styles together:

.hover-panel {
    background-color: #E6E2DF;
    background-image: url(hover-panel-icon.png);
    background-position: 292px 10px;
    background-repeat: no-repeat;
    color: #B2AAA4;
    display: block;
    float: left;
    height: 130px;
    width: 262px;
    margin: 0 10px 10px 0;
    padding: 15px;
     -moz-transition: all 0.2s ease; /* FF3.7+ */
       -o-transition: all 0.2s ease; /* Opera 10.5 */
  -webkit-transition: all 0.2s ease; /* Saf3.2+, Chrome */
          transition: all 0.2s ease;
}

.hover-panel h3 {
    font-family: tandelle-1, tandelle-2, Impact, Sans-serif, sans;
    font-size: 38px;
    line-height: 1;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.hover-panel p {
    font-size: 12px;
    width: 65%;
}

.hover-panel:hover {
    background-color: #237ABE;
    background-position: 180px 10px;
}

.hover-panel:hover h3 {
    color: #FFF;
    text-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 4px;
}

.hover-panel:hover p {
    color: #FFF:
}

Final Thoughts

In this article, we’ve walked through a variety of interactive techniques that can add a bit of style and creativity to your website. Used correctly, techniques like these enhance websites, creating a more engaging and memorable user experience. But be subtle with the interactivity, ensuring that the bells and whistles do not get in the way of the website’s primary function, which is to providing meaningful content.

What do you think of the techniques presented here? Do you know of any ways to improve these scripts? What are some other interactive techniques that you’ve seen around the Web?

(al)

Post tags:

Go to Source

Duplicate DeSandro’s CSS Effect

Facebook-Web-Design — Tue, 14 Jun 2011 00:36:32 +0000

View Demo

The HTML

The system will consist of a wrapper (though it’s not necessarily needed), an link, and a series of SPAN tags:


	
		David
		J. Walsh
		Arsenal
		Legend

You’ll understand the need for SPAN tags with separate classes when you see the CSS.

The CSS

There are a good amount of styles but the most important are applied to the SPAN elements:

/* entire wrapper */
#animationWrapper	{
	width:300px;
	font-family:"proxima-nova-1","proxima-nova-2","Helvetica Neue","Arial",sans-serif;
	background:#222;
	padding:40px;
}

/* link which encapsulates SPANs */
#animationWrapper a {
	font-weight: 800;
	text-transform: uppercase;
	font-size: 42px;
	line-height: 0.9em;
	margin-bottom: 10px;
	display: block;
	position: relative;
	color: #E58;
	text-decoration: none
}

/* span and a - "workers" */
#animationWrapper a, #animationWrapper span {
	-webkit-transition: all 0.12s ease-out;
	-moz-transition: all 0.12s ease-out;
	-o-transition: all 0.12s ease-out;
	-ms-transition: all 0.12s ease-out;
	transition: all 0.12s ease-out;
}

#animationWrapper span {
	display: block;
	color: #555;
	text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;
}

/* special size for the first item */
#animationWrapper .span1 {
	font-size: 76px;
	line-height: 0.8em;
}

#animationWrapper a:hover {
    color: #fff ;
    top: -3px;
    left: -3px;
}

/* all spans become white */
#animationWrapper a:hover span {
	color:#fff;
}

/* different colors for each SPAN */
#animationWrapper a:hover .span1 {
    text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E;
}

#animationWrapper a:hover .span2 {
    text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90;
}

#animationWrapper a:hover .span3 {
    text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7;
}

#animationWrapper a:hover .span4 {
    text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58;
}

View Demo

Well done to David for his simple but classy CSS effect. If we’re being honest, those are the best kind.

Go to Source

Duplicate DeSandro’s CSS Effect

Facebook-Web-Design — Wed, 08 Jun 2011 17:42:22 +0000

View Demo

The HTML

The system will consist of a wrapper (though it’s not necessarily needed), an link, and a series of SPAN tags:


	
		David
		J. Walsh
		Arsenal
		Legend

You’ll understand the need for SPAN tags with separate classes when you see the CSS.

The CSS

There are a good amount of styles but the most important are applied to the SPAN elements:

/* entire wrapper */
#animationWrapper	{
	width:300px;
	font-family:"proxima-nova-1","proxima-nova-2","Helvetica Neue","Arial",sans-serif;
	background:#222;
	padding:40px;
}

/* link which encapsulates SPANs */
#animationWrapper a {
	font-weight: 800;
	text-transform: uppercase;
	font-size: 42px;
	line-height: 0.9em;
	margin-bottom: 10px;
	display: block;
	position: relative;
	color: #E58;
	text-decoration: none
}

/* span and a - "workers" */
#animationWrapper a, #animationWrapper span {
	-webkit-transition: all 0.12s ease-out;
	-moz-transition: all 0.12s ease-out;
	-o-transition: all 0.12s ease-out;
	-ms-transition: all 0.12s ease-out;
	transition: all 0.12s ease-out;
}

#animationWrapper span {
	display: block;
	color: #555;
	text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;
}

/* special size for the first item */
#animationWrapper .span1 {
	font-size: 76px;
	line-height: 0.8em;
}

#animationWrapper a:hover {
    color: #fff ;
    top: -3px;
    left: -3px;
}

/* all spans become white */
#animationWrapper a:hover span {
	color:#fff;
}

/* different colors for each SPAN */
#animationWrapper a:hover .span1 {
    text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E;
}

#animationWrapper a:hover .span2 {
    text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90;
}

#animationWrapper a:hover .span3 {
    text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7;
}

#animationWrapper a:hover .span4 {
    text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58;
}

View Demo

Well done to David for his simple but classy CSS effect. If we’re being honest, those are the best kind.

Duplicate DeSandro’s CSS Effect is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Go to Source

Photobooth with PHP, jQuery and CSS3

Facebook-Web-Design — Mon, 25 Apr 2011 20:56:33 +0000

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

As you might know, it is not possible to access web cameras and other peripheral devices directly from JavaScript (and it won’t be for some time). However there is a solution to our problem – we can use a flash movie. Flash has perfect web camera support, and is installed on nearly all internet – enabled computers.

The solution we are going to use for this app is webcam.js. It is a JavaScript wrapper around flash’s API that gives us control over the user’s webcam.

HTML

The first step to building our Photobooth is laying down the HTML structure of the main page. We will be using jQuery to fetch a list of the latest photos, so we don’t need to embed any PHP logic here. This means we can leave it as a plain HTML file.

index.html





Photobooth with PHP, jQuery and CSS3 | Tutorialzine Demo








    jQuery & CSS3 Photobooth
    « Go back to Tutorialzine





	
	

    
    
    	
        	Shoot!
        
        
        	Cancel Upload!

There are three main divs in the page:

#topBar displays the headings;
#photos is where the images are inserted after they are requested with jQuery’s $.getJSON method;
#camera holds the webcam.swf movie (which we are using to communicate with the web camera). It also holds the control buttons for taking photos and uploading.

The control buttons are divided in two .buttonPane divs. In the jQuery part of the tutorial, we will be making a simple function to toggle between the panes.

At the bottom of the body, we are including a number of JavaScript files. Starting with the jQuery library, we are also adding the fancybox plugin for displaying the photos, the easing plugin (to make fancybox even fancier), webcam.js – the plugin that enables us to communicate with web cameras through flash, and finally our own script.js to make all this work together.

Note that if you are tweaking your website for high load, you might want to combine all these JS files together. This will make the page load faster as JavaScript files block the page while loading.

jQuery, CSS3 & PHP Photobooth

PHP

Although the main page is plain old HTML, we do need PHP to make our photo booth work. To be more exact, there are two features of the app that we need PHP for – receiving the uploaded image from flash, and for listing the uploaded files.

upload.php

/*
	This file receives the JPEG snapshot from
	assets/webcam/webcam.swf as a POST request.
*/

// We only need to handle POST requests:
if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
	exit;
}

$folder = 'uploads/';
$filename = md5($_SERVER['REMOTE_ADDR'].rand()).'.jpg';

$original = $folder.$filename;

// The JPEG snapshot is sent as raw input:
$input = file_get_contents('php://input');

if(md5($input) == '7d4df9cc423720b7f1f3d672b89362be'){
	// Blank image. We don't need this one.
	exit;
}

$result = file_put_contents($original, $input);
if (!$result) {
	echo '{
		"error"		: 1,
		"message"	: "Failed save the image. Make sure you chmod the uploads folder and its subfolders to 777."
	}';
	exit;
}

$info = getimagesize($original);
if($info['mime'] != 'image/jpeg'){
	unlink($original);
	exit;
}

// Moving the temporary file to the originals folder:
rename($original,'uploads/original/'.$filename);
$original = 'uploads/original/'.$filename;

// Using the GD library to resize
// the image into a thumbnail:

$origImage	= imagecreatefromjpeg($original);
$newImage	= imagecreatetruecolor(154,110);
imagecopyresampled($newImage,$origImage,0,0,0,0,154,110,520,370); 

imagejpeg($newImage,'uploads/thumbs/'.$filename);

echo '{"status":1,"message":"Success!","filename":"'.$filename.'"}';

As I mentioned earlier, we can’t communicate with web cameras directly from JavaScript. This is why we need flash, which has excellent web camera support, to act as an intermediate layer. This leaves us with two choices:

we can have flash export the snapshot and make it available to JavaScript (slow and ineffective);
have flash upload the photo directly to a PHP script.

Sensibly, the flash webcam plugin uses the second approach. It also has the benefit of uploading the snapshot as a valid JPEG image, which means we can save it to a file directly with PHP, without having to convert it.

In our upload.php we validate that the uploaded data is a JPEG image, save it to a file in the uploads/original/ directory, and generate a 154 -by- 110 px thumbnail. I chose this thumbnail size out of convenience, as it shares the same width to height ratio as the original image (520 -by- 370 px), which makes the resize easier.

Take a photo – Webcam Photobooth

browse.php

/*
	In this file we are scanning the image folders and
	returning a JSON object with file names. It is used
	by jQuery to display the images on the main page:
*/

// The standard header for json data:
header('Content-type: application/json');

$perPage = 24;

// Scanning the thumbnail folder for JPG images:
$g = glob('uploads/thumbs/*.jpg');

if(!$g){
	$g = array();
}

$names = array();
$modified = array();

// We loop though the file names returned by glob,
// and we populate a second file with modifed timestamps.

for($i=0,$z=count($g);$i<$z;$i++){
	$path = explode('/',$g[$i]);
	$names[$i] = array_pop($path);

	$modified[$i] = filemtime($g[$i]);
}

// Multisort will sort the array with the filenames
// according to their timestamps, given in $modified:

array_multisort($modified,SORT_DESC,$names);

$start = 0;

// browse.php can also paginate results with an optional
// GET parameter with the filename of the image to start from:

if(isset($_GET['start']) && strlen($_GET['start'])>1){
	$start = array_search($_GET['start'],$names);

	if($start === false){
		// Such a picture was not found
		$start = 0;
	}
}

// nextStart is returned alongside the filenames,
// so the script can pass it as a $_GET['start']
// parameter to this script if "Load More" is clicked

$nextStart = '';

if($names[$start+$perPage]){
	$nextStart = $names[$start+$perPage];
}

$names = array_slice($names,$start,$perPage);

// Formatting and returning the JSON object:

echo json_encode(array(
	'files' => $names,
	'nextStart'	=> $nextStart
));

The browse.php file lists the contents of the image folders as a JSON object. It does it with PHP’s glob function, which scans the folder and returns an array with file names. We then sort this array according to the photo upload dates with the array_multisort function, after which we slice it with array_slice to return only 24 photos at a time.

jQuery

As I mentioned earlier, we are using the webcam.js plugin to control the user’s web camera. This plugin exposes a simple API, available as a global object named webcam. It gives us methods for taking and uploading photos, and for generating the necessary embed code for the swf file.

In script.js below, we will be using this api and build our photo booth script around it. First we will define some variables and cache the most commonly used jQuery selectors throughout the code for better performance:

assets/js/script.js – Part 1

$(document).ready(function(){

	var camera = $('#camera'),
		photos = $('#photos'),
		screen =  $('#screen');

	var template = '';

	/*----------------------------------
		Setting up the web camera
	----------------------------------*/

	webcam.set_swf_url('assets/webcam/webcam.swf');
	webcam.set_api_url('upload.php');	// The upload script
	webcam.set_quality(80);				// JPEG Photo Quality
	webcam.set_shutter_sound(true, 'assets/webcam/shutter.mp3');

	// Generating the embed code and adding it to the page:
	screen.html(
		webcam.get_html(screen.width(), screen.height())
	);

The template variable above holds the markup that will be generated for each photo. It is basically a hyperlink that has the thumbnail of the photo as its background-image, and which points to the full size shot. The {src} attribute gets replaced with the actual file name of the photo (the file names were generated automatically by upload.php in the previous section).

Next we will be binding event listeners for the control buttons. Notice the use of webcam.freeze(), and the webcam.upload() methods. This gives the user the ability to take a shot and decide whether to upload it later. webcam.reset() prepares the web camera for another shot.

assets/js/script.js – Part 2

	/*----------------------------------
		Binding event listeners
	----------------------------------*/

	var shootEnabled = false;

	$('#shootButton').click(function(){

		if(!shootEnabled){
			return false;
		}

		webcam.freeze();
		togglePane();
		return false;
	});

	$('#cancelButton').click(function(){
		webcam.reset();
		togglePane();
		return false;
	});

	$('#uploadButton').click(function(){
		webcam.upload();
		webcam.reset();
		togglePane();
		return false;
	});

	camera.find('.settings').click(function(){
		if(!shootEnabled){
			return false;
		}

		webcam.configure('camera');
	});

	// Showing and hiding the camera panel:

	var shown = false;
	$('.camTop').click(function(){

		$('.tooltip').fadeOut('fast');

		if(shown){
			camera.animate({
				bottom:-466
			});
		}
		else {
			camera.animate({
				bottom:-5
			},{easing:'easeOutExpo',duration:'slow'});
		}

		shown = !shown;
	});

	$('.tooltip').mouseenter(function(){
		$(this).fadeOut('fast');
	});

After this we will need to implement some of the callbacks exposed by the webcam plugin:

assets/js/script.js – Part 3

	/*----------------------
		Callbacks
	----------------------*/

	webcam.set_hook('onLoad',function(){
		// When the flash loads, enable
		// the Shoot and settings buttons:
		shootEnabled = true;
	});

	webcam.set_hook('onComplete', function(msg){

		// This response is returned by upload.php
		// and it holds the name of the image in a
		// JSON object format:

		msg = $.parseJSON(msg);

		if(msg.error){
			alert(msg.message);
		}
		else {
			// Adding it to the page;
			photos.prepend(templateReplace(template,{src:msg.filename}));
			initFancyBox();
		}
	});

	webcam.set_hook('onError',function(e){
		screen.html(e);
	});

This completes the web camera integration. However we still need to display a list with the latest photos (and give users a way to browse through older images as well). We will be doing this with a custom function called loadPics() which will communicate with browse.php:

assets/js/script.js – Part 4

	/*-------------------------------------
		Populating the page with images
	-------------------------------------*/

	var start = '';

	function loadPics(){

		// This is true when loadPics is called
		// as an event handler for the LoadMore button:

		if(this != window){
			if($(this).html() == 'Loading..'){
				// Preventing more than one click
				return false;
			}
			$(this).html('Loading..');
		}

		// Issuing an AJAX request. The start parameter
		// is either empty or holds the name of the first
		// image to be displayed. Useful for pagination:

		$.getJSON('browse.php',{'start':start},function(r){

			photos.find('a').show();
			var loadMore = $('#loadMore').detach();

			if(!loadMore.length){
				loadMore = $('',{
					id			: 'loadMore',
					html		: 'Load More',
					click		: loadPics
				});
			}

			$.each(r.files,function(i,filename){
				photos.append(templateReplace(template,{src:filename}));
			});

			// If there is a next page with images:
			if(r.nextStart){

				// r.nextStart holds the name of the image
				// that comes after the last one shown currently.

				start = r.nextStart;
				photos.find('a:last').hide();
				photos.append(loadMore.html('Load More'));
			}

			// We have to re-initialize fancybox every
			// time we add new photos to the page:

			initFancyBox();
		});

		return false;
	}

	// Automatically calling loadPics to
	// populate the page onload:

	loadPics();

As loadPics() is bound as a handler for the click event of the Load More tile, this function can be called in two ways: the normal one and as a callback. The difference is that the this object of the function points either to window, or to the DOM element. We can check for this and take appropriate action, like preventing double clicks from issuing multiple requests to browse.php.

Lastly, we have the helper functions, used throughout the rest of the code.

assets/js/script.js – Part 5

	/*----------------------
		Helper functions
	------------------------*/

	// This function initializes the
	// fancybox lightbox script.

	function initFancyBox(filename){
		photos.find('a:visible').fancybox({
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic',
			'overlayColor'	: '#111'
		});
	}

	// This function toggles the two
	// .buttonPane divs into visibility:

	function togglePane(){
		var visible = $('#camera .buttonPane:visible:first');
		var hidden = $('#camera .buttonPane:hidden:first');

		visible.fadeOut('fast',function(){
			hidden.show();
		});
	}

	// Helper function for replacing "{KEYWORD}" with
	// the respectful values of an object:

	function templateReplace(template,data){
		return template.replace(/{([^}]+)}/g,function(match,group){
			return data[group.toLowerCase()];
		});
	}
});

Now that we’ve discussed all of the code, lets say a few words about the CSS styles.

CSS3

With the recent introduction of Firefox 4, CSS3 transitions can finally become a fully qualified member of our developer toolbox. In our photobooth, we are using CSS3 to add a bit of class to the photo booth.

assets/css/styles.css

/*-------------------
	Photo area
--------------------*/

#photos{
	margin: 60px auto 100px;
	overflow: hidden;
	width: 880px;
}

#photos:hover a{
	opacity:0.5;
}

#photos a,
#loadMore{
	background-position: center center;
	background-color: rgba(14, 14, 14, 0.3);
	float: left;
	height: 110px;
	margin: 1px 1px 0 0;
	overflow: hidden;
	width: 145px;

	-moz-transition:0.25s;
	-webkit-transition:0.25s;
	-o-transition:0.25s;
	transition:0.25s;
}

#photos a:hover{
	opacity:1;
}

#loadMore{
	cursor: pointer;
	line-height: 110px;
	text-align: center;
	text-transform: uppercase;
	font-size:10px;
}

#loadMore:hover{
	color:#fff;
	text-shadow:0 0 4px #fff;
}

In the fragment above, you can see that we’ve defined a 0.25s transition on the photo anchors (these hold our images). This will animate every change to the styles of these elements, including those applied by :hover definitions. This in effect makes all the photos fade out to 50% when we hover over the #photos div, except the one directly beneath the mouse pointer.

With that same transition definition, we also affect the #loadMore span. It has a text shadow rule applied on hover, which gets animated into a smooth glow effect.

CSS3 Effects

With this our photo booth is complete!

Conclusion

You can use this app as a fun addition to a community forum or other social networking website. You can optionally build in a comment field to go with the photo, or integrate it more deeply with your site.

Did you like this week’s tutorial? Share you thoughts in the comment section.

Go to Source

How to Create Social Media Buttons Using CSS3

Facebook-Web-Design — Wed, 29 Dec 2010 16:24:07 +0000

CSS3 is truly amazing. It gives web designers the ability to create flexible and easily reusable design elements, and reduces our reliance on images and graphics editors. This is a guide shows you how to create stylish social media buttons using CSS3, HTML, and some freely available social media icons.

Inspiration

One day, I stumbled upon Louis Harboe’s personal website, Graphicpeel, and I noticed his simple yet nicely designed social media buttons at the bottom of the site’s About page. I thought to myself, these are nice but I bet I could do this using just CSS3. And off I went!

HTML

First off, we will set the foundations with some simple HTML. We want to create a div that will contain our buttons and that has a class name of inset. Then we want use an unordered list (

).

Inside each

tag, we will have a link (). Each link will have an inside it that represents the social media icon, as well as a to hold the text for the button (which will be "LinkedIn", "Facebook", and so forth). The social media icons I used are from Handycons 2 and 108 Free Matte White Square Social Networking Icons.

We can give the span elements a class name of site to be able to style them later on.

Your HTML should look something like the following:

class="inset">
 
  
   
    
    class="site">E-Mail
   
  
  
   
    
    class="site">LinkedIn
   
  
  
   
    
    class="site">Facebook
   
  
  
   
    
    class="site">Twitter
   
  
  
   
    
    class="site">Flickr

CSS

The bulk of the code will be in CSS. We’ll go over the basic style rules first, and then progressively build up our buttons.

Basic CSS

Let us give our buttons some basic styles. The following code block simply uses CSS2 specs, which will give us a good fallback for browsers that don’t have support for CSS3 specifications (progressive enhancement).

The following is pretty self-explanatory: We just style the list items so that they appear to look like boxy buttons that are laid out side by side (using display:block and float:left).

.inset {
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 14px;
  list-style-type: none;
  margin: 10px 0 0 10px;
}

.inset ul { list-style-type: none; display: block; }

.inset li {
  float: left;
  height: 30px;
  margin: 0 8px 7px 0;
}

.inset li a {
  background-color: gray;
  color: #424242;
  float: left;
  font-size: 16px;
  font-weight: bold;
  height: 24px;
  padding-left: 27px;
  padding-top: 6px;
  position: relative;
  text-decoration: none;
  border: 1px solid #bfc1c6;
}

.inset li a:hover {
  border: 1px solid #b4b7bb;
}

.inset li a img {
  height: 16px;
  left: 7px;
  margin-right: 7px;
  position: absolute;
  top: 7px;
  width: 16px;
    border: none;
}

.inset li a span {
  display: block;
  height: 22px;
  padding-right: 7px;
  overflow: hidden;
  /* width: 70px; Uncomment this to add a fixed width */
}

span.site { font-size: 14px; line-height: 20px; }

What we have so far is pretty boring; but that’s to be expected since we haven’t used any CSS3 yet.

Rounded Corners with CSS3

To make these buttons look a bit more stylish, let’s give them some rounded corners using the border-radius property. Keep in mind that we must use vendor specific browser extensions for Mozilla (-moz- for browsers such as Firefox, SeaMonkey, and Flock) and WebKit (-webkit- for browsers such as Safari and Chrome). Other browsers such as Opera and IE9 will recognize the border-radius property without vendor prefixes.

Add these properties to the .inset li a selector:

/* Mozilla browsers that use Gecko layout engine */
-moz-border-radius: 5px;
/* Safari and Chrome that use WebKit layout engine */
-webkit-borer-radius: 5px;
/* W3C CSS Level 3.0 specifications. For Opera and IE9 */
border-radius: 5px;

Color Gradients with CSS3

With CSS3 gradients, we can do some pretty cool stuff that otherwise would need to be done with CSS background images created in a graphics editor like Photoshop. CSS3 gradients allow us to add color gradients to any HTML element that can result in many interesting things such as CSS3 design patterns and illustrative renderings such as Christmas baubles.

To create the gradient on our buttons, we will use the gradient value syntax (i.e. linear-gradient() and gradient()) assigned to the background property.

The implementation for Mozilla browsers and WebKit browsers is different, so although we’re trying to do the same thing, the code will be different for each browser layout engine.

Notice that for Mozilla (-moz-), I have used percentages, whereas for WebKit (-webkit-) I have to use decimals; 1% in Mozilla is .01 in WebKit, 10% in Mozilla is equivalent to .10 in WebKit, and so on.

Add these styles to the .inset li a selector:

/* Mozilla browsers that use Gecko layout engine */
background: -moz-linear-gradient(#a5a7aa, #bec1c5 1%, #d8dbdf 10%, #d8dbdf);
/* Safari and Chrome that use WebKit layout engine */
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #a5a7aa),color-stop(.01, #bec1c5),color-stop(.10, #d8dbdf),color-stop(1, #d8dbdf));

Styling the :hover Pseudo-class

Let’s go ahead and change the way the buttons look when the user hovers over them. By changing up the gradient colors slightly when a user mouses over one of the buttons, we can give her a visual cue that it is clickable. If you wanted to make these even more visually-engaging, you may want to experiment with CSS3 transform functions.

Add these styles to the .inset li a:hover selector:

background: -moz-linear-gradient(#9c9fa2, #b4b7bb 1%, #cdd0d5 10%, #cdd0d5);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #9c9fa2),color-stop(.01, #b4b7bb),color-stop(.10, #cdd0d5),color-stop(1, #cdd0d5));

In the image below, I’ve hovered over the E-mail button. As you can see, it is slightly darker than the others.

" />

Alternative Result: "Outset" Buttons with Different Colors

To demonstrate the flexibility that CSS3 offers, let us create a different version of the buttons using the same HTML structure.

HTML

In this example, we need to change the class of the containing div from inset to outset-colored.

Additionally, since each button will be a different color, we must also give them a unique class. We can assign these classes to the tags; for example, Facebook will have class="facebook". You’re probably wondering why I chose to use the class attribute versus the ID attribute: It’s because I want to account for the situation that multiple buttons of the same class can appear on the same page.

Here is the HTML:

class="outset-colored">
  
    
      class="email">
        
        E-Mail
      
    
    
      class="linkedin">
        
        LinkedIn
      
    
    
      class="facebook">
        
        Facebook
      
    
    
      class="twitter">
        
        Twitter
      
    
    
      class="flickr">
        
        Flickr

CSS

The CSS is lengthier than the original, but that’s because each button has a different color. The CSS3 used is very similar; the alternative result just has different color values for the gradients.

Here is the CSS for the alternative result:

/* COLORED OUTSET BUTTONS */

.outset-colored {
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 14px;
  list-style-type: none;
  margin: 10px 0 0 10px;
}

.outset-colored ul { list-style-type: none; display: block; }

.outset-colored li {
  float: left;
  height: 30px;
  margin: 0 8px 7px 0;
}

.outset-colored li a {
  color: #424242;
  float: left;
  font-size: 16px;
  font-weight: bold;
  height: 24px;
  padding-left: 27px;
  padding-top: 6px;
  position: relative;
  text-decoration: none;
  border: 1px solid #bfc1c6;
  border-radius: 5px;
  background-color: #D8D9DD;
  -moz-border-radius: 5px;
  -webkit-borer-radius: 5px;
}

/* EMAIL */
.outset-colored li a.email {
  background: -moz-linear-gradient(#ff6666, #cc0000 10%, #c40202);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ff6666),color-stop(.10, #cc0000),color-stop(1, #c40202));
  color: #f3f3f3;
  border: 1px solid #c40202;
}

.outset-colored li a:hover.email {
  background: -moz-linear-gradient(#c40202, #cc0000 1%, #e03434 10%, #e03434);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c40202),color-stop(.01, #cc0000),color-stop(.10, #e03434),color-stop(1, #e03434));
}

/* LINKEDIN */
.outset-colored li a.linkedin {
  background: -moz-linear-gradient(#7cd0fb, #38a5dc 10%, #2c83ae);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7cd0fb),color-stop(.10, #38a5dc),color-stop(1, #2c83ae));
  color: #f3f3f3;
  border: 1px solid #2c83ae;
}

.outset-colored li a:hover.linkedin {
  background: -moz-linear-gradient(#2c83ae, #38a5dc 1%, #41b9f6 10%, #41b9f6);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2c83ae),color-stop(.01, #38a5dc),color-stop(.10, #41b9f6),color-stop(1, #41b9f6));
}

/* FACEBOOK */
.outset-colored li a.facebook {
  background: -moz-linear-gradient(#7aa3f7, #4c72c3 10%, #3b5998);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7aa3f7),color-stop(.10, #4c72c3),color-stop(1, #3b5998));
  color: #f3f3f3;
  border: 1px solid #3b5998;
}

.outset-colored li a:hover.facebook {
  background: -moz-linear-gradient(#3b5998, #4c72c3 1%, #5c8aea 10%, #5c8aea);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #3b5998),color-stop(.01, #4c72c3),color-stop(.10, #5c8aea),color-stop(1, #5c8aea));
}

/* TWITTER */
.outset-colored li a.twitter {
  background: -moz-linear-gradient(#8ae0fd, #24bce6 10%, #1e9ec1);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #8ae0fd),color-stop(.10, #24bce6),color-stop(1, #1e9ec1));
  color: #f3f3f3;
  border: 1px solid #1e9ec1;
}

.outset-colored li a:hover.twitter {
  background: -moz-linear-gradient(#1e9ec1, #24bce6 1%, #33ccff 10%, #33ccff);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #24bce6),color-stop(.01, #33ccff),color-stop(.10, #33ccff),color-stop(1, #33ccff));
}

/* FLICKR */
.outset-colored li a.flickr {
  background: -moz-linear-gradient(#fc75ba, #e10374 10%, #c10263);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fc75ba),color-stop(.10, #e10374),color-stop(1, #c10263));
  color: #f3f3f3;
  border: 1px solid #c10263;
}

.outset-colored li a:hover.flickr {
  background: -moz-linear-gradient(#c10263, #e10374 1%, #ff0283 10%, #ff0283);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #c10263),color-stop(.01, #e10374),color-stop(.10, #ff0283),color-stop(1, #ff0283));
}

.outset-colored li a img {
  height: 16px;
  left: 7px;
  margin-right: 7px;
  position: absolute;
  top: 7px;
  width: 16px;
   border: none;
}

.outset-colored li a span {
  display: block;
  height: 22px;
  padding-right: 7px;
  overflow: hidden;
  /*width: 70px; Add a width here if you want all the buttons to be the same size.*/
}

span.site { font-size: 14px; line-height: 20px; }

About the Author

Andrew Roberts is a Christian with a passion for web design and development. His web interests focus mostly on HTML/CSS, JavaScript, & PHP/MySQL. When he’s not glued to the computer, he’s spending time with his girlfriend Kaitlynn, photographing animals, or reading. His goal is to attend graduate school for Biblical Studies & Ministry.

Go to Source

Charming Lettering With jQuery – Lettering.js

Facebook-Web-Design — Sat, 30 Oct 2010 14:20:05 +0000

CSS3 boosted the use of custom fonts and styles in websites. However, it still doesn't offer a complete down-to-the-letter control.

Lettering.js, a lightweight and easy to use Javascript injector for radical web typography aims to fill this gap.

It simply divides any given element into pieces of s wrapping each letter with a custom class.

Just like

`WRD`

into:

`W R D`

After that, we just need to create the styles for each letter on the CSS side to create dynamic awesome outputs.

P.S. Lettering.js can also split words besides the letters.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Tags: Javascript

Go to Source

A Textile Filter for BBEdit?

Facebook-Web-Design — Mon, 11 Oct 2010 21:42:41 +0000

A few days back I tweeted a request for a Textile filter for BBEdit, which is one of those things people have asked for over the years but has never actually appeared. There’s been a Markdown filter since forever, but since I find myself on Basecamp a lot for business reasons and Basecamp uses Textile I’d really prefer to stick to one syntax instead of constantly confusing myself by switching between two similar syntaxes.

(And I prefer to use BBEdit because I like it a lot, know it well, and have no compelling reason to switch. Please take any thoughts of text-editor snobbery or flamewars elsewhere.)

In response, the mighty Arlen Walker told me how to install Xcode, the Text::Textile module, and a short Perl script to drop into ~/Library/Application Support/BBEdit/Unix Support/Unix Filters. I did that, and it all worked, but I was unhappy with the that default Textile litters all over. I tried to disable it, failed, tweeted for help, and was contacted by the incredible Brad Choate (who wrote the Text::Textile module!).

The upshot of all this is that Brad not only told me how to disable the spans, but how to convert Textile to a standalone BBEdit filter that, so far as I can tell, shouldn’t require installation of either Xcode or Text::Textile. I’m pretty sure about this, but since I’ve already installed Text::Textile I can’t be entirely certain. Who wants to test it out?

All you have to do is download TextileSA.pl.zip, unzip it, and drop the Perl script into ~/Library/Application Support/BBEdit/Unix Support/Unix Filters. Once you do that, it should immediately become available in BBEdit, even if BBEdit is already running. (At least that’s what happens in BBEdit 9.x.) Here’s a test file to Texile-ize if you’re so inclined:

h1. Testing the BBEdit Textile filter

This is _awesome_!  "Arlen":http://theodicius.net/ and "Brad":http://bradchoate.com/ are the *bomb*.

There’s a bug at the moment that means double-quote marks don’t get smart-encoded, but Brad’s aware of it and plans to fix it. Also, this does a straight Textile run with nothing disabled, so it will in fact still litter around any sequence of uppercase letters (like those in, say, “BBEdit”). If you can’t stand that even during testing, open up TextileSA.pl and insert the following after line 2312:

my $css_flags = $textile->css();
$css_flags->{'class_caps'} = '';
$textile->css($css_flags);

If you don’t mind (or even like) those spans, then of course you can slip that part.

The “SA” in TextileSA.pl stands for “StandAlone”, by the way. I’ll drop that once I’m sure this actually works and pass it along to the BBEdit gang.

Go to Source

How to create a kick-ass CSS3 progress bar

Facebook-Web-Design — Mon, 11 Oct 2010 16:29:58 +0000

Please note: The original CSS3 progress bar shown in this tutorial has been created by Ivan Vanderbyl, which hereby gave me the right to reproduce and document his work.
The following tutorial and the demo works best on Chrome and Safari, correctly on Firefox and very badly in Internet Explorer (eh…I’m sure you hadn’t guessed that).

The Demo

Click on the image to view a live demo. You can also get the source on Github.

Getting ready

Let’s start by organizing our work. To achieve the effect of this tutorial, we’ll need to create 3 files:

progress.html, which will contain our markup.
ui.css which will contain our CSS styles.
progress.js which will contain some additional jQuery animations.

Create a directory on your webserver (or hard drive) and create the files.

The HTML markup

Here we go. Open your progress.html file and paste the following markup in it:




	
	Pure CSS Progress Bar

	
	


	
		
        	
				Processing 79%
      		

    	
  

		
	    	Hello, World!

Let me explain the code a bit: On line 1, I’ve declared a HTML5 doctype. Then, lines 12 to 16 contains the markup for the progress bar itself. If you save the file and view it in your browser right now, you’ll see that nothing appears. Don’t worry, we’re going to apply so CSS3 magic in a minute.

Diving into CSS3

Open your ui.css file and paste the following code in it. There’s nothing fancy there, just some basic styles (that I’ve simplified from the original source) for the layout.

body {
  background:#eee;
  padding: 30px;
  font-size: 62.5%;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  margin: 0;
}

#container {
  margin: 0 auto;
  width: 460px;
  padding: 2em;
  background: #DCDDDF;

}

.ui-progress-bar {
  margin-top: 3em;
  margin-bottom: 3em;
} 

.ui-progress span.ui-label {
  font-size: 1.2em;
  position: absolute;
  right: 0;
  line-height: 33px;
  padding-right: 12px;
  color: rgba(0,0,0,0.6);
  text-shadow: rgba(255,255,255, 0.45) 0 1px 0px;
  white-space: nowrap;
}

Once you are done, we can finally get into more serious things. The code below will make your progress bar come to life. I’ll explain it in details in a minute. For now, copy it and paste it in your ui.css file.

@-webkit-keyframes animate-stripes {
  from {
    background-position: 0 0;
  }

  to {
   background-position: 44px 0;
  }
}      

.ui-progress-bar {
  position: relative;
  height: 35px;
  padding-right: 2px;
  background-color: #abb2bc;
  border-radius: 35px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6bcc6), color-stop(1, #9da5b0));
  background: -moz-linear-gradient(#9da5b0 0%, #b6bcc6 100%);
  -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
  box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), 0px 1px 0px 0px #FFF;
}        

.ui-progress {
  position: relative;
  display: block;
  overflow: hidden;
  height: 33px;
  -moz-border-radius: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  -webkit-background-size: 44px 44px;
  background-color: #74d04c;
  background: -webkit-gradient(linear, 0 0, 44 44,
    color-stop(0.00, rgba(255,255,255,0.17)),
    color-stop(0.25, rgba(255,255,255,0.17)),
    color-stop(0.26, rgba(255,255,255,0)),
    color-stop(0.50, rgba(255,255,255,0)),
    color-stop(0.51, rgba(255,255,255,0.17)),
    color-stop(0.75, rgba(255,255,255,0.17)),
    color-stop(0.76, rgba(255,255,255,0)),
    color-stop(1.00, rgba(255,255,255,0))
  ), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
  background: -moz-repeating-linear-gradient(top left -30deg,
    rgba(255,255,255,0.17),
    rgba(255,255,255,0.17) 15px,
    rgba(255,255,255,0) 15px,
    rgba(255,255,255,0) 30px
  ), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);
  -webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  -moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  border: 1px solid #4c8932;
  -webkit-animation: animate-stripes 2s linear infinite;
}

Save your ui.css file and view progress.html in your web browser, and you’ll see your gorgeous progress bar, done without using any image.
So, what’s inside? Let me explain the code a bit.

First, we have two CSS classes: .ui-progress-bar and .ui-progress. The first is the container, and the second is the green progress bar.

Lines 1 to 9: These lines define a webkit-specific animation, which allows us to move an element from a pint to another.
For more details about webkit animations, see http://webkit.org/blog/324/css-animation-2/.
Line 16: The border-radius CSS3 property allows you to define a radius and get rounded corners.
Line 17: Mozilla specific property for border-radius.
Line 18: Webkit specific property for border-radius.
Line 19: The -webkit-gradient property allows you to add a gradient to an element. It works only on Webkit, other browsers will ignore this property.
Line 20: Mozilla specific property, similar to -webkit-gradient with a different syntax.
Lines 21 to 23: box-shadow (and its browser specific alternatives) allows you to add a shadow to an element.
Line 34: Webkit specific property, based on the standard background-size property, which allows you to specify the size of a background image.
Line 56: Triggers webkit animation defined on line 1.

Final touch: Using jQuery to animate the progress bar

A pure CSS3 progress bar is a very cool thing, but progress bars are here to show progress, so we have to animate it. We’re going to use jQuery to do so.

Open your progress.html file and paste the two line below just above the closing tag.

This code will load jQuery from Google (Which I recommend to do instead of loading your own copy) as well as your progress.js file, which will contain the required code to animate the progress bar.

Now, paste the code below in your progress.js file:

(function( $ ){
  $.fn.animateProgress = function(progress, callback) {
    return this.each(function() {
      $(this).animate({
        width: progress+'%'
      }, {
        duration: 2000, 

        easing: 'swing',

        step: function( progress ){
          var labelEl = $('.ui-label', this),
              valueEl = $('.value', labelEl);

          if (Math.ceil(progress) < 20 && $('.ui-label', this).is(":visible")) {
            labelEl.hide();
          }else{
            if (labelEl.is(":hidden")) {
              labelEl.fadeIn();
            };
          }

          if (Math.ceil(progress) == 100) {
            labelEl.text('Done');
            setTimeout(function() {
              labelEl.fadeOut();
            }, 1000);
          }else{
            valueEl.text(Math.ceil(progress) + '%');
          }
        },
        complete: function(scope, i, elem) {
          if (callback) {
            callback.call(this, i, elem );
          };
        }
      });
    });
  };
})( jQuery );

$(function() {
  $('#progress_bar .ui-progress .ui-label').hide();
  $('#progress_bar .ui-progress').css('width', '7%');

  $('#progress_bar .ui-progress').animateProgress(43, function() {
    $(this).animateProgress(79, function() {
      setTimeout(function() {
        $('#progress_bar .ui-progress').animateProgress(100, function() {
          $('#main_content').slideDown();
        });
      }, 2000);
    });
  });

});

Save the file, and view progress.html in your web brower: Wow, the progress bar is now animated. How cool is that?

This Javascript code makes the progress bar go from 0 to 100, and then, it displays a message, which is simply “Hello World” in our tutorial.

I hope you enjoyed reading this tutorial as much as I enjoyed writing it. Have fun with CSS3!

Like CatsWhoCode? If yes, don’t hesitate to check my other blog CatsWhoBlog: It’s all about blogging!

How to create a kick-ass CSS3 progress bar

Go to Source

Quick Feedback Form w/ PHP and jQuery

Facebook-Web-Design — Wed, 06 Oct 2010 07:35:54 +0000

When releasing a web product, there is nothing more beneficial than receiving early feedback from your users. Unfortunately, many websites make it unnecessarily difficult to send your feedback or lack this functionality altogether

Today we are making a simple solution to this problem. Powered by jQuery, PHP and the PHPMailer class, this form sends the users’ suggestions directly to your mailbox.

The HTML

Lets start with the HTML markup. The stylesheet is included in the top of the document, and the JavaScript source files in the bottom. This improves the perceived performance of the page, as the scripts are loaded last, thus allowing for the design of the site to be displayed.

feedback.html





Quick Feedback Form w/ PHP and jQuery | Tutorialzine Demo









    

    
    
    
    
    

    

        
        Feedback

        Please include your contact information if you'd like to receive a reply.

        

        Submit

Inside the body you can see the #feedback div. It is anchored to the bottom-right of the window with a fixed positioning, as you will see in the next section of the tut.

Inside it reside the five color spans. These are 20% wide and floated to the left. This way they fill the exact width of the #feedback div.

Lastly is the .section container, which holds the heading, the textarea and the button.

Quick Feedback Form w/ PHP & jQuery

The CSS

Moving on to the styling of the form, we first have to say a couple of words about how the stylesheet is structured. As you can see from the CSS definitions below, each rule begins with #feedback. This way we achieve the CSS equivalent of namespaces, which makes it easier to add the code to an existing site without conflicts.

styles.css – Part 1

#feedback{
    background-color:#9db09f;
    width:310px;
    height:330px;
    position:fixed;
    bottom:0;
    right:120px;
    margin-bottom:-270px;
    z-index:10000;
}

#feedback .section{
    background:url('img/bg.png') repeat-x top left;
    border:1px solid #808f81;
    border-bottom:none;
    padding:10px 25px 25px;
}

#feedback .color{
    float:left;
    height:4px;
    width:20%;
    overflow:hidden;
}

#feedback .color-1{ background-color:#d3b112;}
#feedback .color-2{ background-color:#12b6d3;}
#feedback .color-3{ background-color:#8fd317;}
#feedback .color-4{ background-color:#ca57df;}
#feedback .color-5{ background-color:#8ecbe7;}

#feedback h6{
    background:url("img/feedback.png") no-repeat;
    height:38px;
    margin:5px 0 12px;
    text-indent:-99999px;
    cursor:pointer;
}

#feedback textarea{
    background-color:#fff;
    border:none;
    color:#666666;
    font:13px 'Lucida Sans',Arial,sans-serif;
    height:100px;
    padding:10px;
    width:236px;

    -moz-box-shadow:4px 4px 0 #8a9b8c;
    -webkit-box-shadow:4px 4px 0 #8a9b8c;
    box-shadow:4px 4px 0 #8a9b8c;
}

The first element to be styled is the #feedback div. It is applied a fixed positioning, and anchored to the browser window. After this comes the definition of the .section div, and the five color spans. These spans differ only in their background colors, which are assigned separately for each class.

At the bottom are the CSS rules which define the looks of the textarea.

styles.css – Part 2

#feedback a.submit{
    background:url("img/submit.png") no-repeat;
    border:none;
    display:block;
    height:34px;
    margin:20px auto 0;
    text-decoration:none;
    text-indent:-99999px;
    width:91px;
}

#feedback a.submit:hover{
    background-position:left bottom;
}

#feedback a.submit.working{
    background-position:top right !important;
    cursor:default;
}

#feedback .message{
    font-family:Corbel,Arial,sans-serif;
    color:#5a665b;
    text-shadow:1px 1px 0 #b3c2b5;
    margin-bottom:20px;
}

#feedback .arrow{
    background:url('img/arrows.png') no-repeat;
    float:right;
    width:23px;
    height:18px;
    position:relative;
    top:10px;
}

#feedback .arrow.down{ background-position:left top;}
#feedback h6:hover .down{ background-position:left bottom;}
#feedback .arrow.up{ background-position:right top;}
#feedback h6:hover .up{ background-position:right bottom;}

#feedback .response{
    font-size:21px;
    margin-top:70px;
    text-align:center;
    text-shadow:2px 2px 0 #889889;
    color:#FCFCFC;
}

In the second part of the stylesheet, you can see the definition of the submit button. Notice that there are three button states, which are contained withing the same background image – submit.png – and shown only when necessary. These are the default state of the button, the hover state, and the “Working” version. When the button is in its “working” mode, the hover effect is disabled.

Sending an AJAX Request

The jQuery

The feedback form has two states – minimized and maximized. When loaded, by default it is minimized to the bottom right of the screen. It is up to jQuery to maximize it when the user clicks the heading. This is done by binding an event listener and running a simple animation, as you can see from the code below.

script.js – Part 1

$(document).ready(function(){

    // The relative URL of the submit.php script.
    // You will probably have to change it.
    var submitURL = 'submit.php';

    // Caching the feedback object:
    var feedback = $('#feedback');

    $('#feedback h6').click(function(){

        // We are storing the values of the animated
        // properties in a separate object:

        var anim    = {
            mb : 0,            // Margin Bottom
            pt : 25            // Padding Top
        };

        var el = $(this).find('.arrow');

        if(el.hasClass('down')){
            anim = {
                mb : -270,
                pt : 10
            };
        }

        // The first animation moves the form up or down, and the second one
        // moves the "Feedback" heading, so it fits in the minimized version

        feedback.stop().animate({marginBottom: anim.mb});

        feedback.find('.section').stop().animate({paddingTop:anim.pt},function(){
            el.toggleClass('down up');
        });
    });

To keep the code clean, I’ve moved the if statements to the top and created the anim object, which holds the values fed to the animate method. Depending on whether the ‘down‘ class exists on the arrow, we maximize or minimize the form.

The second part of script.js handles the AJAX interactions with submit.php.

script.js – Part 2

    $('#feedback a.submit').live('click',function(){
        var button = $(this);
        var textarea = feedback.find('textarea');

        // We use the working class not only for styling the submit button,
        // but also as kind of a "lock" to prevent multiple submissions.

        if(button.hasClass('working') || textarea.val().length < 5){
            return false;
        }

        // Locking the form and changing the button style:
        button.addClass('working');

        $.ajax({
            url        : submitURL,
            type    : 'post',
            data    : { message : textarea.val()},
            complete    : function(xhr){

                var text = xhr.responseText;

                // This will help users troubleshoot their form:
                if(xhr.status == 404){
                    text = 'Your path to submit.php is incorrect.';
                }

                // Hiding the button and the textarea, after which
                // we are showing the received response from submit.php

                button.fadeOut();

                textarea.fadeOut(function(){
                    var span = $('',{
                        className    : 'response',
                        html        : text
                    })
                    .hide()
                    .appendTo(feedback.find('.section'))
                    .show();
                }).val('');
            }
        });

        return false;
    });
});

We are using jQuery’s lower-level AJAX method – $.ajax(), to interact with submit.php. This method gives us a bit more control on the connection than the $.get() and $.post() wrappers.

One benefit of using this method is visible in the “complete” callback function. There we match the response status for the 404 not found error, and output a friendly error message to the user reminding them to check their submitURL path.

Now lets continue with the final part of the tutorial – the PHP step.

The PHP

PHP handles the data, passed with AJAX, sanitizes it, and sends an email message to your email address.

submit.php

// Enter your email address below
$emailAddress = 'me@example.com';

// Using session to prevent flooding:

session_name('quickFeedback');
session_start();

// If the last form submit was less than 10 seconds ago,
// or the user has already sent 10 messages in the last hour

if(	$_SESSION['lastSubmit'] && ( time() - $_SESSION['lastSubmit'] < 10 || $_SESSION['submitsLastHour'][date('d-m-Y-H')] > 10 )){
	die('Please wait for a few minutes before sending again.');
}

$_SESSION['lastSubmit'] = time();
$_SESSION['submitsLastHour'][date('d-m-Y-H')]++;

require "phpmailer/class.phpmailer.php";

if(ini_get('magic_quotes_gpc')){
    // If magic quotes are enabled, strip them
    $_POST['message'] = stripslashes($_POST['message']);
}

if(mb_strlen($_POST['message'],'utf-8') < 5){
    die('Your feedback body is too short.');
}

$msg = nl2br(strip_tags($_POST['message']));

// Using the PHPMailer class

$mail = new PHPMailer();
$mail->IsMail();

// Adding the receiving email address
$mail->AddAddress($emailAddress);

$mail->Subject = 'New Quick Feedback Form Submission';
$mail->MsgHTML($msg);

$mail->AddReplyTo('noreply@'.$_SERVER['HTTP_HOST'], 'Quick Feedback Form');
$mail->SetFrom('noreply@'.$_SERVER['HTTP_HOST'], 'Quick Feedback Form');

$mail->Send();

echo 'Thank you!';

First we use PHP’s session management to keep track of how many times the user has submitted the form in the last hour, and the time stamp of the last submission. If the difference between the last form submit and the current one is less than 10 seconds, or the user has sent more than 10 messages in the last hour, he is shown an error message.

The emails are sent with the PHPMailer class. It only works with PHP5, so to use the form you would need to be running that version of PHP.

A number of PHPMailer’s methods are used to configure the outgoing email. With IsMail() we are telling the class that it should use the internal mail() PHP function. AddAddress() ads the receiving email addresses (you can add more than one receiver with additional calls to the method). After adding the subject and the body, we specify the reply to address and send the message.

With this our Quick Feedback Form is complete!

Final words

You can use this form to gather quick feedback from your visitors. With such a low barrier to entry – just filling a single texbox, you will make it considerably easier for users to share their opinions and give ideas. The script is also structured so it is easy to customize and have minimal impact on your page.

Go to Source

An HTML5 Slideshow w/ Canvas & jQuery

Facebook-Web-Design — Wed, 06 Oct 2010 07:35:13 +0000

You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it, listen for events and integrate it deeply into our layouts.

All uses of canvas you’ve come so far are probably limited to games and other proof of concept demos. Today, however, we are doing something practical – we are making a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

The Idea

With JavaScript, we are going to apply a special filter to every image in the slideshow. We will create a new version of the images, with higher contrast and more vivid colors, and store it in a canvas elements.

How the Slideshow Works

When the user chooses to proceed to another slide, the canvas is shown with a fadeIn animation, creating a smooth lighting effect.

The HTML

The first step in creating the slideshow, is laying down the HTML markup of the page.

html5-slideshow.html





An HTML5 Slideshow w/ Canvas & jQuery | Tutorialzine Demo

First we have the HTML5 doctype, followed by the head section of the document. After the title tag and the stylesheet we move on with the body.

You can see that the markup for the slideshow is really simple. The main containing div, #slideshow, holds an unordered list and the previous and next arrows. The unordered list holds the slides, with each defined as a LI element. As shown in the illustration above, this is where the canvas elements with the modified versions of the images are inserted.

Lastly we include jQuery and our script.js, to which we are going to get back to in the last step of this tutorial.

The CSS

All the styles for the slideshow reside in styles.css. I’ve used the #slideshow id of the main containment element as a namespace, so you can easily append these styles to your stylesheet without worrying about conflicts.

styles.css

#slideshow{
    background-color:#F5F5F5;
    border:1px solid #FFFFFF;
    height:340px;
    margin:150px auto 0;
    position:relative;
    width:640px;

    -moz-box-shadow:0 0 22px #111;
    -webkit-box-shadow:0 0 22px #111;
    box-shadow:0 0 22px #111;
}

#slideshow ul{
    height:320px;
    left:10px;
    list-style:none outside none;
    overflow:hidden;
    position:absolute;
    top:10px;
    width:620px;
}

#slideshow li{
    position:absolute;
    display:none;
    z-index:10;
}

#slideshow li:first-child{
    display:block;
    z-index:1000;
}

#slideshow .slideActive{
    z-index:1000;
}

#slideshow canvas{
    display:none;
    position:absolute;
    z-index:100;
}

#slideshow .arrow{
    height:86px;
    width:60px;
    position:absolute;
    background:url('img/arrows.png') no-repeat;
    top:50%;
    margin-top:-43px;
    cursor:pointer;
    z-index:5000;
}

#slideshow .previous{ background-position:left top;left:0;}
#slideshow .previous:hover{ background-position:left bottom;}

#slideshow .next{ background-position:right top;right:0;}
#slideshow .next:hover{ background-position:right bottom;}

We can split our visitors, which will interact with the slideshow, in three main groups:

People with JavaScript switched off. These users will only see the first slide, and will be unable to switch to a different one;
People with JavaScript switched on, but with no support for canvas. For visitors from this group, the slides will change instantaneously, without transitioning effects;
People with JavaScript enabled and canvas support. These are people who use the latest versions of Firefox, Safari, Chrome, Opera and the soon to be released IE9. They will enjoy the slideshow in its full glory;

To account for the first two groups, a number of rules are applied to the stylesheet. With the help of the first-child selector, only the first slide is shown by default. Also a number of overflow:hidden rules are applied in a number of places just in case.

An HTML5 Slideshow With Canvas & jQuery

The JavaScript

Moving on to the last part of the tutorial – the JavaScript and jQuery code. As we already explained the basic principles behind the effect, lets move straight to the execution.

script.js – Part 1

$(window).load(function(){

    // We are listening to the window.load event, so we can be sure
    // that the images in the slideshow are loaded properly.

    // Testing wether the current browser supports the canvas element:
    var supportCanvas = 'getContext' in document.createElement('canvas');

    // The canvas manipulations of the images are CPU intensive,
    // this is why we are using setTimeout to make them asynchronous
    // and improve the responsiveness of the page.

    var slides = $('#slideshow li'),
        current = 0,
        slideshow = {width:0,height:0};

    setTimeout(function(){

        if(supportCanvas){
            $('#slideshow img').each(function(){

                if(!slideshow.width){
                    // Saving the dimensions of the first image:
                    slideshow.width = this.width;
                    slideshow.height = this.height;
                }

                // Rendering the modified versions of the images:
                createCanvasOverlay(this);
            });
        }

        $('#slideshow .arrow').click(function(){
            var li            = slides.eq(current),
                canvas        = li.find('canvas'),
                nextIndex    = 0;

            // Depending on whether this is the next or previous
            // arrow, calculate the index of the next slide accordingly.

            if($(this).hasClass('next')){
                nextIndex = current >= slides.length-1 ? 0 : current+1;
            }
            else {
                nextIndex = current <= 0 ? slides.length-1 : current-1;
            }

            var next = slides.eq(nextIndex);

            if(supportCanvas){

                // This browser supports canvas, fade it into view:

                canvas.fadeIn(function(){

                    // Show the next slide below the current one:
                    next.show();
                    current = nextIndex;

                    // Fade the current slide out of view:
                    li.fadeOut(function(){
                        li.removeClass('slideActive');
                        canvas.hide();
                        next.addClass('slideActive');
                    });
                });
            }
            else {

                // This browser does not support canvas.
                // Use the plain version of the slideshow.

                current=nextIndex;
                next.addClass('slideActive').show();
                li.removeClass('slideActive').hide();
            }
        });

    },100);

With document.createElement(), you can create any DOM element that you like. So to test whether the browser really supports canvas (and doesn’t just create a generic element), we use the in operator to check for the getContext() method, which is an integral part of the standard. The result of this check is used throughout the code to account for users with browsers that do not yet support canvas.

Notice that the calls to the createCanvasOverlay function (which we will discuss in the second part of the code) are enclosed in a setTimeout statement. This is done because the function is processor intensive and might cause the browser window to stall. setTimeout breaks out of the main execution path and runs the code asynchronously, maximizing the responsiveness of the page.

script.js – Part 2

    // This function takes an image and renders
    // a version of it similar to the Overlay blending
    // mode in Photoshop.

    function createCanvasOverlay(image){

        var canvas            = document.createElement('canvas'),
            canvasContext    = canvas.getContext("2d");

        // Make it the same size as the image
        canvas.width = slideshow.width;
        canvas.height = slideshow.height;

        // Drawing the default version of the image on the canvas:
        canvasContext.drawImage(image,0,0);

        // Taking the image data and storing it in the imageData array:
        var imageData    = canvasContext.getImageData(0,0,canvas.width,canvas.height),
            data        = imageData.data;

        // Loop through all the pixels in the imageData array, and modify
        // the red, green, and blue color values.

        for(var i = 0,z=data.length;i
This is where the magic happens. The canvas element is basically one big piece of paper on which you can draw with JavaScript. The code above creates a blank canvas element and imports the image, which was passed as a parameter, with the drawImage() method. After this, we use the getImageData() method to export the contents of all the pixels of the canvas into the imageData array.
What is more, for each pixel of the image we have four entries in the array – one for the red, green and blue colors, and the alpha channel (the transparency). These are all numbers from 0 to 255. The main for loop has to go through all the pixels and apply a special filter equation that lightens the lighter colors and darkens the dark ones. It is the same effect that you get by using the overlay blending mode in photoshop.
The main for loop has to do an incredible amount of work – for a 600×400 pixel image it does 240 000 iterations! This means that your code must be as optimal as possible. This is why, in the loop, I copied the formula three times instead of calling a function. By removing the function calls the loop became nearly three times faster.
Be aware that the rendering time will grow proportionally, if you decide to include more slides, or use larger images.

With this our HTML5 Canvas Slideshow is complete!
Final words
The canvas element opens a whole new way of building rich internet applications. For those of you who are curious, on a relatively new PC, it takes Firefox 1.2 seconds to generate all four canvas images, while Chrome is faster at 0.67s. Considering the amount of work that is done, this is a really impressive achievement.



Go to Source

View Source Tutorial: Content Site Using HTML5 Canvas + CSS3

Facebook-Web-Design — Mon, 30 Aug 2010 18:15:34 +0000

Via Phil Franks comes an interesting HTML5/CSS3 site for There Studio, which is a kind of coworking space in London:

The site itself has a number of circles with information bouncing on the screen that respond to mouse clicks and moves.

Let’s crack the site open using View Source and see how they are doing things. First, they have a repeated background with a little plus symbol with the following style rule on the tag:

PLAIN TEXT

CSS:

background: #ddd url(‘../images/bg.gif’) 50% 0 repeat fixed;

The textual content in each of the circles is clean semantic HTML that is search engine friendly:

PLAIN TEXT

HTML:

class=“section who first”>

Who

Creatives, makers, thinkers class=“ampersand”>& doers

To turn that into this:

The

is first transformed into having an underline with the padding and margin being on the bottom:

PLAIN TEXT

CSS:

h3 {
border-bottom: 1px solid #ccc;
display: block;
font-size: 25px;
font-weight: normal;
padding: 0 0 10px;
margin: 0 0 8px;
}

JavaScript creates the circle. The script tags themselves are at the end of the HTML page at the bottom of the tag, a good performance practice in general.

The heart of drawing each circle is in the createBall and createContentBall methods. If a ball will have HTML content, then the createContentBall method is used, otherwise the createBall method is used. Let’s look at the createContentBall method; we’ll break it down:

PLAIN TEXT

JAVASCRIPT:

function createContentBall(className,size,color,html) {
var element = document.createElement( ‘div’ );
element.className = className;
element.width = element.height = size;
element.style.position = ‘absolute’;
element.style.left = -size + ‘px’;
element.style.top = -size + ‘px’;
element.style.cursor = “default”;
canvas.appendChild(element);
elements.push( element );
var circle = document.createElement( ‘canvas’ );
circle.width = size;
circle.height = size;
if (className !==‘image’ && className !==‘image first’) {
var graphics = circle.getContext( ’2d’ );
graphics.fillStyle = color;
graphics.beginPath();
graphics.arc( size * .5, size * .5, size * .5, 0, PI2, true );
graphics.closePath();
graphics.fill();
}
element.appendChild( circle );
content = document.createElement( ‘div’ );
content.className = “content”;
content.onSelectStart = null;
content.innerHTML = html;
element.appendChild(content);
if (className !==‘image’ && className !==‘image first’ ) {
content.style.width = (size – contentPadding2) + ‘px’;
content.style.left = (((size – content.clientWidth) / 2)) +‘px’;
content.style.top = ((size – content.clientHeight) / 2) +‘px’;
}
var b2body = new b2BodyDef();
var circle = new b2CircleDef();
circle.radius = size / 2;
circle.density = ballDensity;
circle.friction = ballFriction;
circle.restitution = ballRestitution;
b2body.AddShape(circle);
b2body.userData = {element: element};
b2body.position.Set( Math.random() stage[2], Math.random() * (stage[3]-size) + size/2);
b2body.linearVelocity.Set( Math.random() * 200, Math.random() * 200 );
bodies.push( world.CreateBody(b2body) );
}

First, we create an absolutely positioned DIV that will house our Canvas tag:

PLAIN TEXT

JAVASCRIPT:

var element = document.createElement( ‘div’ );
element.className = className;
element.width = element.height = size;
element.style.position = ‘absolute’;
element.style.left = -size + ‘px’;
element.style.top = -size + ‘px’;
element.style.cursor = “default”;
canvas.appendChild(element);
elements.push( element );

Then we draw the actual circle itself using the Canvas tag and append it to our container DIV (Note that an SVG circle created programmatically could have also been used here):

PLAIN TEXT

JAVASCRIPT:

var circle = document.createElement( ‘canvas’ );
circle.width = size;
circle.height = size;
if (className !==‘image’ && className !==‘image first’) {
var graphics = circle.getContext( ’2d’ );
graphics.fillStyle = color;
graphics.beginPath();
graphics.arc( size * .5, size * .5, size * .5, 0, PI2, true );
graphics.closePath();
graphics.fill();
}
element.appendChild( circle );

Then we create another DIV to house the HTML content itself:

PLAIN TEXT

JAVASCRIPT:

content = document.createElement( ‘div’ );
content.className = “content”;
content.onSelectStart = null;
content.innerHTML = html;
element.appendChild(content);
if (className !==‘image’ && className !==‘image first’ ) {
content.style.width = (size – contentPadding2) + ‘px’;
content.style.left = (((size – content.clientWidth) / 2)) +‘px’;
content.style.top = ((size – content.clientHeight) / 2) +‘px’;
}

Notice that we are setting content.onSelectStart to null above; this is so that when you run the mouse button over the text it doesn’t select (An alternative way to do this is to use the HTML pointer-events CSS property).

Next comes code to deal with the physics of the circles, which uses Box2D.js, a JavaScript physics engine ported from Flash:

PLAIN TEXT

JAVASCRIPT:

var b2body = new b2BodyDef();
var circle = new b2CircleDef();
circle.radius = size / 2;
circle.density = ballDensity;
circle.friction = ballFriction;
circle.restitution = ballRestitution;
b2body.AddShape(circle);
b2body.userData = {element: element};
b2body.position.Set( Math.random() stage[2], Math.random() * (stage[3]-size) + size/2);
b2body.linearVelocity.Set( Math.random() * 200, Math.random() * 200 );
bodies.push( world.CreateBody(b2body) );

Basically, we define a circle, give it a radius, density, friction, and restitution, and then add it to our collection of shapes with a position and linear velocity. Box2D will then handle the physics and we can just take the values back out to draw things on the screen with a setInterval, which happens in the loop method:

PLAIN TEXT

JAVASCRIPT:

function loop() {
delta[0] += (0 – delta[0]) * .5;
delta[1] += (0 – delta[1]) * .5;
world.m_gravity.x = 0 // -(0 + delta[0]);
world.m_gravity.y = -(100 + delta[1]);
mouseDrag();
world.Step(timeStep, iterations);
for (i = 0; i length; i++) {
var body = bodies[i];
var element = elements[i];
element.style.left = (body.m_position0.x – (element.width>> 1)) + ‘px’;
element.style.top = (body.m_position0.y – (element.height>> 1)) + ‘px’;
if (ballRotation && element.tagName == ‘DIV’) {
var rotationStyle = ‘rotate(‘ + (body.m_rotation0 * 57.2957795) + ‘deg)’;
element.style.WebkitTransform = rotationStyle;
element.style.MozTransform = rotationStyle;
element.style.OTransform = rotationStyle;
}
}
}

This method gets called with a setInterval periodically. Basically, we apply a delta and a gravity at each time step; see if the mouse is being pressed down (with hooks for touch devices like the iPhone to see if a finger is being pressed down); tell the Box2D World about our gravity and delta and to make an iteration step; and finally use the computed physics values from Box2D to apply CSS3 rotation transforms on our parent DIV and move the element’s CSS top and left values around the screen.

Go to Source

How to Create a Cool Slide Out Panel with CSS3 only

BlogPoster — Sat, 10 Jul 2010 04:30:15 +0000

Many sites have a really cool hidden panel which contains some relevant information and this panel is revealed to us, with a cool animation, when we click on a particular button or hover over it. This has usually been achieved using jQuery. But now as we advent towards the future and CSS3 is becoming a reality, here is a tutorial on how to build an animated slide out panel using only CSS3.

Note: This tutorial uses some advanced css3 techniques which are not yet supported in Firefox. To get the full version, you should see the live demo in a web-kit engine for example Safari and Chrome. You can download the source code here. The final demo can also be seen here.

Step 1: Analyzing the Goal

A slide out panel can be used for various ways. Its uses depend on the requirement of the site. One may use it for a slide out login box or for just listing the subscribing options for the site. We are going to assume a scenario where we want a subscribe option for the viewers on the top right hand corner of the screen:

Now once the viewer hovers over the subscribe button on the top right hand corner, the whole hidden panel will come sliding down with a very smooth animation effect revealing the subscribing options to the visitor.

Step 2: Creating the xHTML skeleton

Now that we know what we want to achieve, lets plan out how the xHTML architecture of the whole layout is going to be. We would basically need two parts of the layout. One part will be the top one, which will be our hidden panel and will contain the subscribing options. The second part will be the main content area for the whole layout. This area will contain everything which will be visible to the viewer. Here is how our code for the website layout is going to be:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">







	
		
			

	rss
" href="#">RSS
				Facebook
				Twitter
				Mail
			
			
			Subscribe!
		
	
	
		
			CSS3 : The Future is Near!
			
Hover over the subscribe button to see the cool slide effect created by using CSS3 purely.Best viewed on Chrome and Safari
Integer eu nunc in eros lobortis blandit. Suspendisse potenti.
Nunc porta tellus nec velit vehicula sodales. Aliquam vel grav

The body is divided into two parts, the slide-out and the
main-container. The slide out division contains the subscribe links along with the subscribe hyperlink button. Note that we have given a class of button to the subscribe hyperlink. The main container contains all the sites main text and information. Both the slide-out division and the main container division are assigned a
page wrap class to keep them aligned centered in the screen.

Step 3: Styling the basic layout

The style-sheet just contains some simple styling of the page. As explained above, there will be one slide-out division, one main container and one page-wrap class. These forms the basic styling elements of our page which give it the look we want.

The CSS for styling the basic layout of the page is as follows:

@import url('reset.css');
body{
	color: #484848;
	background-color: #f7f7f7;
}
.clear {
	clear: both;
}
h1{
	font-size: 58px;
	margin-bottom: 25px;
	height: 68px;
}
h3{
	font-size: 22px;
	margin-bottom: 25px;
}
p{
	text-align: left;
	margin-bottom: 20px;
}
#slide-out {
	background-color: #686868;
	height: 73px;
	color: #fff;
	position: relative ;
	padding-top: 25px;
}
.page-wrap {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	width: 635px;
}
#main-container{
	border-top:thick solid #484848;
	padding-top: 60px;
	text-align: center;
}
.button{
	background-image:url("../images/button.png");
	color:#FFFFFF;
	display:block;
	font-size:18px;
	height:28px;
	padding-top:5px;
	text-align:center;
	text-decoration:none;
	width:105px;
}
#subscribe ul li a{
	background-repeat:no-repeat;
	display:block;
	float:left;
	font-size:24px;
	height:38px;
	margin: 0px 20px;
	padding: 10px 0px 0px 55px;
	color: #d3d3d3;
	text-decoration: none;
	line-height: normal;
}
#subscribe ul li a:hover{
	color: #fff;
}
.rss{
	background-image: url('../images/rss.png');
}
.fb{
	background-image: url('../images/facebook.png');
}
.twitter{
	background-image: url('../images/twitter.png');
}
.mail{
	background-image: url('../images/mail-rss.png');
	margin: 0px;
}

After we have applied the basic styling to our page, it would look somewhat like this

Now that the basic styling of the page is done, we have to set the stage for the panel to hide and show. To achieve that, the first thing we need to do is get the subscribe hyperlink to the bottom right corner of the slide-out division such that it is just peeping out of it. To do this, we have to manipulate the button class in the style-sheet a bit. We are going to make its positioning absolute and then give its right attribute a value of 0px. This will push the subscribe button to the right of the division as shown in the image below.

Now we have to just push it down such that it sticks to the foot of the slide-out division. To do that we just have to assign a
negative 63px value to the bottom attribute.

Now that our subscribe button is at its proper place, all we have to do is push the slide-out div out of the screen. To do this, all we have to do is assign a negative margin equivalent to the height of the slide-out div. To prevent the step down bug in IE6, we also have to assign a line-height value of 0 px to the container of our subscribe links i.e. the subscribe box. To negate the 0 line height on the hyperlink elements, we have to assign a normal line height to them too. After modifying our button class, the slide-out id, the subscribe link elements and the subscribe id styles, they will now look like this:

#slide-out {
	background-color: #686868;
	height: 73px;
	color: #fff;
	position: relative ;
	padding-top: 25px;
	margin-top: -98px;
}
#subscribe{
	line-height: 0px;
}
.button{
	background-image:url("../images/button.png");
	bottom:-63px;
	color:#FFFFFF;
	display:block;
	font-size:18px;
	height:28px;
	padding-top:5px;
	position:absolute;
	right:0;
	text-align:center;
	text-decoration:none;
	width:105px;
	z-index:100;
	line-height: normal;
}
#subscribe ul li a{
	background-repeat:no-repeat;
	display:block;
	float:left;
	font-size:24px;
	height:38px;
	margin: 0px 20px;
	padding: 10px 0px 0px 55px;
	color: #d3d3d3;
	text-decoration: none;
	line-height: normal;
}

We all hate Internet Explorer 6 a lot because we always have to add some extra code especially for it. In this case also we would have to do the same. To make the layout look the same as in the other browsers, we have to add some IE6 specific styling at the top of our html page, in the head section.

Now that the slide-out panel is hidden, our task is to enable the hover event on the subscribe button such that the slide-out div reveals itself from the top of the page. You might ask why we have put the subscribe link in the slide-out panel and pushed it outside into the main container, rather than placing it in the main container itself.

The reason behind it is that, we have assigned a negative margin to the slide-out div and pushed it out of the screen. To make it visible again, we have allotted a hover event on it which makes it margin back to 0. As the slide-out div is out of the screen, so it is a difficult process to hover over it. Now because the subscribe hyperlink is actually inside the slide-out div, hence hovering over the subscribe link also acts as a hover event of the slide-out dive making its top-margin 0 and revealing it.

We can imagine the slide-out div to be a person who is hiding and just his hand is visible to us. When we touch the hand, the person comes out. The hover event which will make the slide-out div pop out of the top of the browser on hovering over the subscribe button will be as follows

#slide-out:hover{
	margin-top: 0px;
}

Step 4: The CSS3 Factor!

We are almost at the end of our tutorial. The hover event is set. The slide-out div reveals itself when we hover over the subscribe button. But the whole process happens without any animation effect. The only thing required now is to spice up the whole thing with a pinch of CSS3.Using the transition property in CSS3 we will make the effect as a smooth animation rather than the abrupt effect it has right now. We will give the transition property in the slide-out id style as we are changing its styling on hover. After modifying the slide-out id style, it will look like this:


#slide-out {
	-moz-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	background-color: #686868;
	height: 73px;
	color: #fff;
	position: relative;
	padding-top: 25px;
	margin-top: -98px;
}

You can change the animation speed by changing the transition speed which is set to 1s at present. This completes our task of enabling a smooth slide out panel from the top of our page without using any javascript.

The Drawbacks

The main drawback of this method at present is that CSS3 transition effect is only supported by webkit browsers like Google’s Chrome, Apple’s Safari and Opera. Even though the slide-out panel on hover would work on other browsers like Firefox and Internet Explorer, but the animation wont work in them. The other drawback is that it wont work on Internet Explorer 6.0 because it doesn’t support the CSS hover event. But there is obviously a solution for this.

Conclusion

This trick just displays how we can use CSS3 to replace some of the major effects provided by JavaScript libraries like jQuery and MooTools. I believe that with time, these basic transition effects will be replaced with CSS3 transition only. It makes the rendering faster and the load time also decreases as the JavaScript libraries plug-ins are not required. There are many ways of creating a slide out panel and JavaScript libraries really take this to a very high level and provide more functionality than just animation effect. There are many tutorials out there which guide you to create a slide out panel like that using jQuery and CSS together. For further reading related to slide out panels using JavaScript, you can refer to these awesome tutorials

Go to Source

WebKit-Specific Style: -webkit-appearance

Facebook-Web-Design — Tue, 29 Jun 2010 23:00:18 +0000

I was recently scoping out the horrid source code of the Google homepage when I noticed the “Google Search” and “I’m Feeling Lucky” buttons had a style definition I hadn’t seen before: -webkit-appearance. The value assigned to the style was “push-button.” They are buttons so that makes sense but I was curious as to the possible values available for that style. What I found was that there are a *ton* and that you can set any HTML element to look like a completely different element.

View Demo

Possible -webkit-appearance Values

checkbox
radio
push-button
square-button
button
button-bevel
listbox
listitem
menulist
menulist-button
menulist-text
menulist-textfield
scrollbarbutton-up
scrollbarbutton-down
scrollbarbutton-left
scrollbarbutton-right
scrollbartrack-horizontal
scrollbartrack-vertical
scrollbarthumb-horizontal
scrollbarthumb-vertical
scrollbargripper-horizontal
scrollbargripper-vertical
slider-horizontal
slider-vertical
sliderthumb-horizontal
sliderthumb-vertical
caret
searchfield
searchfield-decoration
searchfield-results-decoration
searchfield-results-button
searchfield-cancel-button
textfield
textarea

The HTML

My Span Tag

Just a SPAN tag, right? We’ll see about that.

The CSS

.webkit-me { -webkit-appearance:push-button; }

Now my span looks like a button. Weird, huh? It can get worse:

.webkit-me { -webkit-appearance:checkbox; }

That’s right…my SPAN tag now looks like checkbox. Weird.

View Demo

Be sure to check out my demo — I’ve got each -webkit-appearance setting represented. Some elements show no change but some look downright odd!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: WebKit-Specific Style: -webkit-appearance

Go to Source

How to Build a Distance Finder with Google Maps API

BlogPoster — Tue, 29 Jun 2010 16:00:14 +0000

Google maps is a free web mapping service application provided by Google. It offers lots of cool features (showing various map types, plotting points, showing routes, geocoding addresses). You can also add all these features to your website using the Google Maps APIs provided by Google. In this tutorial I will show you how to add some of these features to your site. I will be using the Google Maps Javascript API v3 (the newest version).

What are we going to build?

We’ll make a distance finder. We’ll add a Google map to our site, plot two points on it (the user will be able to choose the addresses for these points), compute the distance between them and show the quickest route between them.

You can see the demo of application here. Also, you can download the source code using this link.

Prerequisites

The first thing you need to do in order to use the API from Google is requesting an API key. You can do this here. It’s easy and free!

Creating the web form for getting the two addresses

We’ll create a simple html form for the user to write the two addresses. We’ll add two input boxes and a button to the form. When the user presses the “Show” button, the map with the two locations will be shown.

Here’s the code for this:


    

    
   address1" id="address1" size="50"/>
    
   
    
   address2" id="address2" size="50"/>

    


   Find the distance between two locations



   First address: Second address:

The ‘initialize’ JavaScript function will be called when pressing the button. The function will show the map. In the next section I’ll show you how.

We also need to add a div tag to our page, where the map will be shown:

We will also need two div tags for showing the distances we will compute:

Showing the map

The first thing we need to do is to find the coordinates (latitude and longitude) for the two addresses. Luckily, Google Maps will help us! Here’s what we have to do:

We’ll use the geocoder object for this. First, we’ll have to create a new geocoder object.

geocoder = new google.maps.Geocoder();

After this, we’ll get the two address values from the form. Like this:

address1 = document.getElementById("address1").value;
address2 = document.getElementById("address2").value;

Then, we’ll use the following code to call the geocode method on the geocoder object. We’ll pass it the addresses one by one and save the results in the variables called location1 and location2 (these will hold the coordinates of the two addresses).

if (geocoder)
{
   geocoder.geocode( { 'address': address1}, function(results, status)
   {
      if (status == google.maps.GeocoderStatus.OK)
      {
         //location of first address (latitude + longitude)
         location1 = results[0].geometry.location;
      } else
      {
         alert("Geocode was not successful for the following reason: " + status);
      }
   });
   geocoder.geocode( { 'address': address2}, function(results, status)
   {
      if (status == google.maps.GeocoderStatus.OK)
      {
         //location of second address (latitude + longitude)
         location2 = results[0].geometry.location;
         // calling the showMap() function to create and show the map
         showMap();
      } else
      {
        alert("Geocode was not successful for the following reason: " + status);
      }
   });
}

You will notice that we’ve called the showMap() function when the coordinates for the second address are retrieved. This function will set the options for the map and show it.

We’ll now compute the coordinates for the center of the map. The center point will be between our two points.

latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);

Next, we’ll show the map. We have to create a new map object and pass it some parameters (set using the mapOptions variable): the zoom level, the center and the type of the map.

var mapOptions =
{
   zoom: 1,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.HYBRID
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

The next thing we’ll do is to show the quickest route between our locations. We’ll use a DirectionsService object from google maps for this. Here’s how the code looks:

directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(
{
   suppressMarkers: true,
   suppressInfoWindows: true
});
directionsDisplay.setMap(map);
var request = {
   origin:location1,
   destination:location2,
   travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status)
{
   if (status == google.maps.DirectionsStatus.OK)
   {
      directionsDisplay.setDirections(response);
      distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
      distance += "The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
      document.getElementById("distance_road").innerHTML = distance;
   }
});

We’ve first created the objects we need. We then set some options for displaying the route, we’ve chosen not to show markers and info boxes (we’ll create our own ones);

suppressMarkers: true,
suppressInfoWindows: true

We’ve created a request object and set the origin and destination for the route and also the travel mode:

var request = {
   origin:location1,
   destination:location2,
   travelMode: google.maps.DirectionsTravelMode.DRIVING
};

We’ve then called the route function and obtained a response from the server. Using this response we’ve plotted the route on the map and written some info (the total distance and aproximative driving time) in one of the divs we’ve created:

directionsDisplay.setDirections(response);
distance = "The distance between the two points on the chosen route is: "+response.routes[0].legs[0].distance.text;
distance += "The aproximative driving time is: "+response.routes[0].legs[0].duration.text;
document.getElementById("distance_road").innerHTML = distance;

We’ll also show a line between our points and compute the distance between them (the distance on a straight line, in kilometers). To show a line we’ll use a Polyline object from google maps and set some options for it (the map it belongs to, the path, the width, the opacity and the color):

var line = new google.maps.Polyline({
   map: map,
   path: [location1, location2],
   strokeWeight: 7,
   strokeOpacity: 0.8,
   strokeColor: "#FFAA00"
});

We’ll now compute the distance between two points using their coordinates and show the result inside the other div tag we’ve created.

var R = 6371;
var dLat = toRad(location2.lat()-location1.lat());
var dLon = toRad(location2.lng()-location1.lng());
var dLat1 = toRad(location1.lat());
var dLat2 = toRad(location2.lat());
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(dLat1) * Math.cos(dLat1) *
        Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;

document.getElementById("distance_direct").innerHTML = "The distance between the two points (in a straight line) is: "+d;

The last thing we’ll do is show a marker and an info window for each location. We’ll create two marker objects (the options we’ll set are: the map it belongs to, the coordinates and a title):

var marker1 = new google.maps.Marker({
   map: map,
   position: location1,
   title: "First location"
});

var marker2 = new google.maps.Marker({
   map: map,
   position: location2,
   title: "Second location"
});

Next, we’ll create variables to hold the texts to print in the info windows, create two info window objects (we’ll add the texts to them using the content option) and we’ll add two event listeners which will show the appropriate info window when the user clicks on the markers:

// create the text to be shown in the infowindows

var text1 = '
'+
  'First location'+
  ''+
  'Coordinates: '+location1+''+
  'Address: '+address1+''+
  ''+
  '';

var text2 = '
'+
  '
Second location'+
  ''+
  'Coordinates: '+location2+''+
  'Address: '+address2+''+
  ''+
  '';

// create info boxes for the two markers
var infowindow1 = new google.maps.InfoWindow({
   content: text1
});
var infowindow2 = new google.maps.InfoWindow({
   content: text2
});

// add action events so the info windows will be shown when the marker is clicked
google.maps.event.addListener(marker1, 'click', function() {
   infowindow1.open(map,marker1);
});

google.maps.event.addListener(marker2, 'click', function() {
   infowindow2.open(map,marker2);
});

And we’re done! We now have a distance finder! Let me know if you have any questions!

Go to Source

Quick Tip: Practical CSS Shapes

Facebook-Web-Design — Fri, 14 May 2010 02:18:43 +0000

A common design technique lately is to create a fold effect, where it appears as if a heading is wrapping behind its container. This is generally achieved through the use of tiny images; however, with CSS, we can mimic this effect quite easily. I’ll show you how in four minutes.

Subscribe to our YouTube page to watch all of the video tutorials!

Rather watch on Screenr.com?

Final HTML





	
	CSS Shapes

	



	 

		 My Heading

Final CSS

#container {
	background: #666;
	margin: auto;
	width: 500px;
	height: 700px;
	padding-top: 30px;
	font-family: helvetica, arial, sans-serif;
	}

h1 {
	 background: #e3e3e3;
	 background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
	 background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
	 padding: 10px 20px;
	 margin-left: -20px;
	 margin-top: 0;
	 position: relative;
	 width: 70%;

	-moz-box-shadow: 1px 1px 3px #292929;
	-webkit-box-shadow: 1px 1px 3px #292929;
       box-shadow: 1px 1px 3px #292929;

	color: #454545;
	text-shadow: 0 1px 0 white;
}

.arrow {
	 width: 0; height: 0;
	 line-height: 0;
	 border-left: 20px solid transparent;
	 border-top: 10px solid #c8c8c8;
	 top: 104%;
	 left: 0;
	 position: absolute;
}

Go to Source

Yoast: Google & Microformats: Drive More Traffic

Facebook-Web-Design — Sat, 27 Feb 2010 12:51:38 +0000

Anyone that has spent time trying to improve their click through rates (
CTR ) from search engine results pages (
SERP s) will tell you that Google algorithmically picks the snippet displayed for a given page; it’s not something you can always control. Unfortunately, Google doesn’t always display the snippet that will give you the best conversion rate.

However, the use of microformats, a set of agreed upon
HTML conventions used to describe content, can give you more control of the snippets displayed in Google
SERP s. Once your site is properly using rich snippets, you will see them also appear in your Google custom search and Google site search results, so this technique is definitely worth exploring if you use those tools as well.

The changes are easy to implement for WordPress, Magento and other software, let’s take a look at some use cases based on hReview, hCard, hProduct and XFN:

Businesses & Organizations:

Property	Description
name (fn/org)	The name of the business. If you use microformats, you should use both fn and org, and ensure that these have the same value.
url	Link to a web page on the business’s site.
address (adr)	The location of the business. Can contain the sub properties street address, locality, region, postal-code, and country-name.
tel	The telephone number of the business or organization.
geo	Specifies the geographical coordinates of the location. Includes two elements: latitude and longitude. Optional.

Could be marked up as follows:

 class="vcard">  class="fn org">L'Amourita Pizza> Located at  class="adr">  class="street-address">123 Main St>,  class="locality">Albuquerque>,  class="region">NM>. >  class="geo">  class="latitude">  class="value-title" title="37.774929" /> >  class="longitude">  class="value-title" title="-122.419416" /> > > Phone:  class="tel">206-555-1234>  href="http://pizza.example.com/" class="url">http://pizza.example.com> >

Learn more about the business and organization markup at webmaster central.

Products:

Property	Description
brand	The brand of the product for example, ACME.
category	The product category for example, “Books—Fiction”, “Heavy Objects”, or “Cars”.
description	Product description
name (fn)	Product name
price	Floating point number. Can use currency format.
photo	URL of product photo
url	URL of product page

Could be marked up as follows:

 class="hproduct"> Brand:  class="brand">ACME>  class="category">Heavy objects>  class="fn">Large all-purpose anvil> On sale for  class="price">$99.95>.  class="description">If you need an object to drop from a height, the classic A23859 anvil from ACME is the way to go.>  href="http://anvil.example.com" class="url">Anvil details page>
>

Becomes:

Learn more about the product markup at webmaster central.

People:

Property	Description
name (fn)	Name
nickname	Nickname
photo	An image link
title	The person’s title (for example, Financial Manager)
role	The person’s role (for example, Accountant)
url	Link to a web page, such as the person’s home page
affiliation (org)	The name of an organization with which the person is associated (for example, an employer). If fn and org have the exact same value, Google will interpret the information as referring to a business or organization, not a person.
friend	Identifies a social relationship between the person described and another person.
contact	Identifies a social relationship between the person described and another person.
acquaintance	Identifies a social relationship between the person described and another person.
address (adr)	The location of the person. Can have the sub properties street address, city, region, postal-code, and country-name.

Could be marked up as:

 class="vcard"> My name is  class="fn">Bob Smith>, but people call me  class="nickname">Smithy>. Here is my home page:  href="http://www.example.com" class="url">www.example.com>. I live in  class="adr">  class="locality">Albuquerque>,  class="region">NM> > and work as an  class="title">engineer> at  class="org">ACME Corp>. My friends:  href="http://darryl-blog.example.com" rel="friend">Darryl>,  href="http://edna-blog.example.com" rel="friend">Edna>
>

Becomes:

Learn more about markup for people at webmaster central.

Reviews:

Property	Description
itemreviewed (item)	The item being reviewed. In microformats, can contain the element name (fn).
rating	A numerical quality rating for the item (for example, 4). You can indicate a rating scale by specifying best (default: 5) and worst (default: 1). More information about review ratings.
reviewer	The author of the review.
dtreviewed	The date that the item was reviewed in ISO date format.
description	The body of the review.
summary	A short summary of the review.

Could be marked up as:

 class="hreview">  class="item">  class="fn">L’Amourita Pizza> > Reviewed by  class="reviewer">Ulysses Grant> on  class="dtreviewed"> Jan 6 class="value-title" title="2009-01-06" /> >.  class="summary">Delicious, tasty pizza on Eastlake!>  class="description">L'Amourita serves up traditional wood-fired Neapolitan-style pizza, brought to your table promptly and without fuss. An ideal neighborhood pizza joint.> Rating:  class="rating">4.5>
>

Learn more about markup for reviews at webmaster central.

Interested in getting started? Well there’s no reason not to start using microformats as much as possible already; semantic markup is always good for search engine optimization:

Update your markup (make sure it’s valid) and use the Quix bookmarklet to check your page, by entering ‘snippet’ to submit the current page to Google Rich Snippets test tool.
Getting the “Insufficient data to generate the preview” error? Then make sure that there are no errors in the markup (go back to step one) or check that you are using enough data to generate the snippet preview, so check the microformat syntax again.
Finally, let Google know that you’re an early adopter.

So who’s using microformats in this and other ways? Brands like Mashable, Yahoo!, Yelp, Technorati, SearchMonkey, LinkedIn, Urbanspoon and many more. If you’re interested in digging deeper into the future of microformats as they relate to web analytics as well, Dennis Mortensen from Yahoo! has a great post on what the future may hold.

Google & Microformats: Drive More Traffic is a post from Joost de Valk‘s Yoast – Tweaking Websites.A good WordPress blog needs good hosting, you don’t want your blog to be slow, or, even worse, down, do you? Check out my thoughts on WordPress hosting!

Go to Source

Sweet AJAX Tabs With jQuery 1.4 & CSS3

Facebook-Web-Design — Wed, 03 Feb 2010 04:30:07 +0000

Organizing the content of a page in a both intuitive and eye-catching manner, is a must in modern web design. One principle that has been around for some time is dividing text into tabs. This allows you to squeeze much more content in a seemingly limited space and provide a structured way of accessing it.

Today we are making an AJAX-powered tab page with CSS3 and the newly released version 1.4 of jQuery, so be sure to download the zip archive from the button above and continue with step one.

Step 1 – XHTML

As usual, we start off with the XHTML markup.

demo.html

If you think the markup looks too simple to be true, you are right. As you can see, we are missing the code for the tabs, because it is inserted dynamically by jQuery on page load. This makes it extremely easy to add new tabs as you only need to add them on the JavaScript side (more on that in a moment).

demo.html


	Tab two

This is the markup that is inserted by jQuery for each tab. It consists of a LI element positioned inside of the .tabContainer unordered list above, and contains a hyperlink with two spans. Those show the left and the right part of the background image and thus enable the tabs to stretch and give room for the text label inside.

Also notice the green class of the link – it determines the background, text color and hover state of the tab, as you will see in the next step of this tutorial.

Sweet AJAX-ed Tabs With jQuery 1.4 & CSS3

Step 2 – CSS

With the markup in place, we can take a more detailed look at the styling of the tab page.

styles.css – Part 1

.tabContainer{
	/* The UL */
	float:right;
	padding-right:13px;
}

#contentHolder{
	background-color:#EEEEEE;
	border:2px solid #FFFFFF;
	height:300px;
	margin:20px;

	color:#444444;
	padding:15px;
}

#tabContent{
	background-color:#333;
	border:1px solid #444;
	margin-top:-15px;
	width:100%;
}

#tabContent, .tabContainer li a,#contentHolder{
	-webkit-box-shadow:0 0 2px black;
	-moz-box-shadow:0 0 2px black;
	box-shadow:0 0 2px black;
}

.tabContainer li{
	/* This will arrange the LI-s next to each other */
	display:inline;
}

.tabContainer li a,.tabContainer li a:visited{
	/* Styling the hyperlinks of the tabs as colorful buttons */

	float:left;
	font-size:18px;

	/* display:block allows for additinal CSS rules to take effect, such as paddings: */
	display:block;

	padding:7px 16px 1px;
	margin:4px 5px;
	height:29px;

	/* Giving positioning */
	position:relative;

	/* CSS3 text-shadow */
	text-shadow:1px 1px 1px #CCCCCC;
}

Here we use a number of CSS3 rules that add up to the overall feel of the page. First is the box-shadow property, which adds a shadow below the tabs, the #tabContent div and the #contentHolder.

After this we have the text-shadow property, which adds a light-colored shadow (more of a outer glow in this case), which adds an inset feel to the text of the tabs.

styles.css – Part 2

#overLine{
	/* The line above the active button. */
	position:absolute;

	height:1px;
	background-color:white;
	width:90px;

	float:left;
	left:1px;
	top:-5px;
	overflow:hidden;
}

#main{
	margin:0 auto;
	position:relative;
	width:700px;
}

ul .left{
	/* The left span in the hyperlink */

	height:37px;
	left:0;
	position:absolute;
	top:0;
	width:10px;
}

ul .right{
	/* The right span in the hyperlink */

	height:37px;
	right:0;
	position:absolute;
	top:0;
	width:10px;
}

/* Styling the colors individually: */

ul a.green{	background:url(img/green_mid.png) repeat-x top center;	color:#24570f;}
ul a.green span.left{ background:url(img/green_left.png) no-repeat left top;}
ul a.green span.right{ background:url(img/green_right.png) no-repeat right top;}

/* .. Analogical styles for the red, blue and orange color .. */

/* The hover states: */
ul a:hover{	background-position:bottom center; text-decoration:none;}
ul a:hover span.left{ background-position:left bottom;}
ul a:hover span.right{ background-position:right bottom;}

.preloader{
	display:block;
	margin:120px auto;
}

In the second part of the code, you can see that we define different backgrounds for the hyperlink and the left and right spans, depending on the color class that is assigned. This way we can successfully change a number of CSS styles and as a result have a completely different design of the tab, by just setting a different class name for the hyperlink.

The Tabs

Step 3 – jQuery

This is where the magic happens. First we need to include the jQuery library in the page:

demo.html

We include the latest version of jQuery from Google’s CDN and immediately after it, we add our own script.js file, which contains all of our scripts.

Here is a detailed explanation of what exactly jQuery does:

The page is opened in a visitor’s browser and the jQuery library is downloaded from Google’s Content Depository Network;
$(document).ready() is queued for execution and the function that is provided as a parameter is run when the DOM has finished loading;
The Tabs object is looped with the $.each() method and individual

elements are created and appended to the .tabContainer

Event listeners for the click event on the tabs are set up.

You can view the code below:

script.js – Part 1

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	/* Defining an array with the tab text and AJAX pages: */

	var Tabs = {
		'Tab one'	: 'pages/page1.html',
		'Tab two'	: 'pages/page2.html',
		'Tab three'	: 'pages/page3.html',
		'Tab four'	: 'pages/page4.html'
	}

	/* The available colors for the tabs: */
	var colors = ['blue','green','red','orange'];

 	/* The colors of the line above the tab when it is active: */
	var topLineColor = {
		blue:'lightblue',
		green:'lightgreen',
		red:'red',
		orange:'orange'
	}

	/* Looping through the Tabs object: */
	var z=0;
	$.each(Tabs,function(i,j){
		/* Sequentially creating the tabs and assigning a color from the array: */

		var tmp = $(''+i+' ');

		/* Setting the page data for each hyperlink: */

		tmp.find('a').data('page',j);

		/* Adding the tab to the UL container: */
		$('ul.tabContainer').append(tmp);
	})

The source above is the first part of script.js, which you can find in the download archive. You can add your own tabs on the page by inserting a new property to the Tabs object. The left part holds the name of the tab in single quotes, and the right part (after the semicolon) contains the AJAX URL which is going to be fetched and displayed in the #contentHolder div.

In the following second part of the script, you’ll see jQuery 1.4 in action, as we create a new div element (that acts as the line above the active tab) and pass an object with the ID and CSS properties instead of setting them separately with the .attr() and .css() methods.

script.js – Part 2

	/* Caching the tabs into a variable for better performance: */
	var the_tabs = $('.tab');

	the_tabs.click(function(e){

		/* "this" points to the clicked tab hyperlink: */
		var element = $(this);

 		/* If it is currently active, return false and exit: */
		if(element.find('#overLine').length) return false;

 		/* Detecting the color of the tab (it was added to the class attribute in the loop above): */

		var bg = element.attr('class').replace('tab ','');

 		/* Removing the line: */
		$('#overLine').remove();

 		/* Creating a new div element with jQuery 1.4 by passing an additional object parameter: */

		$('',{
			id:'overLine',
			css:{
				display:'none',
				width:element.outerWidth()-2,
				background:topLineColor[bg] || 'white'
			}}).appendTo(element).fadeIn('slow');

 		/* Checking whether the AJAX fetched page has been cached: */

		if(!element.data('cache'))
		{
			/* If no cache is present, show the gif preloader and run an AJAX request: */
			$('#contentHolder').html('');

 			$.get(element.data('page'),function(msg){
				$('#contentHolder').html(msg);

 				/* After page was received, add it to the cache for the current hyperlink: */
				element.data('cache',msg);
			});
		}
		else $('#contentHolder').html(element.data('cache'));

 		e.preventDefault();
	})

	/* Emulating a click on the first tab, so that the content area is not empty: */
	the_tabs.eq(0).click();

});

Notice the use of the jQuery data() method throughout the code. It assigns arbitrary data to an element by calling the method with two parameters $(‘#selector’).data(‘label’,”String Data”). This assigns the string “String Data” to the element and we can later access it (or check if it has been set) by calling the data method without the second parameter.

This way we set up a simple caching system for the AJAX requests. The first time an AJAX call is made, the text of the response (held in the msg variable) is stored at data(‘cache’). On consecutive calls we check for this cache variable and return it instead of firing a new request. This way we remove unnecessary server load and improve the responsiveness of the tabs.

Active Tab

With this our sweet AJAX-ed tabs are complete!

Conclusion

Today we created AJAX – enabled colorful tabs with jQuery 1.4 and CSS3. We also implemented a simple caching mechanism using the data() method. The source code is easily modifiable and adding new tabs is as easy as adding new properties to the Tabs object.

If you liked this tutorial, be sure to follow us on twitter for early previews and interesting links from the world of web development.

What do you think? How would you improve this example?

Go to Source

AJAX-enabled Sticky Notes With PHP & jQuery

Facebook-Web-Design — Tue, 19 Jan 2010 06:28:17 +0000

Today we are making an AJAX-enabled Sticky Note management system. It will give visitors the ability to create notes with a live preview, and move them around on the screen. Every movement is going to be sent to the back-end via AJAX and saved in the database.

We are using version 1.4 of jQuery and the fancybox plugin (you can also check our CSS3 Lightbox Gallery Tutorial, where we also used fancybox).

You can download the example files and keep the demo site open in a tab so that it is easier to follow the steps of the tutorial.

Step 1 – XHTML

The first step is to create the necessary XHTML structure. The markup in the main demonstration file – demo.php is pretty straightforward, as you can see for yourself from the code below.

demo.php


Add a note

It contains the main div, which holds all the notes and limits their movement during the dragging process. The rest is generated dynamically by PHP after running a SELECT query against the database, and after storing the result in the $notes variable as you will see in the next step.

If you click the “Add a note” button on the demonstration site, you will see that a form with a live preview pops up. This functionality is provided by the fancybox, which fetches add_note.html (which contains the form) and shows it within a pop-up.

add_note.html

Add a new note








 


Text of the note


Your name


Color 





Submit

In the form you can fill in the text of the note, your name and choose a color. Providing a way for users to see how their note will appear in the page in real time is a useful addition which serves another practical purpose – when clicking the submit button and the lightbox window closes, the preview note is copied to the main div, which saves us from writing additional code.

Note Creation Form With Live Preview

Step 2 – PHP

As mentioned earlier, PHP fills the $notes variable by running a query againts the database and outputs it on the page. Lets see how this works.

demo.php

$query = mysql_query("SELECT * FROM notes ORDER BY id DESC");

$notes = '';
$left='';
$top='';
$zindex='';
while($row=mysql_fetch_assoc($query))
{
	// The xyz column holds the position and z-index in the form 200x100x10:
	list($left,$top,$zindex) = explode('x',$row['xyz']);
	$notes.= '
		
		'.htmlspecialchars($row['text']).'
		'.htmlspecialchars($row['name']).'
		'.$row['id'].'
	';
}

The notes table not only stores the text and the author of the note, but it also has a dedicated column for the x and y coordinates, as well for the z-index (or stacking order). Those are stored in the xyz field of the table, which is updated by AJAX.

After the visitor clicks on the “Add a note” button, fancybox grabs add_note.html (which was covered in step one) and displays the live preview form. When it is submitted, the data is sent via AJAX to post.php, given below.

post.php

// Escaping the input data:
$author = mysql_real_escape_string(strip_tags($_POST['author']));
$body = mysql_real_escape_string(strip_tags($_POST['body']));
$color = mysql_real_escape_string($_POST['color']);
$zindex = (int)$_POST['zindex'];

/* Inserting a new record in the notes DB: */
mysql_query('	INSERT INTO notes (text,name,color,xyz)
VALUES ("'.$body.'","'.$author.'","'.$color.'","0x0x'.$zindex.'")');

if(mysql_affected_rows($link)==1)
{
	// Return the id of the inserted row:
	echo mysql_insert_id($link);
}
else echo '0';

After escaping all the input data and inserting it in the table, the script checks whether there were any rows affected after the insert query. If mysql_affected_rows returns 1, this would mean that the insert was successful and the automatically assigned auto_increment ID is outputted.

AJAX is also used to save the positions of the individual notes after the end of each movement. The JavaScript code that actually requests these AJAX calls is presented in step 4 of this tutorial. The PHP code is included below:

update_position.php

// Validating the input data:
if(!is_numeric($_GET['id']) || !is_numeric($_GET['x']) || !is_numeric($_GET['y']) || !is_numeric($_GET['z']))
die("0");

// Escaping:
$id = (int)$_GET['id'];
$x = (int)$_GET['x'];
$y = (int)$_GET['y'];
$z = (int)$_GET['z'];

// Saving the position and z-index of the note:
mysql_query("UPDATE notes SET xyz='".$x."x".$y."x".$z."' WHERE id=".$id);

echo "1";

After making sure that the input data is valid, the script updates the xyz field of the row for the note in question and prints 1 on success.

Lets continue with step three.

Step 3 – CSS

All the markup is in place, so it is time to throw in some fancy styling. The styles are defined in styles.css. I divided the file in three parts.

styles.css – Part 1

.note{
	height:150px;
	padding:10px;
	width:150px;
	position:absolute;
	overflow:hidden;
	cursor:move;

	font-family:Trebuchet MS,Tahoma,Myriad Pro,Arial,Verdana,sans-serif;
	font-size:22px;

	/* Adding a CSS3 shadow below the note, in the browsers which support it: */
	-moz-box-shadow:2px 2px 0 #DDDDDD;
	-webkit-box-shadow:2px 2px 0 #DDDDDD;
	box-shadow:2px 2px 0 #DDDDDD;
}

#fancy_ajax .note{ cursor:default; }

/* Three styles for the notes: */

.yellow{
	background-color:#FDFB8C;
	border:1px solid #DEDC65;
}

.blue{
	background-color:#A6E3FC;
	border:1px solid #75C5E7;
}

.green{
	background-color:#A5F88B;
	border:1px solid #98E775;
}

/* Each note has a data span, which holds its ID */
span.data{ display:none; }

/* The "Add a note" button: */
#addButton{
	position:absolute;
	top:-70px;
	left:0;
}

In the first part we define the appearance of the notes and provide three color schemes – yellow, blue and green. Those color classes are also used in the live preview form when creating a note.

Every note has special span element with a class name of data, which holds the internal ID it is assigned in the database. This ID is used by jQuery and returned with the AJAX calls back to the server in order to update the note’s position and z-index. We are hiding this span from view with display:none.

Three Styles Of Notes

styles.css – Part 2

/* Green button class: */
a.green-button,a.green-button:visited{
	color:black;
	display:block;
	font-size:10px;
	font-weight:bold;
	height:15px;
	padding:6px 5px 4px;
	text-align:center;
	width:60px;

	text-shadow:1px 1px 1px #DDDDDD;
	background:url(img/button_green.png) no-repeat left top;
}

a.green-button:hover{
	text-decoration:none;
	background-position:left bottom;
}

.author{
	/* The author name on the note: */
	bottom:10px;
	color:#666666;
	font-family:Arial,Verdana,sans-serif;
	font-size:12px;
	position:absolute;
	right:10px;
}

#main{
	/* Contains all the notes and limits their movement: */
	margin:0 auto;
	position:relative;
	width:980px;
	height:500px;
	z-index:10;
	background:url(img/add_a_note_help.gif) no-repeat left top;
}

The second part of the file defines the green button class, complete with a hover state and a CSS3 text-shadow. These are a few tiny details that may not look like much, but leave a good overall impression to the user.

styles.css – Part 3

h3.popupTitle{
	border-bottom:1px solid #DDDDDD;
	color:#666666;
	font-size:24px;
	font-weight:normal;
	padding:0 0 5px;
}

#noteData{
	/* The input form in the pop-up: */
	height:200px;
	margin:30px 0 0 200px;
	width:350px;
}

.note-form label{
	display:block;
	font-size:10px;
	font-weight:bold;
	letter-spacing:1px;
	text-transform:uppercase;
	padding-bottom:3px;
}

.note-form textarea, .note-form input[type=text]{
	background-color:#FCFCFC;
	border:1px solid #AAAAAA;
	font-family:Arial,Verdana,sans-serif;
	font-size:16px;
	height:60px;
	padding:5px;
	width:300px;
	margin-bottom:10px;
}

.note-form input[type=text]{	height:auto; }

.color{
	/* The color swatches in the form: */
	cursor:pointer;
	float:left;
	height:10px;
	margin:0 5px 0 0;
	width:10px;
}

#note-submit{	margin:20px auto; }

In the last part of styles.css, we add CSS rules for the live preview form, staring from the H3 heading and finishing with the color swatches on the bottom.

Step 4 – jQuery

jQuery manages the front-end and all of the AJAX requests. In order to be able to use the library, we first need to include a few lines to the head section of demo.php:

demo.php

We include jQuery and jQuery UI from Google’s content repository network, as well as the rest of the css and js files needed for this tutorial. Now lets dig a bit deeper into our jQuery script.

script.js – Part 1

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	var tmp;

	$('.note').each(function(){
		/* Finding the biggest z-index value of the notes */

		tmp = $(this).css('z-index');
		if(tmp>zIndex) zIndex = tmp;
	})

	/* A helper function for converting a set of elements to draggables: */
	make_draggable($('.note'));

	/* Configuring the fancybox plugin for the "Add a note" button: */
	$("#addButton").fancybox({
		'zoomSpeedIn'		: 600,
		'zoomSpeedOut'		: 500,
		'easingIn'			: 'easeOutBack',
		'easingOut'			: 'easeInBack',
		'hideOnContentClick': false,
		'padding'			: 15
	});

	/* Listening for keyup events on fields of the "Add a note" form: */
	$('.pr-body,.pr-author').live('keyup',function(e){

		if(!this.preview)
			this.preview=$('#previewNote');

		/* Setting the text of the preview to the contents of the input field, and stripping all the HTML tags: */
		this.preview.find($(this).attr('class').replace('pr-','.')).html($(this).val().replace(/<[^>]+>/ig,''));
	});

	/* Changing the color of the preview note: */
	$('.color').live('click',function(){

		$('#previewNote').removeClass('yellow green blue').addClass($(this).attr('class').replace('color',''));
	});

First the script finds the maximum z-index value, so that it can cache it into the zIndex variable and increment it before assigning it to the notes in the beginning of every drag movement. This way, when you start dragging a note, it is moved to the top of the stack.

Another interesting moment is that we use the jQuery live() method to listen for events, instead of the regular bind(). This is so, because the page elements we are listening for events on, are created only when the form is shown and, once defined, live() event listeners are active on all elements yet to be created.

script.js – Part 2

	/* The submit button: */
	$('#note-submit').live('click',function(e){

		if($('.pr-body').val().length<4)
		{
			alert("The note text is too short!")
			return false;
		}

		if($('.pr-author').val().length<1)
		{
			alert("You haven't entered your name!")
			return false;
		}

		$(this).replaceWith('');

		var data = {
			'zindex'	: ++zIndex,
			'body'		: $('.pr-body').val(),
			'author'		: $('.pr-author').val(),
			'color'		: $.trim($('#previewNote').attr('class').replace('note',''))
		};

		/* Sending an AJAX POST request: */
		$.post('ajax/post.php',data,function(msg){

			if(parseInt(msg))
			{
				/* msg contains the ID of the note, assigned by MySQL's auto increment: */
				var tmp = $('#previewNote').clone();

				tmp.find('span.data').text(msg).end().css({'z-index':zIndex,top:0,left:0});
				tmp.appendTo($('#main'));

				make_draggable(tmp)
			}

			$("#addButton").fancybox.close();
		});

		e.preventDefault();
	})
});

Here we are listening for the click event on the form submit link. Once clicked, the data is validated and sent with the $.post method. If the insert was successful, the lightbox is hidden and the newly created note is added to the page. Notice that we are using the make_draggable function, which is included below.

The Note Position And Stacking Are Saved With AJAX

script.js – Part 3

var zIndex = 0;

function make_draggable(elements)
{
	/* Elements is a jquery object: */
	elements.draggable({
		containment:'parent',
		start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
		stop:function(e,ui){

			/* Sending the z-index and positon of the note to update_position.php via AJAX GET: */
			$.get('ajax/update_position.php',{
				x		: ui.position.left,
				y		: ui.position.top,
				z		: zIndex,
				id	: parseInt(ui.helper.find('span.data').html())
			});
		}
	});
}

In the last part of script.js, we have the make_draggable function. It turns a set of jQuery elements passed as a parameter into draggable objects. I’ve moved this functionality into a separate function because we need to create draggables in twice – once on initial page load, and once when we add a new note to the page.

Step 5 – MySQL

If you plan on running and building upon this demo, you’ll need to set up a working version on your server. You’ll need to execute the code from table.sql of the download archive in phpMyAdmin and fill in your database credentials in connect.php.

With this our AJAX-ed Sticky Note system is complete!

Conclusion

Today we created an Ajax Enabled Sticky Note Management System and demonstrated how we could use one of the readily available plug-ins for the jQuery library to build a dynamic interface, complete with a live preview.

What do you think? How would you improve this code?

Go to Source

Using jQuery to Style Design Elements: 20 Impressive Plugins

Facebook-Web-Design — Sun, 10 Jan 2010 13:21:27 +0000

I know we covered different jQuery posts here but you guys don’t stop asking for more. So here we are again covering more jQuery Plugins doing what: Styling Design Elements. So today we need jQuery solutions that are a little more specific. Here are 20 more handy jQuery plugins that have made websites much sleeker and more interesting.

1. jQuery Sequential List

This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list. The second example in this tutorial will show you how to add a comment counter to a comment list using jQuery’s prepend feature. The code is very simple, the following example shows how you can add a counter number to a comment list.

To get this markup:


	 #1
		...
	
	 #2
		...
	
	 #3
		...

Check out the demo here

2. jQuery Corners

This jQuery plugin will simple allow you to create rounded corner for your design elements including forms or anchor links without using images or obstructive markup.

Once jQuery and jQuery.corners scripts are loaded, rounding corners is easy.


  Simple Example

Check out the demo here

3. jQuery Checkbox

This jQuery plugin will simple skin checkboxes and radio buttons in a nice way.

Check out the demo here

4. Styling Buttons and Toolbars with the jQuery UI CSS Framework

This tutorial demonstrates how to incorporate the power of jQuery UI CSS framework classes in a custom widget to create and style buttons and toolbars.

Creating a basic button is very simple with the jQuery UI CSS framework and styling it is really easy. All you need to do is add the default “clickable” state by assigning the class ui-state-default. We also want these to have rounded corners, so we added the optional ui-corner-all framework class which adds CSS3 corner-radius properties to all corners without the need for any images or extra markup.


Link

Check out the demo here

5. Create A Colorful Sitemap With jQuery

In this article, Chris Coyier teaches us how to build a visually interesting sitemap that makes the hierarchy clearer through the use of color. The idea here is, when the mouse cursor hovers over a list, that list will brighten up a bit and fade to a unique color. When the mouse cursor is removed, the list will return to its original color.

Check out the demo here

6. Style Author Comments Differently with jQuery

Now you want to apply the custom styling applied to comments left by the author on blogger. The script will loop through all of the comments on the page, if the member link on the current comment matches the member link in the profile page on your blog, then it must be an author comment. The script will then apply an additional class to the comment, allowing you to style it separately.

Check out the demo here

7. asmSelect – Alternative Select Multiple

A progressive enhancement to form elements. Also, it doesn’t require user to Ctrl-Click or Shift-Click multiple elements. Instead users of your form can add or remove elements individually, without risk of losing those that have already been selected.

Check out the demo here

8. Flexgrid

A lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source to load the content. Features include: Resizable columns, Resizable height, Sortable column headers, Cool theme, Can convert an ordinary table, Paging, Show/hide columns and more.

Check out the demo here

9. MaxLength

This plugin makes it easy to apply a "maxlength" attribute to custom elements for example a . It also gives you the possibility to add a nice character counter under the element that shows the user how many chars he/she has left before the maxlength is reached, and/or an alert message.</p> <p>To use this on a simple text area, all you have to do is:</p> <pre> <script type="text/javascript"> $(document).ready(function(){ $('#textarea_1_1').maxlength(); }); </script> </pre> <p><a href="http://www.anon-design.se/demo/maxlength/">Check out the demo here</a></p> <h3>10. <a href="http://www.oakcitygraphics.com/jquery/clockpick/trunk/ClockPick.cfm">ClockPick</a></h3> <p><a href="http://www.oakcitygraphics.com/jquery/clockpick/trunk/ClockPick.cfm"></a></p> <p>ClockPick is a timepicker plugin, enabling users to enter a time value into a form field. Using a unique popup div UI, ClockPick gets the job done in about 1/5 the time it takes to enter a time value using a traditional select menu UI.</p> <p><a href="http://www.oakcitygraphics.com/jquery/clockpick/trunk/ClockPick.cfm">Check out the demo here</a></p> <h3>11. <a href="http://pupunzi.wordpress.com/2009/01/18/mbmenu/">jQuery (mb)Menu 1.5</a></h3> <p><a href="http://pupunzi.wordpress.com/2009/01/18/mbmenu/"></a></p> <p>This is a powerful jQuery component to build easily a multilevel tree menu or a contextual menu (right click) in an intuitive way! You can add as many submenus as you want; if your submenu or menu is not declared in the page, the component’ll get it via ajax calling the template page with the id of the menu you need (the value of “menu” attribute) the ajax page should return a well formatted code as the example below for the menu voices code.</p> <p><a href="http://www.open-lab.com/mb.ideas/index.html#mbMenu">Check out the demo here</a></p> <h3>12. <a href="http://pupunzi.wordpress.com/2009/02/01/mbcontainersplus/">(mb)ContainersPlus 1.0</a></h3> <p><a href="http://pupunzi.wordpress.com/2009/02/01/mbcontainersplus/"></a></p> <p>This is a useful plug in to build full featured and full skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable. The container can be set to draggable and resizable by adding “draggable” and/or “resizable” to the class attribute; there is a custom attribute called buttons that accept: i [iconize], m [minimize], c [close] as value to add buttons to the button-bar. You can also add a left top corner icon by adding the attribute “icon” with the icon path as value.</p> <p><a href="http://www.open-lab.com/mb.ideas/index.html#mbContainerPlus">Check out the demo here</a></p> <h3>13. <a href="http://www.ollicle.com/2007/jun/03/jquery_lineheight_flexible.html">Auto line-height for flexible layouts</a></h3> <p><a href="http://www.ollicle.com/2007/jun/03/jquery_lineheight_flexible.html"></a></p> <p>Adjusts the line-height of a container (such as a div) in proportion to it’s width, relative to the font size.</p> <p><a href="http://www.ollicle.com/eg/jquery/autolineheight/">Check out the demo here</a></p> <h3>14. <a href="http://layout.jquery-dev.net/">UI.Layout</a></h3> <p><a href="http://plugins.jquery.com/project/layout"></a></p> <p>This plugin was inspired by the <a href="http://extjs.com/deploy/dev/examples/layout/complex.html">extJS border-layout</a>, and recreates that functionality as a jQuery plug-in. The UI.Layout plug-in can create any UI look you want – from simple headers or sidebars, to a complex application with toolbars, menus, help-panels, status bars, sub-forms, etc.</p> <p><a href="http://layout.jquery-dev.net/demos/complex.html">Check out the demo here</a></p> <h3>15. <a href="http://franca.exofire.net/jq/colorize">Colorize </a></h3> <p><a href="http://franca.exofire.net/jq/colorize"></a></p> <p>Colorize is a jQuery plugin to add background color to alternate table rows, highlight a row/column on mouse over, and colorize a row/column when you click your mouse button over it. You can colorize as many table rows as you want. A repeat mouse click reverts the row to the original background color.</p> <p><a href="http://franca.exofire.net/js/demo_plugin_2.html">Check out the demo here</a></p> <h3>16. <a href="http://www.memorycraft.jp/project/jquery/j3ssw/index.html">jQuery 3 State Switch Plugin</a></h3> <p><a href="http://www.memorycraft.jp/project/jquery/j3ssw/index.html"></a></p> <p>jQuery 3 State Switch Plugin(J3SSW) is a jQuery Plugin that expresses the selection and some states of list item using radio button and checkbox at the same time. The applications of J3SSW includes some interfaces for sort key or filter key of any search results.</p> <p><a href="http://www.memorycraft.jp/project/jquery/j3ssw/index.html">Check out the demo here</a></p> <h3>17. <a href="http://plugins.jquery.com/project/ahover">Animated Hover</a></h3> <p><a href="http://plugins.jquery.com/project/ahover"></a></p> <p>Animated Hover provides animated transitions between hovered items for any jQuery project. Requires jQuery 1.2+ and Dimensions</p> <p><a href="http://media.brianbeck.com/shared/javascript/jquery-ahover/demo/demo.html">Check out the demo here</a></p> <h3>18. <a href="http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/">jQuery Feed Menu</a></h3> <p><a href="http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/"></a></p> <p>It’s nice to offer users an alternate way to get at your feeds, here is an easy and standard way of offering your feeds via a nice, compact menu, just like in the location bar, but on your site.</p> <p><a href="http://www.komodomedia.com/blog/2008/10/jquery-feed-menus/">Check out the demo here</a></p> <h3>19. <a href="http://www.noupe.com/css/jquery-hover-sub-tag-cloud.html">jquery Hover Sub Tag Cloud</a></h3> <p><a href="http://www.noupe.com/css/jquery-hover-sub-tag-cloud.html"></a></p> <p>Here is a new way to create your tag cloud Using jQuery and reduce its size, so my demo will introduce “Hover Sub Tags” under each main Tag, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. A Sub Tag Cloud will appear when hovering over the main Tag links.</p> <p><a href="http://www.noupe.com/examples/tagcloud/tag-cloud.html">Check out the demo here</a></p> <h3>20. <a href="http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx">jQuery ListNav Plugin</a></h3> <p><a href="http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx"></a></p> <p>This jQuery plugin supplies an easy way to unobtrusively add a letter-based navigation widget to any UL or OL list. An easily stylable (via CSS) nav bar appears above the list, showing the user the letters A-through-Z. Clicking one of the letters filters the list to show only the items in the list that start with that letter. Hovering over a letter (optionally) shows a count above the letter, indicating how many items will be displayed if that letter is clicked. Other options give you control over the basic functionality.</p> <p><a href="http://www.ihwy.com/Labs/Demos/Current/jquery-listnav-plugin.aspx">Check out the demo here</a></p> <p><a href="http://feeds2.feedburner.com/Devsnippets">Go to Source</a></p> </article> <article> <h1>Better Pull Quotes with MooTools</h1> <p>Facebook-Web-Design — Mon, 23 Nov 2009 16:50:05 +0000</p> <p><a href="http://davidwalsh.name/dw-content/mootools-pull-quote.php"></a></p> <p>Chris Coyier authored a post titled <a href="http://css-tricks.com/better-pull-quotes/">Better Pull Quotes: Don’t Repeat Markup</a> a while back. In his post he created great-looking pull quotes without repeating any content — instead he uses jQuery to dynamically create the pull quotes. The following is the MooTools method for doing so.</p> <div><a href="http://davidwalsh.name/dw-content/mootools-pull-quote.php">View Demo</a> <div></div> </div> <h2>The HTML</h2> <pre> <p><span class="pull-me">As a MooTools "insider", however, I'm excited for what the MooTools team will bring to the table during 2010.</span> We'll be launching the Forge (our public plugin repository), releasing MooTools 2, continuing to grow MooTools More, featuring more community work, and much more. MooTools FTW!</p> </pre> <p>The HTML above features a paragraph of content with a SPAN tag wrapping what I’d like to be the pull quote.</p> <h2>The CSS</h2> <pre> .quote { padding:20px; margin:0 0 20px 20px; font-size:20px; font-style:italic; background:#eee; color:#999; display:block; width:200px; float:right; } </pre> <p>You may style the quote any way you’d like. These elements are traditionally large in text with italicized text and a different background color.</p> <h2>The MooTools Javascript</h2> <pre> window.addEvent('domready',function() { //grab all quotes $$('span.pull-me').each(function(span) { //inject styled quote into page new Element('span',{ 'class': 'quote', text: span.get('text') }).inject(span.getParent(),'top'); }); }); </pre> <p>We find each element with a “pull-me” CSS class and generate a new element with our “quote” class. We then inject the new element into the original element’s parent. That’s all!</p> <div><a href="http://davidwalsh.name/dw-content/mootools-pull-quote.php">View Demo</a> <div></div> </div> <p>Chris did a great job with the execution of his idea. This is a technique that will likely be used well into the future.</p> <div> <a href="http://davidwalsh.name/wp-content/plugins/as-pdf/generate.php?post=4292"><br /> <span>Download PDF</span><br /> </a> </div> <p>Don’t forget to <a href="http://twitter.com/davidwalshblog">follow me on Twitter</a> and be sure to visit <a href="http://scriptandstyle.com">Script & Style</a> for the best Javascript and CSS articles around!</p> <p><a href="http://buysellads.com/buy/detail/1687">Sponsor the David Walsh Blog</a> and get your brand in front of several thousand users per day!</p> <p><a href="http://davidwalsh.name/mootools-pull-quotes">Better Pull Quotes with MooTools</a></p> <p>Related posts: <ol> <li><a href="http://davidwalsh.name/highlight-table-columns" rel="bookmark" title="Permanent Link: Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3">Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3</a></li> <li><a href="http://davidwalsh.name/predictions-2010" rel="bookmark" title="Permanent Link: Bold Web Predictions for 2010">Bold Web Predictions for 2010</a></li> <li><a href="http://davidwalsh.name/mootools-html-police-dwmarkupmarine" rel="bookmark" title="Permanent Link: MooTools HTML Police: dwMarkupMarine">MooTools HTML Police: dwMarkupMarine</a></li> <li><a href="http://davidwalsh.name/method-chaining" rel="bookmark" title="Permanent Link: Method Chaining in MooTools and PHP">Method Chaining in MooTools and PHP</a></li> <li><a href="http://davidwalsh.name/image-protector-plugin-for-jquery" rel="bookmark" title="Permanent Link: dwImageProtector Plugin for jQuery">dwImageProtector Plugin for jQuery</a></li> </ol> <p><br /> <a href="http://davidwalsh.name/feed/atom">Go to Source</a></p> </article> </main></body></html>

Find the distance between two locations
First address:	Second address: