Front-End Updates : 2012

Wednesday, October 31, 2012

Start downloading file on page load

We can do this by using window.location.href


<body onload="javascript:window.location.href='http://yoursite.com//filename.zip';">

Friday, October 26, 2012

Viewing .pdf file in a DIV

Very few lines of code and it works like charm in all browsers including IE7

<div>
<object data="sample.pdf" type="application/pdf" width="600" height="600">
alt : <a href="sample.pdf">sample.pdf</a>
</object>
</div>

Thursday, August 2, 2012

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.

Wednesday, July 18, 2012

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>

Thursday, July 12, 2012

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/

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:

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

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

Monday, May 28, 2012

Change parent elements background image position on child mouseover

Demo: http://jsfiddle.net/rFhtP/

HTML

<ul id="headerNav">
    <li class="navHome"><a href="index.php">Home</a></li>
    <li class="navServices"><a href="services.php">Services</a></li>
    <li class="navFaq"><a href="faq.php">FAQ</a></li>
    <li class="navGallery"><a href="gallery.php">Gallery</a></li>
    <li class="navContact"><a href="contact-us.php">Contact</a></li>
</ul>

CSS

#headerNav {
    background: url(http://wordpress.deaction.com/wp-content/uploads/2011/08/cat-whatiscat.com_.jpg) no-repeat left top;
}

jQuery

$("#headerNav > li").hover(function() {
    var pos = "0 -" + ($(this).index() * 75) + "px";
    $(this).parent().css("background-position", pos);
}, function() {
    $(this).parent().css("background-position", "0 0");
});

Tuesday, May 15, 2012

UX Portfolio

1. SumEqual

Project Details:

- What is the project about
It is an education domain where Teachers/Students/Parents collaborate to share information, schedule meetings, and participate in school related activities.

- What problem it solves
Generally, the process of arranging meeting and passing messages between parents and teachers is a long procedure as it depends on the availability of both sides. To make this procedure easier with technology - SumEqual was developed.

- How it helps the end user
Most of the times it's difficult to the Parents and Teachers to discuss all things related to kids development whenever and wherever they want to. SumEqual helps them send/receive messages anytime/anywhere.

- Visual Language
It's derived from the Green Boards of the schools as it gives the sense of school related portal.

- Brand Identity
A combination of school board colors along with Notebook mockings and the typeface appears as a hand writing.

- Problem Statement
Create a Brand for school portal and a landing page where Teachers/Students/Parents collaborate with each other.

2. Hotel Stay UK

3. Skills Test

4. Mobile App

5. Travel app wireframes

6. My Voyages

7. GiveANight

8. Journal Doc

9. Pack Your Bags

10. LetsGo2

Sunday, May 13, 2012

Improving page load performance

Here are some general recommendations that can be given.

Start by running your site through a tool like http://gtmetrix.com/ which uses YSlow from Yahoo and a custom validation engine to provide recommendations. The recommendations you will get from GT Metrix will cover 95%+ of the most common web best practices. (Not affiliated; just really like their tool).

If your site isn't publicly available, you can use Chrome's developer tools (run an audit to get a list performance recommendations on the whole page, and also on JS and CSS interpretation times--very useful).

Validate your document for errors using http://validator.w3.org. Even if your site isn't public, you can paste the source into the validator engine as text.

If images are your main concern, use lazy loading techniques to only load visible content, such as the jQuery lazy loader for images. Use the correct size/format for web images. Use a tool like http://www.smushit.com/ysmush.it/ to compress images.

General Page Performance Factors

From YSlow, in alphabetical order

Add Expires headers
Avoid AlphaImageLoader filter
Avoid CSS expressions
Avoid empty src or href
Avoid HTTP 404 (Not Found) error
Avoid URL redirects
Compress components with gzip
Configure entity tags (ETags)
Do not scale images in HTML
Make AJAX cacheable
Make favicon small and cacheable
Make fewer HTTP requests
Make JavaScript and CSS external
Minify JavaScript and CSS
Put CSS at the top
Put JavaScript at bottom
Reduce cookie size
Reduce DNS lookups
Reduce the number of DOM elements
Remove duplicate JavaScript and CSS
Use a Content Delivery Network (CDN)
Use cookie-free domains
Use GET for AJAX requests

