title: Google Polymer - how to add content to Neon elements
body: <h1>The playground</h1>
  
  <p><a href="http://labs.recgr.com/polymer-dev/test1.html" rel="nofollow noreferrer">http://labs.recgr.com/polymer-dev/test1.html</a></p>
  
  <h3>My goal</h3>
  
  <p>I've managed to replicate <a href="https://elements.polymer-project.org/elements/neon-animation?view=demo:demo/index.html&amp;active=neon-animated-pages" rel="nofollow noreferrer" title="google polymer neon element demo">this</a> animation, but I need it to have content as well (text and images).</p>
  
  <h3>The Problem</h3>
  
  <p><strong>Inserting content</strong> - I've been experimenting with adding just text for now, and I cannot get it working.</p>
  
  <h3>What I've tried</h3>
  
  <p><strong>Adding content directly to div circle div container</strong> in <em>circles-page.html</em>, it doesn't work properly.</p>
  
  <pre><code>&lt;div class="circle"&gt;test&lt;/div&gt;
  </code></pre>
  
  <p>Result: <a href="https://i.stack.imgur.com/dLM0K.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dLM0K.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Getting position with jQuery</strong>, on <em>circles-page.html</em> (at the bottom of the page):</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function() {
      var sq_pos = $(".square");
      console.log(sq_pos.position());
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>.. and then using that to make an invisible div above that, to display content.</p>
  
  <p>Result: <code>undefined</code> (in Chrome Console)</p>
  
  <p><strong>I also tried</strong> using jQuery to add content once Dom is ready, but it didn't work, nor did various properties inside Polymer object I've tried (that I've seen on documentation).</p>
  
  <p>Thank you.</p>