U.S. Department of the Navy
General Category => U.S. Fleet Cyber Command => Topic started by: DeptNav on January 15, 2014, 08:28:01 am
-
Not sure if this is relevant to the board name but might as well. If you're a web developer, you're probably familiar with the border-radius feature in CSS3. In my opinion, it's a complete pain in the ass to write 5 lines of code to achieve the effect of curved borders, so I wrote a little JavaScript code that will do it for you.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Border Radius</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$("[data-border-radius]").each(function(i,a){
var br = $(a).attr("data-border-radius");
if ($.isNumeric(br)) {
$(a).css({
"border-radius": br + "px",
"-webkit-border-radius": br + "px",
"-moz-border-radius": br + "px",
"-o-border-radius": br + "px",
"-khtml-border-radius": br + "px"
});
}
});
});
</script>
</head>
<body>
<h3>Original</h3>
<div style="background-color: #000000; height: 100px; width: 100px;"></div>
<hr />
<h3>JavaScript edit</h3>
<div style="background-color: #000000; height: 100px; width: 100px;" data-border-radius="10"></div>
</body>
</html>