Apply CSS to IE10 and IE11

CSS Compatability trick for Ie10 and ie11 browser. Probably, it will work for IE12, IE13....etc ;-)

<style type="text/css">

 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        /*include style here*/
 </style>

JQuery InnerFade Issue

I have recently used the Jquery plugin "Innerfade",  to fade in and out any element included in the container.

Reference : http://medienfreunde.com/lab/innerfade/

Its very easy and so simple. But, one issue that really bugged me is that, if i left my browser open for awhile, then all the images with in the container will start fading fast on top of the another image. 

I found the bug fix for this. If you experiencing the same issue using innerfade plugin. You can modify the "jquery.innderfade.js" script line 93 and 96 as i did. It fixed the issue.

line 93...$(elements[last]).stop(true,true).slideUp(settings.speed);
line 96...$(elements[last]).stop(true,true).fadeOut(settings.speed);

Reference link : http://computeraxe.com/jquery-stop-action-improves-innerfade-plugin/

Sass Vs SCSS

Css is taking its form to next level, by including scripts in it and I'm seeing lot of question, discussion about the SASS and SCSS... which one to follow, which is easy....what is the difference...

Here, I'm going to summarize what i found and examples are taken from wikipedia...;-)

SASS


Sass (Syntactically Awesome Stylesheets) is the scripting laugage that is interpreted into CSS. And It has 2 syntaxes.

1.  Indented syntax - uses indentation to separate code blocks
2. SCSS (Sassy CSS) - uses block formatting like that of CSS

SassScript provides the following mechanisms: variables, nesting, mixins, and selector inheritance

Variables : 

$margin: 20px;

body
 margin : $margin / 2

Nesting:

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

Equilent CSS : 

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

Mixins:

Most helpful feature, to avoid repeated code and easy modification in CSS.

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

#data {
  @include table-base;
}

Equivalent Css:

#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Selector Inheritance:

Interestingly, you can implement inheritance as like java / c# by using extend keyword.

.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  @extend .error;
  border-width: 3px;
}

Equivalent to

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

You can get more information from : http://sass-lang.com/guide

SCSS


The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”)

So, most people with interchange the term SASS and SCSS...Dont get confused....
When you become the master of SASS, check out the "Foundation" framework....
http://foundation.zurb.com/docs/index.html

Its simply awesome (http://foundation.zurb.com/business/why-foundation.html ).... You can design the website so quick and fast with Responsive Web design. 

Wrap up the content in Div and adjust the height and width dynamically

One line CSS3 Property

word-break:break-all;

(or)

word-wrap:break-word;

Works in all browser

.append_data{
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Setting the IFrame height dynamically

Awesome HTML5 feature that helps to set the IFrame height dynamically.

Use the following script

<script type="text/javascript" >
$(document).ready(function(){
    window.setInterval(resizeParentIframe, 2000);
 });

var pastHeight = 0;

function resizeParentIframe() {
var currentHeight = document.body.scrollHeight;
if (currentHeight != pastHeight){
pastHeight = currentHeight;
parent.postMessage(document.body.scrollHeight, '*');
}
}
</script>

Frequently Used Methods

Browser Close Button detection using JavaScript

    window.onbeforeunload = confirmClose;
            function confirmClose(e){
                var Confirm_Close = "0";
                if(Confirm_Close=="0")
                {
                    var msg = "Are you sure?";
                    if (e) {
                        e.returnValue = msg;
                    }

                    return msg;
                }
                else{
                    Confirm_Close="0";
                }
            }

Detect any hyperlinks detection event


$(".pageclass a").click(function()
{
});


Relief from tool-tip headache

http://jqueryui.com/tooltip/#tracking