I found this really cool

Help! What am I missing or doing wrong?

Your help is appreciated.

CodePudding user response：

1. Prevent multiple elements with the same ID

   id="gear"
   

2. Prevent elements with multiple ID's

   id="toolbar-options gear"
   

3. Add toolbar css CDN link (instead off local file)

   <link hef="https://cdn.jsdelivr.net/gh/paulkinzett/[email protected]/jquery.toolbars.css" rel="stylesheet"/>`
   

• After fixing those issues, it still doesn't seem to work.

• It's appears the position: 'bottom' causes the error.

• Setting it to top works as you can see in this demo:

  $('#gear').toolbar({
      content: '#toolbar-options',
      position: 'top'
  });

  .hidden { display: none; }

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  <script src="https://cdn.jsdelivr.net/gh/paulkinzett/[email protected]/jquery.toolbar.js"></script>
  <link href="https://cdn.jsdelivr.net/gh/paulkinzett/[email protected]/jquery.toolbars.css" rel="stylesheet"/>
  
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
  
  <header>
      <h1>Testing toolbar.js</h1>
  </header>
  
  <div  id="gear" >
      <i ></i>
  </div>
  
  <div id="toolbar-options" >
     <a href="#"><i ></i></a>
     <a href="#"><i ></i></a>
     <a href="#"><i ></i></a>
  </div>

The error is thrown in getCoordinates which shows:

getCoordinates: function( position, adjustment) {
    var self = this; 
    self.coordinates = self.$elem.offset();
    if(position == 'top') { 
        return coordinates = {
            left: self.coordinates.left-(self.toolbar.width()/2) (self.$elem.width()/2),
            top: self.coordinates.top-self.$elem.height()-adjustment,
        }
    }

    if(position == 'left') { 
        return coordinates = {
            left: self.coordinates.left-(self.toolbar.width()/2)-(self.$elem.width()/2)-adjustment,
            top: self.coordinates.top-(self.toolbar.height()/2) (self.$elem.height()/2),
        }
    }

},

Since the function does not return anything if the value is bottom, it makes sense that an error is thrown.