nth-child playground

index.html

<h1>nth-child playground</h1>
<label>nth selector:</label>
<input autofocus="autofocus">
<button class = "submit">Submit</button>
<button class = "reset">Reset</button>
<ul id = "container" class="container ui-widget-content" ></ul>

nth-child-playground.markdown

nth-child playground

A Pen by James Barnett on CodePen.

License.

script.js

/* concept shameless lifted from http://www.nealgrosskopf.com/tech/resources/80/ */

var num = 100;
var boxWidth = 60;
var boxHeight = 60;
var containerWidth = 600;

var output = "";
for(i = 1; i <= num; i++){
  output += '<li>';
  output += i;
  output += '</li>';
}
document.getElementById("container").innerHTML = output;

$('.submit').click(function() {
  $("li").css("background","grey"); // reset background
  var nth = $('input').val();
  
  if (nth !== ""){ 
    try { 
      $("li:nth-child(" + nth + ")").css("margin-left","65px"); 
    }
    catch(err) { 
      alert ("Sorry, I didn't understand that.\n\nMake sure to use a valid nth value\ni.e. 3n, even, -n+4"); 
    } 
  }
});

$('.reset').click(function() {
  $('input').val("");
  $(".container").width(containerWidth);
  $(".container").height(((num * boxWidth) / containerWidth) * boxHeight); 
  
  
  //reset whatever CSS was applied via nth-child in the click function
  //$("li").css("background","grey");
  $("li").css("margin","5px"); 
});

$(function() {
  $( "#container" ).resizable({
    handles: "e",
    distance: 10,
    grid: 60,
    minWidth: 180,
    maxWidth: 900,
    
    // calc container height on resize
    resize: function(event, ui) {
      var containerWidth = $(this).width();
      var boxesAcross = Math.floor(containerWidth / boxWidth);
      var boxesHigh = Math.floor(num / boxesAcross);
      
      // add extra row if there are left over boxes in last
      if ((num % boxesAcross) > 0){ boxesHigh += 1; }  
      
      var containerHeight = boxesHigh * boxHeight;
      $("#container").height( containerHeight);
      
      //console.log("width (includes padding): " + $("#container").width());
      //console.log("height: " + containerHeight);
    }
  });
});

style.css

body { margin: 20px 50px; }
h1 { font-size: 1.5em; }

button { 
  width: 100px; 
  height: 30px;
}

.submit { margin: 0 5px; }

.container {
  width: 600px;
  padding: 10px;
  margin-left: 1px;
}

li { 
  display: inline-block;
  width: 50px;
  height: 35px;
  padding-top: 15px;
  margin: 5px;
  
  background: grey;
  list-style: none;
  font-weight: bold;
  text-align: center;
}

/* resizeable border "icon" */

.ui-widget-content {
  position: relative;
  border: 1px solid grey;
}

.ui-resizable-e:after, .ui-resizable-e:before {
  content: "";
  background: grey;
  position: absolute;
  top: 200px;
  height: 40px;
  width: 3px;
}

.ui-resizable-e:before { right: -1.5px; }
.ui-resizable-e:after { right: 7px; }
.ui-resizable-e:hover:before { right: -2px; }
.ui-resizable-e:hover:after,.ui-resizable-e:hover:before {
  background: #666;
  width: 3.5px;
}