Saturday, August 25, 2012

Display a loading image until the page completes loading

Similar to how GDGT.com has it’s loading.gif while the page completes this method will do something very similar.

Right after the body I include the image inside a div:

<div id="loading-image">
    <img src="<?php bloginfo('template_url'); ?>/images/ajax-loader.gif" alt="Loading..." />
</div>

Of course I’m using wordpress so you might need to include a different path for your ajax-loader.gif.

Here’s the CSS I’m using on my current project:
#loading-image {
    display:block;
    background-color: #000;
    height:100%;
    width:100%;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999999;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; /* future proofing */
    -khtml-border-radius: 10px;
}

Now the most important part. I’m using jQuery to hide that div after the page completes loading.
<script type="text/javascript">
jQuery(window).load(function(){
    jQuery('#loading-image').fadeOut(1000);
});
</script>

Thursday, August 2, 2012

HTML5 Features

1. New Doctype

( HTML ) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

( HTML5 ) <!DOCTYPE html>

2. The Figure Element

( HTML ) <img src="image/image.jpg" alt="image" title=” image” />

<p>Image of Mars. </p>

( HTML5 )

<p>This is an image of something interesting.</p>

</figcaption>

</figure>

3. No More `Types` for Scripts and Links

( HTML ) <link rel="stylesheet" href="css/ stylesheet.css" type="text/css" />

( HTML5 ) <link rel="stylesheet" href="css/stylesheet.css" />

4. To Quote or Not to Quote.

( HTML ) <p class=”myclass” id=”someId”> Welcome.</p>

( HTML5 ) <p class=myclass id=someId> Welcome.</p>

5. Email Inputs

( HTML5 )

<!DOCTYPE html>

<head>

<title>untitled</title>

</head>

<body>

<label for="email">Email:</label>

<button type="submit"> Submit Form </button>

</form>

</body>

</html>

`6.` The Semantic `Header` and `Footer`

( HTML ) <div id="header"> ... </div>

( HTML5 ) <header> ... </header>

7.Audio Support

( HTML5 ) HTML5 now offers the <audio> element.

<a href="file.mp3">Download this file.</a>

</audio>

8. Video Support

( HTML5 ) HTML5 now offers the <vidio> element.

<p>Your browser is old.<a href="cohagenPhoneCall.mp4">Download this video instead.</a></p>

</video>

CSS3 Gradient Button Without Images

<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.button {
   display: inline-block;
   outline: none;
   cursor: pointer;
   text-align: center;
   text-decoration: none;
   font: 14px/100% Arial, Helvetica, sans-serif;
   padding: .5em 2em .55em;
   text-shadow: 0 1px 1px rgba(0,0,0,.3);
   -webkit-border-radius: .5em;
   -moz-border-radius: .5em;
   border-radius: .5em;
   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
   box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
   text-decoration: none;
}
.button:active {
   position: relative;
   top: 1px;
}
.orange {
   color: #fef4e9;
   border: solid 1px #da7c0c;
   background: #f78d1d;
   background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
   background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
   background: #f47c20;
   background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
   background: -moz-linear-gradient(top, #f88e11, #f06015);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
   color: #fcd3a5;
   background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
   background: -moz-linear-gradient(top, #f47a20, #faa51a);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
</style>
</head>
<body>
<div class="button orange" style="width:100px;">Collabor</div>
<input type="button" class="button orange" name="Collabor" value="collabor"/>
</body>
</html>