snowman-repos

<input autofocus="autofocus" />
<button autofocus="autofocus">Hi!</button>
<textarea autofocus="autofocus"></textarea>

snowman-repos

// From window or frame on domain 1, send a message to the iframe which hosts another domain
var iframeWindow = document.getElementById("iframe").contentWindow;
iframeWindow.postMessage("Hello from the first window!");

// From inside the iframe on different host, receive message
window.addEventListener("message", function(event) {
  // Make sure we trust the sending domain
  if(event.origin == "http://davidwalsh.name") {
    // Log out the message
    console.log(event.data);

snowman-repos

/*  Assuming element:

  <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>

*/

// Get the element
var element = document.getElementById("myDiv");

// Get the id

snowman-repos

// Add a class to an element
myElement.classList.add("newClass");

// Remove a class to an element
myElement.classList.remove("existingClass");

// Check for existence
myElement.classList.contains("oneClass");

// Toggle a class

snowman-repos

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: -webkit-linear-gradient(left, #547c90, #002640);

snowman-repos

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      <!-- front content -->
    </div>
    <div class="back">
      <!-- back content -->
    </div>
  </div>
</div>

snowman-repos

<div hidden>
  You can't see me!
</div>

snowman-repos

/* base CSS element */
.tip {
  background: #eee;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  width: 200px;
}

snowman-repos

textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  width: 100%;
}

snowman-repos

<!-- will download as "expenses.pdf" -->
<a href="/files/adlafjlxjewfasd89asd8f.pdf" download="expenses">Download Your Expense Report</a>