Homemade Collapsed Weeks/Topics Format

Homemade Collapsed Weeks/Topics Format

by Itamar Tzadok -
Number of replies: 14
There is a discussion thread on a certain contrib (or to be contrib) for Collapsed Weeks Format down this forum. If you're not the master of your Moodle domain hacks or non-standard themes may be out of your reach. But you may still achieve a similar effect, albeit slightly limited, by adding a few lines of simple css in a label on your course main page (provided of course that the master of your Moodle domain "trust your content").

<style type="text/css">#middle-column h2.outline{display:none;}#middle-column td.content ul{display:none;}#middle-column td.content:hover ul{display:block;}#section-0 td.content ul{display:block;}body.editing td.content ul{display:block;}</style>

=== Hides the 'Topic/Weekly outline' label. (Personal preference)
=== Hides content (activity/resource items) of all the topic/week sections.
=== Shows dynamically content of a particular topic/week section upon hovering.
=== Shows statically content of section 0. (Overrides the hide/show)
===
 Shows statically content of of all sections in editing mode (Overrides the hide/show)

Of course this may work only on browsers which support whatever:hover but most recent versions of the main browsers should be there.

Also, this styling assumes a standard theme or a very close relative.

Applying:
  • Copy the style code above.
  • Create a label in section 0 (top section) on your course page.
  • Toggle HTML source (toggle).
  • Paste code.
  • Save.
  • With a bit of luck it will work.
Removing:
  • Delete the label.
smile
Average of ratings: -
In reply to Itamar Tzadok

Styles should be ... (Re: Homemade Collapsed Weeks/Topics Format)

by Itamar Tzadok -
<style type="text/css">#middle-column h2.outline{display:none;}#middle-column td.content ul{display:none;}#middle-column td.content:hover ul{display:block;}#section-0 td.content ul{display:block;}body.editing #middle-column td.content ul{display:block;}</style>

smile
Average of ratings: -
In reply to Itamar Tzadok

Re: Styles should be ... (Re: Homemade Collapsed Weeks/Topics Format)

by Paula Clough -

Itamar,

I tried the first code you posted in my sandbox course and it worked great... what are the differences between that first one and the one you just posted?

Thanks,

Paula

Average of ratings: -
In reply to Paula Clough

Re: Styles should be ... (Re: Homemade Collapsed Weeks/Topics Format)

by Itamar Tzadok -
The #middle-column was missing in this part

body.editing #middle-column td.content ul{display:block;}

which is responsible for making all content statically visible in editing mode. smile
Average of ratings: -
In reply to Paula Clough

Re: A variation ... (Re: Homemade Collapsed Weeks/Topics Format)

by Itamar Tzadok -
The following variation keeps the content of a section visible when the section is in single view mode (by clicking single). This may be achieved by using the first topic/week section (#1) for the css code. Here is the code:

<style type="text/css">#section-1{display:none;}#middle-column td.content ul{display:none;}#middle-column td.content:hover ul{display:block;}#section-0 td.content ul{display:block;}.editing #middle-column td.content ul{display:block;}.editing #section-1{display:table-row;}</style>

Same as before, copy the code, create a label in topic/week 1, toggle HTML source, paste and save.

Topic/week 1 will be hidden when not in editing mode (red) and visible in editing mode (blue). The other topics on the page will appear collapsed when not in editing mode and open upon hovering. Then clicking on a topic's single will open that topic in single view and the content of the topic will be statically visible.

In weekly outline the start date of the course should be set one week earlier so that the first section may be used for that css code.

smile
Average of ratings: -
In reply to Itamar Tzadok

Re: A variation ... (Re: Homemade Collapsed Weeks/Topics Format)

by Paula Clough -

Thanks again.  This is even better.

I am also enjoying watching the process.  Been a long time since I did any programing of any kind.

cool

Average of ratings: -
In reply to Itamar Tzadok

Re: A variation ... (Re: Homemade Collapsed Weeks/Topics Format)

by Hartmut Scherer -
Hi Itamar,

Thank you for sharing your homemade style. I like it a lot as it only affects one course and not the entire site.

For those of us who don't like the numbering in front of the topic (starting with #2 as #1 is hidden in non-editing mode), Glen Gross' suggestion may help you (see http://moodle.org/mod/forum/discuss.php?d=54661). If your background color is white, add the following lines:

#course-view .section .left {
color:#FFFFFF;
}

so that the complete code looks like:

<style type="text/css">#section-1{display:none;}#middle-column td.content ul{display:none;}#middle-column td.content:hover ul{display:block;}#section-0 td.content ul{display:block;}.editing #middle-column td.content ul{display:block;}.editing #section-1{display:table-row;}

#course-view .section .left {
color:#FFFFFF;
}
</style>

