Sliding Notes 1.3 – Hot New “Presidential Oath” Release

I haven’t posted anything to my blog in the last week, and I had a good reason: I’ve been preparing a brand new release of Sliding Notes.

Since I published Sliding Notes the first time, I repeatedly had the chance to witness and help with its integration into existing, real world designs. One essential insight I gained from this was that Sliding Notes are being used (or their usage envisioned) in a much wider variety of contexts, than I initially imagined: In the side bar, the content, floating with the text, or stacked, initially collapsed or expanded…[toc class=toc-right/]

As a result of that experience, and just in time for Obama’s upcoming Presidential Oath of Office, I’m releasing a brand new version of the plug-in, packed with features that greatly ease the integration into existing website styles and concepts, as well as the combination of different usage patterns on the same site.

New Features

Inline CSS Styles

By defining corresponding CSS clauses in the stylesheet, Sliding Notes can be styled nicely and consistently throughout a website. (Think: “Define once, use everywhere.”)

However, sometimes you need a specific variation in a singular fashion, a single shot that may not justify a new entry in the stylesheet. This is where the new inline CSS styles come in handy, supplied via shortcode parameters nstyle and bstyle, for note and button style, respectively.

For example, I’ve changed this slider» inplace to a red button text color, and a reddish note background. The corresponding shortcode parameters:

nstyle="background-color:navajowhite" bstyle="color:red"

Custom Note Types

Inline styles are usefull at times, but you’ll more often need several distinguished types of notes. For example, you may want to differentiate between “normal” notes (sort of footnote replacement), and “important” notes (like life stages in a CV). If you have a site related to music or lyrics, you may envision a “lyrics” type of note. For all these sliding note types, you may envision a different visual style.

This is where custom typing will save your day. A custom type is supplied by a shortcode parameter, type, and directly corresponds to an extra CSS class of that same name.1 This means you can simply define your basic CSS styles as usual (using the classes hackadelic-sliderButton and hackadelic-sliderPanel), and encapsulate type-specifc styling (that is, the actual variation) inside extra CSS clauses, like in the following example:

Let’s define a sample sliding note of type “lyrics”. We want the button text to be italic. The note text has to be italic as well, and centered inside the note. It should also have a different background color.

To accomplish that, we supply the shortcode parameter type=lyrics, and make the following additions to the stylesheet:2

a.hackadelic-sliderButton.lyrics {
  font-style: italic;
}
span.hackadelic-sliderPanel.lyrics {
  font-style: italic;
  text-align: center;
  background-color: gold;
}

Here is the outcome: Stopping by Woods on a Snowy Evening»

You may use more then one type, like so: type="popular lyrics", which will assign two custom types, “popular” and “lyrics” to that note.3

Auto-Expand

There’s a special, predefined type for auto-expanded notes.» This is particularly useful for pages of a showcase type, where you place different showcases in different notes, and want the first one to be initially expanded.

To make a note auto-expand, use the shortcode paramter type=auto-expand. You may combine it with other types, like so: type="lyrics auto-expand".

Embedding Shortcodes

For obvious reasons, it’s sometimes useful for the content of a Sliding Note to be be generated by another shortcode. Actually, the combination of CSS, Sliding Notes and embedded shortcodes is extraordinarily powerful, being capable of yielding all sorts of fancy things. (Just imagine an image or movie gallery wrapped into a sliding note, for starters.)

On the other hand, recursively processing shortcodes is time consuming and impedes on performance.

Sliding Notes 1.3 adds support for embedded shortcodes, but for performance reasons it is not turned on by default – it needs to be enabled using the shortcode parameter shortcodes=on. Not supplying it, or supplying any other value then "on" disables embedded shortcodes.

Note however that recursive shortcode processing will not enable nested Sliding Notes. This is not a limitation of the plugin, but rather a limitation of how WordPress processes shortcodes. (WP does not allow nesting the same shortcode.)

Improved Interoperability

The 1.3 version introduces a different initialization policy to improve interoperability with other javascript libraries, like Lightbox2.4

Other Changes

The basic CSS template for Sliding Notes» has changed to better cover both, newer features, and additional usage patterns and contexts. Please align your CSS clauses. (Note that the clauses ordering matters.)

Sliding Notes Showcase

I have set up a “showcase” page for sharing experiences, interesting applications, or typical (and less typical) problem and solution patterns with Sliding Notes. One day I may end up with a forum eventually, but I’m taking off in a lightweight fashion – a dedicated page with comments, for starters.

Everybody is invited and welcome to share his experience on the Sliding Notes Showcase.

Sliding Notes Wish List

If you want to see a new feature in future versions of Sliding Notes, feel free to suggest it on the Sliding Notes Wish List.

Upshot

