Font awesome not working on IIS for ASP.NET MVC project

Here are things that you should be checking if your fontawesome is not working when you put your website on IIS.

enter image description here

Check 1: Check if all the fonts (.otf, .woff etc) are copied to the /font-awesome-4.2.0/fonts/ folder.

Check 2: Remove the fontawesome.css from your bundle and add it directly like <link href="~/Content/font-awesome-4.2.0/css/font-awesome.css" rel='stylesheet' type='text/css' />

How to Focus element using pure HTML ? How to set CSS for on Focus?

To set focus on page load using pure html you can use the autofocus keyword. Here is an example on JsFiddle. And to set the css for on focus use the :focus selector in your css. Below is the sample code I have used.

<form>
    <input type="text" id="FirstName" placeholder="First Name" autofocus>
    <input type="text" id="LastName" placeholder="Last Name">
    <input type="text" id="EmailAddress" placeholder="Email Address">
</form>

@import url(http://fonts.googleapis.com/css?family=Roboto);
form input {font-family: Roboto;}
form input:focus {border: 1px solid #044068;}

Hope this helps.

How to customize Facebook Like Box ?

The Like Box is a special version of the Like Button designed only for Facebook Pages. It allows admins to promote their Pages and embed a simple feed of content from a Page into other sites.

facebook-like-box-customized

Below is the code used to get this done, here a jsfiddle for it.

<style>
#fb-root {
    background: #f9faff;
    border: 1px solid #031f34;
    width: 293px;
    height: 155px;
    position: absolute;
    padding: 5px 8px 0px 0;
}
</style>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=442901809147985";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" style="overflow:hidden;height: 150px;" data-href="http://www.facebook.com/FacebookDevelopers" data-height="214" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>

Hope this helps.

How to create a Google Chrome App?

Step 1: Create the manifest

Every extension, installable web app, and theme has a JSON-formatted manifest file, named manifest.json, that provides important information. First create your manifest.json file using the format shown here.

{
  "name": "Code Formatter",
  "description": "A chrome plugin to format your HTML, CSS, JS, SQL or JSON code.",
  "version": "0.1",
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "icons": { "16": "icons/logo.png", "128": "icons/logo-128.png"}
}

Step 2: Create the background script

Next create a new file called background.js with the following content:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'bounds': {
      'width': 400,
      'height': 500
    }
  });
});

In the above sample code, the onLaunched event will be fired when the user starts the app. It then immediately opens a window for the app of the specified width and height. Your background script may contain additional listeners, windows, post messages, and launch data, all of which are used by the event page to manage the app.

Step 3: Create a window page

Create your window.html file:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>

Step 4: Create the icons

Copy these icons to your app folder: – logo-128.png and logo-16.png

Step 5: Launch your app

To load your app, bring up the apps and extensions management page by clicking the settings icon and choosing Tools > Extensions. Make sure the Developer mode checkbox has been selected. Click the Load unpacked extension button, navigate to your app’s folder and click OK.

CodeFormatter-Upload CodeFormatter-ChromeApp CodeFormatter-AppLaunch

ReferencesGoogle Chrome – Create Your First App

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

How to disable resizing for textarea using plain CSS ?

The resize property allows a developer to define whether or not a UI element can be resized manually by the user.

Now suppose you have a textarea as shown below,

<textarea id="address">Some text</textarea>

you can disable resizing using the following css : (jsfiddle link / live demo)

#address{
    resize: none;
}

there are couple of more ways in which you could do the same as shown below…

textarea {
    resize: none;
}
textarea[name=address] {
    resize: none;
}
textarea[id=address] {
    resize: none;
}

Example / Demo :

Hope this helps :)

Further Reading :
How to disable resizable property of TextArea?
Disable textarea resizing for Safari and Chrome

Top 5 CSS Button Styling Tutorials and Techniques

One of my designer friend, recently shared with me his small experiment on buttons using CSS. Here is a direct link to the fiddle he shared. I hope someone finds this useful.

Please feel free to modify this fiddle and share your output with me, using the comment box. Cheers !

Html Code :

<p>
    <div class="google">Google Red</div>
</p>

<p>
    <div class="facebook">Facebook Blue</div>
</p>

<p>
    <div class="amazon">Amazon Yellow</div>
</p>

<p>
    <div class="windows">Windows Phone Red</div>
</p>

<p>
    <div class="nexus">Google Nexus</div>
</p>

CSS Code :

.google {
  width: 200px;
  background-color: #D14836;
  border: 1px solid #999;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 5px;
  font-size: 12px;
  font-family: Arial;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  display: block;
  text-align: center;
  cursor: pointer;
}
.facebook {
  width: 200px;
  background-color: #5B74A8;
  border: 1px solid #29447E;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 5px;
  font-size: 12px;
  font-family: Arial;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  display: block;
  text-align: center;
  cursor: pointer;
}
.amazon {
  width: 200px;
  background-color: #FECD57;
  border: 1px solid #FBC43C;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 5px;
  font-size: 12px;
  font-family: Arial;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  display: block;
  text-align: center;
  cursor: pointer;
}
.windows {
  width: 200px;
  background-color: #E51400;
  border: 1px solid #E51400;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 5px;
  font-size: 12px;
  font-family: Arial;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  display: block;
  text-align: center;
  cursor: pointer;
}
.nexus {
  width: 200px;
  background-color: #4CADCB;
  border: 1px solid #02A9D6;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 5px;
  font-size: 12px;
  font-family: Arial;
  font-weight: bold;
  color: #fff;
  white-space: nowrap;
  display: block;
  text-align: center;
  cursor: pointer;
}

Further Reading :
CSS Button Styling Tutorials and Techniques

How to add horizontal scroll or vertical scroll to a div

Using the overflow CSS property this can be achieved !

The overflow property specifies what happens if content overflows an element’s box.

If the content of the div is too tall, there will be a vertical scrollbar. If the content is too wide there will be a horizontal scrollbar.

Code


<div style="overflow:auto;width:300px;height:250px;">

India, officially the Republic of India is a country in South Asia. It is the seventh-largest country by geographical area, the second-most populous country with over 1.2 billion people, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the south-west, and the Bay of Bengal on the south-east, it shares land borders with Pakistan to the west; China, Nepal, and Bhutan to the north-east; and Burma and Bangladesh to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India's Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia. 

</div>

Demo / Output

India, officially the Republic of India is a country in South Asia. It is the seventh-largest country by geographical area, the second-most populous country with over 1.2 billion people, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the south-west, and the Bay of Bengal on the south-east, it shares land borders with Pakistan to the west; China, Nepal, and Bhutan to the north-east; and Burma and Bangladesh to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India’s Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India’s Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India’s Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India’s Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India’s Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.

More – overflow-x and overflow-y

Follow these links for more information, overflow-x and overflow-y.

How to override all styles in CSS

I recently came across a very unique requirement, I wanted to change all font-family(s) I had used for this site. I had defined font-family at many different places in divs, spans, h1s, h2s and where not, so I wanted some shortcut way to do this.

Here is what I had used,

{code type=CSS}

* { font-family:”Calibri” !important }

{/code}

This is assuming that you don’t use !important for font-family anywhere else.

Give a common CSS to all input tags

You may want to give all input tags a common CSS. That is you want all your Text Fields, Password Fields, Radio button, Submit buttons etc… all to have a common CSS.

This can be done easily by simply including the below code in your CSS file as shown below. Here I am giving all my input tags a common font of 13px size and Calibri as font-family.

{code type=css}

input
{
font: 13px Calibri;
}

{/code}