With kind regards,

Hartmut
Average of ratings: -
In reply to Hartmut Scherer

Re: A variation ... (Re: Homemade Collapsed Weeks/Topics Format)

by Hartmut Scherer -
Update to my last post:

The topic number is only hidden when all topics are visible. In single topic view, the topic numbers are all visible. Although I used Firebug, I couldn't find a solution.

I appreciate any help or advice where to look for the right code.

With kind regards,

Hartmut
Average of ratings: -
In reply to Hartmut Scherer

Re: A variation ... (Re: Homemade Collapsed Weeks/Topics Format)

by Itamar Tzadok -
Try putting the bit of css for hiding the topic numbers in topic 0 (rather than topic 1). This way it will be on the page also in single topic view. Also you may want to consider changing that css to font-size:0 rather than color so that it won't be theme dependent. smile
Average of ratings: Useful (1)
In reply to Itamar Tzadok

Re: A variation ... (Re: Homemade Collapsed Weeks/Topics Format)

by Hartmut Scherer -
Hi Itamar,

I wish I could have given you more than just a "useful" rating. Thanks a lot for your post. Using your advice, the topic numbers are now invisible in editing and non-editing mode. I really appreciate your help.

With kind regards,

Hartmut
Average of ratings: -
In reply to Itamar Tzadok

Re: scrolling issue - Homemade Collapsed Weeks/Topics Format

by Eric Maikranz -

Itamar,

Your solution is great.  Very clean and I love the elegance of design here (it's always harder to write less code than more code).

I do have a problem that I hope you can help with or offer a workaround:  I currently have about 25-35 lessons per topic which means that when a student mouses over the topic that some of the lessons are not in the available screen real estate.  Most users default is to go to the scroll bar, which removes the highlight on that topic and the expansion.  Is there any way to make the mouseover highlight stickly (more like a toggle I guess) so that users could still use the scroll bar?

Current workarounds of course are to use page up/page down buttons or to highlight the desired topic, but our students are not finding these workarounds intuitively. 

Thanks in advance,

Eric

Average of ratings: -
In reply to Eric Maikranz

Re: scrolling issue - Homemade Collapsed Weeks/Topics Format

by Itamar Tzadok -
It may be worthwhile to get the students to change their default. All they need do is scroll down from where the cursor is rather than go to the scroll bar. However, if that's not an option, you can try a solution which combines javascript and css. The css and javascript can go together but since the javascript must be in the right column you need to put the code in an html block. This block will look empty to the naked eye (and it too can be hidden if it bothers the naked eye as it is). If you open the block for editing the javascript will be mucked up by the editor so keep a copy somewhere else just in case. If you copy/paste the code below, remove X from Xondblclick and Xonclick.


This code should work in the following way. Sections are collapsed by default and unfold upon hovering. (The sections are collapsed by the javascript so on slow connections they will first open wide and only when the page finishes loading they will collapse) If you want to make the section you are currently hovering sticky, double click it; if you want to unstick it, one click it. Seems to work on Firefox latest and IE 8. See if it works for you. Let me know. smile




<style type="text/css">body.editing #middle-column td.content .section{display:block;}.showsec .section{display:block;}.hidesec .section{display:none;}.hidesec:hover .section{display:block;}</style>

<script type="text/javascript"> var sections=document.getElementById('middle-column').getElementsByTagName('table')[0].firstChild.rows; for(var i=0;i<sections.length;i++){ if(sections[i].id.search('section')!=-1&&sections[i].id!='section-0'){ sections[i].cells[1].className='content hidesec'; sections[i].cells[1].Xondblclick=function(){this.className='content showsec';}; sections[i].cells[1].Xonclick=function(){this.className='content hidesec';}; } } </script>
Average of ratings: -
In reply to Itamar Tzadok

Re: scrolling issue - Homemade Collapsed Weeks/Topics Format

by Eric Maikranz -

Wow, another great solution.  Double click to lock open and single click to collapse. 

Thanks Itamar.

Average of ratings: -
In reply to Itamar Tzadok

Re: scrolling issue - Homemade Collapsed Weeks/Topics Format

by William Lu -
Picture of Particularly helpful Moodlers

Sorry, Itamar, the code looks fantastic, but, dosen't work on my Moodle2.0/Standard theme.

Any advise please. Thanks.

Average of ratings: -
In reply to William Lu

Re: scrolling issue - Homemade Collapsed Weeks/Topics Format

by Itamar Tzadok -

Yes, Moodle 2.0 employs a completely different layout. I'll see if the approach may be adjusted and let you know. smile

Average of ratings: Useful (1)