Tutorial Get Rid of White Flash when iframe Loads

by in , 0

Hides iframe until fully loaded.

<iframe style="visibility:hidden;"  src="../examples/inlineframes1.html" > </iframe>
Much more robust and progressive method here.

Tutorial Get Directions Form (Google Maps)

by in , 0 

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Enter your location</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
   <input type="submit" value="Get directions" />
</form>

saddr = blank input field for entering START address
daddr = hard-coded END address

Enter an address and press button and a popup window opens with directions. Enter no address, and just a map of the END address opens.

Live Demo

Enter your location



 

Reference URL

Tutorial Form Submission Opens New Tab/Window

by in , 0

You probably knew that you could force a link into opening a new tab or window with the target="_blank" attribute (deprecated, but universally still supported). 

<a href="#" target="_blank">link</a>

But you can use the same exact attribute on forms to get the same result:

<form action="#" method="post" target="_blank">
    ...
</form>

Tutorial Example Form Markup

by in , 0 

<form id="myForm" action="#" method="post">

  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value="" tabindex="1">
   </div>

   <div>
     <h4>Radio Button Choice</h4>

     <label for="radio-choice-1">Choice 1</label>
     <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1">

    <label for="radio-choice-2">Choice 2</label>
    <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2">
  </div>

  <div>
    <label for="select-choice">Select Dropdown Choice:</label>
    <select name="select-choice" id="select-choice">
      <option value="Choice 1">Choice 1</option>
      <option value="Choice 2">Choice 2</option>
      <option value="Choice 3">Choice 3</option>
    </select>
  </div>
	
  <div>
    <label for="textarea">Textarea:</label>
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
  </div>
	
  <div>
    <label for="checkbox">Checkbox:</label>
    <input type="checkbox" name="checkbox">
  </div>

  <div>
    <input type="submit" value="Submit">
  </div>

</form>

Tutorial Empty Table Markup

by in , 0 

<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

how to Embed Windows Media wmv on web

by in , 0

Valid technique, as it doesn't need the <embed> tag.

<object type="video/x-ms-wmv" 
  data="movie.wmv" 
  width="320" height="260">
  <param name="src" 
    value="movie.wmv" />
  <param name="autostart" value="true" />
  <param name="controller" value="true" />
</object>

Reference URL

Tutorial Embedding Quicktime

by in , 0

Quicktime still requires the double-object method to get it done across all browsers. Not super pretty, but it does get the job done. 

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
       codebase="http://www.apple.com/qtactivex/qtplugin.cab"
       width="200" height="16">
 <param name="src" value="movie.mov" />
 <param name="autoplay" value="true" />
 <param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
 <param name="controller" value="true" />
 <!--[if !IE]> <-->
   <object data="movie.mov" width="200" height="16" type="video/quicktime">
     <param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
     <param name="controller" value="true" />
   </object>
 <!--> <![endif]-->
</object>

Reference URL

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" 
  data="your-flash-file.swf" 
  width="0" height="0">
  <param name="movie" value="your-flash-file.swf" />
  <param name="quality" value="high"/>
</object>

Reference URL

Tutorial Comments in HTML

by in , 0 

<div id="header">
   <p>Stuff</p>
</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="http://chriscoyier.net">
  <span class="given-name">Christopher</span>
  <span class="additional-name">John</span>
  <span class="family-name">Coyier</span>
</a>
 <div class="org">CSS-Tricks</div>
 <a class="email" href="mailto:chriscoyier@gmail.com">chriscoyier@gmail.com</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>
 <div class="tel">555-555-5555</div>
</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.

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

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 Terminal.app and enter this. Enter it as many times as you want spaces. Error on too many, they are easy to remove.

defaults write com.apple.dock 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">
<![endif]-->
<!--[if !IE]>-->
   <body>
<!--<![endif]-->
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 

CSS CODE:
#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



Press this!


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

SourceDemo

2. jCart

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

jCart

SourceDemo

3. Drag and Drop Shopping Cart

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

Drag and Drop Shopping Cart

SourceDemo

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 »

50 Beautifull Css3 Buttons

by in , , , , , , 0

CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amazing stuff with its cool new features. No longer will we have to rely on so much JavaScript and images to create nice looking website elements such as buttons and menu navigations. So, in order to encourage you to start experimenting with CSS3, we’ve rounded up 50 excellent CSS3 button and menu techniques.


Roll Your Own Google Buttons

css3 buttons

CSS3-Only Tabbed Area

css3 buttons

Read more »
Location: Latin America