Thursday, April 19, 2012

Remove extra path from img src by jquery

<img src="http://www.example.com/wp-content/uploads/http://www.example.com/wp-content/files/img/2012/01/image.jpg">

<img alt="test" src="http://www.example.com/wp-content/files/img/2012/01/image.jpg">

$("img ").attr("src",$("img ").attr("src").split('http://www.example.com/wp-content/uploads/')[1]);

Wednesday, April 11, 2012

HTML marquee height - fixed

HTML marquee tag supports height attribute. If you want your text to scroll from bottom to top of your screen just define height attribute to the marquee tag and you are done.

Static solution:
<marquee direction="up" height="600">Scroll in 600 height area</marquee>

Dynamic solution with jquery
<marquee direction="up">Scroll in 100% height of my document</marquee>

The jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
var windowHeight = document.documentElement.clientHeight;
$('marquee').height(windowHeight);
})
</script>

Input text field editable and non-editable on button click

jquery makes it simple by just adding and removing the readonly attribute to the text field.

The HTML

<input type="text" value="Edit me" readonly="readonly" />
<input type="button" value="Make Editable" class="makeEditable" />
<input type="button" value="Make Non Editable" class="makeNonEditable" />

The jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function(){
    $(".makeEditable").click(function(){
        $('input:text').removeAttr("readonly");
    });

    $(".makeNonEditable").click(function(){
        $('input:text').attr("readonly", "readonly");
    });
});
</script>

Demo: http://jsfiddle.net/jmuh3yzo/

Another demo that toggles the field: http://jsfiddle.net/aub2x3ka/

Tuesday, March 20, 2012

Simple jquery tab navigation

The code below creates very simple tabbed interface with plain HTML, CSS and jquery -

The jQuery

$('.tabsContent').hide();
$('.tabsContent:first').show();
$('.theTabs li:first').addClass('selectedTab');
$('.theTabs li a').click(function(){
    $('.theTabs li').removeClass('selectedTab');
    $(this).parent().addClass('selectedTab');

    var currentTab = $(this).attr('href');
    $('.tabsContent').hide();
    $(currentTab).show();

return false;

});

The HTML

<ul class="theTabs">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
</ul>

<div id="tab-1" class="tabsContent">
    Tab 1
</div>
<div id="tab-2" class="tabsContent">
    Tab 2
</div>
<div id="tab-3" class="tabsContent">
    Tab 3
</div>

The CSS

.theTabs{
    font-weight: bold;
}
.theTabs li{
    float: left;
}
.theTabs li a{
    display: block;
    padding: 6px 0;
}
.tabsContent{
    display: none;
}
.selectedTab{
    background: red;
}

Monday, March 19, 2012

jquery substring text with dots

Here is the code snippet to Substring text using jquery -

$(".className").each(function(){
    if ($(this).text().length > 24) {
        $(this).text($(this).text().substr(0, 24));
        $(this).append('...');
    }
});

Wednesday, March 14, 2012

Input type text element width auto resize

A small jquery function helps us making the text field resize automatically with width auto -

function resizeInput() {
$(this).attr('size', $(this).val().length+2);
}

$('input[type="text"]').keyup(resizeInput).each(resizeInput);

Saturday, February 25, 2012

CSS Cross Shape

It's surprising to see how helpful the CSS Shapes are. These shapes help us in many many ways. If you look at the image below you will say you have to use full image for this effect, because background-repeat wont work in this situation.

To avoid use of images for such designs we can use CSS Shapes and the web would be light-weight and full of fun. Here is the CSS that creates above shape and works in all browsers including IE.

.cssCrossShape{
    margin: 100px 0 0 100px;
    border-color:#3274D0;
    border-style: solid;
    border-width:150px 1100px;
    border-top:90px solid transparent;
    border-left:0px solid transparent;
    height:0;
    width:0;
}

<div class="cssCrossShape"></div>

Thursday, February 23, 2012

HTML5 Placeholder in IE7 and IE8 fixed with jquery

Using HTML5 Placeholder attribute in IE7 and IE8 is possible with the help of a block of jquery code.
Here goes the code -

Wednesday, February 22, 2012

Sorting HTML table with jquery

