JSFiddle

  • Conditional click handlers

    Why your click handlers are not working as you expect.

    $(document).ready(function(){
        $("#buttons").on("click", "button", function(){
            $(this).css("background","blue");
        });
        $("#buttons").on("click", ".red", function(){
            $(this).css("color ...
  • Multi-Column Lists

    A valid, semantic solution to have one list in multiple columns.

    <ul>
        <li>one one one</li>
        <li>two</li>
        <li>three</li>
        <li>four four four</li>
        <li>five five five five</li>
        <li class="newrow">six six</li>
        <li>seven seven</li>
        <li>eight eight eight eight ...</li></ul>
  • A slightly idiotic pure CSS layout table #77 is the latest revision

    jQuery 1.7.2, HTML, CSS, JavaScript, jQuery UI 1.8.18

    <ul>
        <li>one one one</li>
        <li>two</li>
        <li>three</li>
        <li>four four four</li>
        <li>five five five five</li>
        <li class="newrow">six six</li>
        <li>seven seven</li>
        <li>eight eight eight</li>
        <li>nine ...</li></ul>
  • Problem with turning enter event into click event

    Demo of problem where enter event was turned into click event, but this doubled the event firing in an edge case.

    $("#item").on("keyup", function(event){
        if(event.keyCode == 13){$('#item').click();}
    });
    
    $('body').on('click keyup', '#item', function(e) {
        console.log ...
  • StackOverflow Demo: center image on links #53 is the latest revision

    Someone wanted to know how to use CSS to center a bg on links of varying widths.

    <ul>
      <li><a href="#">First Item</a></li>
      <li><a href="#">m</a></li>
      <li><a href="#">Very very short Item</a></li>
      <li><a href="#">Another Item</a></li>
      <li><a href="#">Last Item</a></li>
    </ul>
  • Make hamburger out of actual menu

    Instead of using elements, why not make the hamburger out of the actual nav?

    <div class="navToggle">
        <div></div>
        <div></div>
        <div></div>
    </div>
  • measure various CSS units

    jQuery 1.8.3, HTML, CSS, JavaScript

    var tWidth = "";
    $("div").each(function(){
      tWidth += $(this).attr("class") + " = " + $(this).outerWidth() + "px\n";
    });
    alert(tWidth);
  • A pure CSS leaf. #4 is the latest revision

    just for fun

    <div id="leaf"></div>
    
  • Misunderstanding :not() behavior

    jQuery 1.8.3, HTML, CSS, JavaScript

    $("html").one("click", ":not('.four')", function(e){
       e.stopPropagation();//this never fires when `.four` is clicked, see?
        
       console.log("Something ...
  • Dynamically resize body text

    just testing

    function makeSizer(size) {
      return function() {
        document.body.style.fontSize = size + 'px';
      };
    }
    
    var size12 = makeSizer(12);
    var size14 = makeSizer(14);
    var ...