javascript - Progress Bar with Added Element -


i have build kind of progress/counter/meter bar in webpage. bar

basicly i'll getting data (total number of hours, in case 500h , number of hours avaiable, 400h in example) json , load bar accordingly.

i've tried adapt jqueryui , bootstrap progress bars, i'm getting stuck when implementing circle avaiable hours.

using bootstrap structure

<div class="progress">   <div id="progressbar" class="progress-bar" role="progressbar" aria-valuemin="0">     <span id="pprogress"></span>   </div>   <div id="circleprogress" class="progress-bar transbar" role="progressbar">     <span id="pcircle"></span>   </div> </div>

since bootstrap can stack bars, had ideia to, instead of second bar, circle, follow progress bar, since progress div has height, circle gets cut. tried position absolute, got no where.

also tried placing circle on second div, parallel class="progress", couldn't figure out way calculate progressbar position.

so i'm looking tips, solutions or places find solution solve problem.

edit sorry lack of details, made fiddle - http://jsfiddle.net/hmt0l07r/1/

i'm new @ using fiddle, i'm not sure how add image using circle, basicly show top of circle inside light grey bar.

i created rough progressbar on jsfiddle. pretty simple, use date json via ajax , math adding them element. css3 animate whole bar.

var reachedh = 233,     totalh = 500,     availableh = 400,     reachedhpercent = (reachedh / totalh)*100,     availablehpercent = (availableh / totalh)*100;   $('#pprogress').css({'width':reachedhpercent+'%'}); $('#availableh').css({'left':availablehpercent+'%'}); $('#availableh').text(availableh+'h');

http://jsfiddle.net/5jnn6sqj/

edit: fiddle basic styling , animation. added bar of available hours, saw bubble before. http://jsfiddle.net/5jnn6sqj/1/


Comments

Post a Comment

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

im trying write component admin side , need add user creation. dont want duplicate existing codes add link. know how add task not simple link toolbar. thx help. if wanting button opens new user screen can try in component: $bar = jtoolbar::getinstance('toolbar'); $bar->appendbutton('link', 'users', 'new user','index.php?option=com_users&task=user.add'); you need add view.html.php file wherever you're creating toolbar. is need?
Read more

linux - disk space limitation when creating war file -

i have 1 gb disk space limitation hosting app , have used 700mb of it. however want create war file directory big (around 600mb) using command : jar -cvf root.war folderpath that's why encounter quota limitation , can't following. i'm looking way delete folder content when it's applying archive conserve disk space take note can't install zip tool in ssh shell ~ the code works on test directories, test first anyway, deletes files. it's not efficient. assumptions: 300mb free space, in destructively compress 600mb folderpath directory. none of files big -- if file in folderpath 300mb or larger, fail. notes: if ' $out ' file exists, nothing. first find pipes file list while , if ' $out ' doesn't exist in loop, create it, don't update -- if does exist, update it. each pass adds 1 more file, deletes unless file directory. after loop finishes delete empty directories too. unset u ; in=folderpath ; out=roo...
Read more

How to provide Authorization & Authentication using Asp.net, C#? -

Image
i have asp.net application in c#. i have provide page authorization specific user/usergroup. i have created 2 tables in database: 1) pagename 2)permissions[insert, update, view, delete] but i'm unable match tables , permissions assigning... can 1 please me, how created tables in database , how coding. please me. you can below explanation. configure access specific file , folder, set forms-based authentication. request page in application redirected logon.aspx automatically. in web.config file, type or paste following code. this code grants users access default1.aspx page , subdir1 folder . <configuration> <system.web> <authentication mode="forms" > <forms loginurl="login.aspx" name=".aspnetauth" protection="none" path="/" timeout="20" > </forms> </authentication> <!-- section denies access files in...
Read more