javascript - spin.js is not showing up on my site? -
i new javacript (very, new) , need place loading spinner on site. have screensaver , 1 time tap screen takes awhile necessary url. so, wanted place spinner create sure users not go on tap screen.
i using spin.js abd pretty sure doing wrong not showing when test.
here code using:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="user-scalable=no, width=device-width" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <title>the title</title> <style type="text/css"> body { background-color: #000; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; width: 1024px; overflow: hidden; overflow-x: hidden; overflow-y: hidden; -webkit-user-select: none; -webkit-text-size-adjust: none; } a,img,map,area { -webkit-tap-highlight-color: rgba(0,0,0,0); } </style> <script type="text/javascript" src="spin.js"></script> <script type="text/javascript"> $(document).ready(function () { var opts = { lines: 13, // number of lines draw length: 20, // length of each line width: 10, // line thickness radius: 30, // radius of inner circle corners: 1, // corner roundness (0..1) rotate: 0, // rotation offset direction: 1, // 1: clockwise, -1: counterclockwise color: '#000', // #rgb or #rrggbb or array of colors speed: 1, // rounds per sec trail: 60, // afterglow percentage shadow: false, // whether render shadow hwaccel: false, // whether utilize hardware acceleration classname: 'spinner', // css class assign spinner zindex: 2e9, // z-index (defaults 2000000000) top: '50%', // top position relative parent left: '50%' // left position relative parent }; var target = document.getelementbyid('foo'); var spinner = new spinner(opts).spin(target); </script> </script> </head> <body onload="timeout(7,goto,'screen3.html');"> <a href="site url"><img src="screen2.jpg" width="1024" height="768" border="0"></a> <div id="spinner"> </div> </body> </html> any advice appreciated.
a few things wrong code:
you have 2 closing<script/> tags after eachother (right before ), that's syntax error. you have syntax error. you're not closing jqueries document.ready function properly. you're using jquery method you're not including jquery library in code. you color:'#000' in spinner options, means spinner black (same background color never see it). the spinner works in simple form. see working example:
http://jsfiddle.net/wlkganhm/
if you're new javascript suggest reading on how utilize debugger can find syntax errors :)
javascript spin.js
No comments:
Post a Comment