Shadowing Posted June 22, 2012 Share Posted June 22, 2012 (edited) hey guys I dont know what im doing wrong but i cant seem to make the jquery UI progressive bar work. for my understanding all it does is just increases the width of a element i set one css property for progessbarbackground-color:yellow; I would thought it would increase the widght to 37 percent.if all it does is just increase the width maybe i should make this my self from scratch <link rel="stylesheet" type="text/css" href="style/jquery.ui.all.css" /><script type="text/javascript" src="<?php echo LPATH; ?>jquery/jquery.js"></script><script type="text/javascript" src="<?php echo LPATH; ?>jquery/ui_widgets/jui.js"></script><script type="text/javascript" src="<?php echo LPATH; ?>jquery/ui_widgets/ui_widget.js"></script><script type="text/javascript" src="<?php echo LPATH; ?>jquery/ui_widgets/ui_progressbar.js"></script> <script>$(function(){ $( "#progressbar" ).progressbar({ value: 37 }); });</script> </head><body><div class="demo"><div id="progressbar"></div></div> Edited June 22, 2012 by Shadowing Link to comment Share on other sites More sharing options...
dsonesuk Posted June 22, 2012 Share Posted June 22, 2012 make your own its not that difficult <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function(){$("#progress_sub").click(function(){var checkvalue = parseInt($("#progress_step").val());if(checkvalue >100){checkvalue = 100;}if(checkvalue < 0){checkvalue = 0;}runthis(checkvalue)});$("#progress_sub2").click(function(){runthis(999)});});function runthis(percentValue){$("#prograss_bar div").css({"width": "0"});var set_widthvalue = "100";var duration;percentValue != 999 ? set_widthvalue = percentValue : set_widthvalue = "100";percentValue != 999 ? duration = 50 * percentValue : duration = 5000$("#prograss_bar div").stop(true,false).animate({"width": set_widthvalue+"%"}, duration, "linear")}/*--*//*]]>*/</script><style type="text/css">#prograss_bar {width:1000px; height:10px; margin:0 auto; border: 1px solid #000; background-color:#0000CC;}#prograss_bar div {width:0; background-color:#FF0; height:100%;}</style></head><body><input type="text" value="" id="progress_step" /><input type="submit" value="submit by numeric value 1 to 100" id="progress_sub" /><input type="submit" id="progress_sub2" value="submit by 100 only" /><div id="prograss_bar"><div></div></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now