Last week here on my blog I integrated some styles and behaviours inspired by idea mapping software. Currently I have to type these class names into my posts and set up the behaviours in special JavaScript files, but my goal is to put them into a plugin that makes it easy for anyone to add to their blog.

In the coming week I’m planning on getting the area under the sculptor’s tent presentable. One big part of that will be all the code. In the meantime I wanted to demonstrate using the classes without the rollover popups.

---

---

Also this week I added a way to toggle the right side panel out of the way. This is far from being complete concise code, but in fact I do it this way on purpose… you can challenge young people to do it in fewer lines or entirely differently and be confident there’s plenty of room for their success!

In the next few days I’ll enhance this explanation with a rollover “footnote” elaborating on exactly how to use Firefox to get the ids, margins and widths I manipulated to do this. Do you see where I’m going with all this? If so, please comment!

/* panel slider */
/* Create the button to show-hide the panel. We identify #page using Firebug
* We create it with a class we already set up in my.css to have the look or image we want
* to "slide the panel in." We swap it back and forth.
*/
$j('#page').prepend('<div id="rpanelslider" class="slidepanel_in rad9"></div>');

/* Make it behave like an active element */
$j('#rpanelslider').css('cursor', 'pointer');

/* jQuery's the "live" function applies whatever function we assign regardless
* how many times we swap classes.
* All the ids, margins and widths were discovered using Firebug's console and element inspector.
*/
$j('#rpanelslider.slidepanel_in').live('click', function(e) {
e.preventDefault(); // this way the click does only what *we* tell it to do.
$j('#rpanelslider').removeClass('slidepanel_in').addClass('slidepanel_out');
$j('#tertiary').hide('slow');
$j('#content, .left-sidebar #content').css('max-width',false); // removes those properties
$j('#primary').css({
width : '882px',
margin : '0 -252px 0 0'
});
});
/* So we just do the opposite for the "slidepanel_out" class...
* change "hide" to "show," add and remove classes.
* Explore "toggle" for better ways */
$j('#rpanelslider.slidepanel_out').live('click', function(e) {
e.preventDefault();
$j('#rpanelslider').removeClass('slidepanel_out').addClass('slidepanel_in');
$j('#tertiary').show('slow');
$j('#content, .left-sidebar #content').css('max-width','730px');
$j('#primary').css({ // Just putting things back the way we found them.
width : '554px',
margin : '0 0 0 0'
});
});