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>

   <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" />





</head>
...

Source From: http://ghita.org/tipoftheday/css-media-queries-for-ie

Tuesday, September 11, 2012

Smooth Scroll jQuery

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>

Saturday, July 28, 2012

CSS Background transparency without affecting child elements, through RGBa and filters

The solution!


.alpha60 {

/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
}

A little caveat

Shockingly enough (erm), no version of Internet Explorer supports RGBa colors (i.e. not IE 6, IE 7 or IE 8 at the time of this writing). However, and lucky for us, in year 2000 Microsoft went crazy with implementing various filters in IE. One of them are the gradient filter, and what we can do is use that and just define the same start and end color. “Ok, but how do I get the transparency”, you might be thinking now. The answer to that is that you will declare that as part of the color hex value. A CSS gradient filter achieving the same effect as the CSS code above would look like this:

.alpha60 {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
}

Source From: http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

---------------------------------------
Sample Code::::

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>www.fouressinsurance.com</title>
<style>
    .main{ 
        height:300px; 
        width:100px; 
        background: rgba(0, 0, 0, 0.5); 
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
}
    .inner{ color:#ff0000; opacity:100%; }
</style>
</head>

<body style="background:#fff">
<div class="main">
    <div class="inner">Hyderabad Web Designer www.hydwebdesigner.com</div>
</div>
 </body>
</html>

---------------------------------------

jQuery and JavaScript CSS !important

jQuery CSS !important

One thing that everyone must have wonder (those that haven’t tried yet) is whether jQuery support declaration of !important for their css() method such as this.
1    jQuery('#id').css('height', '200px !important');

You will find that nothing will happen with a declaration of such manipulation. If we were to try out on pure JavaScript with the above declaration, it will be something like this.
1    document.getElementById('id').style.height = "200px !important";

Having a pure JavaScript instruction such as this will not work in most browser other than safari 3++. Hence, jQuery will definitely won’t work too. This is not a bug but something that most browser doesn’t acknowledge a need since inline style already have the highest priority other than user defined ones. (unless you do not want your user to change how they view your website).

Solution to jQuery CSS !important

Well, the typical way of getting !important will not work. Rather, you might want to try CSS DOM cssText. Hence, you will force !important to your jQuery statement by doing this.
1    jQuery('#id').css('cssText', 'height: 200px !important');

However, most people will be unfamiliar with cssText. cssText will overwrites the css of that particular element. Hence, you will have to redeclare the rule for that particular element all over again. On the other hand, if you are using JavaScript cssText, different browser treat cssText different such as ie you will define this way,
1    document.getElementById('id').style.cssText = 'height: 200px !important'

While normally you will use it this way.
1    document.getElementById('id').cssText = 'height: 200px !important'

Definitely, there is a better alternative such as using the cssRules/rules array which can specify the rule in that element to be modify.

The other more practical way of doing it is by introducing new class for your element. Instead of styling through jQuery or DOM object which is applying inline styling (means highest priority already), you should leave every majority styling or best all of the styling to an external style sheet that help you reduce some bytes on the script and also improve maintainability for both your code and style. You can do this using the toggleClass which adds a new class to that element automatically.
1    jQuery('#id').toggleClass('classname');

or you can do this in JavaScript by replacing the class (this is more efficient than the jQuery one since there isn’t any additional checking and stuff)
1    document.getElementById('id').className = 'classname';