Posts Tagged ‘css’

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

May 19, 2010 at 2:19 pm, Jared Stein

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:

hidden news in My Moodle

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

hidden news in My Moodle

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 “<ul style=\”margin: 0; padding: 0; list-style: none; width: 96%; \”>”;

      $linkcss = ”;

      if (empty($course->visible)) {

         $linkcss = ‘class=”dimmed”‘;

      }

      print’<li class=”coursebox” style=”padding: .5em 1em 1em”><h3 style=”font-size: 120%; font-weight: normal; margin: 0 0 .2em 0″><a title=”‘. format_string($course->fullname).’” ‘.$linkcss.’ href=”‘.$CFG->wwwroot.’/course/view.php?id=’.$course->id.’”>’. format_string($course->fullname).’</a></h3>’;

      if (array_key_exists($course->id,$htmlarray)) {

print ‘<a href=”#” id=”toggler_’.$course->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…</a><div id=”coursenews_’.$course->id.’” style=”display: none”>’;

         foreach ($htmlarray[$course->id] as $modname => $html) {

            echo $html;

         }

print “</div><!–end contents–></li>”;

      }

      print “</ul>”;

   }

}
//End My Moodle Show-Hide News modification

The Joy of CSS max-width

Apr 7, 2010 at 8:38 am, Jared Stein

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) (more…)

Blackboard Vista Triggers Quirks Mode

Apr 2, 2009 at 9:25 am, Jared Stein

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…)

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

Dec 3, 2008 at 11:43 am, Jared Stein

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 (more…)