Using Source Code Pro Font With Visual Studio

Last November Adobe release a new font, named Source Code Pro. I use Visual Studio 2010 as my IDE, and I constantly keep on changing its look and feel. Today I tried out this Source Code Pro font and I must tell you it is very beautiful !

SourceCodeSplash

Given that I am always looking for the perfect coding environment, I decided to install Source Code Pro, and set it up in Visual Studio.

To get started you need to do the following:

  • Download the latest release from their GitHub page.
  • Extract the fonts to a folder.
  • Navigate to the folder that contains the Source Code Pro fonts.
  • Select the fonts. (I selected all the ones with .ttf to install)
  • Right-click the selected fonts and choose “Install.”
  • The fonts are now installed and will appear in the font menus of your applications.
  • Open Visual Studio.
  • Go to Tools > Options > Fonts and Colors.
  • Change the Font to Source Code Pro in the drop down.
  • Restart Visual Studio.
  • Now you are ready to start using Source Code Pro.

Below are few screenshots I took…

Source Code Pro 1

In case you are wondering what theme I am using with my Visual Studio along with Source Code Pro font, it is Son of Obsidian which can be downloaded from here

Cheers !

Auto complete in text area with jQuery aSuggest

jQuery.asuggest is a small light weight plugin that can be used to implement auto-complete with textareas. This plugin requires the following two js

jQuery.asuggest can be downloaded from here or from its GitHub page. Lets quickly dive into an example :

Html : (jsFiddle link)

<textarea rows="10" cols="55" id="comment"></textarea>

Jquery : (jsFiddle link)

$(document).ready(function(){

    var suggests = ["hello", "android", "world", "is", "all", "over", "under"];
    $("#comment").asuggest(suggests);    

});

Output : http://jsfiddle.net/yrshaikh/JbYdx/embedded/result/
jquery asuggest output

More examples

Expand Collapse div and toggle images using jquery

Example1 | Example2

In this post I’ll be showing you how to implement expandable and collapsible toggle panel using jQuery. Here in this example when you click on the heading, the content gets displayed by sliding and when you again click on the heading the content collapses. To implement this we will be using the following jQuery methods : slideUp(), slideDown(), attr(), css(), next(), and children().

Below is the output that we shall achieve by the end of this post.

ExpandCollapseOutput

Html: (jsFiddle link)

<div>
    <span id="expandAll" class="links">Expand All</span>
    <span id="collapseAll" class="links">Collapse All</span>    
</div>

<div id="header1" class="header">
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png" />
    <span>Sachin Tendulkar</span>
</div>
<div id="description1" class="description">
    Sachin Ramesh Tendulkar is an Indian cricketer widely acknowledged as one of the greatest batsmen in One Day International[2] and second only to Don Bradman in the all time greatest list in Test cricket
</div>

<div id="header2" class="header">
    <img src="http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png" />
    <span>Rahul Dravid</span>
</div>
<div id="description2" class="description">
    Rahul Dravid is a former Indian cricketer, who captained the national Test and One Day International (ODI) teams. Born in a Marathi family, he started playing cricket at the age of 12 and later represented the state team at the under-15, under-17 and under-19 levels.
</div>

Css: (jsFiddle link)

body{font-family:Arial;}
.header img{position:relative; top:10px;}
.header { font-weight:bold; padding-bottom:10px;cursor:pointer;}
.links {color:#3366CC;cursor:pointer;}
.links:hover {border-bottom:1px solid #3366CC;}

Jquery: (jsFiddle link)

var mImg = "http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_minus.png";
var pImg = "http://cdn1.iconfinder.com/data/icons/fatcow/32/bullet_toggle_plus.png";

$(document).ready(function(){
    $("#expandAll").click(function(){
        $(".description").slideDown();
        $(".header img").attr("src", mImg)
    });

    $("#collapseAll").click(function(){
        $(".description").slideUp();
        $(".header img").attr("src", pImg)
    });

    $("#header1").click(function(){
        var currentState = $("#description1").css("display");
        if(currentState == "block"){
            $("#description1").slideUp();
            $("#header1 img").attr("src", pImg)
        }
        else{
            $("#description1").slideDown();
            $("#header1 img").attr("src", mImg)
        }
    });

    $("#header2").click(function(){
        var currentState = $("#description2").css("display");
        if(currentState == "block"){
            $("#description2").slideUp();
            $("#header2 img").attr("src", pImg)
        }
        else{
            $("#description2").slideDown();
            $("#header2 img").attr("src", mImg)
        }
    });        
});

the last two click events for “header1” and “header2” can be clubbed as shown below :

Jquery: (jsFiddle link)

$(".header").click(function(){
    var currentState = $(this).next(".description").css("display");
    console.log(currentState);
    if(currentState == "block"){
        $(this).next(".description").slideUp();
        $(this).children("img").attr("src", pImg)
    }
    else{
        $(this).next(".description").slideDown();
        $(this).children("img").attr("src", mImg)
    }
});

Hope this helps :)