Search jQuery

jQuery Forum

Using jQuery

niruninja

Verical Progress Bar

Answered

Need more info
Working on it
Answered

in Using jQuery • 10 years ago

How to design a vertical progressbar..

using jquery and css .. Also it must be having a flow like from up to down and vice versa..

also the progress must be animated..

Ideas Please

Replies(11)

relst.jqu..

Reageren: Verical Progress Bar

10 years ago

If you check the theming on http://jqueryui.com/demos/progressbar/ you'll find this:

<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
<div style="width: 37%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div>
</div>

The progressbar plugin adds a width to the innerdiv to display the current value.
If you want a vertical progressbar, the plugin should add the height instead of width.
Only css won't work... I think you'll have to extend the progressbar plugin with an extra option like slider plugin (orientation)

niruninja

Re: Verical Progress Bar

10 years ago

hi ,
Thanks for the reply..
can u please give the code here for a working example of a vertical progress bar.
Please i am looking for this for such a long time

relst.jqu..

Reageren: Verical Progress Bar

10 years ago

My quick and dirty first version of a vertical progressbar.
It's not the most clean code, but I'm not a jQuery Core developer :)

New css classes :

/* Progressbar
----------------------------------*/
.ui-progressbar {text-align: left; }
.ui-progressbar .ui-progressbar-value {margin: -1px;}
.ui-progressbar-horizontal .ui-progressbar-value { height: 100%; }
.ui-progressbar-vertical .ui-progressbar-value { width: 100%; }
.ui-progressbar-horizontal { height: 2em; }
.ui-progressbar-vertical { width: 2em;}

You use it like this

<style type="text/css">
#progressbar{
height : 200px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#progressbar').progressbar({
value : 30,
orientation : 'vertical'
});
});
</script>

I changed the 1.8.2 developer bundle for the progressbar.
See attachment.
Maybe other developers can help for a more clean and stable solution.

Attachments

jquery.ui.progressbar.zip
Size : 1.09 KB Downloads : 3847 Download

niruninja

Re: Verical Progress Bar

10 years ago

Thanks for the amazing work u have done..

Pls send me a Perfectly working code in a notepad with all the required files attached .. Pls that would be of gr8 help man...

thanks once agin!!

relst.jqu..

Reageren: Verical Progress Bar

10 years ago

You also need jquery.core and jquery.widget to run the progressbar plugin.
Include the 3 files (jquery.ui.core, jquery.ui.widget and the altered jquery.ui.progressbar) and create a div with id progressbar.

niruninja

Re: Verical Progress Bar

10 years ago

This is the code i am running but i am not able to see any progressbars.. pls help me and reply a working code in a notepad with the required files..
it would be of gr8 help!!
thanks

<!DOCTYPE html>
<html>
<head>
<link href="C:Documents and Settings200481Desktopjquery-ui-1.7.3.customdevelopment-bundle hemesaseuogressbar.css" rel="stylesheet" type="text/css"/>
<!-- <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>--!>
<link href="C:Documents and Settings200481Desktopvuogressbar.css" rel="stylesheet" type="text/css"/>
<link href="C:Documents and Settings200481Desktopvure.css" rel="stylesheet" type="text/css"/>
<script src="C:Documents and Settings200481Desktopvure.js"></script>
<script src="C:Documents and Settings200481DesktopvuogressbarVertical_1.0.0.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>-
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<style type="text/css">
     #progressbar{
         height : 200px;
     }
</style>

<script>
$(document).ready(function() {
    $("#progressbar").progressbar({ value: 37,orientation : 'vertical' });
});
</script>
</head>
<body style="font-size:62.5%;">

<div id="progressbar"></div>

</body>
</html>

relst.jqu..

Reageren: Verical Progress Bar

10 years ago

1. Don't use absolute paths to your external sourcefiles. Use relative paths.
2. Always include your jquery main file as first! This code can never work because jquery.min.js is later on your page then al your custom js files...

Do you get any errors in Firebug?

See attachment for a working sandbox sandboxenvironment.

This is all I can give you. The rest is up to you.

Attachments

Sandbox.zip
Size : 82.18 KB Downloads : 4282 Download

niruninja

Re: Verical Progress Bar

10 years ago

Wow man this is wat i wanted .. Thanks a ton.. :)

One small doubt like this moved from top to bottom(the progress).. Anyway we can make this move from bottom to top??

also is it possible to make this move in a way shown in the below site.. http://donavon.com/jProgressBarSample/ ( what i mean is the animation .. its moving like in a flow instead of Filling at page load)

niruninja

Re: Verical Progress Bar

10 years ago

hi,

I have made a vertical progress bar..

but can u give me a idea on how to gradually increase the progress instead of it .. Loading at page load..