Thursday, June 28, 2012

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/

Tuesday, June 12, 2012

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:

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:
 
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?



Thursday, June 7, 2012

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{ cursorpointer;}

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);
});