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 Event delegation in JavaScript ?

It is a one of the most important JavaScript pattern to simplify event handling by smart use of bubbling.

Concept-

If there are many element inside one parent, and you want to handle events on them – don’t bind handlers to each element. Instead, bind the single handler to their parent, and get the child from event.target property.

Event delegation allows to graciously handle trees and nested menus.

<ul id="menu">
<li><a class="button" href="/php">PHP</a></li>
<li><a class="button" href="/html">HTML</a></li>
<li><a class="button" href="/javascript">JavaScript</a></li>
<li><a class="button" href="/flash">Flash</a></li>
</ul>
<ul id="menu">
<li><a class="button" href="/php">PHP</a>
<ul>
<li><a href="/php/manual">Manual</a></li>
<li><a href="/php/snippets">Snippets</a></li>
</ul>
</li>
<li><a class="button" href="/html">HTML</a>
<ul>
<li><a href="/html/information">Information</a></li>
<li><a href="/html/examples">Examples</a></li>
</ul>
</li>
</ul>

Below same js code will work for above both menus-

document.getElementById('menu').onclick = function(e) {
e = e || event
var target = e.target || e.srcElement
if (target.nodeName != 'A') return

var href = target.href
alert( href.substr(href.lastIndexOf('/')+1) )
return false // prevent url change
}
<div id="menu">
<button data-action="Save">Click to Save</button>
<button data-action="Load">Click to Load</button>
</div>

<script>
function Menu(elem) {
this.onSave = function() { alert('saving') }
this.onLoad = function() { alert('loading') }

var self = this

elem.onclick = function(e) {
var target = e && e.target || event.srcElement
var action = target.getAttribute('data-action')
if (action) {
self["on"+action]()
}
}
}

new Menu(document.getElementById('menu'))
</script>

Summary-
Event delegation is cool. It is one of the most useful JavaScript patterns.

The algorithm-
-Bind a handler to the container.
-In the handler: get event.target.
-If necessary, climb up the target.parentNode chain, until either the first suitable target is found (and handle it), or the container (this) is reached.

Benefits-
-Simplifies initialization, saves memory from extra handlers.
-Simplifies updates.
-Allows to use innerHTML without additional processing

Limits-
-First, an event should bubble in IE. Most of events do bubble, but not all of them. For other browsers, capturing phase is also suitable.
-Second, delegation in theory puts extra load on the browser, because the handler runs when an event happens anywhere inside the container. So, most of time the handler may do idle loops. Usually it’s not a big deal.

For more info-
http://javascript.info/tutorial/event-delegation#the-ba-gua-example

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….

How to create auto height column using div

Sometime, we need to create a table using div tags. It can be done easly by just creating a continer div(that will be a continer for all columns) and add required child divs(i.e that will be treated as a columns) and set the child div’s(i.e column) style float to left.

It works great if column’s height are fixed and there is no requirement for column’s content change, but when column’s content increase/decrease dynamically then it becomes very difficult to manage all column’s heights. I had spent a whole day to manage all column’s heights using jQuery/JavaScript.

But later, I comes to know that it can be done easly using only CSS 🙂 (i.e no need any script).
It can be done as:-
1) Create a container div and set its style “display:table;”
2) Create child divs for columns and set these style “display:table-cell;float:left;”


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Auto height columns using div/css without jQuery and JavaScript</title>
    <style type="text/css">
        .table
        {
            display: table;
            border: 1px solid red;
        }

        .col
        {
            display: table-cell;
            width: 200px;
            height: 300px;
            border: 1px solid red;
            vertical-align: top;
        }

        .col_1
        {
            background-color: antiquewhite;
        }

        .col_2
        {
            background-color: aqua;
        }

        .col_3
        {
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="col col_1">
            <textarea rows="5" cols="20">This is first column.</textarea>
        </div>
        <div class="col col_2">
            <textarea rows="5" cols="20">This is second column. </textarea>
        </div>
        <div class="col col_3">
            <textarea rows="5" cols="20">This is third column. </textarea>
        </div>
    </div>
</body>
</html>

Programming is easy….