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

Popular posts from this blog

c# - Better 64-bit byte array hash -

-
i need hash algorithm produces 64-bit hash code ( long ) fewer collisions string.gethashcode() , fast (no expensive calls cryptographic functions). here's implementation of fnv still shows 3% of collisions after testing 2 million random strings. need number way lower. void main() { const string chars = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz!#@$%^&*()_+}{\":?><,./;'[]0123456789\\"; const int n = 2000000; var random = new random(); var hashes = new hashset<long>(); int collisions = 0; for(int = 0; < n; i++) { var len = random.next(chars.length); var str = new char[len]; (int j = 0; j < len; j++) { str[j] = chars[random.next(chars.length)]; } var s = new string(str); if(!hashes.add(get64bithash( s ))) collisions++; } console.writeline("collision percentage after " + n + " random strings: " + ((doubl
Read more

webrtc - Which ICE candidate am I using and why? -

-
[questions in bold below] i have setup kurento media server 5.1.3 in datacenter behind firewall running os ubuntu 14.04. has 2 network cards: 222.222.222.222 (eth0 - private ip) 111.111.111.111 (eth1 - public ip) attached below sdp (setremotedescription) when browser connected kurento media server type: answer, sdp: v=0 o=- 5487318114793304426 0 in ip4 0.0.0.0 s=kurento media server c=in ip4 0.0.0.0 t=0 0 a=group:bundle audio video m=audio 59068 rtp/savpf 111 0 c=in ip4 111.111.111.111 a=rtpmap:111 opus/48000/2 a=rtpmap:0 pcmu/8000 a=sendrecv a=rtcp:59068 in ip4 111.111.111.111 a=rtcp-mux a=ssrc:669011897 cname:user39019747@host-6e83e4c2 a=extmap:3 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time a=mid:audio b=as:20 a=ice-ufrag:ymdk a=ice-pwd:lylifk5ueqzpwm91ddj37e a=fingerprint:sha-256 ff:0f:81:8c:41:4e:b4:b6:c6:d8:36:f3:d6:5f:09:fd:5f:af:13:b3:9d:fc:12:66:ac:f3:56:d6:5b:0a:73:5d a=candidate:1 1 udp 2013266431 111.111.111.111 55239 typ host a=candidate:2 1 udp
Read more

php - Zend Framework / Skeleton-Application / Composer install issue -

-
i trying create zend framework application using skeleton in netbeans. when run composer install, following error message: "c:\php\php.exe" "c:\composer\composer.phar" "--ansi" "--no-interaction" "update" "--dev" using deprecated option "dev". dev packages installed default now. loading composer repositories package information updating dependencies (including require-dev) requirements not resolved installable set of packages. problem 1 - package requires php >=5.5 php version (5.4.42) not satisfy requirement. problem 2 - installation request zendframework/zendframework 2.5.1 -> satisfiable zendframework/zendframework[2.5.1]. - zendframework/zendframework 2.5.1 requires php >=5.5 -> php version (5.4.42) not satisfy requirement. done. apparently, zend framework only needs php 5.3+ contradicts above. need use php 5.4. my composer.json following: { "name": "
Read more