title: Javascript from cytoscape is not a function
body: <p>My javascript component is not rendering and I'm getting the following error:</p>
  
  <pre><code>TypeError: $(...).cytoscape is not a function
  </code></pre>
  
  <p>Here is the code that throws the error. </p>
  
  <p>Essentially I'm trying to isolate what javascript renders to the contents of the row. When I run this without nesting it in a container then It work fine.</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
  
      &lt;title&gt;Main Page&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link rel="stylesheet" type="text/css" href="/static/css/graph4.css"&gt;
  
  
      &lt;!--[if lt IE 9]&gt;
            &lt;script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"&gt;&lt;/script&gt;
            &lt;script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
  
    &lt;/head&gt;
    &lt;body&gt;
      
      
  &lt;nav class="navbar navbar-default"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Link &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
              &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
              &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;form class="navbar-form navbar-left"&gt;
          &lt;div class="form-group"&gt;
            &lt;input type="text" class="form-control" placeholder="Search"&gt;
          &lt;/div&gt;
          &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
         &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
              &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
  &lt;/nav&gt;
    &lt;div class="container-fluid"&gt;
  
  
    &lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-sm-12 col-md-12" style="background-color:lavender;"&gt;
     &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
     &lt;script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"&gt;&lt;/script&gt;
            &lt;script&gt;
    $(function(){ // on dom ready
    
    $('#cy').cytoscape({
        layout: {
            name: 'cose',
        padding: 10,
        randomize: true
      },
      
      style: cytoscape.stylesheet()
        .selector('node')
          .css({
            'shape': 'data(faveShape)',
            'width': 'mapData(weight, 40, 80, 20, 60)',
            'content': 'data(name)',
            'text-valign': 'center',
            'text-outline-width': 2,
            'text-outline-color': 'data(faveColor)',
            'background-color': 'data(faveColor)',
            'color': '#fff'
          })
        .selector(':selected')
          .css({
            'border-width': 3,
            'border-color': '#333'
          })
        .selector('edge')
          .css({
            'curve-style': 'bezier',
            'opacity': 0.666,
            'width': 'mapData(strength, 70, 100, 2, 6)',
            'target-arrow-shape': 'triangle',
            'source-arrow-shape': 'circle',
            'line-color': 'data(faveColor)',
            'source-arrow-color': 'data(faveColor)',
            'target-arrow-color': 'data(faveColor)'
          })
        .selector('edge.questionable')
          .css({
            'line-style': 'dotted',
            'target-arrow-shape': 'diamond'
          })
        .selector('.faded')
          .css({
            'opacity': 0.25,
            'text-opacity': 0
          }),
    
      elements: {
        nodes: [
          { data: { id: 'j', name: 'Jerry', weight: 65, faveColor: '#6FB1FC', faveShape: 'triangle' } },
          { data: { id: 'e', name: 'Elaine', weight: 45, faveColor: '#EDA1ED', faveShape: 'ellipse' } },
          { data: { id: 'k', name: 'Kramer', weight: 75, faveColor: '#86B342', faveShape: 'octagon' } },
          { data: { id: 'g', name: 'George', weight: 70, faveColor: '#F5A45D', faveShape: 'rectangle' } }
        ],
        edges: [
          { data: { source: 'j', target: 'e', faveColor: '#6FB1FC', strength: 90 } },
          { data: { source: 'j', target: 'k', faveColor: '#6FB1FC', strength: 70 } },
          { data: { source: 'j', target: 'g', faveColor: '#6FB1FC', strength: 80 } },
         
          { data: { source: 'e', target: 'j', faveColor: '#EDA1ED', strength: 95 } },
          { data: { source: 'e', target: 'k', faveColor: '#EDA1ED', strength: 60 }, classes: 'questionable' },
          
          { data: { source: 'k', target: 'j', faveColor: '#86B342', strength: 100 } },
          { data: { source: 'k', target: 'e', faveColor: '#86B342', strength: 100 } },
          { data: { source: 'k', target: 'g', faveColor: '#86B342', strength: 100 } },
          
          { data: { source: 'g', target: 'j', faveColor: '#F5A45D', strength: 90 } }
        ]
      },
      
      ready: function(){
        window.cy = this;
        
        // giddy up
      }
    });
    
    }); // on dom ready
    
    
    
    
    
    
    
    
    &lt;/script&gt;
            &lt;div id="cy"&gt;&lt;/div&gt;
     &lt;p&gt;Test&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-xs-12 col-sm-12 col-md-12" style="background-color:lavenderblush";&gt;
          Timeline
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
  
  
  
  
     
  
  
  
  
  
  &lt;/div&gt;
  
  &lt;footer class="footer"&gt;
  &lt;p&gt;
  &lt;center&gt;
  &lt;span class="glyphicon glyphicon-copyright-mark" aria-hidden="true"&gt;&lt;/span&gt;
  Test
  &lt;/center&gt;
  &lt;/p&gt;
  &lt;/footer&gt;
  
      
      &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>