Tutorials Point, posted 14h 17m ago

Columns Property with CSS

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 600px;
            height: 300px;
            background: white;
            border: 10px solid red;
            animation: myanim 3s infinite;
            bottom: 30px;
            position: absolute;
            column-rule: 10px inset orange;
            column-count: 4;
         }
         @keyframes myanim {
            20% {
               bottom: 100px;
               box-shadow: 30px 45px 70px orange;
               column-rule-color: black;
               columns: 70px 6;
            }
         }
      </style>
   </head>
   <body>
      <h2>Performing Animation on column rule color property</h2>
      <div>This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text!</div>
   </body>
</html>

Tutorials Point, posted 14h 18m ago

JavaScript function from an onClick event

<html>
   <head>
      <script>
         <!--
            function display() {
               alert("Hello World")
            }
         //-->
      </script>
   </head>
   <body>
      <p>Click the following button and see result</p>
      <form>
         <input type="button" onclick="display()" value="Click me" />
      </form>
   </body>
</html>

Tutorials Point, posted 14h 19m ago

CSS column-width property

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 600px;
            height: 300px;
            background: white;
            border: 10px solid red;
            animation: myanim 3s infinite;
            bottom: 30px;
            position: absolute;
            column-rule: 10px inset orange;
            column-count: 4;
            column-width: 200px;
         }
         @keyframes myanim {
            20% {
               bottom: 100px;
               box-shadow: 30px 45px 70px orange;
               column-rule-color: black;
               column-width: 150px;
            }
         } 
      </style>
   </head>
   <body>
      <h2>Performing Animation on column width property</h2>
      <div>This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text! This is demo text!</div>
   </body>
</html>

Tutorials Point, posted 14h 20m ago

JavaScript function from an onmouseover event

<html>
   <head>
      <script>
         <!--
            function over() {
               document.write ("Mouse Over");
            }
            function out() {
               document.write ("Mouse Out");
            }
         //-->
      </script>
   </head>
   <body>
      <p>Bring your mouse inside the division to see the result:</p>
      <div onmouseover="over()" onmouseout="out()">
         <h2> This is inside the division </h2>
      </div>
   </body>
</html>

Tutorials Point, posted 14h 21m ago

JavaScript function from an onmouseout event

<html>
   <head>
      <script>
         <!--
            function over() {
               document.write ("Mouse Over");
            }
            function out() {
               document.write ("Mouse Out");
            }
         //-->
      </script>
   </head>
   <body>
      <p>Bring your mouse inside the division to see the result:</p>
      <div onmouseover="over()" onmouseout="out()">
         <h2> This is inside the division </h2>
      </div>
   </body>
</html>

Tutorials Point, posted 14h 24m ago

JavaScript super() function

<!DOCTYPE html>
<html>
   <body>
      <script>
         class Department {
            constructor() {}
            static msg() {
               return 'Hello';
            }
         }
         class Employee extends Department {
            constructor() {}
            static displayMsg() {
               return super.msg() + ' World!';
            }
         }
         document.write(Employee.displayMsg());
      </script>
   </body>
</html>

Tutorials Point, posted 14h 25m ago

JavaScript create a custom object

<!DOCTYPE html>
<html>
   <body>
      <p id="test"></p>
      <script>
         var dept = new Object();
         dept.employee = "Amit";
         dept.department = "Technical";
         dept.technology ="Java";

         document.getElementById("test").innerHTML =
         dept.employee + " is working on " + dept.technology + " technology.";
      </script>
   </body>
</html>

Tutorials Point, posted 14h 28m ago

JavaScript register events

<!DOCTYPE html>
<html>
   <head>
      <script>
         function display( ) {
            click.onclick = styleMe;
            uname.onclick = styleMe;
         }
         function styleMe ( ) {
            this.style.backgroundColor = "#000000";
            this.style.color = "#FFFFFF";
         }
      </script>
   </head>
   <body onload="display()" >
      <div id="uname"> Hello Wordl!</div>
      <button id="click"> Click</button>
   </body>
</html>

Tutorials Point, posted 14h 28m ago

Usage of rgba() CSS Function

<!DOCTYPE html>
<html>
   <head>
      <style>
         h1 {
            background-color:hsl(0,100%,50%);
         }
         h2 {
            background-color:rgb(0,0,255);
            color: rgb(255,255,255);
         }
         p {
            background-color:rgba(255,0,0,0.9);
         }
      </style>
   </head>
   <body>
      <h1>Red Background</h1>
      <h2>Blue Background</h2>
      <p>This is demo text!</p>
   </body>
</html>

Tutorials Point, posted 14h 30m ago

JavaScript convert the arguments

<!DOCTYPE html>
<html>
   <body>
      <script>
         function sortArg() {
            var args = Array.from(arguments);
            return args.sort();
         }
         document.write(sortArg('x', 'y', 'z', '20', '66', '35','john', 'david'));
      </script>
   </body>
</html>

Advertisements
Loading...