In retrospect, this was the hardest Sliding Notes release ever. A huge amount of testing and fine-tuning went into making it the smoothest possible user experience. I particularly payed attention to the “little things”, optimizing and fine-tuning the sliding behavior, preventing flicker as much as possible, and avoiding cross-browser issues and differences.

I truly hope all that was “worth the trouble”, and that you’ll find it a delightful WordPress extension to work with.

Last but not least: If you like my plug-in, and appreciate the hard work behind it, please consider giving it some thumbs up in the public, and linking back to it. If you can afford a decent donation (there is a donation button at the bottom of the plug-in homepage), it would be very welcome as well. Thanks a lot for your support.

1. The extra CSS class is added to both, slider button, and slider note [↩]
2. These are just examples, so don’t pay attention to aesthetics – or the lack of it. 😉 [↩]
3. Of course, you’ll need extra CSS clauses for the “popular” type in analogy to “lyrics”. [↩]
4. For tech geeks: The initialization policy has changed from lazy to immediate, so that other javascript libraries can do their magic on properly initialized notes. [↩]

.hackadelic-sliderPanel {
	border: 1px solid #ccc;
	padding: 5px;
	-moz-border-radius: 1em; -webkit-border-radius: 1em;
}
.hidden { display: none }
.block { display: block }

a.hackadelic-sliderButton {
	border: 1px solid lightgrey;
	color: #B3960E;
	padding: 0 3px;
	-moz-border-radius: 1em; -webkit-border-radius: 1em;
}
a.hackadelic-sliderButton:hover {
	border: 1px solid #F0F0E0;
	background-color: #F0F0E0;
}
.entry .hackadelic-sliderPanel {
	background-color: #fcfcfc;
}
.textwidget .hackadelic-sliderButton {
	display: block;
	text-align: center;
	margin: .5em;
}
.textwidget .hackadelic-sliderPanel {
	background-color: #F0F0E0;
}

10 Comments

• 
  sk March 26, 2009 at 2:00 am

  Hey this is a great plug-in! I am re-working my website at the moment and am finding all sorts of interesting uses for sliding notes. Hopefully my new website will be done within a week so make sure you check out how I’ve implemented this plug-in if I forget to post back later.
  • 
    Hackadelic March 31, 2009 at 3:43 am

    sk, I’ve been hesitating to approve your comment, as I haven’t seen even one Sliding Note on you website. I’ve finally approved it now, but to prevent from abusing my blog for your self-PR only, I have removed your link. Once you have implemented those “all sorts of interesting uses”, feel free to submit them at the Sliding Notes Showcase.
• 
  Roger February 28, 2009 at 8:12 pm

  erm… what about setting up a wiki to explain all you can do with this because to be honnest there is alot of info a bit all over the place and not being a geek I think I am loosing a lot ! I am even lost about how to format the [slider]…
  • 
    Hackadelic March 1, 2009 at 7:34 am

    Roger, thanks for your input.

    I love wikis, but they are not more than a collection of interlinked pages – that is, it’s nothing you couldn’t do with a blog alone.

    I agree though that all Sliding Notes info was not accessible from the Sliding Notes homepage. It is now. There are basically two types of articles on Sliding Notes around here: Release announcements, and advice articles. I have organized both in series (using my Series plugin), and I’ve included here links to all of them.
• 8 Post Plugins for WordPress | Tom B.'s Rambles February 5, 2009 at 6:56 pm

  […] but they are real. In order to use this plugin, you have to install the authors other plugin, Sliding Notes. This is a nice plugin by itself, and does not take any set up if used for the Series plugin, but […]
• Hackadelic Sliding Notes January 30, 2009 at 4:48 pm

  […] The release announcement provides in-depth information about the 1.3 release. Download Plugin! Version 1.3.1 Last Updated: January 18, 2009 Author: Thomas Watson Steen Visit Plugin’s Home Visit Plugin @ WordPress.com […]
• 
  bk January 25, 2009 at 5:41 pm

  Hi

  The sliding Notes plug-in is really cool. I’ve used it successfully in firefox but it’s not working for me in IE8. Do I need to do something extra for that.

  Cheers
  BK
  • 
    Hackadelic January 26, 2009 at 12:10 am

    Hi bk, there already was a similar issue reported to me. I’ve rebuilt the problematic page in both, my blog, as well as a test blog running basically that person’s theme, and in both cases Sliding Notes worked flawlessly across browsers, including IE. The only conclusion I could draw is that site-specific modifications, either in form of theme modifications, or unfortunate plugin combinations, are causing the issue. Sorry I couldn’t help you better.
• 
  Hackadelic January 20, 2009 at 5:05 pm

  dan, thanks.

  Who says it can’t be used on other sites? On what kind of sites / platform would you like to see it?
• 
  dan January 20, 2009 at 4:24 pm

  good stuff, thank you. Man if this could be used in sites other than wordpress, you would have a best seller.

  Thanks again