JSFiddle

  • Multistep Form #40 is the latest revision

    jQuery 1.8.3, HTML, CSS, JavaScript

    $('#myform').multistep({
        stepSelector            : '.step', 
        actions                 : '.actions', 
        onAfterShowStep         : function(step){}, 
        onBeforeShowNextStep    : function(step){},
        onBeforeShowPrevStep    : function(step){}, 
        prevButtonText          : 'Back', 
        nextButtonText          : 'Next' 
    });
    
  • jQuery UI - Slider #200 is the latest revision

    jQuery 1.9.1, HTML, CSS, JavaScript, jQuery UI 1.9.2

    $(function () {
        $("#slider-range-min").slider({
            range: "min",
            value: 37,
            min:   30,
            max:   50,
            slide: function (event, ui) {
                $("#amount").val("$" + ui.value);
            }
        });
        $("#amount ...
  • Css Table with Header #2 is the latest revision

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

    First row with <b>T</b>able<b>D</b>ata element
    <table class='blueTable' id='topRowTD'>
        <tr>
            <td style="width:40px">A</td>
            <td style="width:40px">B</td>
            <td style="width:40px">C</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>Do</td>
            <td>Re</td>
            <td>Me</td>
        </tr>
    </table>
    <br/>
    First row with ...</br/>
  • Change Div Color On Mousewheel #41 is the latest revision

    jQuery 2.0.2, HTML, CSS, JavaScript

    $(function () {
        var col = 255;
    
        $('#foo').bind('mousewheel', function (e) {
            if (e.originalEvent.wheelDelta / 120 > 0) {
                if (col < 245) col += 10;
                $(this).text('Scrolling up !').css('background-color', '#0000' + col.toString(16));
            } else {
                if (col > 10) col -= 10 ...
  • Zooming Page Elements #11 is the latest revision

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

    Zoom div by clicking buttons below:
    <div id="sampleDiv">
        <button onclick="sampleDiv.style.zoom='100%'">Zoom 100%</button><br/>
        <button onclick="sampleDiv.style.zoom='200%'">Zoom 200%</button><br/>
        <button onclick="sampleDiv.style.zoom='300%'">Zoom 300%</button><br/>
    </div>
    
    
    
    
    
    <!-- Post Info -->
    <div style='position:fixed;bottom:0;left:0;    
                background:lightgray;width:100%;'>
        Further Reading: <a href='http://css-tricks.com/almanac/properties/z/zoom/'>CSS Tricks - Zoom</a>
    <div>
  • Mutually Exclusive Checkboxes #137 is the latest revision

    jQuery (edge), HTML, CSS, JavaScript

    $(function () {
        $('#yes').click(function (event) {
            if (event.target.checked) {
                $('#no').find('input').removeAttr('checked');
            }
        });
        $('#no').click(function (event) {
            if (event ...
  • Table with CSS #194 is the latest revision

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

    HTML defined table:
    <table cellSpacing="0" cellPadding="0" width="100%" border="1">
        <tr>
            <td align="left">1</td>
            <td align="left">2</td>
        </tr>
        <tr>
            <td align="left">3</td>
            <td align="left">4</td>
        </tr>
    </table>
    <br/>
    CSS defined table:
    <table class="myTable"  width="100%" >
        <tr>
            <td >1</td>
            <td >2</td>
        </tr>
        <tr>
            <td >3</td>
            <td >4</td>
        </tr>
    </table>
    
    
    
    
    
    <!-- Post Info -->
    <div style='position:fixed;bottom:0;left:0;    
                background:lightgray;width:100%;'>
        Find documentation: <a href='http://www.w3schools.com/cssref/pr_border-collapse.asp'>CSS border-collapse</a><br/>
        Find documentation ...</br/></div></!--></br/>
  • Fixed Position Header #41 is the latest revision

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

    <div id="header">Header Info</div>
    <div id="content">
        <img src='http://i.imgur.com/Fl33AV8.png' ></img>
    </div>
    
    
    
    
    
    
    <!-- Post Info -->
    <div style='position:fixed;bottom:0;left:0;    
                background:lightgray;width:100%;'>
        Further Reading: <a href='http://stackoverflow.com/a/10975357/1366033'>position fixed header in html</a>
    <div>
    
    
  • Skeleton - Side by Side Grid #32 is the latest revision

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

    <div class="container">
        <div class="twelve columns clearfix">
            <div class="six columns alpha">first block</div>
            <div class="six columns omega">second block</div>
        </div>
    </div>
    
    
    
    
    
    <!-- Post Info -->
    <div style='position:fixed;bottom:0;left:0;    
                background:lightgray;width:100%;'>
        Note: <em> widen HTML area to view blocks side by side </em><br/>
        About this SO question: <a href='http://stackoverflow.com/q/18147617/1366033'>How can ...</a></br/></div></!-->
  • Absolute Position Inside Relative #160 is the latest revision

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

    <p>Normal Wrapper (takes Up 100% of screen width)</p>
    <div class='wrapper'>
        <div></div>
    </div>
    
    <p>Wrapper WITH relative positioning (takes up 100% of parent width</p>
    <div class='wrapper relative'>
        <div></div>
    </div>
    
    
    
    
    
    <!-- Post Info -->
    <div style='position:fixed;bottom:0;left:0;    
                background:lightgray;width:100%;'>
        About this ...</div></!-->