Masonry Topics Course Format for Moodle 2.1

Masonry Topics Course Format for Moodle 2.1

by Gareth J Barnard -
Number of replies: 5
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi,

I came accross the jQuery plugin 'Masonry' (http://masonry.desandro.com) and decided that it could help with the scroll of death issue and also be a little different.  It trys to fit each of the sections together as tighly as possible.  When the window resizes it alters the positions of the sections making a different layout depending on the target screen size.

I've attached the code for Moodle 2.1 (but should work with Moodle 2.0).  It is completely experimental and comes with no warrenty.  To install, extract the 'topmas' folder and its contents and copy the 'topmas' folder into your '/course/format' folder.  It should then appear in the list of available course formats.

The configuration of the jQuery for the plugin is in the 'js/masonry.js' file and some css in the 'topmas.css' file which are pulled in by the 'format.php' file.

If I get a good response, I'll make a Moodle 1.9 version and put it on GitHub with an entry in the plugin's database. 

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Masonry Topics Course Format for Moodle 2.1

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

As a picture says a thousand words, please see the screen shot:

Attachment MT.png
Average of ratings: -
In reply to Gareth J Barnard

Re: Masonry Topics Course Format for Moodle 2.1

by Colin Fraser -
Picture of Documentation writers Picture of Testers

hi Gareth, you may want to tune into this conversation on YUI and JQuery, it may shed some light onto what you are trying to do...

Average of ratings: -
In reply to Colin Fraser

Re: Masonry Topics Course Format for Moodle 2.1

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Colin,

Thank you - that is an interesting thread.  I did have a chat with Martin D virtually at iMoot 2010 about jQuery and it was a question of not being in Moodle core but could be used by others if they wanted to.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Masonry Topics Course Format for Moodle 2.1

by Mike Smith -

That's brilliant! Well done. 

I'm curious why this needs to be format-specific.  Is the jQuery library  loaded such that these useful tools can be employed in other parts of the page/DOM?  I'm thinking of having a video static next to a Moodle quiz scrollable and the only way I can do it at present is with iFrames (yuck).

I am using Moodle 1.9 till we get a working nanogong or other similar audio recorder plugin for M2.x.  I also far prefer the M1.9 file structure (but that's just me).

You mentioned possibly doing a Moodle 1.9 version of your jQqery Topics course format.  I basically only use the topics format, so that would be extremely useful to me.

Cheers,

Mike Smith,

Brisbane, Australia

Average of ratings: -
In reply to Mike Smith

Re: Masonry Topics Course Format for Moodle 2.1

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Mike,

Thank you smile.  As soon as I get time I'll see if I can back port it to Moodle 1.9.  I've made it format specific because of the way that the jQuery needs to operate on css attributes.  However, there should be no reason why it should operate elsewhere.

With jQuery it should only be incorporated once, so perhaps in the theme header.  I thing there is movement along the lines as described on 'Developer meeting November 2011'.  There was a massive argument on 'Dear moodle, can we stop having the YUI lib yet?' as reported by Colin above.

Thanks,

Gareth

Average of ratings: -