Sorting tables in HTML becomes easier with tablesorter. Tablesorter is a jQuery plugin and it has many good features, such as -
Multi-column sorting
Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
And many more...

While implementing it we need to add one plugin in the HEAD section

<script src="jquery.tablesorter.js"></script>

The jquery code goes something like this -
//jquery table sorter code
$("#sortThisTable").tablesorter({
    headers: {
            // assign the first column (we start counting zero)
            0: {
                sorter: false
            }

        },
        sortList:[[2,0]], widgets: ['zebra']
});

And your HTML has to be like -
<table id="sortThisTable" class="tablesorter">
    <thead>
        <tr>
            <th>Sr.No</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Dave</td>
            <td>Barber</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Nanno</td>
            <td>Vsome</td>
        </tr>

    </tbody>
</table>

Download the source here - http://tablesorter.com/docs/#Download

Using jquery datepicker (calendar)

jquery datepicker is very easy to implement. We can have it in action on text-field or on calendar image icon click. All we need to do is -

Add jquery library, jquery UI library and jquery UI CSS
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="jquery-ui-1.8.9.custom.min.js"></script> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" media="all" />

When you have these three files in the HEAD section of your HTML file, you can write the jquery calendar code -

<script type="text/javascript">
$(function(){

$('.showCalendarTextFieldClass').datepicker({
    minDate: new Date(2012, 0, 1),
    maxDate: new Date(2012, 1, 26),
    dateFormat: 'dd/mm/yy',
    selectMultiple:true,
    showOn: 'button',
    //showOn: 'both',
    buttonImage: 'img/calendarIcon.png',
    buttonImageOnly: true
});

//
});
</script>

The code below shows how you can change calendar icon on mouseover and restore it back on mouseout or when clicked outside of calendar/datepicker, and add alternate text to the icon on mouseover -

//jquery datepicker mouseover/hover change icon
    $(".ui-datepicker-trigger, .ui-datepicker").mouseover(function() {
        $('.ui-datepicker-trigger').css('cursor', 'pointer').attr({alt: 'Pick Date', title: 'Pick Date', src: 'img/calendarIconActive.png'});
        if($('.ui-datepicker').css("display") == "block"){
            $('.ui-datepicker-trigger').attr({src: 'img/calendarIconActive.png'});
        }
    }).mouseout(function(){
        $('.ui-datepicker-trigger').attr({src: 'img/calendarIcon.png'});
        if($('.ui-datepicker').css("display") == "block"){
            $('.ui-datepicker-trigger').attr({src: 'img/calendarIconActive.png'});
        }
    });
    $('.ui-datepicker').click(function(e) {
        e.stopPropagation();
    });
    $(document).click(function() {
        $('.ui-datepicker-trigger').attr({src: 'img/calendarIcon.png'});
    });

<input type="text" class="showCalendarTextFieldClass" />

You are done!

More options, events, methods, theming is here - http://jqueryui.com/demos/datepicker/

Tuesday, January 31, 2012

Check and uncheck group of checkboxes

As seen on gmail, when you click on the checkbox on table head it selects all checkboxes in the table. Simple, yet useful!

$('#selectAllCheckbox').click(function(){

       if($(this).is(':checked')){
             $(this).parents('table').find('input[type="checkbox"]').attr('checked', true);
             }
       else{
            $(this).parents('table').find('input[type="checkbox"]').attr('checked', false);
        }
    });

Tuesday, January 10, 2012

CSS - Indenting Second Line of LI (List Items)

It drives me crazy when I see that next line coming under the Bullet point. Here, margins and paddings are not very helpful. The text-indent property with minus value helps us to get the next lines properly indented -

ul li{
    list-style-type: disc;
    list-style-position: inside;
    padding: 10px 0 10px 20px;
    text-indent: -1em;
}

Monday, January 9, 2012

Perfect Normalize CSS

Using HTML5 Boilerplate to start your project would be the best choice because it sets the perfect default HTML page for your PC/Mobile project. The H5BP (HTML5 Boilerplate) makes sure that your page is working fine on all devices/browsers.

The default CSS that comes with H5BP has some issues with browser compatibilities. Don’t worry about that, I have fixed all browser compatibility issues in the CSS and it is attached here. Download and replace it with the default CSS file that comes with H5BP (style.css).