Small collection of various code snippets

Raw

Display an HTML attribute value in CSS with attr()
To display the data-prefix attribute of an

heading

<h3 data-prefix="Custom prefix">This is a heading</h3>

h3:before {
  content: attr(data-prefix) " ";
}

To expand link URLs when the user prints out the document

<a href="http://example.com">Visit our home page</a>

@media print {
  a:after {
    content: " (link to " attr(href) ") ";
  }
}

Add automatic numbering to lists with counter()

body { counter-reset: heading; }

h4:before {
  counter-increment: heading;
  content: "Heading #" counter(heading) "."; 
}

Do the math with calc() W3C CSS calc specification

.parent {
  width: 100%;
  border: solid black 1px;
  position: relative;
}

.child {
  position: absolute;
  left: 100px;
  width: calc(90% - 100px);
  background-color: #ff8;
  text-align: center;
}

Raw

JavascriptSnippets.md

Javascript Snippets

Auto Select Textarea Text

<textarea rows="10" cols="50" onclick="this.focus();this.select()" readonly="readonly">
   example text
</textarea>

Add Class

function addClass(id,new_class){
    var i,n=0;

    new_class=new_class.split(",");

    for(i=0;i<new_class.length;i++){
       if((" "+document.getElementById(id).className+" ").indexOf(" "+new_class[i]+" ")==-1){
           document.getElementById(id).className+=" "+new_class[i];
           n++;
       }
    }

    return n;
}

keyCodes
CSS-Tricks: keyCodes

### JQuery Snippets **Equalize Heights of Divs** ```javascript var maxHeight = 0;

$("div").each(function(){ if ($(this).height() > maxHeight) { maxHeight = $(this).height(); } });

$("div").height(maxHeight);

  
**Find all Internal Links**  
```javascript
var siteURL = "http://" + top.location.host.toString();

var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");

Konami Code

var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";

$(document).keydown(function(e) {
  kkeys.push( e.keyCode );

  if ( kkeys.toString().indexOf( konami ) >= 0 ) {
    $(document).unbind('keydown',arguments.callee);
    
    // do something awesome
    $("body").addClass("konami");
  }
});

smooth-scrolltop ``` $('html,body').animate({ scrollTop: 0 }, 200); ```

Raw

PHPSnippets.md

cat file.txt | script.php

<?php

$fh = fopen("php://stdin", "r");
while (($ln = fgets($fh)) !== false) {
    somelinehandler($ln);
}

<?php
function list_directory_content($dir){
    if(is_dir($dir)){
        if($handle = opendir($dir)){
            while(($file = readdir($handle)) !== false){
                if($file != '.' && $file != '..' && $file != '.htaccess'){
                    echo '<a target="_new" href="'.$dir.$file.'">'.$file.'</a><br>'."\n";
                }
            }
            closedir($handle);
        }
    }
}
?>

``` ```

``` // usage of this code

if(unzip('ziped_files/test.zip','unziped_files/newfile')){ echo 'Successfully unzipped!'; }else{ echo 'Error while processing your file!'; } ?>

Raw

WebDevSnippets.md

###HTML5 Fullscreen API

## Links #####Creating Advanced Email Links Include Subject, CC, BCC, and Email Body ```html Email Oasis

Email Oasis

  
##### Telephone Link Protocol

```html
<!-- ----| tel URL scheme: |---- -->
  <a href="tel:18008675309">Call me!</a>
  <!--  international format: the plus sign (+), the country code, the local area code, and the local number.  -->
  <a href="tel:+1800229933">Call us free!</a>

<!-- ----| sms URL scheme |---- -->
  <a href="sms:18008675309">Text Me!</a>

<!-- ----| Native Apps |---- -->
  <a href="facetime://5555555555">Call us free using Facetime!</a>
  <a href="skype:skype_user?call">Call us using Skype!</a>

Styling tel:

a[href^="tel:"]:before { content: "\260E"; display: block; margin-right: 0.5em; }

iPhone - URLScheme References

Preventing automatic detection Prevent browsers from automatically converting phone numbers and email addresses to links.

<meta name="format-detection" content="telephone=no">  <!-- For Safari -->
<meta http-equiv="x-rim-auto-match" content="none">    <!-- For BlackBerry -->

For more information about the tel URL scheme, see RFC 2806 and RFC 2396.

Forms - Spellcheck Attribute

You can use spellcheck on INPUT, TEXTAREA, and contenteditable elements.

<!-- spellcheck everything! -->
<input type="text" spellcheck="true" /><br />
<textarea spellcheck="true"></textarea>
<div contenteditable="true" spellcheck="true">I am some content</div>

<!-- spellcheck nothing! -->
<input type="text" spellcheck="false" /><br />
<textarea spellcheck="false"></textarea>
<div contenteditable="true" spellcheck="false">I am some content</div>

Forms - autocomplete attribute

<input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />

<textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>

Twitter Card

<!-- ----| Generic META Tags |---- -->
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://davidwalsh.name/twitter-cards">
<meta name="twitter:title" content="How to Create a Twitter Card">
<meta name="twitter:description" content="Twitter's new Twitter Cards API allows developers to add META tags to their website, and Twitter will build card content from links to a given site.">
<meta name="twitter:image" content="http://davidwalsh.name/demo/openGraphLogo.png">

<!-- ----| attribution META tags |---- -->
<meta name="twitter:site" content="@davidwalshblog">
<meta name="twitter:creator" content="@davidwalshblog">

<!-- ----| Image and Video META Tags |---- -->
<meta name="twitter:image:width" content="600">
<meta name="twitter:image:height" content="600">
<meta name="twitter:player" content="https://davidwalsh.name/video-embed/12345">
<meta name="twitter:player:width" content="435">
<meta name="twitter:player:height" content="251">
<meta name="twitter:player:stream" content="https://davidwalsh.name/raw-stream/12345.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4; codecs="avc1.42E01E1, mpa.40.2"">

r-sal/CSSSnippets.md

Javascript Snippets

Forms - Spellcheck Attribute

Forms - autocomplete attribute

Twitter Card