javascript - Issue Copying Code From JSFiddle -
i trying copy code jsfiddle, it's radial loading bar. wanted put html/css files , mess code, can't seem work. shows blank, not displaying anything. jsfiddle link http://jsfiddle.net/andsens/d7vkd/. :)
here exact copy of html/javascript put html document:
<html> <link rel="stylesheet" type="text/css" href="loadercss.css"> <head> <script src="jquery.js"></script> <script type="text/javascript"> $('head style[type="text/css"]').attr('type', 'text/less'); less.refreshstyles(); window.randomize = function() { $('.radial-progress').attr('data-progress', math.floor(math.random() * 100)); } settimeout(window.randomize, 200); $('.radial-progress').click(window.randomize); </script> </head> <body> <div class="radial-progress" data-progress="0"> <div class="circle"> <div class="mask full"> <div class="fill"></div> </div> <div class="mask half"> <div class="fill"></div> <div class="fill fix"></div> </div> <div class="shadow"></div> </div> <div class="inset"> <div class="percentage"></div> </div> </div> </body> </html> and css file:
@import url(http://fonts.googleapis.com/css?family=lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic); .radial-progress { @circle-size: 120px; @circle-background: #d6dadc; @circle-color: #97a71d; @inset-size: 90px; @inset-color: #fbfbfb; @transition-length: 1s; @shadow: 6px 6px 10px rgba(0,0,0,0.2); @percentage-color: #97a71d; @percentage-font-size: 22px; @percentage-text-width: 57px; margin: 50px; width: @circle-size; height: @circle-size; background-color: @circle-background; border-radius: 50%; .circle { .mask, .fill, .shadow { width: @circle-size; height: @circle-size; position: absolute; border-radius: 50%; } .shadow { box-shadow: @shadow inset; } .mask, .fill { -webkit-backface-visibility: hidden; transition: -webkit-transform @transition-length; transition: -ms-transform @transition-length; transition: transform @transition-length; border-radius: 50%; } .mask { clip: rect(0px, @circle-size, @circle-size, @circle-size/2); .fill { clip: rect(0px, @circle-size/2, @circle-size, 0px); background-color: @circle-color; } } } .inset { width: @inset-size; height: @inset-size; position: absolute; margin-left: (@circle-size - @inset-size)/2; margin-top: (@circle-size - @inset-size)/2; background-color: @inset-color; border-radius: 50%; box-shadow: @shadow; .percentage { width: @percentage-text-width; position: absolute; top: (@inset-size - @percentage-font-size) / 2; left: (@inset-size - @percentage-text-width) / 2; line-height: 1; text-align: center; font-family: "lato", "helvetica neue", helvetica, arial, sans-serif; color: @percentage-color; font-weight: 800; font-size: @percentage-font-size; } } @i: 0; @increment: 180deg / 100; .loop (@i) when (@i <= 100) { &[data-progress="@{i}"] { .circle { .mask.full, .fill { -webkit-transform: rotate(@increment * @i); -ms-transform: rotate(@increment * @i); transform: rotate(@increment * @i); } .fill.fix { -webkit-transform: rotate(@increment * @i * 2); -ms-transform: rotate(@increment * @i * 2); transform: rotate(@increment * @i * 2); } } .inset .percentage:before { content: "@{i}%" } } .loop(@i + 1); } .loop(@i); }
$('head style[type="text/css"]').attr('type', 'text/less'); this nothing because have no <style> elements.
it doesn't make sense. if style element contains less instead of css should marked correctly in first place.
less.refreshstyles(); this throws reference error because haven't defined less, rest of code wouldn't run.
if did…
settimeout(window.randomize, 200); this unsafe. makes assumptions how long rest of page take load. should use ready handler instead.
$('.radial-progress').click(window.randomize); this nothing. there aren't elements members of class in document when run code. should put in ready handler.
Comments
Post a Comment