hide/show of sideblock content for 1.5

hide/show of sideblock content for 1.5

by Urs Hunkler -
Number of replies: 11
Picture of Core developers

Hi,

I've added the switch to hide/show the content area of the sideblocks to Moodle 1.5 Dev. Please test this functionality - does it work on all systems? Do you notice any speed changes?

With Moodle 1.5 supporting multiple instances of the sideblocks identifying of those instances must be added. In the moment it's like in a spooky hause. When you try to close this window, the other is shut. Does anybody have an idea how the unique identification can be managed?


Average of ratings: -
In reply to Urs Hunkler

Re: hide/show of sideblock content for 1.5

by Gustav W Delius -

Perfect! This is clean and useful. And, just as importantly, it gives Moodle a modern feel. Now if you could just do the same for the section blocks in the courses please approve.

And by the way: it works fine in Firefox, IE6 and Opera7 under Windows XP. In Firefox the bottom round corners disappear when the box is collapsed, but that doesn't bother me too much.

One slight problem is that blocks that are not supposed to have a title bar acquire one due to the little icon. Is there something you could do about that, like put the icon into the content instead of the header?

In reply to Gustav W Delius

Re: hide/show of sideblock content for 1.5

by Ray Lawrence -
Works fine over here. IE6 and Firefox, XP.
In reply to Gustav W Delius

Re: hide/show of sideblock content for 1.5

by Urs Hunkler -
Picture of Core developers

Good idea to handle the section blocks the same way. I've thought about making the admin pages clearer by showing the helptext only on demand.

Gustav, which blocks are supposed to show without a header? Could there be a reason connected to their task to not hide them?

Your proposal could be realized by introducing a new zone at top of the block content to hold for example a line. A click onto this line would hide the content up to that line. But for the moment I think using the top aerea of the blocks as a handle is more straightforward.

In reply to Urs Hunkler

Re: hide/show of sideblock content for 1.5

by Gustav W Delius -

The two blocks that I know make use of the possibility of having no title are course_summary and html.

One easy way to avoid the problem would be to just not use your new feature on blocks that don't show a title.

In reply to Urs Hunkler

Re: hide/show of sideblock content for 1.5

by John Papaioannou -
You 'll probably need to change the whole switching logic. For example, change the a href="javascript:..." to onclick="..." (I was wondering, why was it done this way?), and then detect which element the click happened on and set its display properties accordingly.

This is tougher than it sounds, because IE in its wisdom doesn't support JS event capturing (only bubbling), and also doesn't follow the language specs: it doesn't give you an object for the element which handles the event.

Nevertheless, it is possible to get to that element by starting at the bottommost element in the DOM hierarchy (that's what IE gives you) and walking upwards the hierarchy until you find something you know is there (i.e., something with class="sideblock").

I do have working code I compiled some time ago using techniques from around the net, which I 've used to do exactly this in a cross-browser way. I 'll pass it over tomorrow so you can get the idea without spending too much time searching. smile

Cheers!
In reply to John Papaioannou

Re: hide/show of sideblock content for 1.5

by Urs Hunkler -
Picture of Core developers

Hi Jon,

onclick="..." (I was wondering, why was it done this way?)

I'm not a programer, you know wink. I found several actual and good websites (design websites) doing the show/hide of informationchunks on webpages this way, so there was no reason to do it different. What would be the advantage of using "onclick" instead of "a href"?

and then detect which element the click happened on and set its display properties accordingly.

If I understand you right, you propose something different. As shown in the figure below there are two DIVs, the header and the content. Within the header the user can activate the "switch". The fast and secure way is to activate a JavaScript with the content's ID as a parameter to hide/show this object. As I understand your proposal you want to hide the triggered object itself - I don't see a chance to show the hidden block, when the header is gone too wink

Using the whole header as the clickzone does not work, because the header would catch all events and would disable the edit buttons of the blocks in edit mode.

In reply to Urs Hunkler

Re: hide/show of sideblock content for 1.5

by John Papaioannou -
OK, here's a bit more detail on what I was thinking:

1. First of all, Firefox tells me that each sideblock is in fact two elements, one with class "sideblockheading" and one with class "sideblockmain". Now if nothing else, these two should be contained in a div class="sideblock" (the reason will be apparent in a minute).

2. Using the whole header as a clickzone can definitely be done despite the presence of other icons, if the click handling function is implemented correctly. I 'll send you the code I mentioned and discuss this further afterwards.

3. The whole point of what I 'm trying to say is that IMHO, the best way to hide/show the blocks is to detect a click (either by click handler, or from within the javascript in a href), and then travel upwards the DOM hierarchy until we find the "sideblock" div (that's why it's needed). Then, add or remove from its "class" property the keyword "hidden". The rest is simple CSS:

.hidden .sideblockheading {
color: #999 !important; /* gray */
}
.hidden .sideblockmain {
display: none !important;
}

Or you can even get a bit fancier than that and instead of putting an small box in class hide-show, do this:
  1. Put a transparent gif of appropriate size in the img. This will serve to just "take up space" and be a click target. Usability is not compromised for text-based clients, because we can have an alt tag.
  2. To show a graphic to most web browsers, use a spin-off of the technique you are using for menu icons in the standardorange theme:

    .sideblock .hide-show img {
    height: 16px;
    width: 16px;
    background-image: /* a "hide" icon */
    }
    .hidden .hide-show img {
    background-image: /* a "show" icon */ !important;
    }

This way the theme designers have full control over the display characteristics of the hide/show function. What do you think?
In reply to John Papaioannou

Re: hide/show of sideblock content for 1.5

by Urs Hunkler -
Picture of Core developers

Jon,

thank you very much for your great changes you proposed and you made. It's so much more elegant and flexible than the first version.

PS: On test.moodle.com I saw the two instances of the RSS block close and open as expected. But after a page reload they are both displayed in the same state even if the user had them displayed differently (the state of the last switched block).

In reply to Urs Hunkler

Re: hide/show of sideblock content for 1.5

by Martin Dougiamas -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
Yes, this open/close really needed to be on a block-by-block basis using the block instance id.

The effect is no doubt cool and impressive to look at!  As to the usefulness of this feature in general, I'm uncertain.  It doesn't really save screen space, and doesn't speed up the page ... it does however give students another excuse for not seeing something.

I'm currently debating whether to show it in the standard theme at all (other themes may).
In reply to Urs Hunkler

choice of icons for hide/show of sideblock content

by Gustav W Delius -
Hi Urs,

on the current version the + icon changes to a downarrow when the block is collapsed. I liked your original version better. If you do want to use different icons in the collapsed and uncollapsed blocks then it should be a - icon in the uncollapsed ones and a + icon in the collapsed ones. The + icon usually indicates that clicking it produces extra content.
In reply to Gustav W Delius

Re: choice of icons for hide/show of sideblock content

by Urs Hunkler -
Picture of Core developers
Hi Gustav,

I was just working on the "-" icon when I read your posting. It's in the CVS.