How to Upload Scripts With Progress Bars
Some website commands can take a little while to complete. When a visitor executes a command on your site, for example "Download" or "Order," it's good practice to have a progress bar. Progress bars let visitors to your website know that something is happening in the background. Without a progress bar, the visitor may not know if he has executed the command correctly. You can add a custom progress bar to your site using existing, customizable codes available on the Internet.
Other People Are Reading
Instructions
-
-
1
Visit a JavaScript code generator site. Such sites provide free, customizable JavaScript code for progress bars.
-
2
Browse the site for code that suits your needs. Typically the code generator site displays images of how the progress bar looks once the script code is uploaded to your site.
-
-
3
Highlight your preferred code, right-click and select "Copy."
-
4
Open a plain text editor, such as Microsoft Notepad.
-
5
Right-click and select "Paste" to enter the JavaScript code into a plain text document. It's essential to use plain text, because some rich text editors reformat text automatically, which can disrupt the lines and spaces in the code.
-
6
Scroll through the JavaScript code in the plain text document and enter values where you see an instruction from the JavaScript code author. For example, if to the left of the text "Specify duration of progress bar in seconds" is a "3," the progress bar will appear on screen for a maximum of three seconds. Delete the "3" and enter your preferred value, or leave it as 3 if that's a suitable duration.
-
7
Log in to your website's content management system. The content management system, or CMS, is where you edit your website. For example, if your website is powered by WordPress, go to www.yourdomain.com/wp-admin. Enter your user name and password when prompted.
-
8
Open the relevant JavaScript editor. Each page of your site has its own HTML editor, enabling you to customize the pages independently of one another. So, for example, if you are adding the progress bar to the "Download eBook" page of your website, click on "HTML Editor" tab next to that page in your CMS. It's essential you select the HTML editor and not a text editor. If you paste the code into the text editor, it will appear on screen as code rather than as the desired graphic.
-
9
Scroll down to search for "<body>" in the existing HTML. You can speed this process up by using the "Find" function. Hit "Ctrl" and "F" if using a PC, or "Command" and "F" if using a Mac, and type "body" into the text box. Hit "Enter" to find the first "body" tag.
-
10
Copy the edited code from the plain text editor and paste it into the HTML editor, directly after the "<body>" tag.
-
11
Hit "Save" or "Update," depending on which CMS you use, to upload the new code to the website. Visit your web page and view the progress bar.
-
1
Tips & Warnings
Save the original HTML code from your web page to a plain text document. This way, to remove the progress bar from the site you just paste the original code over the new code, rather than editing the new code.
References
Resources
- Photo Credit Photos.com/Photos.com/Getty Images
