0

I am using an SVG element on page A with a href link to page B-- page B has a script that calls the Trianglify api to generate the background.

However, if you navigate to page B by clicking this link, the script doesn't trigger. If you refresh the page on page B, the script triggers and the background works.

Can someone help me figure out how to trigger this script just on the click to the href element?

(application is written w/ express/node and handlebars) This is how I am triggering it:

<div id="something"></div>

<script>
      var f = function(e) {
      console.log("ready");
      var something = document.getElementById('something');
      var dimensions = something.getClientRects()[0];
      var pattern = Trianglify({
          width: dimensions.width,
          height: dimensions.height
      });
      something.appendChild(pattern.canvas());
    }
    $("document").ready(f);

</script>

and then here's the button on page A--

<a href="/contact" class="under animated fadeInRight">
    <rect x="100" y="15" width="10" height="10"/>
    <text x="117" y="25" style="opacity:.5;font-size:15px">CONTACT</text>
</a>
rubinca
  • 13
  • 4
  • How are you triggering Trianglify (onload callback, inline script on , etc?). If you're not using something like the DOMContentLoaded event, it's possible trianglify is running before the DOM is ready. A code sample would be helpful here. – QRohlf Nov 28 '16 at 17:34
  • I updated the question to show how I am triggering it -- so see the console.log("ready") that I have in the body, that prints to the console at page load, but the actual background doesn't generate until I mouseover one of my buttons. Also apparently it seems to work on Windows 8.1, Chromium 55.0.2850.0 (Developer Build) (64-bit) but not on OS 10.11.6 Chrome Version 54.0.2840.98 (64-bit) -- is it possible that there's just something not supported? Thank you! – rubinca Nov 28 '16 at 20:28
  • this feels like a race condition of some kind, since the code above shouldn't behave any differently on Windows/Chrome vs OSX/Chrome. Just to make check, when it doesn't work as expected you're seeing 'ready' in the console, with no errors thrown? – QRohlf Nov 30 '16 at 17:55
  • yes it still says "ready" in the console right upon load, it just doesn't appear as a background until I mouseover a button. @QRohlf – rubinca Dec 01 '16 at 00:00
  • I've been playing around with it, and these are some other triggers that will also make it appear as the background-- -Scrolling the page down -Moving the mouse off the page @QRohlf – rubinca Dec 01 '16 at 00:09

0 Answers0