Team:UCLA/sams extra css

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<script type="text/css">
<script type="text/css">
-
#sidebar-wrapper {
+
body{padding-top:20px;}
-
    margin-right: -250px;
+
</script>
-
    right: 0;
+
-
    width: 250px;
+
-
    background: rgb(0,0,0);
+
-
    position: fixed;
+
-
    height: 100%;
+
-
    overflow-y: auto;
+
-
    z-index: 1000;
+
-
    transition: all 0.5s ease-in 0s;
+
-
    -webkit-transition: all 0.5s ease-in 0s;
+
-
    -moz-transition: all 0.5s ease-in 0s;
+
-
    -ms-transition: all 0.5s ease-in 0s;
+
-
    -o-transition: all 0.5s ease-in 0s;
+
-
  }
+
-
   .sidebar-nav {
+
<script type="text/javascript">
-
    position: absolute;
+
   $.fn.charCounter = function (max, settings) {
-
    top: 0;
+
max = max || 100;
-
    width: 250px;
+
settings = $.extend({
-
    list-style: none;
+
container: "<span></span>",
-
    margin: 0;
+
classname: "charcounter",
-
    padding: 0;
+
format: "(%1 characters remaining)",
-
  }
+
pulse: true,
 +
delay: 0
 +
}, settings);
 +
var p, timeout;
 +
 +
function count(el, container) {
 +
el = $(el);
 +
if (el.val().length > max) {
 +
    el.val(el.val().substring(0, max));
 +
    if (settings.pulse && !p) {
 +
    pulse(container, true);
 +
    };
 +
};
 +
if (settings.delay > 0) {
 +
if (timeout) {
 +
window.clearTimeout(timeout);
 +
}
 +
timeout = window.setTimeout(function () {
 +
container.html(settings.format.replace(/%1/, (max - el.val().length)));
 +
}, settings.delay);
 +
} else {
 +
container.html(settings.format.replace(/%1/, (max - el.val().length)));
 +
}
 +
};
 +
 +
function pulse(el, again) {
 +
if (p) {
 +
window.clearTimeout(p);
 +
p = null;
 +
};
 +
el.animate({ opacity: 0.1 }, 100, function () {
 +
$(this).animate({ opacity: 1.0 }, 100);
 +
});
 +
if (again) {
 +
p = window.setTimeout(function () { pulse(el) }, 200);
 +
};
 +
};
 +
 +
return this.each(function () {
 +
var container;
 +
if (!settings.container.match(/^<.+>$/)) {
 +
// use existing element to hold counter message
 +
container = $(settings.container);
 +
} else {
 +
// append element to hold counter message (clean up old element first)
 +
$(this).next("." + settings.classname).remove();
 +
container = $(settings.container)
 +
.insertAfter(this)
 +
.addClass(settings.classname);
 +
}
 +
$(this)
 +
.unbind(".charCounter")
 +
.bind("keydown.charCounter", function () { count(this, container); })
 +
.bind("keypress.charCounter", function () { count(this, container); })
 +
.bind("keyup.charCounter", function () { count(this, container); })
 +
.bind("focus.charCounter", function () { count(this, container); })
 +
.bind("mouseover.charCounter", function () { count(this, container); })
 +
.bind("mouseout.charCounter", function () { count(this, container); })
 +
.bind("paste.charCounter", function () {
 +
var me = this;
 +
setTimeout(function () { count(me, container); }, 10);
 +
});
 +
if (this.addEventListener) {
 +
this.addEventListener('input', function () { count(this, container); }, false);
 +
};
 +
count(this, container);
 +
});
 +
};
-
  .sidebar-nav li {
+
})(jQuery);
-
    line-height: 50px;
+
-
    text-indent: 20px;
+
-
  }
+
-
  .sidebar-nav li a {
+
$(function() {
-
    color: #999999;
+
     $(".counted").charCounter(320,{container: "#counter"});
-
    display: block;
+
});
-
    text-decoration: none;
+
-
  }
+
-
 
+
-
  .sidebar-nav li a:hover {
+
-
    color: #fff;
+
-
    background: rgba(255,255,255,0.2);
+
-
    text-decoration: none;
+
-
  }
+
-
 
+
-
  .sidebar-nav li a:active, .sidebar-nav li a:focus {
+
-
    text-decoration: none;
+
-
  }
+
-
 
+
-
  .sidebar-nav > .sidebar-brand {
+
-
    height: 55px;
+
-
    line-height: 55px;
+
-
    font-size: 18px;
+
-
  }
+
-
 
+
-
  .sidebar-nav > .sidebar-brand a {
+
-
    color: #999999;
+
-
  }
+
-
 
+
-
  .sidebar-nav > .sidebar-brand a:hover {
+
-
    color: #fff;
+
-
    background: none;
+
-
  }
+
-
 
+
-
  #menu-toggle {
+
-
    top: 0;
+
-
    right: 0;
+
-
    position: fixed;
+
-
    z-index: 1;
+
-
  }
+
-
 
+
-
  #sidebar-wrapper.active {
+
-
    right: 250px;
+
-
    width: 250px;
+
-
    transition: all 0.5s ease-out 0s;
+
-
    -webkit-transition: all 0.5s ease-out 0s;
+
-
    -moz-transition: all 0.5s ease-out 0s;
+
-
    -ms-transition: all 0.5s ease-out 0s;
+
-
    -o-transition: all 0.5s ease-out 0s;
+
-
  }
+
-
 
+
-
  .toggle {
+
-
    margin: 5px 5px 0 0;
+
-
  }
+
-
</script>
+
-
 
+
-
<script type="text/javascript">
+
-
  $("#menu-close").click(function(e) {
+
-
    e.preventDefault();
+
-
     $("#sidebar-wrapper").toggleClass("active");
+
-
  });
+
-
  $("#menu-toggle").click(function(e) {
+
-
    e.preventDefault();
+
-
    $("#sidebar-wrapper").toggleClass("active");
+
-
  });
+
</script>
</script>
</html>
</html>

Revision as of 00:25, 7 August 2014

Retrieved from "http://2014.igem.org/Team:UCLA/sams_extra_css"