How to show pace.js progress of page load in td tag

Question

How to show pace.js progress of page load in td tag

1.7k Views Asked by harshavmb At 18 April 2017 at 12:29

I do have a requirement to show the pace.js progress on page load in td tag rather showing on the middle of webpage.

My HTML :

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"/> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/green/pace-theme-center-circle.min.css">
</head>
<body>
<table border="1">
<tr>
<th>Channel</th>
<th>Health</th>
<th>Action</th>
</tr>
<tr>
<td>Mobile</td>
<td class="tdcolor">
  <select >
    <option value="0">Select</option>
    <option value="1">Green</option>
    <option value="2">Red</option>
    <option value="3">Amber</option>
  </select>
</td>
<td> <!--show progress bar here></td>
</tr>
</table>
</body>
</html>

Is it possible to show the progress using pace.js in third td cell ? The reason I'm using pace is because of nil configuration. If it is not possible, could you please guide me with ajax/jquery?

Many Thanks in advance.

Original Q&A

There are 1 best solutions below

**freginold** · Accepted Answer · 2017-04-18T13:57:28.027000

You can do that, but it will take a little bit of work. You'll need to modify the pace.js source file, which means you'll need to host or provide your own (modified) copy of it.

The changes you'll need to make are in the Bar.prototype.getElement method; see the modified function below for an example. You can copy that code exactly, or modify it if you want.

Those changes basically redirect the targetElement variable to point to your td cell, and also set the progress indicator to use relative positioning so it displays inside the cell.

Bar.prototype.getElement = function() {
  var targetElement = document.getElementsByTagName('td')[2];
  if (this.el == null) {
    targetElement = document.querySelector(options.target);
    if (!targetElement) {
      throw new NoTargetError;
    }
    this.el = document.createElement('div');
    this.el.className = "pace pace-active";
    document.body.className = document.body.className.replace(/pace-done/g, '');
    document.body.className += ' pace-running';
    this.el.innerHTML = '<div class="pace-progress">\n  <div class="pace-progress-inner"></div>\n</div>\n<div class="pace-activity"></div>';
    targetElement = document.getElementsByTagName('td')[2];
    if (targetElement.firstChild != null) {
      this.el.style.position = "relative";
      targetElement.insertBefore(this.el, targetElement.firstChild);
    } else {
      this.el.style.position = "relative";
      targetElement.appendChild(this.el);
    }
  }
  return this.el;
};

I can't provide a working example here because the entire pace.js file is too large, but if you replace the standard Bar.prototype.getElement with the one above, it will insert the progress indicator into that td cell.

Pace.js License: (included for attribution)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

How to show pace.js progress of page load in td tag

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in PACE

Trending Questions

Popular # Hahtags

Popular Questions