BC Digital Classroom Widget

Image
technology image

Create a widget to display BC Digital Classroom Core Collection Access links

These instructions are a basic guide to creating an "iframe" to embed the BC Digital Classroom resource links directly into you own pages. 

NB You, or your IT/ web support, must have the ability to access and edit the code (HTML and possibly CSS) that renders the pages for the school or district web site.
 

There are 2 basic options to create the widget.
 

Option 1: HTML Code Only

  • This uses HTML code only and is not considered to be a ‘responsive’ design which means there is more likely to be page display problems on mobile or small display devices. However, it is a simple solution to implement and apply
  • Add the following HTML iframe directive to the page. Alter the values for height, width and scrolling as desired

<iframe src = "https://focusedresources.ca/iframe/resources/" width = "100%" height = "500px" frameborder="0" scrolling="yes" >
</iframe>

Option 2: HTML and CSS Code

  • This uses both HTML and CSS code which creates a widget that is fully responsive and renders better pages on all devices including mobile and small display devices. Note that the underlying content may not be responsive which may result in page rendering issues
  • Add the following HTML iframe directive and CSS code to the page. To specifically position and size the iframe container will require further understanding of CSS and the design elements, and the CSS of your page or site. Refer to the W3schools at the bottom of this page or to your IT/web support person(s).

HTML code:

<div class="iframe-container">
<iframe src= "https://focusedresources.ca/iframe/resources/" allowfullscreen></iframe>
</div>

CSS Code:

.iframe-container {
 overflow: hidden;
 padding-top: 56.25%;
 position: relative;
}
.iframe-container iframe {
 border: 0;
 height: 100%;
 left: 0;
 position: absolute;
 top: 0;
 width: 100%;
}
/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
 padding-top: 75%;
}

Notes:

If your website is not using HTTPS, an error message may occur or the iframe content may not load. It is strongly recommended that all school or district websites default to the use of HTTPS.

Further reference links/guides from W3schools