Support » Fixing WordPress » Embedding WebGL using external JS

Embedding WebGL using external JS

  • Resolved js493cam

    (@js493cam)


    2 years, 6 months ago

    This is the bit where I out myself as a total WP noob (because that’s exactly what I am).

    I’m trying to embed a WebGL viewer of a molecular graphics simulation called 3Dmol.js. I’ve been trying to follow the instructions from the developers’ website (http://3dmol.csb.pitt.edu/doc/tutorial-embeddable.html) but all I get is a blank block in my website. What I want is the code below to display the viewer:

     <script src="http://3Dmol.csb.pitt.edu/build/3Dmol-min.js" async></script>     
         <div style="height: 400px; width: 400px; position: relative;" class='viewer_3Dmoljs' data-pdb='2POR' data-backgroundcolor='0xffffff' data-style='stick'></div>

    When I write the above lines as a standalone HTML file, it works brilliantly, but when I try to emded it it fails. I’ve tried putting the script src in a header, to no avail. I’ve tried enclosing it in pre tags, to no avail. I think there’s just something preventing the viewer from displaying that I can’t figure out. Any ideas? TIA.

    • This topic was modified 2 years, 6 months ago by js493cam.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Forum Moderator

    2 years, 6 months ago

    first off, as your site is https, you need to invoke that script via https, not http.

    Secondly, it appears that it’s using jQuery incorrectly. WordPress uses jQuery in safe mode, which is why you get $ is not a function.

    Uncaught TypeError: url.indexOf is not a function
    at jQuery.fn.init.jQuery.fn.load (3Dmol.js:10091)
    at theme-scripts.js?ver=5.4.2:289
3Dmol.js:3841 jQuery.Deferred exception: $ is not a function TypeError: $ is not a function
    at Object.$3Dmol.autoload (https://3dmol.csb.pitt.edu/build/3Dmol.js:26230:9)
    at HTMLDocument.<anonymous> (https://3dmol.csb.pitt.edu/build/3Dmol.js:26434:12)
    at mightThrow (https://3dmol.csb.pitt.edu/build/3Dmol.js:3557:29)
    at process (https://3dmol.csb.pitt.edu/build/3Dmol.js:3625:12) undefined
jQuery.Deferred.exceptionHook @ 3Dmol.js:3841
3Dmol.js:3850 Uncaught TypeError: $ is not a function
    at Object.$3Dmol.autoload (3Dmol.js:26230)
    at HTMLDocument.<anonymous> (3Dmol.js:26434)
    at mightThrow (3Dmol.js:3557)
    Thread Starter js493cam

    (@js493cam)

    2 years, 6 months ago

    Oh my word – just adding the https fixed this. Of all the things not to spot… Thanks very much for your help!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Embedding WebGL using external JS’ is closed to new replies.

Topic Tags

Views