Support » Fixing WordPress » Embedding WebGL using external JS

  • Resolved js493cam

    (@js493cam)


    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

    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)

    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.