DIV

How to slide HTML element using only JavaScript ?

jogendras DIV, HTML, Web , ,

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…

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

jogendras CSS, DIV, HTML, jQuery, Script , , , , , ,

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