I have to add a progress bar on my web page to show the progress of submission. My page on submit saves the data in the database. I have to show user how long will the submission take place. For an e.g., 50% Completed and so on..
in order to show a progress for the update process, you will need to send partial updates indicating the total percentage completed so far.
so the more applicable solution will be to use something like jQuery UI ProgressBar, and have a mechanism to send the mentioned percent to the user, then update the progress bar with the last sent value.
you can check the following articles for more details:
Using the jQuery ProgressBar Widget in ASP.NET Applications
Reporting server side operation progress with jQuery UI Progressbar
I see two ways in here, first, when you are going to do it asynchonous request, you can measure how long this takes in an average (10secs) and use this value for measure how far are we now.
Second way is more suitable for huge data uploads .. You would need the database and application support and upload the data using batches. Then you can measure how many data you have and how far are you in the submitting.
You can simulate it with jQuery and a timer that extends the length of a colored div. Not really an server side genuine control but can be enough to make the visitors satisfied. The time and interval can be calculated due to what the user have to do.
Often, for the user experience, the look of the progress bar movement itself, it's more important then the fact its going to 100% (which usually are bad, if the action isn't fully finished before 100%).
[added]
You have to
Attach jquery script library with
<script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"></script>
Place and point a styled html control
<div style="height:20px;width:200px;background-color:#777" id="somediv"></div>
Point to it and affect it with javascript/jquery
<script type="text/javascript">
var width = 10;
$(document).ready(function() {
setTimeout("$('somediv').html('width,'" + width+10 + "')", 600);
});
</script>
Please understand this is a sort of pseudocode (not fully copy pastable) to get an idea of my description. The setTimeout javascript function would make the div being bigger for each interval. Like adding 10px each, which make a good point to reuse the variable for a textaul description.
Related
I'm trying to create a trigger in GTM that would trigger a chat widget (ex: Zendesk) only after 60 seconds on the landing page but that would trigger on window loaded for all consecutive pages.
I've been able to create the first page of the trigger using the built-in timer trigger but I'm not sure how to implement the second part.
Chat widget is something that I would suggest doing through front-end. It's not generally expected to see something like this residing in a tag manager since it has no relation to analytics.
Make a customHTML tag, attach your trigger to it.
Find out how the chat widget is supposed to be envoked. There's likely a line of JS code to open it.
Test that JS code in your console first to make sure it actually makes the chat pop up.
Paste the JS code in your customHTML tag make sure it's within like so:
<script>
your code here
</script>
Test it out.
Question
I'm working with Adobe Scene7 BasicZoomViewer and I'm looking for a way to tell the ZoomViewer to reset the zoom so that the user is no longer zoomed in on an image but instead will show the default "zoom" level.
What I've found
The closest thing I found to what I need is this reset property ZoomView.reset which "Resets the viewport when the frame (image) changes. If set to 0 it preserves the current viewport with the best possible fit while preserving the aspect ratio of the newly set image".
This looks close to something I need but it states that it will reset or preserve the aspect ratio when a new image has been inserted but I am not inserting new images.
Demo from Adobe
There is a button on the image that the API inserts into the page that resets the zoom level. Adobe provides a demo page that shows what I'm working with. If you look at the bottom left, the right-most button is the reset button. When clicked, it has to make some kind of API call and I need to figure out which one it is.
Edit
I've been able to find a minified version of the BasicZoomViewer and I am currently attempting to make sense of the code.
There is an event listener placed on the "Zoom Reset Button" that just simply calls a reset() method on line 274 in the uglified version of the file. Currently, I am trying to make sense of the file and figure out how to access this method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
I will be answering my own question. If someone finds a better way please feel free to answer as well.
tldr;
Create a variable to hold the instance of your s7viewers.BasicZoomViewer() and inside of that you can access the event handlers and much more.
Example of calling the reset zoom handler
// instantiate the s7viewers class and save it in a variable
var s7BasicZoomViewer = new s7viewers.BasicZoomViewer({
containerId: 's7viewer',
params: {
asset: assetUrl,
serverurl: serverUrl
})
// example of how to call the "zoomReset()" method
s7BasicZoomViewer.zoomResetButton.component.events.click[0].handler()
Explanation
After digging through the minified code that was uglified I found an event listener on the s7zoomresetbutton DOM class name, or perhaps it's watching for the ID of that DOM element which is the same ID as the container div for your S7 BasicZoom Viewer plus some added text to make this ID unique. For example, if the container div is s7viewer then the reset zoom button will have an ID of s7viewer_zoomresetbutton.
Now, going through the code I found this event listener which let me know there must be some way to call the zoomReset() method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
In the code above, the value of c is this or in other words it's the instance of your S7 BasicViewerZoom and in my case I have multiple depending on how many images I need to zoom on.
When instantiating the s7viewers class you can then reference that instance later and access the event handlers on each button and other properties and methods.
From there it was just looking through the object returned from the instance and calling the handler for the reset button.
Below, you'll see a snapshot of Firebug's Net Panel/Tab after I clicked a submit button on a form in an ASP.NET web application, to the time the response came back from a full page postback. (Actually I don't know when Firebug's NET panel timeline stops... I'm guessing it's when the page finally renders... please tell me if you know.)
I'd like to understand what each interval below means (1-10). If each vertical line means something different, then just say "1-2" or "2-3" to indicate the vertical line. I'm noticing that the times from the itemized URL lines in the timeline don't match the total time. Where did this time go? How can I pinpoint the slowness?
My goal is to find out how I can speed up this page. But in the mean time, I'd like to understand what's happening in the page first. I'm a bit concerned about #7 and #10. That's what I'm primarily trying to figure out right now.
FYI: The image is very small in the thread's question, so if you open the image in a new tab (or window) it will be easier to see.
If I haven't provided enough information, please ask.
==================
9/20/2011 update # 12:49am
Removed the iFrame, but that did not help performance.
OK, in the first image you've got persist turned on which means Firebug will show the requests for more the one page i.e. doesn't clear down one reload (http://getfirebug.com/wiki/index.php/Net_Panel).
8 is the DOMContentLoaded event being fired which is the point the browser can start rendering the page
6 is the onload event firing
(Not sure what the other intermediate lines are)
7 & 9 are the UI thread being blocked by the parsing / execution of javascript
Have a read of this Chapter from #souders book on blocking Javascript for an explanation (http://books.google.co.uk/books?id=E7p-07kNfXYC&lpg=PR15&ots=UMcnSGjhOr&dq=javascript%20blocking%20souders&pg=PA27#v=onepage&q=javascript%20blocking%20souders&f=false)
I'm maintaining an ASP.NET site where users can log on to register some set of data (for statistical purposes). One user registers data for a set of units, and for each of these units a set of forms are to be filled out (with a handful of fields in each form, but that doesn't matter here). One scenario is that a user has 12 units, and in each of these units there is 25 forms to be filled, meaning a total of 300 forms.
The ASP.NET page for registering these data is made the following way: each form is in a panel that can be collapsed using an AjaxControlToolkit CollapsiblePanelExtender, and all forms in a unit is inside another panel that also can be collapsed. The result is that you have a tree view-like structure with the units on the top, and under each unit you can expand a set of forms, and further each form can be expanded to fill data (the page is loaded with all panels collapsed by default).
The page is generated completely dynamically (as forms can be added in a database), and for generating the CollapsiblePanelExtenders I have the following code:
private CollapsiblePanelExtender GenerateCollapsiblePanelExtender(string id, Panel headerPanel, Panel contentPanel)
{
CollapsiblePanelExtender collapsiblePanel = new CollapsiblePanelExtender();
collapsiblePanel.ID = id + ID_COLLAPSIBLE_PANEL_POSTFIX;
collapsiblePanel.TargetControlID = contentPanel.ID;
collapsiblePanel.CollapseControlID = headerPanel.ID;
collapsiblePanel.ExpandControlID = headerPanel.ID;
collapsiblePanel.Collapsed = true;
collapsiblePanel.BehaviorID = collapsiblePanel.ID + ID_BEHAVIOUR_POSTFIX;
return collapsiblePanel;
}
With one user having 12 units each with 25 forms, this means a total of 312 CollapsiblePanelExtenders. As I said, they are all set to be collapsed by default, but here's the problem:
When the page loads, they all appear to be expanded, and then the browser "starts collapsing them". This however takes a very long time (in Firefox I even get a warning about an unresponsive script, IE and Chrome only takes forever but without the warning). When all the "collapsing" is complete it works smooth to open and close single panels, but users have complained about the extremely slow initial loading.
So my question is simple: is there a way to optimize this so that the loading goes smoother? Is it for instance possible to only load the header panels in each CollapsiblePanelExtender initially, and then load the content panel asynchronously in some way?
One final clarification:
I know I could simply change the design of the page to only include one unit and thus reducing size of the contents drastically, but I hope to avoid this (users prefer the way with everything in one page). It would also mean a rather large change to the logic of the page (yes, I know - it's a poor code base at that point)
After asking some more around other places, I finally managed to solve this issue. The solution was to skip the CollapsiblePanelExtenders altogether, and instead use jQuery to handle the collapsing/extending.
In my structure, all header panels use the css class HeaderPanel, and all content panels use the css class ContentPanel (all of these are hidden by default). I can then use the following script to handle all the collapse/expand logic:
<script language="javascript">
$(document).ready(function() {
$("div.HeaderPanel").toggle(
function() {
$(this).next("div.ContentPanel").show("slow");
},
function() {
$(this).next("div.ContentPanel").hide("slow");
});
});
</script>
The solution was really quite simple, and it works like a charm! The collapsing/extending is soo much smoother and nicer than what it looked like when I used the CollapsiblePanelExtenders, and the page loads really fast as well :)
I am writing an intranet application and am considering the use of a pop up window. I am not worried about accessibility since it's an intranet app.
The scenario is such as I need to be able to have the same code be used in a server page as well as in the middle of a process; which is why I decided when using it in the middle of the process, it's best to have it as a pop up window to running out of the real estate on the screen.
Any thoughts on this? I am hesitant to use a pop up window in such a manner as I usually only use it for error messages.
I don't completely understand what you're trying to do, but I think a popup window might be somewhat of an issue if the user's browser automatically blocks popup windows. Plus, if you were trying to run a process in the popup window, the user could close it and no longer have a way to check on the process.
Would it be possible to use Ajax to call back to a web service that gives the page information about the process? You could give the user a way to make the Ajax call to check on the status of the process or just have it continually polling in the background.
Edit:
You said you weren't too familiar with Ajax. For the most part, there are libraries to handle all the of hard details. I'll recommend jQuery because that's what I've been using for a while now.
If you go the Ajax route you'll be able to contain everything on one page and make the updates you need to make when the Ajax call is successful. Depending on how you write the code, it should be pretty reusable if you do it right. It really depends on how specific the your needs on each page.
Take a look at the jQuery documentation though. It may have what you need already built into it. Otherwise, someone else might be able to suggest some reasons why their favorite JavaScript library works better for what you're trying to do.
I think you might want to do something like this:
Inside of the parent page:
<input id="btnShowModal" runat="server" type="button" value='Show Modal' onclick="ShowModal()" />
function ShowModal()
{
var retVal = window.showModalDialog("MyPopup.aspx?param1=value","","center=yes;dialogWidth=200px;dialogHeight=200px;status:0;help:0")
if(retVal != "" && retVal != undefined)
{
//This code will be executed when the modal popup is closed, retVal will contain the value assigned to window.returnValue
}
}
Inside of the modal popup:
<input id="btnSave" runat="server" type="button" value='Save' onclick="Save()" />
function Save()
{
window.returnValue = "Whatever you want returned to the parent here"
window.close()
}
The usual argument against popup windows is that they are unreliable. The user may have disabled script initiated popups, I know I have.
In a controlled environment, such as an inranet, you may be able to be guaranteed that this is not the case, but even so, why risk it, there is an alternative.
Instead of popping up a new window just insert a new, absolutely positioned <div> into the document and insert your content into that using ajax or even an <iframe>. There are lots of examples/libraries on the web.
Thickbox for jQuery for example. There are of course scripts that don't require libraries.
I generally use a div with a z-index and absolute positioning; the .show() can be written and called on demand, it would have a button to .close(), and AJAX can make it seem modal so it must be clicked to close if you so desire. Then again, I hate messageboxes.
I was trying to avoid AJAX, simply because I have never used and don't have the time frame to learn it now. However, I am not totally opposed to it.
In short what I need to do is for the pop up window interact back with the page. Imagine that on the page I am building the links of the chain. Each link has unique properties. When user clicks on "ADD LINK" button, I was thinking have a pop up window with the little form and a Save button. The only issue with this is that a pop up needs to interact with the page; we need to know when something has been saved or not saved.
A div on the same page is one way. A pop up is yet another way. Another catch is that this code (adding new link) needs to be reusable, because I am also going to have a page that just creates new links.