SaraSoueidan

<div class="container">
  <div class="side-panel">
    <div class="side-top"><h3>NAVIGATION</h3></div>
    <div class="acc">
      <ul>
        <li class="level-one"><a href="#">Nav Link One</a></li><ul class="second-level">
          <li>Second Level Nav Link 1</li>
          <li>Second Level Nav Link 2</li>
          <li>Second Level Nav Link 3</li>
        </ul>

SaraSoueidan

Simple Circular Menu

Another simple circular menu. UPDATE: How-to and explanation included.

A Pen by Sara Soueidan on CodePen.

License.

SaraSoueidan

HTML5 paste image to page

Using a simpel javascript code found on gist.github.com I have made simpel demo showing how you can paste images on the computer clipboard into HTML elements and save their info as dataURL

A Pen by Sten Hougaard on CodePen.

License.

SaraSoueidan

<h2>Click the heart to like/unlike</h2>
<div class="heart">❤</div>

SaraSoueidan

@mixin placeholder-color($color){
  &.placeholder{
    color: $color
  }

  &:-moz-placeholder{
    color: $color
  }
    
  &::-webkit-input-placeholder{

SaraSoueidan

@function makelongshadow($color) {
  $val: 0px 0px $color;
  @for $i from 1 through 200 {
    $val: #{$val}, #{$i}px #{$i}px #{$color};
  }
  @return $val;
}
/*usage*/
@mixin longshadow($color) {
  text-shadow: makelongshadow($color);

SaraSoueidan

/*
 * Minimal classList shim for IE 9
 * By Devon Govett
 * MIT LICENSE
 */


if (!("classList" in document.documentElement) && Object.defineProperty && typeof HTMLElement !== 'undefined') {
    Object.defineProperty(HTMLElement.prototype, 'classList', {
        get: function() {

SaraSoueidan

/**
 * Cross Browser helper to addEventListener.
 *
 * @param {HTMLElement} obj The Element to attach event to.
 * @param {string} evt The event that will trigger the binded function.
 * @param {function(event)} fnc The function to bind to the element. 
 * @return {boolean} true if it was successfuly binded.
 */
var cb_addEventListener = function(obj, evt, fnc) {
    // W3C model

SaraSoueidan

function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition':'transitionend',
      'MSTransition':'msTransitionEnd',
      'MozTransition':'transitionend',
      'WebkitTransition':'webkitTransitionEnd'
    }

SaraSoueidan

//addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
(function(win, doc){
	if(win.addEventListener)return;		//No need to polyfill

	function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}}
	function addEvent(on, fn, self){
		return (self = this).attachEvent('on' + on, function(e){
			var e = e || win.event;
			e.preventDefault  = e.preventDefault  || function(){e.returnValue = false}
			e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}