Bootstrap .woff2 fonts not getting loaded correctly ?

If you are also facing the issue of not loading bootstarp .woff2 fonts and getting errors in browser console window. Then this article may be useful for you.

It happens due to the server’s not configured for MIME type ‘woff’ or ‘woff2’. We can easily fix this issue by just adding MIME type to the server either using IIS manager or web.config file.

Using IIS Manager-

  1. open IIS manager
  2. Features View -> MIME Types
  3. Actions -> Add
  4. You will see add MIME Type box and put woff2 extension in the file extension “.woff2”
  5. and MIME type as “application/font-woff2” as well.

Using web.config file-


<system.webServer>
	<staticContent>
		<remove fileExtension=".woff2" />
		<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
	</staticContent>
</system.webServer>

Programming is Easy…

How to slide HTML element using only JavaScript ?

If you are looking for, how to slide HTML elements using only JavaScript then this article may can help you. Below is an idea to do this-

<html>
<head>


<style>
        .carousel-container {
            margin: 10px;
            width: 1240px;
        }

        .item {
            width: 200px;
            background-color: red;
            height: 100px;
            display: inline-block;
            position: relative;
        }
    </style>


    <script>

        function MoveRight() {
            var containerWidth = document.getElementsByClassName('carousel-container')[0].offsetWidth;
            var itemWidth = document.getElementsByClassName('item')[0].offsetWidth;
            var widthToMove = containerWidth - itemWidth;

            var temp = 0;
            var time = window.setInterval(function () {
                if (temp >= widthToMove) {
                    window.clearInterval(time);
                }
                else {
                    document.getElementsByClassName('item')[0].style.left = temp + 'px';
                    temp += 1;
                }
            }, 10);
        }
    </script>

</head>
<body>


<div class="carousel-container">


<div class="item"></div>


    </div>


    <button class="btnMove" onclick="MoveRight();">MoveRight</button>
</body>
</html>

We can use properties like left, right, top, bottom, margin-left, margin-right, margin-top and margin-bottom as per need.

Programming is Easy…

What is the difference between attributes and properties in HTML/JAVASCRIPT ?

The difference is that,  the  prop  method deals with properties defined by the Dom  ApI  HTMLElement  object,  rather than attributes defined by the  htmL element in markup.

Often,  the attributes and properties are the same,  but this isn’t always the case.  A simple example is the  class  attribute,  which is represented in the  HTMLElement  object using the  className  property.

In general,  the  prop  method is the one you should use because it returns objects that are easier to work with than attribute values.

Programming is Easy !!!!

How to set multiple background images using CSS ?

CSS3 allows us  to set multiple background images for box elements, using nothing more than a simple comma-separated list.

Browser support : Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) and even Internet Explorer (9.0+) all implementing the feature.

Example:- 

#example1 {
   width: 500px;
   height: 250px;
   background-image: url('Image 1 URL'), url('Image 2 URL');
   background-position: center bottom, left top;
   background-repeat: no-repeat;
}

Multiple background images can be specified using either the individual background properties or the background
shorthand property.

Method 1:-
Using individual background properties

#example1 {
   background-image: url('Image 1 URL'), url('Image 2 URL');
}

A comma separated list is also used for the other background properties; background-repeat,background-attachmentbackground-positionbackground-clipbackground-originand background-size.

#example1 {
   background-position: center bottom, left top;
}

Method 2:- Using the ‘background’ shorthand property

#example2 {
background: url('Image 1 URL') center bottom no-repeat, url('Image 2 URL') left top no-repeat;
}

Reference: http://www.css3.info/preview/multiple-backgrounds/

Programming is easy….

How to create mouse over menu without jQuery/Javascript in HTML?

Sometime, we need to display a mouse over menu like in grid to edit/delete rows etc…
It can be done easly by just creating required menu options and set default display style to none and show menu on item’s/rows mouse over in css.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Mouse over menu using div/css without jQuery and JavaScript</title>
    <style type="text/css">
        .itemsContainer
        {
            border: 1px solid red;
            height: 300px;
            width: 600px;
        }

        .item
        {
            height: 100px;
            width: 100px;
            float: left;
            margin: 10px;
        }

        .itemsContainer .item:nth-child(odd)
        {
            border: 1px solid green;
            background-color: gainsboro;
        }

        .itemsContainer .item:nth-child(even)
        {
            border: 1px solid gold;
            background-color: lavender;
        }

        .menu
        {
            list-style-type: none;
            margin-top: 0px;
            margin-left: 15px;
            display: none;
        }

            .menu li a
            {
                color: red;
                text-decoration: none;
            }

        .itemsContainer .item:hover .menu
        {
            display: block;
        }
    </style>
</head>
<body>
    <div class="itemsContainer">
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
        <div class="item">
            <ul class="menu">
                <li>
                    <a href="#">Edit</a>
                </li>
                <li>
                    <a href="#">Delete</a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>

Programming is easy….