Flexknowlogy - Jared Stein » css

Condensing the “News” Feature of My Moodle Using a Show/Hide Javascript

Jared Stein — Wed, 19 May 2010 21:19:34 +0000

The My Moodle feature in Moodle 1.9x displays a list of registered courses to a user after logging in. The nice thing about the list is that each course link is followed by a listing of any recent news or events in the course. Unfortunately in highly active courses this list becomes quite lengthy, and ultimately obnoxious as the length obstructs quick access to other courses in one’s view.

To remedy this I have, for quite some time, maintained a custom bit of very basic Javascript and CSS that sets the default view of news items to hidden, with a clickable link to show the entire list from the My Moodle page:

Clicking “There is news in this course” expands the news.

The default for news for each course is “hidden”.

Nothing fancy, and even as I look at it now I can think of improvements…

We just upgraded to 1.9.8 this semester, and because this snippet modifies Moodle core I had my developer Kevin re-test the snippet before I asked our server admin Paul to replace the existing function as follows:

file Location:            '/course/lib.php'
file line:                    "800"
function to replace: "function print_overview($courses)"

Here’s the actual replacement function:

// Begin My Moodle Show-Hide News modification
// Replaces function in “course/lib.php” to hide course news by default.

// Hidden news is viewable via Javascript by clicking “There is news in this course” link.

// Link does not exist if there is no news in the course.

function print_overview($courses) {
   global $CFG, $USER;
   $htmlarray = array();
   if ($modules = get_records(‘modules’)) {
      foreach ($modules as $mod) {
         if (file_exists(dirname(dirname(__FILE__)).’/mod/’.$mod->name.’/lib.php’)) {
            include_once(dirname(dirname(__FILE__)).’/mod/’.$mod->name.’/lib.php’);
            $fname = $mod->name.’_print_overview’;
            if (function_exists($fname)) {
               $fname($courses,$htmlarray);
            }
         }
      }
   }
   foreach ($courses as $course) {
      print “
”;
      $linkcss = ”;
      if (empty($course->visible)) {
         $linkcss = ‘class=”dimmed”‘;
      }
      print’
fullname).’” ‘.$linkcss.’ href=”‘.$CFG->wwwroot.’/course/view.php?id=’.$course->id.’”>’. format_string($course->fullname).’’;
      if (array_key_exists($course->id,$htmlarray)) {
			print ‘id.’” onclick=”document.getElementById(\’coursenews_’.$course->id.’\').style.display=(document.getElementById(\’coursenews_’.$course->id.’\').style.display==\’block\’?\’none\’:\’block\’); document.getElementById(\’toggler_’.$course->id.’\').innerHTML=(document.getElementById(\’toggler_’.$course->id.’\').innerHTML == \’There is news in this course…\’?\’Hide course news…\’:\’There is news in this course…\’);”>There is news in this course…
id.’” style=”display: none”>’;
         foreach ($htmlarray[$course->id] as $modname => $html) {
            echo $html;
         }
			print “
”;
      }
      print “
”;
   }
}

//End My Moodle Show-Hide News modification

The Joy of CSS max-width

Jared Stein — Wed, 07 Apr 2010 15:38:37 +0000

The CSS max-width property has long been a favorite of mine, most often used to restrict the flow of content depending on the user’s browser, such as we see in elastic layouts. Since I began making WordPress themes a couple years ago I’ve used max-width as a staple rule for media in my stylesheet, starting with images that might appear in a post (e.g. .post):

.post img { max-width: 100%; }

This prevents the sort of thing we often see when an image is slapped into a blog post without being resized especially for that design. Here’s an example this just popped up in my Google Reader:

In addition to preventing IMGs from breaking out of the box (or, worse, growing the box) this can be applied to other elements as well. In the case of my themes’ CSS I also include OBJECT (and, just to be safe, EMBED):

.post img, .post object, .post embed { max-width: 100%; }

With the entrance of HTML 5 one can imagine adding/replacing AUDIO and VIDEO in this list of selectors.

I’m thinking about this today because on Twitter Jeffrey Zeldman RT’ed Stephanie Hobson quoting Ethan Marcotte:

This is a fine solution, and reminded me that just last week I was talking with colleague Ken Woodward applying max-width in a more generic fashion–more generic, even, than to all IMGs:

div * { max-width: 100%; }

This is very broad, of course, and could cause problems in a number of particular designs, however I’m thinking the principle is still valid, particularly as it applies to inline elements, for the W3 reminds us:

If an inline box cannot be split (e.g., if the inline box contains a single character, or language specific word breaking rules disallow a break within the inline box, or if the inline box is affected by a white-space value of nowrap or pre), then the inline box overflows the line box.

Why wouldn’t I just write the rule without the DIV ancestor? Most elements that I need to control naturally fall within a DIV, and this limitation helps me feel safer, though I haven’t done enough testing to see how when/where it might fail. I am certain there is probably not enough specificity to override width problems that may be caused by miscalculated pixel widths of directly targeted descendant elements (i.e. DIVs), but those should probably have been done in percentages anyway. If specificity is a problem, adding a relevant parent CLASS or ID to the selector could probably solve it.

Blackboard Vista Triggers Quirks Mode

Jared Stein — Thu, 02 Apr 2009 16:25:20 +0000

Ever been annoyed by Blackboard Vista’s (or Campus Edition 6+’s) rendering of your XHTML + CSS web pages? Yeah, me too–especially on Internet Explorer. This happens because Bb Vista triggers a browser’s quirks mode in spite of DOCTYPEs and validated markup.

