Tutorialspoint

Html Dropping the Object Program

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

MomentJS Using Locale in Browser

<html>
   <head>
      <title>MomentJS - Adding locale</title>
      <script type="text/JavaScript" src="https://MomentJS.com/downloads/moment.js"></script>
      <script type="text/JavaScript" src="https://MomentJS.com/downloads/moment-with-locales.js"></script>
      <style>
         div {
            border: solid 1px #ccc;
            padding:10px;
            font-family: "Segoe UI",Arial,sans-serif;
            width: 40%;
         }
      </style>
   </head>
   <body>
      <h1>MomentJS - Adding locale</h1>
      <div style="font-size:25px" id="currentdate"></div>
      <br/>
      <br/>
      <div style="font-size:25px" id="changeddate"></div>
      <script type="text/JavaScript">
         moment.locale("pt");
         var a = moment().format('LLLL');
         moment.locale("hi");
         var b = moment().format('LLLL');
         document.getElementById("currentdate").innerHTML = "Output locale: " + a;
         document.getElementById("changeddate").innerHTML = "Output in hindi locale: " + b;
      </script>
   </body>
</html>

MomentJS Subtract

<html>
   <head>
      <title>MomentJS - Subtract Method</title>
      <script type="text/JavaScript"    src="https://MomentJS.com/downloads/moment.js"></script>
      <style>
         div {
            border: solid 1px #ccc;
            padding:10px;
            font-family: "Segoe UI",Arial,sans-serif;
            width: 75%;
         }
      </style>
   </head>
   <body>
      <h1>MomentJS - Subtract Method</h1>
      <div style="font-size:25px" id="currentdate"></div>
      <br/>
      <br/>
      <div style="font-size:25px" id="changeddate"></div>
      <br/>
      <br/>
      <div style="font-size:25px" id="changeddate1"></div>
      <br/>
      <br/>
      <div style="font-size:25px" id="changeddate2"v</div>
      <script type="text/JavaScript">
         var day = moment();
         document.getElementById("currentdate").innerHTML = "Current Date: " + day._d;
         var changeddate = moment().subtract(5, 'days').subtract(2, 'months');
         document.getElementById("changeddate").innerHTML = "Subtracting 5 days and 2 month using chaining method: " + changeddate._d;
         var changeddate1 = moment().subtract({ days: 5, months: 2 });
         document.getElementById("changeddate1").innerHTML = "Subtracting 5 days and 2 month using object method: " + changeddate1._d;
         var duration = moment.duration({ 'days': 10 });
         var changeddate2 = moment([2017, 10, 15]).subtract(duration);
         document.getElementById("changeddate2").innerHTML = "Subtracting 10 days from given date using duration method: " + changeddate2._d;
      </script>
   </body>
</html>

Bulma Breadcrumb

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Card</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script defer src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
    <body>
      <section class = "section">
         <div class = "container">
            <h1 class = "is-size-2">Breadcrumb</h1>
            <nav class = "breadcrumb is-small" aria-label = "breadcrumbs">
               <ul>
                  <li><a href = "#">Bulma</a></li>
                  <li><a href = "#">Documentation</a></li>
                  <li><a href = "#">Components</a></li>
                  <li class = "is-active"><a href = "#" aria-current = "page">Breadcrumb</a></li>
               </ul>
            </nav>
            <br>
            <!-- <p class = "is-size-3">Alignment </p> <br> -->
            <h1 class = "is-size-3">Alignment</h1>
            <br>
            <h1 class = "is-size-5">Center</h1>
            <nav class = "breadcrumb is-centered" aria-label = "breadcrumbs">
               <ul>
                  <li><a href = "#">Bulma</a></li>
                  <li><a href = "#">Documentation</a></li>
                  <li><a href = "#">Components</a></li>
                  <li class = "is-active">
                     <a href = "#" aria-current = "page">Breadcrumb</a>
                  </li>
               </ul>
            </nav>
            <br>
            <h1 class = "is-size-5">Right</h1>
            <nav class = "breadcrumb is-right" aria-label =" breadcrumbs">
               <ul>
                  <li><a href = "#">Bulma</a></li>
                  <li><a href = "#">Documentation</a></li>
                  <li><a href = "#">Components</a></li>
                  <li class = "is-active">
                     <a href = "#" aria-current = "page">Breadcrumb</a>
                  </li>
               </ul>
            </nav>
         </div>
      </section>
   </body>
</html>

Bulma Different Types of Sizes

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Forms Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Select Field Sizes
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">
               Small Select 
            </span>
            <div class = "field">
               <div class = "control">
                  <div class = "select is-small">
                     <select>
                        <option>Option One</option>
                        <option>Option Two</option>
                        <option>Option Three</option>
                     </select>
                  </div>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Normal Select 
            </span>
            <div class = "field">
               <div class = "control">
                  <div class = "select">
                     <select>
                        <option>Option One</option>
                        <option>Option Two</option>
                        <option>Option Three</option>
                     </select>
                  </div>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Medium Select 
            </span>
            <div class = "field">
               <div class = "control">
                  <div class = "select is-medium">
                     <select>
                        <option>Option One</option>
                        <option>Option Two</option>
                        <option>Option Three</option>
                     </select>
                  </div>
               </div>
            </div>
            <br>
            
            <span class = "is-size-5">
               Large Select 
            </span>
            <div class = "field">
               <div class = "control">
                  <div class = "select is-large">
                     <select>
                        <option>Option One</option>
                        <option>Option Two</option>
                        <option>Option Three</option>
                     </select>
                  </div>
               </div>
            </div>
            
         </div>
      </section>
      
   </body>
</html>

:active pseudo class program for button

<html>
   <head>
      <style>
         #thisButton:active { color: red}
      </style>
   </head>
   <body>
      <button id="thisButton">Click Me!!</button>
   </body>
</html>

:active pseudo class program for background color css

<html>
   <head>
      <style>
         body:active {
            background: seagreen;   
         }
      </style>
   </head>
   <body>
      <div>click anywhere in this window</div>
   </body>
</html>

:active pseudo class program for font-size css

<html>
   <head>
      <style>
         a:active {font-size:20px;}		
      </style>
   </head>
   <body>
      <a href="https://www.tutorialspoint.com">Click here to learn</a> 
   </body>
</html>

:active pseudo class program for color css

<html>
   <head>
      <style>
         a:active { color:green;}
      </style>
   </head>
   <body>
      <a href="https://www.tutorialspoint.com">Click here to learn</a> 
   </body>
</html>

JavaScript Remove a Particular Element

<html>
   <head>
      <title>JavaScript Array splice Method</title>
   </head>
   
   <body>
      <script>
         var arr = ["orange", "mango", "banana", "sugar", "tea"];

         var removed = arr.splice(2, 0, "water");
         document.write("After adding 1: " + arr );
         document.write("<br />removed is: " + removed);

         removed = arr.splice(3, 1);
         document.write("<br />After adding 1: " + arr );
         document.write("<br />removed is: " + removed);
      </script>
   </body>
   
</html>

1 2 3 4 5 6 7 ... 372 Next
Advertisements
Loading...