JSFiddle

  • Embed 360° Viewable Image #2 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    <p style="border: 1px solid #d7d7d7; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" src="https://cdn.pannellum.org/2.3/pannellum.htm?panorama=https://i.imgur.com/IbvhuaY.jpg" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></p>
    
    <!-- This utilizes Pannellum, a javascript plugin developed by Matthew Petroff. The example shown is one that uses the pannellum domain to render a 360 degree photo only. If you would like to develop out a more robust, interactive image, complete with hotspots and mutlipe views, please check out Pannellum in its entirety at https://pannellum.org. Note: A beginner to intermediate level understanding of javascript, css, and html are required. -->
  • Browser Custom CSS #11 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    navigator.sayswho= (function(){
        var ua= navigator.userAgent,
        M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
        
        if ...
  • Browser detection & popup #10 is the latest revision

    A custom js and css packet that detects the current browser that is being used by the instructor or student, and displays a container for that browser on the user's dashboard upon the initial login to Canvas.

    /* ------------------ BEGIN FUNCTION SECTION */
    
    // Get current browser info
    // Source: http://stackoverflow.com/questions/5916900/how-can-you-detect-the-version-of-a-browser
    var getBrowserInfo = function() {
    
      var ua = navigator ...
  • Responsive HTML YouTube Video Embed #34 is the latest revision

    Embedding YouTube videos can be a hassle when the iframe has set dimensions. The code here makes the embedded iframe responsive on all screen sizes, and maintains the aspect ratio.

    <!-- Do not copy any of the content that is grayed out, as these are just comments -->
    <p style="border: 1px solid #d7d7d7; position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none" src="https://www.youtube.com/embed/xcdzCwuFmCs?showinfo=0" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></p>
    
    <!-- To get the iframe to be responsive, you must make sure that you have both the inline style for the parent paragraph element, and for the iframe element. After you have that, simply change the src for the iframe to whatever youtube video you prefer. -->
    <!-- ALSO - this code can make any content that is housed in an iframe responsive; forms, Vimeo videos, etc. It is not just limited to YouTube. Just make sure that the iframe always has the inline styles. -->
    
    <!-- Make sure that any additional paragraph elements don't have the inline styles, from above as they don't need them! -->
    <p>In this video we will discuss how to access Canvas, what you should expect to see when you log in ...</p></!--></!--></!--></!-->