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 HTML5?

HTML5 is the latest standard for HTML.

It was specially designed to deliver rich content without the need for additional plugins. The current version delivers everything from animation to graphics, music to movies, and can also be used to build complicated web applications.

HTML5 is also cross-platform. It is designed to work whether you are using a PC, or a Tablet, a Smartphone, or a Smart TV.

In HTML5 there is only one DOCTYPE declaration, and it is very simple:

<!DOCTYPE html>

Below is a simple HTML5 document, with the minimum of required tags:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><em>Title of the document</em></title>
  </head>
  <body>
<em>     Content of the document......</em>
  </body>
</html>

What is New in HTML 5? 

1) New Elements
2) New Attributes
3) New Types
4) Full CSS3 Support
5) Video and Audio
6) 2D/3D Graphics

APIs for:- 
1)Geolocation
2)Drag/Drop
3)Web Storage
4)App Cache
5)Web Workers
6)SSE

New Elements :-  Below is a list of the new main HTML elements, introduced by HTML5. <canvas>, <audio>, <video>, <datalist>, <footer>, <header>, nav,  etc… ()

New Attributes :- HTML5 has several new attributes for <form> and <input>.

New attributes for <form>:  autocomplete and novalidate

New attributes for <input>: autocomplete, autofocus, required, pattern, placeholder etc…

New Types :-   HTML5 has several new input types for forms. These new features allow better input control and validation.

color , date, datetime, datetime-local, email, month, number , url etc…

Geolocation :-  HTML5 Geolocation is used to locate a user’s geographical position.

Drag/Drop:- Drag and drop is a very common feature. It is when you “grab” an object and drag it to a different location. In HTML5, drag and drop is part of the standard,and  any element can be draggable.

Web Storage:-  With HTML5, web pages can store data locally within the user’s browser. Earlier, this was done with cookies.

However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website’s performance.

The data is stored in name/value pairs, and a web page can only access data stored by itself.

HTML5 Web Storage provides two new objects for storing data on the client:-
window.localStorage – stores data with no expiration date
window.sessionStorage – stores data for one session (data is lost when the tab is closed)

App Cache :-  

HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.

Application cache gives an application three advantages:
Offline browsing – users can use the application when they’re offline
Speed – cached resources load faster
Reduced server load – the browser will only download updated/changed resources from the server

To enable application cache, include the manifest attribute in the document’s <html> tag:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Every page with the manifest attribute specified will be cached when the user visits it. If the manifest attribute is not specified, the page will not be cached (unless the page is specified directly in the manifest file).

The Manifest File:-
The manifest file is a simple text file, which tells the browser what to cache (and what to never cache). The manifest file has three sections:

CACHE MANIFEST – Files listed under this header will be cached after they are downloaded for the first time
NETWORK – Files listed under this header require a connection to the server, and will never be cached
FALLBACK – Files listed under this header specifies fallback pages if a page is inaccessible

	CACHE MANIFEST
	# 2012-02-21 v1.0.0
	/theme.css
	/logo.gif
	/main.js

	NETWORK:
	login.asp

	FALLBACK:
	/html/ /offline.html

 

Web Workers :-

A web worker is a JavaScript running in the background, without affecting the performance of the page.

Server-Sent Events :-
HTML5 Server-Sent Events allow a web page to get updates from a server.

 

 

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