More than just troublesome for pretty CSS-based pages, quirks mode, triggered on standards-compliant pages, can negatively affect the usability and functionality of the learning experience. For example, we use an inline quizzing Javascript that renders questions and answer choices and feedback based on standards mode CSS. In quirks mode this self-assessment tool is useless.

Blackboard Was Made For Quirks

Basically quirks mode means the browser thinks your web skills are not up to snuff, and the browser therefore renders your CSS in a non-standard fashion. Quirks mode is triggered when a DOCTYPE, e.g.:

…is missing, or invalid, or unknown, or not where it should be (i.e. the first line of the document).

javascript:alert(document.compatMode) pasted into the Internet Explorer address bar kindly informs us that this browser is rendering this page in quirks mode. Firefox will tell you if you go to Tools > Page Info. Advanced Box Model Test

But even if you’ve been careful to put a valid DOCTYPE into your web pages, once it’s loaded up into Bb Vista and linked to, either from a Folder or a Learning Module, the browser will go into quirks mode. Why does this happen? Simple: Bb Vista inserts XHTML and JavaScript at the beginning of all web pages onload. 140+ lines of it, to be exact. It’s an odious thing to do, but, what do you expect? It’s Blackboard.

It may (or may not) be important to note that this does not happen when viewing a page in the File Manager–only when a page is loaded from a link within the course.

What You Can Do

Not much. And yet this could be a big issue for Internet Explorer users (FireFox renders page in quirks mode [not "Almost Standards Mode" as I'd hoped], yet most standards-compliant XHTML and CSS still render well).

And though most users are still on IE 6 or 7 I had some hope for a way out with Internet Explorer 8. You see, Microsoft promised that “a page explicitly opts into standards mode” when it includes “a metatag in the page that specifies IE=8 or IE=EmulateIE8″. For example:

In practice, however, this META tag alone does not force IE8 into standards mode in Bb Vista–the misplaced XHTML is apparently too much for IE8 to ignore.

So the most practical solutions I can think of are:

Write custom CSS for Blackboard that renders (or re-renders) the page according to the quirks mode box model. This could be done using Internet Explorer conditional comments, for example:
I haven’t yet considered what CSS rules would need to be written to accommodate this, but if it was possible this seem like the most robust and efficient solution.
Rewrite the page with Javascript. After Bb has loaded (or begun to load) the page, Javascript triggers a full rewrite of the page, either wiping out or rewriting the Bb XHTML and Javascript in a more appropriate location (e.g. in a targeted, ID’ed element). I’ve asked one of my developers to try this out today, but already fear the additional load time it might put on the Bb-hosted page.

Any other ideas?

If this were only about appearance I wouldn’t be raising a fuss, but this can and does affect the usability of certain e-learning tools, and forces developers to ask, “How will this work in Blackboard?” yet again.

Re. “CSS Angles” and the Future of Em-Based Scaling

Jared Stein — Wed, 03 Dec 2008 18:43:37 +0000

Sitepoint offered up an article by Tim Wright (CSSKarma), CSS Angles: Just the Edge Your Web Page Needs!, which shows that increasing the size of a single border property results in an angular object that can be placed behind things. After some experimentation I found a new solution and a new conundrum.

Tim’s applied this to “shelf shadows”, where a nav item appears to be propped up on a shelf with a shadow below:

I looked at the CSS and thought, “This is cute, but could be more elegant with just two 1kb images.” So I wrote it, and it turned out fine. In fact, it turned out better, in my opinion, because the shadow edges were anti-aliased. I showed my developer Tyrel Kelsey the results, then bragged, “I can even make both the shadows and the shelf size scale with the text.” Then whipped up that solution as well.

In short, my first solution used two images: a x-repeating 1×20 “shelf” hooked to the UL, and a 10×20 “shadow” hooked to each LI in place of Tim’s border corner.

My second solution used a 1px square for the top “shelf”, and a 1px border–both hooked to the UL. The top shelf was set 1em from the top to allow for scaling.

The “shadow” was a much larger image, 100×200, and set .1em to the left and 1em from the top of each LI, thus masking it’s gargantuaness (similar to sliding doors).

It was a slick application for the same effect, but then Tyrel popped my balooon.

“Are you on FireFox 3?” Tyrel asked. “Because mine already scales on FF3, and it doesn’t look all jagged like yours.”

Page zoom. I still am on FF2, and I remembered earlier in the week how I embarrassed myself in the web design course I teach when the page zoom disturbed an effect I was demonstrating. In fact, a lot of the em-based scaling approaches so popular just a year ago are sliding towards obsolescence thanks to page zoom on IE 7+ and now on FF3 as well..

Not only are they made obsolete, current CSS-based designs that are enhanced by the elasticity (e.g. layouts with reading-width columns or other applications of em-based scaling (e.g. sliding doors) may look worse with page zoom. My second example sure did when scaled in IE7. And if you open my design 2 on FF3 and compare the page zoomed rendering to the rendering with Zoom Text Only turned on, you’ll agree that the clarity is compromised in the former.

So while I’m proud of my two CSS variations on Tim Wright’s shelf-and-shadow concept, and they are great solutions for older browsers (I can’t believe I’m referring to FF2 as “older”!), it’s also clear to me that em-based scaling and elasticity is on it’s way out, and browser-based page zoom will solve a lot of designer’s accessibility-influenced design challenges–but not, perhaps, without affecting our “tricks” of the past.