working on it ...

Filters

Explore Public Snippets

Sort by

Found 45k snippets

    public by lindao modified May 5, 2017  76  1  3  0

    image_amp_by_lindao

    <img class="img img-responsive center-block" src="images/feriekredit.png"><br>       

    public by makli1971 modified Mar 13, 2017  114  1  4  0

    HTML5 Basic Template

    This snippet is a simple, basic HTML5-Template. I use it for getting support when creating a HTML5-Page from scratch.
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<link rel="stylesheet" href="styles.css">
    	<script src="script.js"></script>
    </head>
    <body>
    
    </body>
    </html>

    public by Bobby Kozora modified Oct 21, 2016  101  0  2  0

    Outlook Email UL Fix

    Outlook Email UL Fix: outlook-ul-fix.html
    <!--[if gte mso 9]>
    <style>
    .fixed-ul li {
        text-indent: -1em; /* Normalise space between bullets and text */
    }
    </style>
    <![endif]-->
    
    <!-- -->
    
    <ul style=" margin:0px 0px 0px 15px; list-style:disc; padding-left: 0px;" class="fixed-ul">
      <li style=" margin: 0 px; padding: 0px; color: #f17a21;">...</li>
    </ul>
    
    
    

    public by passh modified Oct 19, 2016  815  2  3  0

    HTML TWIG TEMPLATE BASIC

    basic twig html template
    {# HTML TEMPLATE TWIG TEMPLATE BASIC by Passh#}
    <!DOCTYPE HTML>
    
    <html lang="es">
    	<body>
    
    			<head>
    					<meta charset="utf-8" />
    					<title>
    							{% block titulo %} 
    								HTML TWIG TEMPLATE
    							{%endblock%}
    					</title>
    			</head>
    	</body>
    	<footer>by Passh</footer>
    </html>

    public by willamecm modified Oct 12, 2016  970  3  3  0

    HTML 5 - Estrutura

    aqui vamos ter a estrutura do html 5
    <!DOCTYPE html>
    <html lang="pt-br">
    	<head>
           <meta charset="utf-8"/>
           <title>título da página</title>
       </head>
       
       <body>
           
       </body>
    </html>

    public by strela modified Sep 29, 2016  718  5  3  0

    form validation

    <html>
    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
      <link rel="stylesheet" type="text/css" href="form.css">
    
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    
      <title>
        Form
      </title>
    </head>
    
    <body>
    
      <form id="resume_form" class="jotform-form" action="#" method="post"
        enctype="multipart/form-data" name="resume_form" accept-charset="utf-8"
        novalidate="true">
    
        <div class="form-all">
          <ul class="form-section page-section">
          <li class="form-line form-line-column form-col-1 jf-required" data-type="control_textbox">
            <label class="form-label form-label-top"for="name">
              Name
              <span class="form-required">
                *
              </span>
            </label>
            <div class="form-input-wide jf-required">
              <input id="name" name="name" class="form-textbox validate_required form-validation-error" data-type="input-textbox" size="50" value="" type="text">
            </div>
          </li>
          <li class="form-line form-line-column form-col-2" data-type="control_textbox">
            <label class="form-label form-label-top" for="phone"> Phone </label>
            <div class="form-input-wide jf-required">
              <input id="phone" name="phone" class=" form-textbox" data-type="input-textbox" size="50" value="" type="text">
            </div>
          </li>
          <li class="form-line form-line-column form-col-3" data-type="control_textarea">
            <label class="form-label form-label-top" for="comments"> Comments </label>
            <div class="form-input-wide jf-required">
              <textarea id="comments" name="comments" class="form-textarea" cols="35" rows="6"></textarea>
            </div>
          </li>
          <li class="form-line form-line-column form-col-4" data-type="control_fileupload">
            <label class="form-label form-label-top" for="attachment"> Attachment </label>
            <div class="form-input-wide jf-required">
              <input id="attachment" name="attachment" class="form-upload validate_upload" data-imagevalidate="yes" file-maxsize="1024" file-minsize="0" file-limit="0" type="file">
            </div>
          </li>
          <li class="form-line" data-type="control_button">
            <div class="form-input-wide">
              <div style="text-align:right" class="form-buttons-wrapper">
                <button type="submit" class="form-submit-button">
                  Submit
                </button>
              </div>
            </div>
          </li>
        </ul>
        </div>
    
      </form>
    
      <form id="contact_form" class="jotform-form" action="#" method="post"
        enctype="multipart/form-data" name="contact_form" accept-charset="utf-8"
        novalidate="true">
        <div class="form-all">
          <ul class="form-section page-section">
            <li class="form-line form-line-column form-col-1 jf-required" data-type="control_textbox">
              <label class="form-label form-label-top" for="name">
                Name
                <span class="form-required">
                  *
                </span>
              </label>
              <div class="form-input-wide jf-required">
                <input id="name" name="name" class=" form-textbox validate_required form-validation-error" data-type="input-textbox" size="50" value="" type="text">
              </div>
            </li>
            <li class="form-line form-line-column form-col-2 jf-required" data-type="control_textbox">
              <label class="form-label form-label-top" for="email">
                Email
                <span class="form-required">
                  *
                </span>
              </label>
              <div class="form-input-wide jf-required">
                <input id="email" name="email" class=" form-textbox validate_required validate_email" data-type="input-textbox" size="50" value="" type="text">
              </div>
            </li>
            <li class="form-line form-line-column form-col-3 jf-required" data-type="control_textarea">
              <label class="form-label form-label-top" for="message">
                Message
                <span class="form-required">
                  *
                </span>
              </label>
              <div class="form-input-wide jf-required">
                <textarea id="message" name="message" class="form-textarea validate_required" cols="35" rows="6"></textarea>
              </div>
            </li>
            <li class="form-line" data-type="control_button">
              <div class="form-input-wide">
                <div style="text-align:right" class="form-buttons-wrapper">
                  <button type="submit" class="form-submit-button">
                    Submit
                  </button>
                </div>
              </div>
            </li>
          </ul>
        </div>
    
    <script type="text/javascript">
    VALIDATIONS = {
      REQUIRED: 0,
      EMAIL: 1,
      FILE: 2,
    }
    EXCEPTIONS = {
      REQUIRED: "This field is required.",
      EMAIL: "Enter a valid e-mail address.",
      FILE_TYPE: "Invalid file extention.",
      FILE_SIZE: "Invalid file size.",
      FORM: "There are errors on the form. Please fix them before continuing.",
    }
    
    function generate_form_error(message) {
      error = $("<div></div>").addClass("form-button-error").append(
        $("<p></p>").text(message)
      )
      return error;
    }
    function generate_error(message) {
      error = $("<div></div>").addClass("form-error-message").append(
        $("<img>").attr("src", "exclamation-octagon.png").css("margin-right", "5px").attr("align", "left")
      ).append(
        document.createTextNode(message)
      ).append(
        $("<div></div>").addClass("form-error-arrow").append(
          $("<div></div>").addClass("form-error-arrow-inner")
        )
      )
      return error;
    }
    function clear_errors(input) {
      input.parent().find(".form-error-message").each(function() {
        $(this).remove();
      })
    }
    function add_error(input, message) {
      input.parent().append(generate_error(message));
    }
    function isValidEmailAddress(emailAddress) {
        var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
        return pattern.test(emailAddress);
    };
    function validate(input, type) {
      if (input.parent().find(".form-error-message").length > 0) {
        return false;
      }
      switch (type) {
        case VALIDATIONS.REQUIRED:
          clear_errors(input);
          if (input.val().length === 0)
            add_error(input, EXCEPTIONS.REQUIRED);
          break;
        case VALIDATIONS.EMAIL:
          clear_errors(input);
          if (!isValidEmailAddress(input.val()))
            add_error(input, EXCEPTIONS.EMAIL);
          break;
        case VALIDATIONS.FILE:
          clear_errors(input);
          var ext = $(this).val().split('.').pop().toLowerCase();
          if($.inArray(ext, ["pdf", "doc", "docx", "xls", "xlsx", "csv", "rtf", "html", "mpg", "flv", "avi", "jpg", "jpeg", "png", "gif"]) == -1)
            add_error($(this), EXCEPTIONS.FILE_TYPE);
          var size = this.files[0].size;
          console.log(ext, size);
          if(size < 0 || size > 1024*1024)
            add_error($(this), EXCEPTIONS.FILE_SIZE);
          break;
        default:
      }
    }
    $("[class^='validate'], [class*=' validate'], :not([class*=' validate_upload'])").focus(function() {
      clear_errors($(this));
    })
    $(".validate_required").focusout(function() {
      validate($(this), VALIDATIONS.REQUIRED);
    })
    $(".validate_email").focusout(function() {
      validate($(this), VALIDATIONS.EMAIL);
    })
    $(".validate_upload").bind("change", function (e) {
      validate($(this), VALIDATIONS.FILE);
    })
    $(".form-submit-button").click(function() {
      $(this).parents("form").find(".validate_required").each(function() {
        validate($(this), VALIDATIONS.REQUIRED);
      })
      if ($(this).parents("form").find(".form-error-message").length > 0) {
        $(this).parent().parent().find(".form-button-error").each(function() {
          $(this).remove();
        })
        $(this).parent().parent().append(generate_form_error(EXCEPTIONS.FORM));
        return false;
      }
    })
    </script>
    
    </body>
    </html>
    

    public by JKCPR modified Sep 20, 2016  748  1  4  1

    AngularJS 'Ctrl as vm' pattern

    Within controller use 'var varname' if it is only needed internally, anything which needs to be bound to the ViewModel uses 'vm.varname' because in 'Controller as vm' pattern you forego using $scope to bind to the ViewModel and instead use the vm.object instead. Sometimes $scope is necessary but less so using this pattern....vm is readable and conv
    // AngularJS 'Controller As vm' pattern
    <script>
    (function(){
      "use strict";
    
      var app = angular.module('app')
        .controller('Customers', [function() {
          var vm = this; //this is implicitly bound to controller's scope
      
          vm.title = 'Customers';
          vm.customers = [
            {name: 'Haley'}, {name: 'Ella'}, {name: 'Landon'}, {name: 'John'}
            ];
        }])
        .controller('Shells', [function() {
          var vm = this; //this need not be named identically as in HTML
      
          vm.title = 'Shells';
          vm.shells = [
            {name: 'Main Shells'}, {name:'Half Shells'},{name: 'Quarter Shells'}
          ];
        }]);
    })();
    </script>
    
    <div ng-controller="Shell as shellVm">
      <h1>{{  shellVm.title }}</h1>
      <article ng-controller="Customers as customersVm">
        <h2> {{ customersVm.title }} in </h2>
        <ul ng-repeat="c in customersVm.customers">
          <li>{{ c.name }}</li>
        </ul>
      </article>
    </div>

    public by AysadKozanoglu modified Aug 19, 2016  702  2  2  0

    difference between onload, readyState, and DOMContentLoaded to see it look on javascript console log

    difference between onload, readyState, and DOMContentLoaded to see it look on javascript console log : readyState_onLoad_example.html
        <!DOCTYPE html>
        <html>
          <head>
            <script>
            // best way for me  with experience
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                       //your code here...
                    }, false);
                }        
            //-->
            
              window.onload = function () {
                console.log(''+(+new Date)+': Onload fired');
              };
         
              document.onreadystatechange = function () {
                console.log(''+(+new Date)+': Ready state changed'); 
                if (document.readyState == "complete") { 
                  console.log(''+(+new Date)+': Ready = Complete'); 
                }
              };
         
              window.addEventListener("DOMContentLoaded", function () {
                console.log(''+(+new Date)+': DOM Content Loaded');
              });
            </script>
          </head>
          <body>
            <h1>Test</h1>
            <p>To see the difference between <code>onload</code> and <code>readyState == "complete"</code>
              and <code>DOMContentLoaded</code>.</p>
            <p>Run me with Firebug or Chrome Dev Tools, and cache disabled, and watch the console.</p>
            <hr />
            <img src="http://i.imgur.com/owuVS.gif" />
            <img src="http://i.imgur.com/1sE1n.jpg" />
            <img src="http://i.imgur.com/A2s1e.jpg" />
            <img src="http://i.imgur.com/BaFin.jpg" />
          </body>
    </html> 
    
    
    

    public by bfranzoi modified Aug 3, 2016  741  0  4  0

    Bootstrap CDN

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>     
    

    public by callahan modified Jul 13, 2016  764  4  2  0

    Number Average

    Number Average: Average.html
    <!DOCTYPE html>
    <html>
    <head>
      <title>Average of Three Numbers</title>
    </head>
    <body>
     
      Enter value of 'a': <input type="number" id="a">
      <br><br>
     
      Enter value of 'b':<input type="number" id="b">
      <br><br>
     
      Enter value of 'c':<input type="number" id="c">
      <br><br>
     
      <input type="submit" onclick="Avg()" value="RUN">
      <br><br>
     
      Average Of 'a','b' and 'c' :<div id="show"></div>
     
      <script>
       function Avg()
       {
           var a=document.getElementById("a").value;
           var b=document.getElementById("b").value;
           var c=document.getElementById("c").value;
                  
           document.getElementById("show").innerHTML=((a*1)+(b*1)+(c*1))/3;
       }
       </script>
        
    </body>
    </html>
    
    
    
    • Public Snippets
    • Channels Snippets