The Eyes of Leadership ~ Robin Sharma

The sad fact is that most people see the worst in others - they see them through the eyes of their own anger, fear and limitation. If someone shows up late for a meeting, they impute a negative intent on that person, saying “they are so rude”.

If someone makes a mistake on an expense report, they grumble “that person is so dishonest”. If someone mis-communicates a point, they silently say “she's a liar”.

Leaders are different.

They look for the best in people.

I want to be clear.. I'm not suggesting that leaders do not confront reality. Not at all. What I'm saying Is that the best leaders see through the eyes of understanding.

If someone is late, they try to get to the truth. Maybe there's a time management problem to coach around or a sick child to help. An error on an expense account could be the result of a poor process in place or the employee's disorganization. The miscommunication might be all about the person communicating having weak skills in this area. An opportunity for improvement.

Today, rather than looking for the worst in people, I invite you to look for what's best within them.

Sure some people really are inconsiderate or dishonest or uncaring. But in my experience - and I've worked with a lot of people over the years - most people are good.

Few human beings wake up in the morning and ask themselves: “What can I do today to mess up someone else's day or undermine my credibility?”

Most of the mistakes people make are the result of a lack of awareness. And here's the payoff for you: as you seek out the good in people, not only will they want to show up more fully for you, but you will see more good in your world.

Resize images proportionally keeping the aspect ratio

Here is the solution with jQuery -
Fiddle Demo: http://jsfiddle.net/dipaks2011/3yfgk/

CSS //to center and vertically middle align the image

div{ 
    width: 140px; 
    height: 140px; 
    border: 1px solid #f00; 
    text-align: center; 
    vertical-align: middle; 
    display: table-cell;
}

Note: display: table-cell; supports IE8+

HTML

<div>
    <img src="http://www.htmlgoodies.com/img/2010/11/jquery.jpg" />
</div>

jQuery

<script type="text/javascript">
    $(function(){
        var max_size = 130;
        $("div img").each(function() {
            if ($(this).height() > $(this).width()) {
                var h = max_size;
                var w = Math.ceil($(this).width() / $(this).height() * max_size); 
            }
           else{
               var w = max_size;
               var h = Math.ceil($(this).height() / $(this).width() * max_size);
           }
           $(this).css({'height': h, 'width': w});
        });
    });
</script>

Styling input type file

Styling input type file is not very easy and most of the developers have stopped putting on efforts saying it can't be done!

Well, with CSS opacity and z-index we can style the file input which will work in IE7 and IE8 too. Here is how -

Fiddle Demo: http://jsfiddle.net/dipaks2011/2JJsH/14/

HTML
<div class="styleFileInput">       
  <input type="text" class="browseText" /> //will work as file text field
  <input type="button" value="Browse" class="browseButton" /> // will work as browse button
  <input type="file" size="1" class="theFileInput" /> // Actual input type file which has opacity: 0
</div>

CSS
.styleFileInput{
    position: relative;
}
.browseButton{
    border: 1px solid #b1902c;
    font-size: 0.9em;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    background: #a7851c;
}
.browseText{
    width: 150px;
    margin: 0 48px 0 0;
    padding: 2px 0;
}
input.theFileInput{
    position:absolute;
    top:0px;
    left: 156px;   
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    z-index:2;
    width:80px;
    font-size: 1em;
}

jQuery 
$('input[type="text"]').keypress(function(e){
    e.preventDefault();    
});
 
$('.theFileInput').change(function(){
    $('.browseText').val($(this).val());
});

// if condition for Webkit and IE
if($.browser.webkit || $.browser.msie){
    $('.theFileInput').css('left', '190px');
}

Fiddle Demo: http://jsfiddle.net/dipaks2011/2JJsH/14/

HTML - DIV vertically center align image/elements

After answering the same question many times on SO(Stackoverflow) I thought of putting this post here. It's very simple with CSS display: table-cell; property.

The display: table-cell; property is supported by all browsers except IE7: When can I use CSS Table display?

<div>
    <img src="http://www.isanam.com/scraps/hi-hello/hi-hello-21.gif" />
</div>

div{
  width: 500px;
  height: 500px;
  border: 1px solid #f00;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

Here is the demo - http://jsfiddle.net/x6jDu/

Defer third party scripts/ads until after the page has finished loading

Contents are loaded according to the components' order in the HTML source code. If you want visitors to see the site contents before seeing the ads to improve performance and visitor experience, you can choose the IFRAME serving code format, which loads independently from other components on the page. The other option is deferring the fetching and loading ads into DIV containers. This technique can be useful for websites that use asynchronous loading like AJAX or want to avoid JavaScript's document.write() approach. 

Why loading third party scripts async is not good enough:

http://www.aaronpeters.nl/blog/why-loading-third-party-scripts-async-is-not-good-enough

Loading third party scripts async is key for having high performance web pages, but those scripts still block onload. Take the time to analyze your web performance data and understand if and how those not-so-important content/widgets/ads/tracking codes impact page load times. Maybe you should do what we did on CDN Planet: defer their loading until after onload.

Delay the loading of 3rd party javascript:

http://stackoverflow.com/questions/3323888/delay-the-loading-of-3rd-party-javascript

 

All of us have a lurking failure in our websites: 3rd party scripts from ads, widgets, and analytics. How is it that one script can bring down your website?

http://www.slideshare.net/souders/your-script-just-killed-my-site

jquery add http:// value in text field if http:// is not added

jquery add http:// value in text field if http:// is not added by user

var search = $('.search');

if(search.val().indexOf('http://') != 0) {
    search.val('http://'+search.val());
}

jquery increase/decrease number in input field

Fiddle Demo - http://jsfiddle.net/dipaks2011/6vuNP/2/

HTML
 <div class="inputQty">
        <span class="up">up</span>         
        <input type="text" maxlength="6" name="oa_quantity" class="input-quantity"  value="1"/> 
        <span class="down">down</span>
</div>

CSS
span{ cursor: pointer;}

jQuery
$('.up').on('click',function(){
    $('.input-quantity').val(parseInt($('.input-quantity').val())+1);
});

$('.down').on('click',function(){
    $('.input-quantity').val(parseInt($('.input-quantity').val())-1);
});