Thursday, October 11, 2012

How to create a number list 1, 2, 3, and Sub number list 1.1, 1.2, 1.3 … HTML list?

CSS Code:
ul.numeric-decimals { counter-reset:section; list-style-type:none; }
ul.numeric-decimals li { list-style-type:none; }
ul.numeric-decimals li ul { counter-reset:subsection; }
ul.numeric-decimals li:before{
    counter-increment:section;
    content:counter(section) ". ";/*content:"Section " counter(section) ". ";*/
}
ul.numeric-decimals li ul li:before {
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}


Html Code:
<ul class="numeric-decimals">
  <li>Cats
    <ul>
      <li>Birds</li>
      <li>Rats</li>
    </ul>
  </li>
  <li>Dogs
    <ul>
      <li>Birds</li>
      <li>Rats</li>
    </ul>
  </li>
  <li>Rabbits</li>
  <li>Ants
    <ul>
      <li>Lions</li>
      <li>Rats</li>
    </ul>
  </li>
  <li>Ducks</li>
</ul>

Posted by at 3:29 AM 0 comments
Labels:

Tuesday, October 2, 2012

3 ways of inserting CSS media queries

CSS media queries can be added to CSS in all of the ways you're able to define it:

External stylesheet:
<link rel="stylesheet" type="text/css" href="smallscreen.css" media="only screen and (max-width: 480px)" />

Imported stylesheet within the <style> element:
@import "smallscreen.css" only screen and (max-width: 480px);

Within the <style> element as a media rule:
 <style type="text/css">
  @media only screen and (max-width: 480px){
    /* rules defined inside here are only applied to browsers that support CSS media queries and the browser window is 480px or smaller */
  }
</style>

Source from: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
Posted by at 2:15 AM 0 comments
Labels:

Wednesday, September 26, 2012

CSS media queries and IE fix

Take a peek at adapt.js is a lightweight JavaScript file that determines which CSS file to load before the browser renders a page.
Make sure you try respond.js - a fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

If you want to be able to correctly display a fluid design on multiple resolutions (including mobile) then you will probably use CSS Media Queries. CSS Media Queries are not complicated to use and were introduced by CSS3 specifications as an extension of CSS 2.1 media types.

Note that HTML4 supports media types like handheld, but this is poorly supported, old mobiles don't detect it, the modern devices completely ignore it.

CSS Media Queries work fine on modern browsers (IE9, FF, Chrome, Safari, Opera) and on mobile devices (iPhone, Android, Opera Mobile & Mini, Blackberry, IE Mobile 7, etc.)

And of course they don't work on IE < 9.0, but I have a solution that I'm already using on production servers. I wrote a small JavaScript file that reads all the <link> elements from DOM, checks which of them are destined for the current device resolution and applies them.

...
<head>
<!-- Your .css files. IE6, IE7 and IE8 ignore the media="only all ..." files. -->
   <link rel="stylesheet" type="text/css" href="core.css" />
   <link rel="stylesheet" type="text/css" href="smartphone.css" media="only all and (max-width: 480px)" id="stylesheet-480" />
   <link rel="stylesheet" type="text/css" href="tablets.css" media="only all and (min-width: 480px) and (max-width: 1024px)" id="stylesheet-1024" />
   <link rel="stylesheet" type="text/css" href="wide.css" media="only all and (min-width: 1200px)" id="stylesheet-1280" />

<!-- The mighty fix which chooses the correct stylesheet file based on the
screen resolution, and strips the 'media' attribute so IE6, IE7 and IE8
can read/interpret it -->

<!--[if lt IE 9]>
   <script type="text/javascript" src="/js/css-media-query-ie.js"></script>
<![endif]-->

</head>
...


Source From: http://ghita.org/tipoftheday/css-media-queries-for-ie
Posted by at 11:55 AM 0 comments
Labels:

Tuesday, September 11, 2012

Smooth Scroll jQuery


<script type="text/javascript">
$(function() {
$('.parallex_controllers a').bind('click',function(event){
var $anchor = $(this);

$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
});
</script>
Posted by at 5:55 AM 0 comments
Labels:

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>
Posted by at 2:33 AM 0 comments
Labels:

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 )
<figure>
    <img src="image/image.jpg" alt="image" title=”image” />
    <figcaption>  
        <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" />  
      <script src="path/to/script.js" type="text/javascript"></script>
( HTML5 )  <link rel="stylesheet" href="css/stylesheet.css" />
     <script src="path/to/script.js"></script>  
  

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>  
                       <html lang="en">  
                            <head>  
                                  <meta charset="utf-8">  
                                      <title>untitled</title>  
                            </head>  
                            <body>  
                                  <form action="" method="get">  
                                      <label for="email">Email:</label>  
                                          <input id="email" name="email" type="email" />
                                          <button type="submit"> Submit Form </button>  
                                   </form>  
                            </body>  
                       </html>

6.  The Semantic Header and Footer

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

7.Audio Support

( HTML5 ) HTML5 now offers the <audio> element.
                        <audio autoplay="autoplay" controls="controls">  
                             <source src="file.ogg" />  
                             <source src="file.mp3" />  
                             <a href="file.mp3">Download this file.</a>  
                        </audio>  

8. Video Support

( HTML5 ) HTML5 now offers the <vidio> element.
                        <video controls preload>  
                             <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />  
                             <source src="filename.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />  
                             <p>Your browser is old.<a href="cohagenPhoneCall.mp4">Download this video instead.</a></p>  
                        </video>  
Posted by at 11:27 PM 0 comments
Labels:

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>
Posted by at 11:14 PM 0 comments
Labels:
Subscribe to: Posts (Atom)