JSFiddle

  • Get Largest Number

    Little function to get the largest number from an array.

    var l = [1,2,3,4,-5,-6,-7,8,-09,-8,-6,4,-2,3,5,6,7,-66 ...
  • Gallop Carousel Slider Demo #8 is the latest revision

    jQuery 1.11.0, HTML, CSS, JavaScript

    $(document).ready(function(){
        // settings
        var autoPlay = true;
        var autoPlaySpeed = 3000;
    
        // init vars
        var $gallop = $(".gallop");
        var $slides = $("li");
        var itms ...
  • Dragging an element with mousemove handler stops tracking if mouse moves too quickly.

    The cursor was going outside of the element I was dragging and that was causing the problem. I needed to bind the mousemove handler to a larger parent element, such as body.

    $("document").ready(function(){
        $(".parts").on("mousedown touchstart", ".part", function(pos){
            pos.preventDefault();
            pos.stopPropagation();
            var downL = pos.clientX;
            var downT ...
  • Vertical Centering with FlexBox

    Pretty simple, really.

    <div class="Aligner">
      <div class="Aligner-item">wow.</div>
      <div class="Aligner-item">Hi<br>There<br>CSS<br>and<br>HTML</div>
      <div class="Aligner-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat tellus ut suscipit sagittis ...</div></div>
  • problems with link icons

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

    <p>Hello, <a rel="external" href="http://google.com">a link that's external</a>, e.g. linking offsite.</p>
    <p>Hello, <a href="http://google.com"class="file">a link to a file</a>, e.g. download.</p>
    <p>Hello ...</p>
  • Tabbed interface

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

    Multiple steps, sort of like tabs. 
    <div class="steps">
        <section id="one">
            <h1><a href="#one">One</a></h1>
            <div><p>hello one hello one hello one hello one hello one hello one hello ...</p></div></section></div>
  • Demo with CSS cursor problem #7 is the latest revision

    CSS cursor property isn't aware of dynamic changes, it requires mouse movement.

    $(document).ready(function(){
        $("body").on("click", function(c){
            $(".drag").offset({
                top: c.pageY-8,
                left: c.pageX-25
            });
        });
    });
  • Demoing problems with orphaned headers and CSS columns

    CSS columns come with a lot of problems to work out.

    <div class="columnize">
        <p><b>Lorem ipsum dolor</b> sit amet, consectetur adipiscing elit. Pellentesque non nunc ligula. Fusce sed elit vitae diam dictum volutpat. Nulla ...</p></div>
  • Simplest possible text edit/modify #11 is the latest revision

    jQuery 1.10.1, HTML, CSS, JavaScript

    $(document).ready(function(){
        $("div").on("keyup", function(){
           $("textarea").html($(this).html());
        });
    });
  • Text Edit and Modify #7 is the latest revision

    jQuery 1.10.1, HTML, CSS, JavaScript

    function getSelectionText() {
        var text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return text;
    }
    window.log = function ...