Archive for 02/27/14

Tutorial Embedding Flash

by in , 0

This is different than the default code that Flash provides. That typically involves the <embed> tag and is not valid XHTML. This doesn't use that, and is fully valid.

<object type="application/x-shockwave-flash" 
  width="0" height="0">
  <param name="movie" value="your-flash-file.swf" />
  <param name="quality" value="high"/>

Reference URL

Tutorial Comments in HTML

by in , 0

<div id="header">
</div> <!-- END div-header -->

The <!-- --> stuff is the HTML comment. It is a way to add notes into the code which will not display when the HTML is rendered by the browser. In the example above, to signify which opening div tag the closing tag was actually closing.

Tutorial Button With Line Breaks

by in , 0

You can use carriage return characters to break the line: &#x00A;

<input type="button" value="Really&#x00A;Tall&#x00A; Button">

Tutorial Basic Microformatted hCard

by in , 0

A basic address and URL, marked up using Microformats.

<div id="hcard-Christopher-John-Coyier" class="vcard">
 <a class="url fn n" href="">
  <span class="given-name">Christopher</span>
  <span class="additional-name">John</span>
  <span class="family-name">Coyier</span>
 <div class="org">CSS-Tricks</div>
 <a class="email" href=""></a>
 <div class="adr">
  <div class="street-address">123 Appleseed Street</div>
  <span class="locality">Chicago</span>, <span class="region">IL </span> <span class="postal-code">60647</span>
  <span class="country-name">United States</span>
 <div class="tel">555-555-5555</div>

Reference URL

Tutorial Base64 Encode of 1x1px Transparent GIF

by in , 0

Just in case you need one. You can stretch it out to fill space as needed.


Or a black one:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">

How to Add Spaces to Dock in OS X

by in , 0

This is absolutely not HTML related, but by sheer demand, I needed to add it somewhere. To add a "space" to the dock in OS X, open up and enter this. Enter it as many times as you want spaces. Error on too many, they are easy to remove.

defaults write persistent-apps -array-add '{"tile-type"="spacer-tile";}'

They won't show up until you force restart the Dock with:

killall Dock

To remove them, just drag them up and out of the Dock like any other icon. To move them around, click and drag.

Tutorial Add Body Class Just For IE

by in , 0

<!--[if IE ]>
   <body class="ie">
<!--[if !IE]>-->
Or more robust version putting class on HTML element:
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html dir="ltr" lang="en-US"class="no-js iem7"> <![endif]-->
<!--[if lt IE 7 ]> <html dir="ltr" lang="en-US" class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7 ]>    <html dir="ltr" lang="en-US" class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html dir="ltr" lang="en-US" class="no-js ie8 oldie"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html dir="ltr" lang="en-US" class="no-js"><!--<![endif]-->
Now you can write IE specific styles in a regular stylesheet, by prefacing the CSS selectors with .ie

How to hide content Seo Friendly

by in , , , 0


#content { position: absolute; top: -9999px; left: -9999px;}
Removes an item from the page, without affecting page flow or causing scrollbars. Much better than display: none; or even visibility: hidden;

Tutorial 3D Inset Effect by CSS3

by in , , , 0

People love to make flat things appear as if they're three-dimensional. There are two ways to pull off this effect in a 2D environment, shape and movement.
By give a flat shape the appearance of edges or sides, we can make buttons or other objects appear as if they are raised or sunken into the screen.

The movement effect is a bit trickier. In a three-dimensional world, objects closer to you move fast, while the ones further away move slow. The further away an object is, the slower it moves. This is called the parallax effect. The parallax effect has been used in all sorts of places for the past few years.
The first method, shape, works because it makes things appear to be popping out, or pushed away from you. The second method, movement, works because it makes things seem as if they are positioned in context with each other. But, what if we combined them. An object that looks sunken into the screen, like a shelf, and its edges shrink and grow, using the parallax effect, making the object appear as if it really is in 3D space.
First we need to add some markup on our page and give the items we want to affect the class of inset. Any block level elements will do. Here is a simple form with inputs that will have the effect applied.

Read more »

CSS3 animated button

by in , , 0

This article introduce a nice CSS3 animated button

Whether you're designing a website or a web application, you'll need a button for it. Now, with CSS3′s help, it was never easier to create nice looking button.
In this tutorial, you'll learn how to create a cool animated button CSS3 button in just a few steps. View the demo and download the code if you like what you see.

Awesome animated CSS3 button

Download the Code at Css3 Animated button

15 jQuery Ajax Shopping Carts

by in , , , 0

1. Smart Cart

Is a flexible and feature rich jQuery plug-in for shopping cart. It makes the add-to-cart section of online shopping much easy and user friendly. It is compact in design, very easy to implement and only minimal HTML required.

Smart Cart


2. jCart

Based on jQuery and PHP, jCart handles visitor input without reloading the page and is fully functional even without JavaScript.



3. Drag and Drop Shopping Cart

A drag and drop shopping cart using JQuery,JQuery UI and PHP.

Drag and Drop Shopping Cart


4. jQuery Cart

The implementation of this jQuery cart features drag and drop functionality, updating the cart to reflect the items added to it and also updating the quantities without duplicating the item within the cart.

jQuery Cart

Read more »