Skip to content

Embed Box into Sakai with a CSS trick

March 28, 2013

I use a shared folder in Box to distribute files to my multimedia course. While preparing in my office I can drop files into a desktop folder that syncs with the cloud. When I create demo files during class I can drag them into a browser window that uploads directly to Box — students can download the items immediately.


My course website in Sakai presents a portal to the Box folder using a “web content tool.” This was easy to create, since Box assigns a distinct address to each file and folder. When you view the folder in a browser, Box displays branding at the top and a list of options on the side. To reduce confusion in Sakai I eliminate that “overhead” by embedding a view of the Box folder into a web page. Check below the images to see how it works.

Box storage folder display with overhead

Before

a Box folder embedded in Sakai

After

Get the embed code

  1. From your browser, log into Box and view the shared folder
  2. At the right side of the screen, click the work “Link”
  3. Click the “Embed” tab
  4. Copy the embed code

Getting the Box embed code

Editing HTML in SakaiMake the HTML document

  • In Sakai, open the Resources tool
  • From the “Add” dropdown menu, choose “Create HTML page”
  • Click “Source” at the top of the toolbar
  • Paste the code you copied above and click “Continue”
  • Enter a name like “Shared Box Folder” and click “Finish”

Add the Web Content tool

  • Still in “Resources,” click the “Actions” dropdown next to your new file
  • Select “Edit details”
  • Copy the Web Address (URL) and click “Cancel”
  • Open the Site Editor tool and choose “Edit Tools”
  • Check “Web Content” and click “Continue”
  • Enter a Title like “Shared Box Folder”
  • Paste the URL into the “Source” box and click “Continue”
  • Click “Finish”

Now you have a link to Box on your Sakai course menu. The only problem is that there can be a delay while Box loads the page. At first I dealt with this by inserting a message above the embed code: “Please be patient while the page loads.” However, the message remains, even after the page has loaded. Eventually I discovered a CSS trick that positions the Box display on top of the warning text.

  • Edit your HTML document in the Sakai resources tool
    (click the “Actions” dropdown and select “Edit content”)
  • Copy the first three lines of code shown below
  • Paste them above your embed code
  • Enter a </div> tag below the embed code and save the file
<div style="position:absolute;left:0px;top:0px;">
<p>Please be patient while the page loads.</p></div>
<div style="position:absolute;left:0px;top:0px;">
/* Your embed code goes here */
</div>

You can use the same techniques when embedding other content, such as a YouTube video or a SoundCloud player.

No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 640 other followers

%d bloggers like this: