JSFiddle

  • Nucleotide formatter

    jQuery 3.1.0, HTML, CSS, JavaScript

    function changedRaw() {
    	var raw = $("#raw").val();
      raw = raw
      				.replace(/[0-9\s]/ig, '')
              .toUpperCase()
              .replace(/(.{60})/g, "$1\r");
      $("#out").text ...
  • Jquery UI Drag n Drop #3 is the latest revision

    jQuery 2.0.2, HTML, CSS, JavaScript, jQuery UI 1.10.3

    $('document').ready(function () {
      
        $('.side_bar_element').draggable({
            connectToSortable: ".wrapper",            
            helper: "clone",
            opacity: 0.55,
            zIndex: 100,
            stop: function(event, ui) {
            }
        });
        
     $(".wrapper").sortable();
        
    });
  • Reverterable Elements #7 is the latest revision

    jQuery 1.11.0, HTML, CSS, JavaScript

    $(document)
        .on("focus", "textarea[data-module='revertable'], [data-module='revertable']:text, [data-module='revertable'] textarea, [data-module='revertable'] :text",
    
    function () {
        if (typeof $(this).data ...
  • jQuery tutorial

    jQuery 1.11.0, HTML, CSS, JavaScript

    // $( "ul" ).sortable();
    // $( "ul" ).selectable();
  • JavaScript tutorial

    No-Library (pure JS), HTML, CSS, JavaScript

    /* ----------------- Document object ----------------- */
    /*document.writeln( "This is a dynamic text<br />");
    document.bgColor = "#77AADD";
    
    /*
    // ----------------- Message Box -----------------
    // alert("Congratulations!!! You've just won ...
  • Display Options

    No-Library (pure JS), HTML, CSS, JavaScript

    <strong>block</strong> list:
    <ul class="block-list">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
        
    <strong>inline-block</strong> list:
    <ul class="inline-block-list">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
        
    <strong>inline</strong> list:
    <ul class="inline-list">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
        
        
    <strong>table</strong> list:
    <ul class="table-list">
        <li>One</li>
        <li>Two</li>
        <li>Three ...</li></ul>
  • Pseudo Classes Example #1 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <ul class="striped highlighted">
        <li>1st row</li>
        <li>2nd row</li>
        <li>3rd row</li>
        <li>4th row</li>
    </ul>
  • Pseudo element example

    No-Library (pure JS), HTML, CSS, JavaScript

    <ul class="comma-separated">
        <li>Some value</li>
        <li>Some value</li>
        <li>Some value</li>
    </ul>
  • A Positioning Example

    No-Library (pure JS), HTML, CSS, JavaScript

    <div id="a1">Absolute</div>
    <div id="a2">Static
        <div id="a3">Relative
            <div id="a4">Absolute</div>
        </div>
    </div>
    <div id="a5">Fixed</div>
  • Force text element to have two lines

    CSS, jQuery

    $(".two-lines").each(function () {
        var $lines = $(this).height() / parseInt($(this).css("lineHeight"));
        
        while (($lines > 2) || ($(this)[0].scrollWidth > $(this).width())) {
            $(this ...