Jump to content

trying to use jquery UI


Shadowing
 Share

Recommended Posts

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 by Shadowing
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...