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