Good evening!
Please help with the layout. I am a programmer, not a coder, so I decided to ask for help from the community. It is necessary to impose this block:
The customer agreed to change the progress bar, which is in the picture - to the progress bar jQuery UI animated , only with the condition that I instead of orange will turn green.
Here's what I got at the moment:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery UI Example Page</title> <link type="text/css" href="css/trontastic/jquery-ui-1.8.23.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript"> $(function(){ // Progressbar $("#progressbar").progressbar({ value: 0 }); // Анимация ProgressBar'a, расчитанная на сутки! $(function() { var pGress = setInterval(function() { var pVal = $('#progressbar').progressbar('option', 'value'); var pCnt = !isNaN(pVal) ? (pVal + 1) : 1; if (pCnt > 100) { clearInterval(pGress); } else { $('#progressbar').progressbar({value: pCnt}); } },(24*6*6*1)); // Вывод процентов, вида 99.99%, на поле прогресс бара! var myPer = 0; $("#progressbar") .progressbar({ value: myPer }) .children('.ui-progressbar-value') .html(myPer.toPrecision(3) + '%') .css("display", "block"); }); }); </script> <style type="text/css"> .ui-progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif); } /*demo page css*/ body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} .demoHeaders { margin-top: 2em; } #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} ul#icons {margin: 0; padding: 0;} ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} ul#icons span.ui-icon {float: left; margin: 0 4px;} </style> </head> <body> <!-- Progressbar --> <h2 class="ui-progressbar ui-progressbar-value">Progressbar</h2> <div id="progressbar"> <!--<div>59%</div>--> </div> </body> </html> Still very far from the original, unfortunately ... In general, I rely on your help!
What is now:
