I am using jQuery progress bar. However I want to use it more like a spinner. I can't really predict when the task will complete. So I need a non determinate progress bar.
jQuery UI progress bar only works when you know how much is done. Is is it possible to use jQuery UI progress bar in such a way that when bar reaches 100% then it starts again.
I have everything theme rolled so it would be nice if I could make jquery UI progress bar work rather than using a different plugin.
As a matter of UI design, please don't change the value of a determinate progress bar to represent an indeterminate one: it's very irritating to see a progress bar apparently going to completion and “... nope! fooled ya!” Indeterminate progress bars on both Mac OS X and Windows have distinct visual representations, and so should yours.
http://www.ajaxload.info/ lets you create several types of customized indeterminate progress bars and spinners. If you really want to use jQuery I guess you could make a custom theme that uses an animated spinner type background for the progress bar.
You could set a timeout to increase the progress bar value by 5% every few seconds and if it reaches 100% start from 0 .. or reverse the increment to -5% so it goes up and down ...
something like
function progressTimeout() {
setTimeout(
function(){
var pbar = $("#progressbar");
var pvalue = pbar.progressbar('option','value');
if (pvalue == 100) pvalue = 0;
pbar.progressbar('option', 'value',pvalue + 10);
if (!/*check if action is complete*/)
setTimeout( progressTimeout, 2000 );
},
2000
);
}
Related
I was reading several articles on how to add a progress bar, but did not get any example to help.
I have a controller that makes a data import from a csv (over 10000) file, and how to make the implementation for the progress bar on the screen.
The only thing missing is to implement the progress bar, I have no idea how to do.
Web Progress bars can be a bit tricky to get to work properly. I see two options that you can do:
The easyiest way is to have a progressbar that only shows a animation that indicate to the user that something is still working, but actually it doesn't show you the progress of your long running task, it only animates.
The harder way is of course to show a realtime report on how far the progress has come.
In this case you will have to use the setTimeout() method in javascript to call a function every 2 or 3 second or so, and in that function do a ajax call to a MVC Controller method that can retreive the currently reported progress from your long running task, and then display it in some way in your GUI.
I either case I think you can use the jQueryUI ProgressBar component.
I have a highchart displaying multiple series, each contains 100+ data points
I have a UI containing a checkbox for each series that when clicked calls the series.hide() or series.show() to toggle the hide/show of each line
My problem is that the hide and show are extremely slow such that I cant check one checkbox whilst processing from a previous is taking place
Does anyone know how to handle this?
Thanks
Rather than calling hide() for each series, call setVisible(false, false);. This second parameter is the redraw parameter, and you can avoid causing a redraw (which is slow) for each series.
Then, after you're done changing visibilities, call chart.redraw() once.
http://api.highcharts.com/highcharts#Series.setVisible
as answered in:
Hiding _groups_ of series in Highcharts and jQuery: how to get acceptable performance?
highcharts draw each time a show or hide is called;
disabling and enabling the redraw function worked for me;
var _redraw = this.chart.redraw;
this.chart.redraw = function(){};
//do work
this.chart.redraw = _redraw;
this.chart.redraw();
How about adding visible: false for the series that are hidden before calling Highcharts.chart()?
Please see references: 1. Highcharts API and 2. Demo
In my case, above approach showed the best performance comparing to the followings:
series.hide()
setVisible(false, false)
setVisible(false, true) or setVisible(false, false); redraw();
I'm using Jeff Wilcox's solution for a global progress indicator. All hooked up simple and is working great except for a panorama page I have. The problem is that the Progress Indicator is not visible at all and it's only on this one page.
All of my calls that go through my data service are using the same wrapper that sets IsLoading = true so I've verified this is working. I've also added a Thread.Sleep in there to make sure the call wasn't just returning too quickly before setting IsLoading = false.
Is there anything different about a panorama control that would hide it? I was setting the background to an image, but I pulled that and made sure the main layout grid background was set to transparent just in case.
Is there anything else that should be set in xaml to make sure this is visible?
*Please note this is not the old PerformanceProgressBar control
Yes, there is something in the XAML, and you might kick yourself if you don't have it set (happened to me several times) check this property:
<phone:PhoneApplicationPage
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:SystemTray.IsVisible="True">
Also make sure that your progress bar actually has room to display. Progress bar takes 32 pixels off the top, so generally speaking you want your content to occupy only 768 pixels in height.
I believe that by default when you create a Panorama page using visual studio, the height is set to 800, and SystemTray.IsVisible is set to false.
Can I have text in the background of a jQuery UI progress bar?
You know the kind I'm talking about don't you?
The kind that where color:white because the progress bar is over it, and color:black because the progress bar hasn't reached it yet.
I think I've seen that type of effect while installing software.
Also, what about a background-image, which works, except that it is totally covered up by the progress bar? I'd like for the progress bar itself to be a little bit transparent.
No. That's impossible.
I have a jQuery UI Dialog, it is Modal and shows with a Bounce effect. I use a Theme where the background is dimmed with a striped image.
The first time the Dialog is opened, the striped background also covers the dialog during the bounce effect. Once the bounce effect has finished, the dialog becomes modal and appears in front of the striped background.
On the next opening, the dialog bounces in front of the background right away.
How can I make the dialog appear in front of the background right away?
Tom's answer pointed me in the right direction, and Firebug was very useful!
The dialog is wrapped in a <div class="ui-effects-wrapper"> which is generated in the createWrapper function in ui\effects.core.js
I added a parameter "z-index=1005" (just to be sure ;) there.
So in jquery-ui-1.7.2.custom.min.js it now looks like this
createWrapper:function(f){if(f.parent().is(".ui-effects-wrapper")){return f.parent()}var g={width:f.outerWidth(true),"z-index":1005,height:f.outerHeight(true),"float":f.css("float")};f.wrap('<div class="ui-effects-wrapper" style="font-size:100%;border:none;margin:0;padding:0;z-index:1002"></div>');
Not sure if it's the best way, but it works.
This sounds like the zIndex of the dialog is not assigned until after the animation. Try this in your CSS:
.ui-dialog {
z-index: 1002;
}
Dialogs usually have this CSS class, and the overlay usually has a zIndex of 1000 (at least in the version I am currently using). If this doesn't work, try to find out (using Firebug) what other classes are assigned only during the animation and assign a zIndex to those.