Simple Code Hack to Avoid Media Overlap

A Smidgen of Responsive Design for Faculty

by Alan Regan

Has this ever happened to you? You've embedded media in a blog, web page, or learning management system that has a right column, and your media overlaps the site's right column?

The reason? Your media is wider than the space available. Some web pages will adjust and push the right column, others will overlap like the above image shows.

In the event that you have access to modify the HTML code with your embedded media, a simple coding hack may be able to help. With one "style" addition, you can ask the page to please not display the media (image, video, etc.) beyond the limits of its content column or container.

The Code To Add: style="max-width: 100%;"

Here is an example using YouTube iframe embed code.

BEFORE

<iframe width="560" height="315" src="//www.youtube.com/embed/zpGcjQHPpTc" frameborder="0" allowfullscreen=""></iframe>

AFTER

<iframe width="560" height="315" src="//www.youtube.com/embed/zpGcjQHPpTc" frameborder="0" allowfullscreen="" style="max-width: 100%;" ></iframe>

Give it a try! I hope this will help your media stay within the bounds of your blog post, column, or frame. Works great in Sakai! If only we could convince YouTube and other media sites to add this simple code to the embed process by default...

Resources for the Tech-Curious:

• Article: "Responsive Web Design"
• Detailed Code: "Responsive Videos"

Add a countdown timer to your site

by Alan Regan

Add a countdown timer to your class or project site

A dissertation professor wanted to express the importance of planning ahead. On the home page of her class site, she wanted an obvious countdown timer -- something big, bold, and real-time. Something that would eliminate the possibility of: "Oh, I wasn't aware it was due so soon."

There are many ways to accomplish this task. I will be using code created by Robert Hashemian from his site http://www.hashemian.com/  To help our Pepperdine faculty, I placed the source code within our Courses/Sakai service to reduce the possibility of service interruption.

Example:  Open example countdown timer.

Part One: Create your HTML page in Resources

1. Go to Resources in your class or project site.
2. Click Add and select Create HTML Page.
3. Enter the text you want your students to see on your home page.
4. Click Source at the top left of the rich text editor.
5. Place your cursor in the text where you want to insert your timer.
6. Copy the following code:
   
   

   <p>
   <font size="5">
   <script language="JavaScript">
   TargetDate = "04/20/2012 5:00 AM UTC-0800";
   BackColor = "paleturquoise";
   ForeColor = "navy";
   CountActive = true;
   CountStepper = -1;
   LeadingZero = true;
   DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
   FinishMessage = "It is finally here!";
   </script><script language="JavaScript" src="https://courses.pepperdine.edu/access/content/user/alan.regan/public/countdown.js">
   </script>
   </font>
   </p>
   

   
   
   
7. Paste the code.
8. Modify the date and time to your desired countdown "TargetDate." (NOTE: UTC-0800 sets the format to US Pacific time.)
9. Click Source again.
10. Click Continue.
11. Enter a Name for the page (e.g. Home Page).
12. Click Finish.

Part Two: Copy the link to your new HTML page

1. Click Actions next to your new HTML page.
2. Select Edit Details.
3. Scroll down.
4. Click Select URL (for copying) next to "Web address (URL)."
5. Copy the highlighted text.

Part Three: Modify your Home tool

1. Click Home in your site's left menu.
2. Click Options.
3. Scroll to the bottom.
4. Place your cursor in the box next to "Site Info URL."
5. Paste the HTML page link in the "Site Info URL" box.
6. Click Update Options.

Your revised Home tool should now display your HTML page and your countdown timer.

If you consider yourself pretty handy with HTML and want to modify the color scheme of the script, feel free. You can find color names at the following W3Schools.com site. 

IMPORTANT: You cannot enter the above code directly onto your Home page's text editor. You must use the HTML page method for the code to render properly. If you follow the above steps, it will work correctly.