Javascript SlideShow - Next , Previous Button

javascript images slider

In This Javascript Tutorial we will See How To Create A Simple Images Slider With Next And Previous Button In JS Using Netbeans Editor .
See Previous SlideShow.


Project Source Code:


<!DOCTYPE html>
<html>
    <head>
        <title>Javascript: Slider</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            div{background-color: #95a5a6;width: 400px;overflow: hidden;margin: 50px auto;padding: 20px;}
            img{border: 2px solid #fff;}
            
            div button:first-of-type{float: left;}
            div button:last-of-type{float: right;}
            
            button{background-color: #fff; color: #27ae60; border: 2px solid #27ae60;
                   font-size: 20px; font-weight: bold; width: 50px; cursor: pointer;padding: 5px;}
            
        </style>
        
        <script>
            
            var i = 0,images = ["../images/img1.png",
                                "../images/img2.png",
                                "../images/img3.png",
                                "../images/img4.png"];
                            
          function mySlide(param)
          {
              if(param === 'next')
              {
                  i++;
                  if(i === images.length){ i = images.length - 1; }
              }else{
                  i--;
                  if(i < 0){ i = 0; }
              }
              
              document.getElementById('slide').src = images[i];
          }
            
        </script>
    </head>
    <body>
        
        <div>
            <img src="../images/img1.png" id="slide" alt="" width="400" height="200">
            <button onclick="mySlide('prev');"><</button>
            <button onclick="mySlide('next');">></button>
        </div>
        
    </body>
</html>


OUTPUT:

javascript slider

Javascript typewriter

How To Make A Typewriter Effect In Javascript Using setTimeout

Javascript typewriter effect



In This Javascript Tutorial we will see How To Create A Typewriter To Display Text Letter By Letter Using setTimeout In JS In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>JS: Show Text Letter By Letter</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
        <h1 id="hid"></h1>

        <script>
            
            var i = 1;
            function func()
            {
                var message = "This Is A Text Message Test";
                if( i <= message.length )
                {
                    
                    var txt = message.substring(0,i);
                    document.getElementById("hid").innerHTML = txt;
                    
                    if(i%2 === 0)
                    {
                        document.getElementById("hid").style.color = "BLUE";
                    }else{
                        document.getElementById("hid").style.color = "RED";
                    }
                    
                    setTimeout("func()",200);
                    i++;
                }
                
                else{
                    
                    i = 1;
                    document.getElementById("hid").innerHTML = "";
                    setTimeout("func()",1000);
                }
            }
            
            func();

        </script>
        
    </body>
</html>

CSS3 Rotate Div

How To Rotate A Div Using CSS3

css3 rotate div



In This CSS Tutorial we will see How To Rotate Div In Mouse Hover With Transition Using HTML And CSS3 Transform Property In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 - Rotate Div</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .container{
                background-color: #ddd;
                padding: 25px;
            }
            
            .content{
                width: 100px;height: 100px;background-color: red;
                transition: all 2s ease-in-out;
                transform: rotate(45deg);
            }
            .content:hover{
                transform: rotate(-180deg);
            }
            
            .child{width: 25px;height: 25px;}
            .child1{float: left;background-color: black;}
            .child2{float: right;background-color: yellow;}
            .child3{float: left;background-color: #fff;margin-top: 50%}
            .child4{float: right;background-color: blue;margin-top: 50%}
            
            .clearFloat{clear: both}
            
        </style>
        
    </head>
    <body>
        
        <div class="container">
            <div class="content">
                <div class="child child1"></div>
                <div class="child child2"></div>
                <div class="clearFloat"></div>
                <div class="child child3"></div>
                <div class="child child4"></div>
            </div>
        </div>
        
    </body>
</html>

CSS3 Moving A Div Animation

How To Move A Div In CSS3

css move div



In This CSS Tutorial we will see How To Make A Moving Div Animation Using Keyframes In CSS3 In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 - Moving Div</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .container{background-color: #ddd;padding: 25px;}
            .content{width: 100px;height: 100px;background-color: red;
                     animation: move 5s linear infinite; }
            
            @keyframes move{
                
                0%{
                    transform:translate(0);
                    opacity:0;
                }
                
                50%{
                    transform:translate(1100px);
                    opacity:1;
                }
                100%{
                    opacity:0;
                }
            }
            
        </style>
        
    </head>
    <body>

        <div class="container">
            <div class="content"></div>
        </div>
        
    </body>

</html>

JavaScript Multiplication Table

How To Create Multiplication Table In Javascript

Multiplication Table In Javascript



In This Javascript Tutorial we will see How To Make A Multiplication Table With HTML Table Using JS In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>

<html>
    <head>
        <title>Javascript Multiplication Table</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

        <script>
            
            document.write("<table border='1px'>");
            
            document.write("<tr style='font-size:30px;color:#fff;background-color:#000;'>");
            
            for(i = 1; i < 11; i++)
            {
                document.write("<th> [ " + i + " ]</th>");
            }
            
             document.write("</tr>"); 
            
            for(k = 1; k<11; k++)
            {
                var colorCode = "";
                if(k%2 === 0)
                {
                    colorCode = "#eee";
                }else{
                    colorCode = "#99e265";
                }
                
                document.write("<tr style='background-color:"+ colorCode +"'>");
                
                for(j= 1; j< 11; j++)
                {
                 document.write("<td style='font-size:23px;'>"+j+" X "+ k + " = " + j*k + "</td>")   
                }
                
                 document.write("</tr>"); 
            }

            document.write("</table>");
            
        </script>

    </body>
</html>


OUTPUT:

javascript mutiplication table

CSS Slide Rollover Animation

How To Create Slide Rollover Animation  Using CSS3




In This CSS Tutorial we will see How To Make Image Rollover Slide Using HTML And CSS3 In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Css Image Overflow</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
          
            .main{
                height: 50px;width: 100px;overflow: hidden;
            }
            .main img{margin-top: -50px;transition: all .5s ease-in-out}
            .main img:hover{margin-top: 0}
            
            .main2{margin-top: 10px;
                height: 100px;width: 50px;overflow: hidden;
            }
            .main2 img{margin-left: 0;transition: all .5s ease-in-out}
            .main2 img:hover{margin-left: -50px;}
            
        </style>

    </head>
    <body>
        
        <div class="main">
            <!-- the image size is 100px X 100px -->
            <img src="../images/imgy.png" alt=""/> 
        </div>
        
         <div class="main2">
            <!-- the image size is 100px X 100px -->
            <img src="../images/imgx.png" alt=""/> 
        </div>
        
    </body>
</html>

CSS3 Cubic-Bezier Animation

How To Create An Animation With Cubic Bezier Using CSS3

Css3 Keyframes & Cubic-Bezier



In This CSS Tutorial we will see How To Make An Animation Using Keyframes And Cubic-Bezier Using HTML And CSS3 In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 Animation: Cubic-Bezier</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            .main{
                width: 50px;
                height: 50px;
                background-color: red;
                border-radius:50%;
                margin: 100px auto 0 auto;
                animation: myAnimation 2s cubic-bezier(1,-0.52,0,1.76) infinite;
            }
            
            @keyframes myAnimation
            {
                0%{
                    transform:scale(1);
                    border-radius:0;
                }
                50%{
                    transform:scale(3);
                    border-radius:50%;
                }
                100%{
                    transform:scale(1);
                    border-radius:0;
                }
            }
            
        </style>
        
    </head>
    <body>
        
        <div class="main"></div>
        
    </body>
</html>

Useful WebSite Cubic-Bezier 

CSS3 - Water Drop Shape

How To Create A Water Drop Shape Using CSS3

css3 drop water shape



In This CSS Tutorial we will see How To Design A Water Drop Shape Using HTML And CSS3 In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 Water Drop Shape</title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            
            body{background-color: black;}
            
            .container{width: 700px;height: 300px;
                      margin: 100px auto;overflow: hidden;}
            
            .shape{
                width: 200px;
                height: 200px;
                background-color: #00eaff;
                border-radius: 50%;
                border-top-right-radius: 0;
                transform: rotate(-45deg);
                float: left;
                margin-top: 50px;
                margin-left: 20px;
                border: 5px solid #fff;
            }
            
            .container div:nth-of-type(2)
            {
                width: 150px;
                height: 150px;
            }
            
            .container div:nth-of-type(3)
            {
                width: 100px;
                height: 100px;
            }
            
            .container div:nth-of-type(4)
            {
                width: 50px;
                height: 50px;
            }
            
            .container div:nth-of-type(5)
            {
                width: 25px;
                height: 25px;
            }
            
        </style>
        
    </head>
    <body>
        
        <div class="container">
            
            <div class="shape"></div>
            <div class="shape"></div>
            <div class="shape"></div>
            <div class="shape"></div>
            <div class="shape"></div>
            
        </div>
    </body>
</html>

OUTPUT:

css tear drop shape

Javascript Mouse Position

How To Get Mouse Position Using Javascript

Javascript Mouse Coordinates



In This Javascript Tutorial we will see How To Get And Show The Cursor Coordinates On The Mouse Moving Event Or onClick And Display X And Y  Using JS In Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript - Mouse Position</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

        <p id="position">Test</p>

        <script>
            
            document.addEventListener("mousemove",function(event){
                
                var x = event.clientX;
                var y = event.clientY;
                
                document.getElementById('position').innerHTML = " X = "+ x +"][ Y = "+ y;
                
            });
            
        </script>

    </body>
</html>

Javascript: Add HTML Table Row

How To Add A Row To Html Table Using JavaScript

Add A Row To Html Table In Javascript



In This Javascript Tutorial we will see How To Insert A New Row To An Html Table From Input Text Using JS Using Netbeans Editor .




Project Source Code:

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript - Add HTML Table Row </title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <script>
            
            function addRow()
            {
                // get input values
                var fname = document.getElementById('fname').value;
                 var lname = document.getElementById('lname').value;
                  var age = document.getElementById('age').value;
                  
                  // get the html table
                  // 0 = the first table
                  var table = document.getElementsByTagName('table')[0];
                  
                  // add new empty row to the table
                  // 0 = in the top 
                  // table.rows.length = the end
                  // table.rows.length/2+1 = the center
                  var newRow = table.insertRow(table.rows.length/2+1);
                  
                  // add cells to the row
                  var cel1 = newRow.insertCell(0);
                  var cel2 = newRow.insertCell(1);
                  var cel3 = newRow.insertCell(2);
                  
                  // add values to the cells
                  cel1.innerHTML = fname;
                  cel2.innerHTML = lname;
                  cel3.innerHTML = age;
            }
            
        </script>
        
    </head>

    <body>
        
        First Name: <input type="text" name="fname" id="fname" /><br/><br/>
        Last Name: <input type="text" name="lname" id="lname" /><br/><br/>
        Age: <input type="text" name="age" id="age" /><br/><br/>
        <button onclick="addRow();">Add Row</button><br/><br/>

        <table border="1">
            
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Age</th>
            </tr>
            
            <tr>
                <td>AAAAAA</td>
                <td>BBBBBB</td>
                <td>10</td>
            </tr>
            
             <tr>
                <td>CCC</td>
                <td>DDDD</td>
                <td>20</td>
            </tr>
            
             <tr>
                <td>EEE</td>
                <td>FFFFF</td>
                <td>30</td>
            </tr>
            
             <tr>
                <td>GGGGG</td>
                <td>HHHH</td>
                <td>40</td>
            </tr>
            
             <tr>
                <td>MMMMMM</td>
                <td>NNNN</td>
                <td>50</td>
            </tr>
            
        </table>

    </body>

</html>

OUTPUT:

add row to html table in javascript