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">
-
body{padding-top:20px;}
+
.test{
 +
background-color:red;
 +
width:600px;
 +
height:50px;
 +
border: 2px solid #0000FF;
 +
border-radius: 25px;
 +
padding: 10px  40px;
 +
margin-bottom: 20px;
 +
margin-top: 20px;
 +
margin-left:20px;
 +
margin-right:20px;
 +
}
 +
.test > p {
 +
font-family: "Comic Sans MS", cursive, sans-serif;
 +
}
 +
.image{
 +
content:url(http://www.allaboutdrawings.com/image-files/spiderweb-drawing-corner.jpg);
 +
max-width: 200px;
 +
max-height:200px;
 +
}
 +
.overlay{
 +
background-color: #7FFFD4;
 +
}
 +
.sidebar{
 +
background-color: #7FFFD4;
 +
}
 +
#test2{
 +
position:fixed;
 +
left:-100px;
 +
background-color:red;
 +
width:30px;
 +
height:500px;
 +
padding: 10px 40px;
 +
border: 2px solid #0000FF;
 +
border-radius: 25px;
 +
margin-bottom: 20px;
 +
margin-top: 20px;
 +
top:200px;
 +
}
 +
#test2 > p {
 +
font-family: "Comic Sans MS", cursive, sans-serif;
 +
}
</script>
</script>
<script type="text/javascript">
<script type="text/javascript">
-
  $.fn.charCounter = function (max, settings) {
+
$(document).ready(function(){
-
max = max || 100;
+
  $("#test2").mouseenter(function(){
-
settings = $.extend({
+
    $("#test2").animate({
-
container: "<span></span>",
+
      left:'2px',
-
classname: "charcounter",
+
    });
-
format: "(%1 characters remaining)",
+
  }).mouseleave(function(){
-
pulse: true,
+
    $("#test2").animate({
-
delay: 0
+
      left:'-80px',
-
}, 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);
+
-
});
+
-
};
+
-
 
+
-
})(jQuery);
+
-
 
+
-
$(function() {
+
-
    $(".counted").charCounter(320,{container: "#counter"});
+
});
});
</script>
</script>
</html>
</html>

Revision as of 00:38, 7 August 2014

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