title: Draggable is not working getting the uncaught reference error
body: <p>I am trying to add a draggable to the frames but it is not working and throwing the below exception </p>
  
  <p>created the Frames using iframe but could not apply the draggable for my frames.Please help me to solve my problem.</p>
  
  <pre><code> Uncaught ReferenceError: HSplitter is not defined at HTMLDivElement.onmousedown
  </code></pre>
  
  <p>Please find my code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var HSplitter = {
   
       mouseDown: function  (_split, event)
       {
          if(!this.isToggle)
    {
        this.parent = _split.parentNode.parentNode; //td
     this.currentSplit = _split;
     this.splitterWidth = $(this.currentSplit).getWidth();
              this.splitPointX = Event.pointerX(event);
     this.drag = true;
     this.splitDiv = $(this.parent).getElementsByClassName("HSplitDiv")[0];
  
              //min width of a parent container couldn't be less than splitter width.
              if( this.minWidth &lt; this.splitterWidth )
                  this.minWidth = this.splitterWidth;
              this.mouseOver(_split, event);
              $(this.splitDiv).setStyle({paddingRight: '0px'}); //reset padding
  
  
              this._splitDivOverflow(true); //set overflow to ON
          }
      },
      mouseUp: function (split, event)
      {
       if(!this.isToggle)
    {
     this.drag = false;
  
              this._setDynamicOverflow();
          }
       },
         };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>         &lt;head&gt;
          &lt;link href="/Work/css/tab_style.css" type="text/css" rel="stylesheet"/&gt;
          &lt;link href="D:/cnsdi-projects/style.css" type="text/css" rel="stylesheet"/&gt;
          &lt;link rel="stylesheet" href="/Work/css/1.10.19/dataTables.bootstrap.min.css"&gt;
         &lt;link rel="stylesheet" href="/Work/css/1.10.19/bootstrap.min.css"&gt;
  
          &lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" /&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt; 
         &lt;/script&gt;
          &lt;script type="text/javascript" src="/Work/js/3.3.7/bootstrap.min.js"&gt; 
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      
      &lt;div class="tab-content" &gt;
          &lt;div id="sectionA" class="tab-pane fade in active" style="overflow:visible;"&gt; 
          &lt;iframe  scrolling="yes" src="pg1.html" name="leftside"  style="position:absolute;top:140px;left:0%;width:25%;height:100%;border: none;" &gt;&lt;/iframe&gt;
    &lt;div class="split1" onselect="return false;" unselectable="on" onmouseup="HSplitter.mouseUp(this, event);" onmousedown="HSplitter.setMaxMinWidth('-1','-1'); HSplitter.mouseDown(this, event);" style="left: auto;"&gt;
    &lt;span class="collapse l-splt-btn" onclick="HSplitter.splitToggle(this);"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;iframe src="pg2.html" name="rightside" scrolling="yes" style="position:absolute;top:140px;left:25%;width:75%;height:50%;border: none;"&gt;&lt;/iframe&gt;
    &lt;div class="split"&gt;&lt;div class="vcollapse d-splt-btn" onclick="VSplitter.splitToggle(this);" toppaneheight="50%" id="idx1320192_vspltbtn"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;iframe src="pg3.html" name="rightside" scrolling="yes" style="position:absolute;top:450px;left:25%;width:75%;height:30%;border: none;"&gt;&lt;/iframe&gt;
          &lt;/div&gt;
           &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>