a noteAfter some warm-up time with WordPress, I decided it’s about time to write a WordPress plug-in.

Not that I’ve been keen to program in another half-backed spawn of C++ (the mother of all programming language abominations ;-) )1 with all the curly braces and clumsy syntax. But, the itching in my fingers was stronger then that.

So here it is! Ladies and gentlemen, I proudly present: The Slider Shortcode! An easy way to add sliding notes» to your WordPress content!

Download the latest version

Usage

In the simplest case, the shortcode is used like so:

[slider title="slider button title"]sliding note content[/slider]

It will give you this: slider button title»

Other shortcode parameters are:

  • bstyle=”CSS style directives” : Inline CSS style applied to the slider button
  • nstyle=”CSS style directives” : Inline CSS style applied to the slider note
  • type=”any-CSS-names” : The type(s) of the note. A type will be matched to a CSS class of the same name.
  • type=auto-expand : A special type that forces automatic expansion of the note on page load.
  • shortcodes=on : Enables recursive shortcode processing inside sliding notes. Omitting the parameter, or supplying any other value but “on” will disable recursive shortcode processing. Note however that recursive shortcode processing will not enable nested Sliding Notes.2
  • hint=”hint text” : Specifies the text that will show when the mouse is being hovered over the slider button.
  • group=”group name” : Specifies the group the sliding note belongs to. When a note belonging to a group is expanded, all other notes in that group are collapsed. Read more about this feature in the 1.5 release announcement.

The parameters are described in the release announcements in more detail.

Please visit the Sliding Notes Showcase and share your experiences, interesting applications, or typical (and less typical) problem and solution patterns with Sliding Notes.

Installation

To install, simply unpack the archive into wp-plugins.

Configuration

The plug-in relies on some CSS definitions which you’d definitely want to adjust to your theme:

  • .hackadelic-sliderPanelThe class of the panel that contains the slider note content.
  • .hackadelic-sliderButtonThe class of the slider button that opens and closes the slider.
  • .hackadelic-sliderButton:hoverUsed to highlight the button when the mouse hovers over it.

A sample CSS is here (click on expand source to view, or copy to clipboard):

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

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;
}

Integrate it into you own stylesheet, and use it as a starting point for further customization. I recommend using the brilliantly simple MyCSS plug-in, and modify it’s my.css stylesheet. Of course, you can also modify your theme’s style.css.

I decided against employing WordPress options for style definitions, simply because I didn’t want to add another database query at run-time, and add to lowering run-time performance. I might extend the plug-in to provide options other then pure CSS styling, if there’s justified request for it. Feel free to make suggestions.

Use-Cases

The most common use-case will probably be to add explanatory notes which you don’t want to obscure the main content with (by, say, putting them in parenthesis). As such, sliding notes are effectively a fancy substitute, or even a complement, for footnotes. Other use-cases will, hopefully, be shared on the Sliding Notes Showcase.

Also, there is a series of Sliding Notes advice articles:

What’s New

Recent Releases

What’s In The 1.3 Version

This release is 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.

  • Many new shortcode arguments for easy integration into different website/usage concepts:
    • inline CSS styles
    • custom note types
    • auto-expanded notes
    • embedding shortcodes inside sliding notes
  • Improved interoperability with other JavaScript/AJAX libraries
  • Various cleanups and fixes

For details, see the release announcement.

What’s In The 1.2 Version

The 1.1 series had some difficult cross-browser issues, which is why the 1.2 series is again an almost complete rewrite regarding both, code and concept. Besides resolving the cross-browser problem, there are several other improvements in 1.2:

  • Foremost, now all of paragraph formatting should be usable in sliding notes (ex. centered, right-aligned or indented paragraphs). Before, only default paragraph formatting was supported.3
  • Sliding notes are widget-ready! Again. All you need to do is enable shortcodes in text widgets, and put the shortcode there.
  • There are several minor fixes.
  • The code base has been streamlined and improved.

What’s In The 1.1 Version

Basically, the 1.1 series is a complete rewrite:

  • Switch from a buggy Shortcode API to “good old” Filter API. (See this post on that.)
  • Improved handling of multi-paragraph notes, enabling the following features:
    • Note paragraphs can be individually styled.
    • Note paragraph styles can differ from surrounding paragraph style.

Note: The styling is done the usual way in the visual editor. There’s no extra UI for writing sliding notes (yet). There’s an example in the 1.1 release announcement.

Motivation

This plug-in was born out of a wish to have a sliding functionality in my blog similar to the one built into TiddlyWiki. My search for such functionality revealed only one serious candidate, SmartSlider, which nonetheless was not to my exact liking.» Besides, it tempted my programmers heart to implement a WordPress plug-in of own, so here was my chance.

Challenges And Points Of Interest

Dear reader, this chapter gets into some quite technical background details, knowing which is not necessary if you are only interested in using the plugin. If this doesn’t scare you, then please, read on. ;-)

Challenges And Points Of Interest In The 1.2 Series

The approach choses in the 1.1 series has been to embed the note as nested paragraphs to the surrounding text. Unfortunately, some browers, like Chrome, did not like that at all. My first idea to work around this was to use a late post filter and replace P element with equivalently CSS-styled DIV elements, which all browsers can render, nested or not. Alas, it turned out that WordPress keept messing up the HTML structure of a post in unforeseeable ways, eating opening or closing HTML tags at will, so it was impossible safely replace the P tags and hope to still come up with valid HTML when the whole process finished. So again, I resorted back to shortcodes, simply because that seemed the only way that WordPress and I could stay out of each others way. As a “bonus”, it’s possible to use Sliding Notes in a text widget again (provided you’ve enabled shortcode processing there). Anyway, the final solution to the cross-browser issue was to put the note contents into independent DIV’s, where the browser would render them to a DOM-tree at its discretion, and then move the thus created DOM part to the actual sliding note position after the page is loaded. This way, the browser-specific HTML-to-DOM processing is “taken out of the equation”, leaving only the necessity for DOM manipulations (which, I believe, are much more “portable” across browsers).

Challenges And Points Of Interest In The 1.1 Series

I had to revise the approach to overcome overlapping elements (see next chapter), for two reasons:

  1. It did not cover paragraphs with styles properly.
  2. Flaws in the Shortcode API came in the way of properly handling the paragraph issue anyway.

Instead, I refrained from using the Shortcode API altogether, and rewrote the plug-in as a content filter.

Challenges And Points Of Interest In The 1.0 Series

A particularly challenging matter was the fact that the mixture of TinyMCE and Wordpress encloses each paragraph in <P>...</P> tags.4 This is XHTML compliant, but gets painfully in the way how content within the [shortcode]...[/shortcode] tags is processed. In this particular case, the content within the shortcode tags needs to be enclosed in a <DIV> or a <SPAN> HTML tag, in order to slide it as a whole. But when the content contains line breaks (or some element which would denote the end of the preceding paragraph, like a bullet list, for example) it leads to a weird constellation. In detail, the HTML as the plug-in sees it is:

<p>surrounding paragraph [shortcode]shortcode content start</p>
<p>shortcode content end[/shortcode] surrounding paragraph continued</p>

When the shortcode is substituted by a DIV or a SPAN, it results in a HTML like this:

<p>surrounding paragraph <div>shortcode content</p>

<p>shortcode content end</div> surrounding paragraph continued</p>

The resulting HTML would contain overlapping elements – clearly not a valid XHTML. Different browsers render such HTML in different ways, none of which may match the writer’s intention. The core problem here is that when the HTML contains overlapping elements, it cannot be represented by a regular tree data structure, which the X(H)ML DOM model is. A browser that works by first building a DOM model from the raw HTML page, then rendering it to the display, would need to “guess” the tree structure. Firefox 3 for example will implicitly close the DIV element at the closing </P> tag, and ignore the explicit closing </DIV> tag, effectively resulting in:

<p>surrounding paragraph <div>shortcode content</div></p>
<p>shortcode content end surrounding paragraph continued</p>

Interestingly, Internet Explorer 7 seems to correctly process (at least simple) overlapping constructs (but don’t take this as a browser recommendation ;) ). To circumvent this problem, the plug-in uses a late post-filter which transforms <P>-enclosed paragraphs (of the form <P>content</P>) into old-fashioned paragraph breaks (of the form content<P></P>, to be exact). The transformation is performed only for those posts and pages that actually contain a slider shortcode.

Limitations And Incompatibilities

Currently, I know of these – easily resolvable – incompatibilities:

Incompatibility with WP-Footnotes

The WP-Footnotes plug-in seems to have trouble when the slider shortcode is used within a footnote. The slider displays and behaves correctly in the footnote itself, but WP-Footnotes displays part of the slider-generated HTML where the footnote reference mark should go normally. To resolve it, you need to increase WP-Footnotes’ priority to above 10. The option can be set at the bottom of the Settings?Footnotes page in your WordPress admin panel. Here is an example:5 ? This footnote reference mark is not spoiled, because I changed the aforesaid priority.

Incompatibility with Some Themes

Some themes erroneously omit to trigger the so-called wp_footer action. I’ve submitted a defect description and a workaround on a separate post.

Current Implementation Limitations

The CSS definitions must be manually integrated into the site’s stylesheet(s). This is a deliberate decision: For a typical blog site, the CSS definitions are unlikely to change, or change frequently, so it is basically a one-time effort for the administrator. Instead, the hereby avoided performance decrease from extra queries on each page view, adds to the benefit of your (hopefully many) blog visitors.

Showcases And Feature Requests

I welcome everybody who takes pride in his particular application of Sliding Notes to share his experiences, as well as typical (and less typical) problem and solution patterns with Sliding Notes on the Sliding Notes Showcase. If there’s a feature you’d like to suggest for Sliding Notes, feel free to add it to the Sliding Notes Wish List.

Summary

As with all my endeavors, I tried to keep things as simple as possible, while – as I trully hope – providing a useful and visually attractive functionality. Should there be problems or suggestions, please feel free to post them below. Cheers and happy sliding!

If you use this plug-in, please consider making a donation to support the further development. Donate whatever you feel appropriate. Any amount is appreciated. Thank you.

Please note: technical support will be provided to donators only.

pixel Sliding Notes
This note is shown when the slider is clicked open. Lorem ipsum usu quas tibique ne, no vim dicant diceret consequat, modo debet voluptatibus vis an. Erant omnium volutpat eum ut, his diam scaevola eu. Qui id tota utamur torquatos, nec eleifend hendrerit ad, ut per dicit laboramus efficiantur. Et his kasd homero maiestatis, an malorum accumsan mel. Quo ad zzril oporteat assueverit, et mea munere persius intellegat. Vis tation fuisset disputando et, vel sale eripuit erroribus ei.Powered by Hackadelic Sliding Notes 1.6.3.2

Two reasons:

  • SmartSlider is driven by HTML attributes. It needs code like <a class="slider" href="#slider-1">click me</a>...<p id="#slider-1">to show this text</p>, so it would force me to edit in HTML mode and set all those attributes.
  • It uses an extra JavaScript library, mootools, whereas jQuery, which is built into WordPress, would perfectly suffice.
Powered by Hackadelic Sliding Notes 1.6.3.2
This note should gracefully appear in the footnote.Powered by Hackadelic Sliding Notes 1.6.3.2
  1. As a former expert C/C++ programmer, I’m allowed to say that. Simply because… Well, simply because I know what I’m talking about. []
  2. 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. []
  3. This was also the goal of the 1.1 series, alas… []
  4. I first thought it’s a TinyMCE behaviour, but it turned out that it’s a WordPress filter that causes the effect. []
  5. This is a a WP-Footnotes coexistence test,» examine the footnote mark above. []

238 Responses to “Sliding Notes”

  1. Hello,

    First good job! second i have a problem. When i put your hack in a post the content is visible and if you click it turns hide. What i want is the content hide(like here) and if you clik the content is visible.

    Thanks, i hope you can help me (sorry for the english)

  2. Hi 2tonewarrior,

    glad you like it, thanks.

    Have you applied the CSS definitions yet? You need at least this one:

    .hackadelic-sliderPanel {
    display: none;
    }

    It will hide the sliding notes initially.

    I could have hard-coded this in the plug-in, but I though this way it’d be more flexible.

    Any other opinions on this?

  3. Just updated the page content to reflect the instruction I gave in my prior response :)

  4. I have not changed the css because my background is white and i really like the effect without lines and color, that´s the reason.

    Thanks for the replay, now works perfect ^^

    byee

  5. Is there a way to use this outside of a post? I’d like to use this on the sidebar of my website to hide some menu options until a user clicks on the main category.

  6. Dave, if you can get away with text widgets, you can use the shortcode inside them, provided shortcode processing inside widgets is enabled (which it is not by default AFAIK).

    But, it seems to me what you’re looking for is much more heavy-weight, perhaps something like the SuperSlider-Menu?

  7. Thank you very much, I was searching for this for two months

  8. Thanks for your positive feedback, Saad. I’m glad I could help! :)

  9. This is great! Exactly what I was looking for! WordPress should have come up with this a long time ago! Can’t wait to try it out! Thank you so much!

  10. HEY THERE, POWERFUL PLUGIN YOU CREATED, KEEP UP

  11. hi. Thanks for plugin

    perfect.

    Regards

  12. Hey dude this is one sweet plugin thanks for coming up with it awesome stuff…

    I have one little question for you and that is how do you get the rounded corners on the Slidenote links?

    Is it an image or css, maybe both and just thought I’ll ask..

    –David

  13. @Everybody, I’m overwhelmed by your positive feedback. Thank you! :D

    @David,

    if you look at the sample CSS above you’ll find -moz-border-radius: 1em and -webkit-border-radius: 1em. They are for Mozilla browsers, and Safari, respectively. (AFAIK Opera and IE both don’t have a facility to display rounded corners. That means that IE and Opera users see rectangular slider buttons and notes, but they still look quite fancy. If you must have rounded borders across all browsers, have a look here.)

    I hope this answers your question. :)

  14. Hey dude thanks man I got it to work for me cheers.

    Do you do outside work bro what you charge for doing wordpress plugin?

    –David

  15. Great plugin. I’ve created a sample page here: http://agabus.com/?p=2382

    Here are a couple of issues:

    1. I can’t seem to get a space after the slider note.

    2. When someone switches to print mode, slider notes really break up the paragraph. I’m using the Wp-Print plugin.

    The first I’m sure is a CSS issue. The second, perhaps a development issue.

    Thanks for a great plugin.

  16. David, sure, I’m a professional software developer. Feel free to contact me if you have a need for a specific plug-in. I’d be glad to help.

  17. Mark, thanks! I’ve been to your page. I was first a bit astonisched, because when I view it in my firefox, there very well is a space. Then I tried IE 7, and indeed there wasn’t. I didn’t have the time time to figure out why – yet. But I will.

    Regarding print preview, I tried it with both browsers, with both open and collapsed slider note, and I really couldn’t see any broken paragraphs. Am I missing something???

  18. Hackadelic, check out http://agabus.com/?p=2382&print=1. Obviously, the text is “inline” so in print mode, it shows up in the text, not as footnotes. I don’t know how to otherwise say it.

  19. One more thing. The slider works well in IE (except for the space) and Firefox, but Safari? Though I’ve added the CSS…

    .hackadelic-sliderPanel {
    display: none;
    }

    …in Safari the note is “open,” not closed.

  20. Scratch that last comment. Of course it works in Safari — I’m viewing your site in Safari and the plugin works fine. I cleared my cache and it works on mine too.

  21. Mark, thanks for the valuable hints. It seems the issue with the print preview is only until the note is once shown and collapsed again. I’ll work it out.

  22. O.K. Print preview issue taken care of! Version 1.0rc5 is out. :)
    (May take some time until it appears on wordpress.org)

  23. Hey there,
    sounds like you developed a great plugin! Unfortunately it doesn’t work on my blog. I installed and activated the plugin successfully, added the required lines in my style.css and put a sample slider content into a post: [slider title="slider button title"]slider note content[/slider]
    The slider button is displayed, but nothing happens when you click on it. You can see it here (end of the text): http://www.joergmeyer.de/portf.....plattform/

    Do you have any idea what I might have done wrong?

  24. Jörg, I do. There’s an exception thrown when the jQuery JavaScript library is loaded. It doesn’t have anything to do with my plug-in (beyond the fact that it requests wordpress to load the library).

    Contact me if you need support with further debugging your site. I’d be glad to help.

  25. I think this is one of the most used plugin in WordPress. For me is just like gold :) Keep up the good work by making updates!!! A lot of thanks!

  26. Hello….great plugin…it really works well. There is one thing I have been trying to format, but having no luck and was wondering if you may know.

    I want to center the slider title over the note. For example, below I have the title “Click Here for Page Outline” and I want to center that title over the displayed content.

    [slider title="Click Here for Page Outline"]What’s on this page: (1) I provide some important reminders and strategy we already discussed (2) a strategy outline for newbies (3) some thoughts on copyright and content and (4) my closing remarks. After you read, please provide comments/feedback at the bottom of page.[/slider]

    I tried several things, but it centers both the title and the text. I was hoping there was a way to center the title only and leave the displayed text aligned left.

    Any help or thoughts would be appreciated.

    Thanks

    p.s. I’m using sliders notes on this page: http://www.online-money.org/adwords/closing/

  27. Yeah, I’m using it now in place of footnotes. If I need to post a footnoted document, I’ll simply upload a PDF. So, it would be nice if Sliding Notes could be incorporated as a button on the dashboard, alongside commands for bold text, etc. I’m not programer, so I don’t know if that would be possible, but it would be nice. Thanks again for the plugin.

  28. @Bogdan and everybody else: Thanks a lot for your positive feedback! It’s really rewarding!

    @Dan: I understand your problem, and I’ve got several ideas how to extend Sliding Notes so to enable what you want to do. I need to giv’em some more thought though, and decide which one to implement.

    @Mark: Thanks for your input. I guess, we’re talking about extending TinyMCE here. This is definitely possible, but not at all trivial. (The complexity depends on the level of visual editing support to implement – regarding which there are no limits to one’s imagination.) Besides, such measures would be of no help to those who use a desktop blogging client for writing… You see, there are lots of concerns to balance here. Let me sleep over it.

  29. Thanks Hackadelic for your remarks. I’ll check back later.

    cheers
    dan

  30. Dan,

    I’ve just posted a workaround to your issue. Hope it helps for starters.

  31. Hackadelic, thanks for your code, but it did not work on my site. Not sure if the reason has to do with the float right for google adsense or google’s javascript. I copied the code from your page and pasted on my site. It came out with all content displayed like so:

    [SLIDER title="Click Here for Page Outline and Notes"]
    What’s on this page:
    (1) I provide some important reminders and strategy we already discussed
    (2) a strategy outline for newbies
    (3) some thoughts on copyright and content and
    (4) my closing remarks.
    After you read, please provide comments/feedback at the bottom of page.

    [/SLIDER]

    Here is a link to the page: http://www.online-money.org/?page_id=273 with the sliding note:

  32. Dan, you probably overlooked the explaining footnote to my last post:

    In the HTML code samples, I had to write “slider” in uppercase, to prevent the slider from actually showing. Of course, your real HTML code needs to write it in lowercase.

    I probably should move that hint into the main content.

    Update: Done that now.

  33. Ah…yes….my bad, I did not read your foot note. Thanks again. It works great.

  34. Hi,

    Thank you for the tool :)

    I installed it on my blog but when I use it, it does some funky stuff to the HTML tags, have a look:

    http://www.raymondfong.net/soc.....microsoft/

    Notice how it puts my paragraph tags at the end of the sentences. Any idea why it’s doing that?

    Thanks again!

    Raymond

  35. Hi Raymond,

    I didn’t see any visible issues with the appointed page, but it’s true that the 1.0 series of the plug-in did that as part of the handling. An explanation is in chapter “Challenges And Points Of Interest” on this page.

    The brand new 1.1 series implements a different strategy.

  36. Hi Hackadelic,

    Thanks for the reply. When you view the source code, you can see that it goes like this:

    I re-enabled all my plugins and everything is still dandy.

    Note that the paragraph tags come after the sentences. I’ll take a look at the Challenges and points of interest”, thanks again.

    Raymond

  37. Raymond, you really should give the 1.1 version a try :)

  38. Hi! you have a bug with Google Chrome and Safari: sliding doesn´t work. In Opera rounded corners are not shown…

  39. Hi Bogdan, and thanks for checking out.

    Regarding rounded corners, Opera and IE both have no such facility, AFAIK. See my prior comment on this.

    As for the rest: Could you be more specific about what “sliding doesn’t work” means, please? I assume nothing happens when you click the button, but that could also be a cache issue (see this comment).

    I’m looking forward to your response.

  40. If I upgrade from 1.0rc5, what is inside of sliding notes, it´s just flushed out. Example. The text is shown outside the box and when I click the link it´s just open this, like in ?Example?

  41. Bogdan, thanks a lot for the useful screenshot. I’ve installed Chrome and checked the appointed effect. It stems from Chrome’s inability to process nested paragraphs (which Firefox and IE both can).

    I’m working on a solution. The principal solution fitness is demonstrated on this test page.

    I’ll be back with a new version soon. Everybody, sorry for the inconvenience.

  42. Hi, your link above for 1.1.0 still points to version 1.0rc5

  43. Sorry, ignore my prev comment, I just saw the notice of withdrawal of 1.1

  44. Hello there Hackadelic,

    I would just like to say that I love your plugin and its exactly what I was looking for!

  45. I have it in my testing stage, but this looks very nice.
    BTW… MyCSS does not run on WP 2.7

  46. I have been really liking this slider plug in. Very simple and light and it animates the sliding much cleaner than other similar plug-ins. But since the last upgrade I can not use my lightbox2 images in the slider area. I can add more detail if needed.

  47. Gilbert, of course MyCSS runs on WP 2.7. I have it right in front of me just now. However, it requires that a file named my.css exists in the mycss plugin directory (see my post on that), but that’s true for any version of WP.

    gageparker, thanks for the hint. And please, by all means, provide more details. Even better if you point me to an URL where I can check it out live.

  48. gageparker, I checked it out. There are lightbox2 plug-ins for WordPress that use an outdated version of scriptaculous, which is incompatible with the jQuery version built into WordPress. I’ve written a post about it some time ago. (Actually, this is exactly what Jörg’s problem was.)

  49. sorry Hackadelic for not getting back sooner, work sucks. Anyway the slider works fine. The problem I am having is the images should be using lightbox2 plugin when they are clicked on after being unslided. You can see what I mean on
    http://gageparker.com/?page_id=3
    they unslide but when you click the thumbs they open in a new window rather than in lightbox2 as intended. In the 1.1 version of your plug-in I did not have this problem. I referenced Jörg’s problem as directed, but I think I am having a different problem or I may be missing something you are suggesting. Thank you for your response and any help you can provide.

  50. gageparker, I’ve found the cause of your trouble – it’s an initialization order problem. The next version of Sliding Notes will have that fixed. (Coming this week)

  51. Thank you so much for the update! As far as I can tell the plug-in is working flawlessly.

  52. Dear Hackadelic,

    Forgive me I am very new to wordpress.
    I’ve been checking all posts about the slide notes and TOC box, but I still got no ideas of uses of the plugins. I have installed the plugins and activated it, but what’s next and host to make codes slide on my blog. Many thanks!

    Regards
    Patrick Lee

  53. Hi,

    this is patrick again.
    I finally got the clues

    [slider title="my slider button title"]my sliding note content[/slider]

    Thans for your great works!

  54. Hey, I’m loving your plugin but right now all of my notes are auto-expanding, meaning they’re open when the page loads. They do close properly when clicked on.

    Browser: Firefox 3
    WP: verison 2.7
    Other plugins:
    Exec-php
    Flv Embed
    IE warning
    Maintenance mode
    Shadowbox JS
    WP-sticky
    WP wall

    This is my first WP site so it’s possible that with my custom code-monkeying that I goofed something up.

    Thanks

  55. Hi Fird, I checked your site and quickly found out the source of misbehavior. There’s a duplicate CSS definition of the “.hidden” class in your “extras.css” file. If you remove it there, everything should works just fine. But please let me know if “extras.css” comes from a plug-in, so I can add it to the incompatibilities list.

  56. Hey Hackadelic.. I’m trying to insert simple hyperlinks inside the notes.. not able to achieve that.. can you or anyone else can guide on that? thanks..

  57. Hi Nitin,

    as you can see from the first slider on this page, links inside notes are supported. (The first slider contains a link. It is inserted the same way links are inserted outside a sliding note.)

  58. Hi Hackadelic,

    Firstly apologies, I may have left a comment in the incorrect please. The plugin is really cool, it working on my blog in Firefox but nothing appears when I switch to explorer 8. Please advise on corrective action.

    Cheers
    BK

  59. Thanks so much! I commented out that definition in the “extras.css” file of the “Shadowbox JS” plugin. After doing that both plugins work perfectly as far as I can tell.

  60. bk, see my prior response on that.

  61. Thank-you … perfect for FAQs that open up an answer from a list.

  62. Thanks, Richard, for your credit and suggestions.

    So you are already using it? If you have an interesting application of Sliding Notes running, I’d like to include it in the Sliding Notes Showcase.

  63. This is the perfect plugin for a project I’m doing… you really saved me and it’s working perfectly in my normal pages. However, it won’t work on the homepage — I’m pretty sure it’s because the homepage calls on home.php.

    Any thoughts on how I could get it to work there?

    Thanks!

  64. Just for the records – I’m in contact with Lori on her issue :)

  65. Hi Hackadelic — I’ve got another one for you :-) Hope you don’t mind!

    I’m working on implementing the sliding notes on my own blog because I love it so much! Something is conflicting though.

    I get this javascript error:

    What do you think? Is it something you’ve run into yet?

    Best Wishes!

    Lori

  66. Hmmm – ignore that first post – something didn’t come through… I’m trying again!

    Hi Hackadelic — I’ve got another one for you :-) Hope you don’t mind!

    I’m working on implementing the sliding notes on my own blog because I love it so much! Something is conflicting though.

    I get this javascript error:

    Message: Object expected
    Line: 86
    Char: 1
    Code: 0
    URI: http://freelancemom.com/blog/2.....ot-harder/

    What do you think? Is it something you’ve run into yet?

    Best Wishes!

    Lori

  67. Hi Lori,

    it’s strange, your theme seems to bypass WordPress footer actions, a mechanism used by Sliding Notes to supply some javascript.

    Update: I can confirm that my assumption was right. See my newest post on this.

  68. Ciao!
    Thanks – this is great!
    I have a funny problem though. Solved, but still funny.
    I’ve been trying out your plugin (with v1.2.1) on a site A and it works like a charm.
    On site B (with v1.3.1) the drop-down slide texts insisted on being visible even after implementing the display: none; part.
    The only solution I could find was to insert the css you suggested for v1.2.1.
    I’ve tried to check both the css and code carefully with no luck. On the other hand, just cutting and pasting the v1.3.1 css should work, right?
    Only other variable is that site runs on WP262 while site A is on WP27.
    (If you need further details, just tell me :o )
    Thanks again,
    Kjetil

  69. Thanks for your input, Kjetil. This is indeed funny. Yes, the 1.3.1 CSS should work out of the box (for the 1.3.1 version, that is). It *does* work for me, and nobody else complained, either. I’ll be grateful if you sent me the URL’s of site A and B. Use the contact form if you prefer not to disclose them in public.

    Again, thanks for your input.

  70. hey Hackadelic.

    thankyou very much for this neat plugin. i have been looking for something like this for quite a while. I was even thinking about hacking some terrible spaghetticode by myself, but got a headache after only looking at my dusty scriptingtutorials :D I am going to use it as a quick and tidy way to make my sitecontent multilingual at certain points while keeping it from getting bloated.

    best regards
    helge

  71. Hi Hackadelic,

    I really like your idea. I was going to use collapsible objects but last night I found your plugin. I did a page (see the website field) and I followed your instructions. I even put the style sheet and now I have a new look but there is a problem. When I click on title nothing happen. I am using FF 2 on this lab computer and I tried IE 7 but it didn’t work. I disabled all extensions and I kept only yours but I still have the same problem. Can you help me please?
    Thanks!

  72. Wisam, apparently you have the same problem as Rob. I suggest you give the description and instructions in this post a try.

  73. Thanks a lot for sharing this plugin.i love it’s functionality.

    have a good day

  74. wp_footer();

  75. Hi Hackadelic, thanks for your reply. Actually, I kept waiting and waiting for your reply and I was trying to solve the problem in the mean time and I SOLVED IT !!
    I disabled all plugins and removed the javascripts in header just to make sure everything works right but it didn’t. Then I switched my theme to the default and viola! The plug-in worked! So i figured out it has to do with my theme. After sometime I found the source of the problem. In my footer, there is this line missing:
    <code> </code>
    I borrowed a theme and I modified it but this line was not there to begin with and I don’t know why it cause the problem but now problem solved :) Yay!
    BTW, I version 1.1 has problems with Safari besides Chrome. As I was trying to find a version that works for me :)
    Thanks a lot for thie GREAT plugin. i am sure my students will be happy with it :)

  76. “Delete this comment” I tried to use the <code> tag but it didn’t work. Here is the missing line (letters separated)

  77. Wisam, it sounds as if you’ve waited for days for my reply, but when I look at the time stamps, it was only during some of my sleep time. Time zones, you know… :)

    Anyway, at the very end, it seems you’ve found and added the missing wp_footer() call.

  78. I can’t make it without your kind “sharing”, thanks!

    a newly successful trial
    http://ccie.hk

  79. Nice plugin!

    Would love to see more variables such as:
    * adding wrappers (a prefix / suffix) for the slider title. (eg. wrap the slider title around a h2 tag)
    –as a sub-note to that, maybe offer to change the onclick slider title [a] tag to use something else like a h1, h2, h3, span, etc.

    * option to change the anchor bullet (right now it’s a right quote)

    I understand that the original intention for “Sliding Notes” was to be a sort of “foot note” plugin, but if we could have an admin option so that the hidden content could stay relative to the slider title, instead of being suffixed to the end of “the_content” that would be great!

    Let me know what you think.

  80. Ray, thanks for your input.

    Most of your points are already on my road map: Bullet option, better formatting support for titles. I’ve even though about supporting state-specific appearance (which goes beyond just switching titles), but I’m not sure how it’ll fit with the scope of the plugin.

    May I ask you though what you hope to gain by an option to add “wrappers”? If it’s only formatting – there’s only more than enough space for formatting using CSS classes and inline styles.

    The same for the “hidden content”: Why does it matter where is stored, as long as it occurs at the right place? (BTW, there is a reason why it is where it is. In 1.0, it was “relative” to the slider, but I had to change it.)

    I’m looking forward to your response.

  81. Maybe wrappers isn’t the best thing like you mentioned.

    But I like what I said about having the option to choose whether an [a] tag gets to be the onclick sliding title. Which I see, is on your roadmap!

    Using header tags is probably what I’m planning on using “Sliding Notes” for.

    So regarding having the content relative to the sliding title, this is mostly from a RSS perspective. If you load the post in RSS, the sliding content is not hidden and is visible at the bottom of the post, which doesn’t make much sense when you read the post from top to bottom.

  82. Okay I was able to add the custom title anchor variable myself!
    Wasn’t too hard to modify!

    Now to figure out how to keep the content relative.

    I know it has something to do with the initialize() function and the filters, should I just comment out the preProcesContent and add the $note to the doShortcode function?

  83. I see. But I don’t think moving the notes around is the right answer. Hmm… I think I already have an idea what the right answer might be.

  84. Ray, it’s flattering that you are making changes to my code (it proves it is clean and lean :) ), but you should know you are not doing yourself a favor creating local forks of it. When I release a new version… (Need I finish that sentence?)

    Now about making content “relative”: As I already said so elsewhere, the notes are where they are for a reason. You are likely to sacrifice some, if not much, of the paragraph formatting ability if you move them. Then you’ll have notes that are nicely placed in RSS readers, but look crappy in (at least some) browsers.

    There are better ways to make RSS readers happy! :)

  85. Re: my modifications… it’s more of a stop-gap until the new version is ready :) I’ve also validated it as well ;)

    Anyway, getting back to my point, the relative content issue only makes sense depending on the way people are using “Sliding Doors”.

    In my case, it’s imperative to have the content right next to the anchor title since I’m using header tags as the anchor title. Can’t wait to see what you are planning for this!

    Also another issue, if javascript is turned off, the sliding content is hidden, which isn’t great from a usability perspective. Maybe it might be best to have the panel content shown by default (remove the class=”hidden” on the sliderPanels), while using JQuery’s addClass to hide them onload.

  86. Re: previous post… I meant “Sliding Notes” not “Sliding Doors” ;)

  87. Ray, so you’ve seen that movie, too… “Sliding Doors”… wasn’t bad. :)

    I’d really like to understand your use-case – the purpose behind insisting on header tags for slider buttons. I mean, are your buttons really headers? Would they appear in a table of contents outline, if you’d created one?

    So what is it that’s worth going through all this trouble? (Not only the hacking efforts, but also, if your ’s are not real headers, it will “confuse” plugins that assume ’s have their usual, natural semantics.) It can’t be just for the sake of formatting – as you can format it any way you like with CSS.

    If I combine this with your desire to make sliding notes visible by all means, and integral, not just secondary part of the content, I would guess you intend to put whole chapters into sliding notes.

    Whatever it is, I have the slight feeling your use-case is probably quite aside from what Sliding Notes was designed for.

    If you told me your real-world use-case, I might come up with a solution that’s much more suited to it, than (hypothetically speaking) abusing Sliding Notes to accomplish what it was never designed for. (E-mail me, if you don’t want to post about it publicly.)

    You make a good point on turned off javascript, and your proposal would be the right strategy – from the aspect of your personal use case. But for what Sliding Notes have been designed for – showing secondary content – it is not. On the contrary, a page would probably look pretty crappy if all “footnotes” were expanded by default.

    It’s still a good point though, and I’ll give it some more thought if I can come up with something that fits smoothly into the concept.

    Anyway, I just noticed there’s been a slight misunderstanding. Exchanging a’s for h’s is not on my agenda. What I said in the other comment was I’d like to enhance title formatting support, but that would be inside the anchor, and won’t replace it.

  88. Hi again Hackadelic,

    I have found a serious bug in sliding notes that renders my pages completely inoperable. I am using the plugin extensively for my diseases cases and I am including a slide note for every disease (pathology) case which is really intuitive. However, on certain circumstances the whole content inside a page will not display at all. After some testing, I found that for example in this page
    http://www.marcilan.com/pathol.....-syndrome/

    If the number of words in the page is less than 607 or 608 the page will display properly. Anything above that will make the page not work and the content will not display. (I only get back to top link)

    Please please, can you help me fix this issue? I really need to include more cases and now I am stuck. Thanks a lot !!

  89. Wisam, I can’t confirm your issue. I’m just viewing a test post with with over 1200 words and various Sliding Notes on my test blog. Must be something with your theme, or your other plugins. Can you tell me what plugins do you use? (Use the contact form if you don’t want that disclosed in public.)

  90. Hi!

    Thanks for a fantastic plugin! I’ve been looking for weeks for something to replace another plugin which wasn’t working with my theme in Firefox. Yours does! However, I wonder if it’s possible to remove the rounded border around the sliding text? It doesn’t quite fit with my theme. The sliding effect however, is great!

    Thanks for your awesome work!

  91. Magnus, thank you for your nice words. :)

    Sure you can take the rounded corners out. In the CSS, go to the clause “.hackadelic-sliderPanel”, and remove the line “-moz-border-radius: 1em; -webkit-border-radius: 1em;” ant it is out. (You may as well surround it in “/*” .. “*/” to comment it out.)

  92. Hackadelic,

    thanks for your quick reply! I went to sleep and woke up and there it was! ;) (live in Sweden). I think I had edited the CSS a little bit too much (not that good at it either, just trying to figure it out by editing here and there). I copied the original code again, but was surprised to see that just what I wanted to happen happened without any further editing of it.

    Well, it works now. Should be in your colors and with border as far as I can tell from the code, but it works. I’ll try to stay away from any more editing for now.. =)

  93. Hi again!

    Thanks for your quick reply! I went to sleep, and when I woke up your answer was there.

    I made a small mistake when inserting your CSS into my site again. I forgot a “}”, which made your plugin work fantasticly with my theme. That is, it didn’t read the styling you provided. Fantastic!

  94. Hi! Love the plug-in. Thank you….

    Quick question: Is there an option the have the ’slider button title’ change when it has been expanded? Example: “Chick Here To View More Details” changes to “Click Here To Hide Details” when expanded and then back to “Chick Here To View More Details” when collapsed.

  95. Sarah, there is none – yet. But see the discussion on the Sliding Notes Wish List.

  96. Hi again!

    I tested my site on Internet Explorer 6 and 7 today (using Safari/Firefox normally) and found out that the plugin distorts the page by putting some of the sliding content in the sidebar. I’m sure this has something to do with the theme. Do you have any suggestions on how to resolve this? Check the link to see what I mean (the site’s in Swedish but I think you’ll see the problem anyways).

    Thank you so much!

  97. Magnus, it definitely has something to do with your theme. A similar issue has been reported to me before. I found some weird stuff in the generated HTML (then, and now with your theme) but I could not find out what causes it.

    I might have found a workaround though. Please try the development version, and let me know if it works for you.

  98. Thanks again for a quick reply! I downloaded and installed the development version. I don’t have Internet Explorer at home but I tried an IE NetRenderer and it definitely looks like the page looks alright now. Great stuff! Will check it tomorrow at work. Don’t know how you did it, but thank you so much.

  99. Magnus, I’m viewing your page in IE right now, and it looks fine. My workaround seems to work then. I’ll make it an official update soon.

  100. Great plugin I found your site through a members only forum with a recommendation to use this plugin, Still yet to upload and try but looks great. I will be back with a report and let you know how It all went, thanks.

  101. Whew, a members only forum recommends my plugin? I’m curious, Jeremy – Would you mind telling me which one?

  102. one of the members from http://www.membershipacademy.com suggested it.

  103. I’m having a little technical difficulty with your plugin. All is working beautifully except when a page gets too long (above a certain number of characters) it results in a totally blank page. I’m using the Hybrid News theme. Any idea what the conflict may be?

  104. Sarah, your problem sounds like one I’ve posted about not long ago. Check out my article, I hope it helps.

  105. Hi! Thanks for this wonderful plug-in. This is really useful to made look short a long article.

    But I have a problem since version 1.3, it is that keeps hide no matter what a do. I had try turn off mycss plug-in, erase the my.css contend and rewrite it. But nothing works.

    Version 1.2 works well. ¿Any hint about what is happening?

    Thanks.

  106. Santiago, it might have something to do with the parallel use of jquery with prototype.js and scriptaculous.js.
    Is there any URL where I can check it out?

  107. Hi there. Wow…what a wonderful plugin. I was wondering if there was any way to initially have the slider open and then the user has the option to close it (instead of the other way around)?

    Thank you again for your hard work.
    Rachel

  108. Hi Rachel, and thanks for compliments.

    The answer to your question is right above on this page. (<= Click this to get there, and watch out for “auto-expand” ;-) )

  109. I was so excited to come across this for a website I am in the early stages of building with Wordpress… Unfortunately I discovered that if sliding notes is activated, it causes my flash slideshow not to work on my main page =(

    I am using the Modularity theme from Graph Paper Press which has a slideshow option on the main page, so there must be some sort of conflict… wish I could resolve this as I would love to use Sliding Notes on the rest of the site, but will have to pass if I can’t figure it out (I am not a programmer so doubt I will!).

    Any ideas? Post ‘em!

  110. Hi Sarah,

    sorry it didn’t work for you. I’d say it’s a problem with your theme, but unfortunately, not being able to see the effect, there is no chance I can tell for sure what causes it. And the Modularity theme is not a free one, so I won’t be able to quickly check it out either.

  111. Hi, Greate plugin thanks!

    P.S.
    What plugin you use for embeded source code to your posts?

  112. Hi waltharius, for syntax highlighting I use my own “hack” based on the Google Syntax Highlighter by Alex Gorbatchev. It’s an extremely lightweight, javascript based syntax highlighter.

    I noticed there is a similar wordpress plugin at http://wordpress.org/extend/pl.....ghlighter/

  113. Thank you very much! :D Once again great plugin!

  114. I absolutely LOVE the idea of this slider. Unfortunately, I cannot manage to install it correctly in either my template stylesheet or my.css.

    I’ve read all your notes and posts on this topic. My main questions are
    1: is there a certain place in the style sheet that I should copy the code above?
    2: what exactl are the modifications that must be made from the code example you gave above and where to make those modifications.

    Also, I don’t really understand where I’m to input the short code.

    I’m totally new to Wordpress, CSS, you name it. But I really desperately want this slider for my page because I have been looking EVERYWHERE for something like this.

    Thanks in advance for any help you can offer
    Andrea

  115. Hi Andrea,

    and thanks.

    Actually, after copying the CSS verbatim, sliders should work (even if they do not necessarily match the visual appearance of your theme).

    Of course, you need to have a shortcode in your post, or you wan’t see anything.

    Open any post in the post editor, and try putting [slider title="Click me"]Surspize[/slider] into any post, then save it and view it normally.

    How is it now? See anything?

    If it’s still not working, it would be helpful if you provided me an URL to a post with a slider where I can check it out. (Use the contact form if you don’t want the URL displayed publicly.)

  116. I’ve encountered a weird bug where the Sliding Notes content will hook on to the end of every widget.

    However, you will not see it in the browser as the CSS display is set to hidden, but only in the source code.

    Has anyone encountered this?

  117. Okay in regards to the previous post, I’ve temporarily commented out the “widget_text” filter, since I will never use Sliding Notes in a widget.

    This will temporarily fix my problem, until a proper solution can be implemented.

  118. Ray, I know there’s that weird behavior on some themes, most probably due to their improper invocation of WordPress actions and/or filters. It is not a bug in Sliding Notes.

    Once I have the chance to examine such a theme, I might be able to find a workaround or even a fix for the theme.

  119. I figured it wasn’t a bug with your plugin! I shouldn’t have said that! ;)

    I have been fooling around with query_posts, WP_Query and wp_reset_query() as of late. Could that be the issue?

  120. Okay delete my previous comments.
    I forgot to upgrade to 1.4.1!

    Everything’s hunky-dory now!

  121. Ray, thanks for your feedback, and for rectifying your “bug report” statement :-)

  122. Hello, thank you for your work on this.
    I am wondering if it possible to integrate in templates?

    If so, how?

    many thanks…
    Andrea

  123. Hi Andrea,

    “once upon a time” I’ve worked on a “standalone” (PHP only) version of Sliding Notes, but stopped out of lack of public interest for it, and also because a standalone version puts much of the burden to established the right preconditions to the user (while the plugin utilizes WP mechanisms to do that itself).

    The “how” depends on what you want to do with it.

    I can imagine adding template tag functions to the plugin (though I need to check out how that fits with the current concept). Currently there are none.

    Update: A somewhat less convenient way is to use do_shortcode like this:

    < ?php do_shortcode('[slider title="Click me"]Surprise, surprise![/slider]') ?>
    

    This is quite limitted though when it comes to longer slider contents.

  124. I am trying to enter the code from your plugin into the Mycss plugin. I copied and pasted it into this file but when I looked at my website it entered all the code on top of my header file. Do you know why this would happen.

    Darlene

  125. Darlene, I’m afraid I don’t quite understand your issue. Could you please explain what you mean by “it entered all the code at the top of my header file”? Do you mean that MyCSS modified your header.php file instead of the my.css file?

    I know one frequent issue after activating the MyCSS plugin is that it doesn’t work if there is no actual my.css file. That is, after installation, an empty my.css file must be created in the plugin directory. But I don’t know of a case when MyCSS “missed” the real file and wrote into another instead.

  126. hello Hackadelic and first of all, a thousands thanks for your great plugin!

    I have a little bit of an issue though, the exact same as 2tonewarior in the first post. I’ve installed the MyCSS plugin and followed your 4 easysteps, and the note still does appear expanded instead of hidden..
    .
    Sorry to bother you about this, i must be either very tired or even worse in css than i thought. I have tried to put the code
    .hackadelic-sliderPanel {
    display: none;
    }
    in lots of spots, in my.css and style.css, but nothing works.

    thank you for your answer!

  127. Estelle, the advice you are referring to is obsolete now. It was valid for some early versions of Sliding Notes only.

    When notes are not collapsing, it’s almost always a sign there is a conflicting CSS defintion of “hidden”. You have one in your theme’s “style.css”. While I made Sliding Notes robust against most such conflicts, it seems it’s still vulnerable to some. I’ll probably switch to name other than “hidden” in the next version. Meanwhile, try commenting it out the “.hidden { ... }” clause in your style.css file, by surrounding it with /**/), and see if everything is OK afterwards.

    I hope that helps.

  128. You were right, it worked!
    Thank you soo much for your time and your incredibly quick answer.

  129. this plugin not compatible with my IE..
    how to make it compatible..

    :)

  130. Vicky, what exactly is the problem?

  131. Hello
    I installed your plugin but I have a problem with displaying slider note content. Simple, there is no content displayed at all. What can be the problem?

  132. Dimitry, the whole part where the notes are stored is missing from the HTML. I thought first it’s your theme, but it isn’t – I checked. Must be some of the plugins you use. I see several javascript exceptions thrown when the page is loaded, and I also see that two versions of jQuery are included in parallel, which is generally not a good idea. That’s all the input I can provide right now.

  133. thanx a lot for the answer
    I will check it later

  134. I found the problem plugin
    this is WP Typograph Lite (http://wordpress.org/extend/pl.....typograph/) – this plugin format text by russian rules. I switched it off and your plugin now works. Thanx for advice.

  135. Dimitry, I thank you for sharing your insights.

  136. Unfortunately I’ve found a Plugin incompatibility between Sliding Notes (et.al) and Hidepost plugin.
    I suspect its a problem with hidepost, but it needs checking out.
    Hidepost selectively hides content based on user role.
    It can also hide links in a post/page. However once its link hiding has been switched on, if it is later switched off, sliding notes functionality is still disabled and fails to work for logged out users only. :(

    A bit of a show stopper!

    You can see its effects in action or inaction (both phrases are meaningful)

    at http://saltaire-aa.org/news/?page_id=3548

  137. DavyB, what I can tell right now is that the complete footer-generated part is missing from your pages – including the JavaScript necessary for expanding/collapsing the notes.

    If it’s not your theme, you are probably right that it’s the other plugin’s problem. Have you contacted the author of that plugin? What’s his opinion?

    Is the effect gone after deactivating the HidePost plugin from the plugin admin page? Or does it still persist?

  138. DavyB, I just tried to reproduce your issue with HidePost here, but I couldn’t. SlidingNotes kept working just fine no matter what I did with HidePost. I strongly suspect it’s your theme (as it looks as if the wp_footer actions are not triggered), or some other plugin that erroneously removes the footer actions. Or perhaps there was something else you’ve changed before you noticed the issue?

  139. I love this plug-in, it’s perfect for providing non-obtrusive translations on a post or page (Finland is a bilingual country and I’m part of the 6% minority, so i really need this tool ;)

    I have just one post using it so far, at the address http://www.wingren.fi/patrick/.....rix-inbox/

    I haven’t really tried it out that much, but in my pioneer experience I had trouble including links (html a) in the slided content. Is there anything i should look for? I’ve seen other people including them, so it doesn’t seem to be a problem om the plug-in side, rather on the back-end newbie side ;)

    Regards,
    patrick

  140. Patrick (wingren.fi), as you can see from my Series Plugin which uses a Sliding Note to present the list of posts in the same series (see WPMU Blues, for example), links do work in Sliding Notes. I assume the trouble may stem from another plugin which processes links. I know that the NoFollow Reciprocity plugin had issues (which I fixed it here, but I have to post about it yet). The HidePost plugin processes links, too, and some people have had trouble with it, too (see comments further down this thread).

  141. Ok, thanks for your swift reply, I’ll check it out!

    regards,
    Patrick

  142. Hi! I have the blog maravilhion, since the version 1.3 the Sliding Notes stop working. Check this post:

    http://blog.maravilhion.com/20.....-the-dark/

    I try to erase the MyCSS added code, even the plug-in itself, but it looks like there is no change.

    I hope you can help me.

    Thanks.

  143. Santiago, I checked the post, but I don’t see what the problem is. Can you explain your issue in more detail?

  144. Hi! Thanks for the fast answer.

    Where the text says ” mp3.com» ” it is a Sliding Note, but it is always collapse.

    Here is another case: http://blog.maravilhion.com/20.....-a-seguir/

    Thanks again.

  145. Santiago, I’m afraid you are suffering from an inferiorly coded theme. For a cure, see my post “Overcoming Theme Footer Defects”. I hope it helps.

  146. Thanks a lot, I will check out and try to fix it.

  147. Hi! Love your plugin. Unfortunately, I can’t seem to make it work, (http://www.ainhoavega.com/prueba and click on the third tab, estética) I’m guessing it’s because of the theme I’m using (WP-Coda) but I wanted to know if someone has a workaround for this issue? Thanks so much!

  148. Ainhoa, I’ve been on you site, and it looks good to me. What’s the issue?

  149. Well the sliding notes don’t work properly, I don’t know how to explain it, but the text below doesn’t “slide” and when opening each note the ones below it seem to disappear…

  150. Edit: sorry, it seems to be a Safari issue only, it displays fine in Firefox. Since the target audience is basically PC, I don’t know if it’s worth it to try and fix it… I’ll install Safari 4 and check again. Thanks!

  151. Hi, I really like your code. Thanks for sharing!
    It comes realllly close to something i want to use for my new site..

    The desired effect is seen here:

    http://www.hetrozeolifantje.nl/

    It treats the post title as button for the sliding action, reveiling the content in a classy readmore/readless kinda way..

    please have a look, i’m bad explaining.

    is this possible using you code? (or other)

    jasper

  152. Jasper, I’m glad you like Sliding Notes.

    It can’t be used for your desired effect, but I can develop a plugin that does.

  153. Help!?

    I keep getting a:

    “Error 500 – Internal server error
    An internal server error has occured!
    Please try again later.”

    when this plugin is activated and I switch to use edit a ‘Page’ in the Admin panel of Wordpress v2.8. Any suggestions?

  154. Mesonto, that has never happened before, anywhere. It might be a. problem/conflict with your sever configuration (ex. PHP version), possibly in conjunction with a conflicting other plugin.

  155. Hey Zoran,

    Just wanted to say that you need to update the instructions for this page for v1.5! ;)

  156. Ray, done. Thanks! :)

  157. I’m using your sliding notes plug-in successfully on a few pages on a site I’m working on. The most extensive usage is on this page: http://nancycartwright.com/wp/about/faqs/.

    Question. Is there a way to specify that once a note is revealed, click on any other note will close the one already opened and reveal the new one clicked on? I hope I describing this well. The effect can be seen on this page: http://voiceoverinfo.com/faq.html

    Thanks!

  158. MartyK, see parameter “group” above, and check out this post, and this effect.

  159. Works great, thank you

  160. Hi Hackadelic,
    great tool. I like the idea of having pictures in my slides. however, I would like to use images from my own media folder in WP. To integrate images with Insight is ok, but I dont want external sources and the picture should not be clickable. Any ideas? thank you so much, Marc

  161. Marc, content inside a Sliding Note is no different than content outside. If you can upload a picture and use it in a post, you can use it in a Sliding Note, too.

  162. Hi, firstly thanks for this amazing plugin. But i have a problem, i am using superfish menu and JQuery enabled Content Slider in my Main Page but when i enable Sliding Notes then my Menu is stoped to work and Content Slider too.
    I see that when i enable Sliding Notes an extra line is added to page

    but i’ve also using JQuery in my header.php so this cause the problem (my opininon). I control my page with FireBug and three warning is seen:

    jQuery.timer is undefined
    [Break on this error] jQuery.timer.add(this, interval, label, fn, 1);\r\n

    jQuery.timer is undefined
    [Break on this error] jQuery.timer.remove(this, label, fn);\r\n

    jQuery.easing[jQuery.easing.def] is not a function
    [Break on this error] return jQuery.easing[jQuery.easing.def](x, t, b, c, d);\r\n

    How can i solve this problem? Thanks right now..
    Note: My site is not activated yet (need password to enter) so i can’t say the adress but if you want i can e-mail to you..

  163. Alper, you can send me the address via my contact form.

  164. Hi Hackadelic,

    I would like to integrate a small contact form in the slider. the shortcode outside the slider works perfectly. [contact-form 1]

    So this is what I tried:
    contact form[slider title="" shortcode=on][contact-form 1][/slider]

    The slider output is: “[contact-form 1]” but not the actual form.

    What can I do?

    Thank you so much for your time.
    MR

  165. Marc, one thing that you could do is read the usage chapter. ;)

    Look for shortcode=on.

  166. Hi Hackadelic,

    I read it, thats why I put it exactly like this: shortcode=on.
    So there must be something wrong whith “how” I put it into the complete line. here it is again:
    contact form[slider title="" shortcode=on][contact-form 1][/slider]
    Any ideas are much appreciated.
    best regards from Brisbane,MR

  167. Marc, I’m so embarrassed. It’s plural (shortcodes=on), not singular. Sorry.

  168. Hi!

    I got a little problem. I want to slideButton to have a little top-margin, if its slidePanel is active. how can i solve that?

    Greets,
    Freddi

  169. Freddi, currently you can’t. I’ll probably add a feature in the future so you can have distinguished CSS for open and closed state.

  170. Hackadelic,

    My applogies for our e-mail exchange before. I’m really hoping this is something simple that you can tell me. For some reason, after updating both the plugin and my theme, as well as the new version of Wordpress, the background color of the slider panel no longer matters. It just stays transparent and matches the background. Any ideas?

    Here’s an example:
    http://todayslunch.info/menu/salads/

    The background of the panel should be, and used to be, white.

    Any help would be much appreciated!

  171. I’d say the corresponding CSS statement about background color is missing:

    .hackadelic-sliderPanel {
      ...
      background-color:white;
    }
    

  172. Thanks! That did the trick!

  173. Is it possible to have Sliders Nested within Sliders? I was hoping the shortcodes=on switch would allow that to work, but its not working like I had hoped.

  174. Jason, it’s not. 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.)

  175. Hackadelic,

    how can I place the Sliding Notes directly in my template.php? The reason I want to do that is easy, I just want to feed the Sliding Notes with Template Tags. Is that possible?

    Thanks!
    Freddi

  176. @Freddi: See this comment.

    @Jason: Not yet.

  177. Hackadelic,
    Very nice plugin, thank you! However I’m having some problems with Safari.

    This slider enabled page is working quite well in Firefox (and aside from some styling issues, not too bad in IE). When I have a look in Safari however, the entire site is a bit wonky including the menu bar and footer. Appears to be a CSS issue, not a plugin problem, because the Safari issue goes away if I pull out the hackadelic section from my style.css file.

    Would you mind having a look and offering some advice?

    Thanks much!
    Stuart

  178. For what it’s worth, I found the offending line of CSS that was causing the problem with Safari:

    background-color: #26

  179. Stuart, “background-color: #26″??? Where did that line come from? It’s not in the CSS I provide here.

  180. Is there a better way to enable usage outside of the loop? do_shortcode() doesn’t seem to work well when I pass a variable or anything complicated through it. Am thinking of just using the excellent slider effect in non-post portions of the blog.

    Thanks

  181. Tyson, I can’t think of why there’s a problem with variables. Something like this should work:

    do_shortcode('[slider title="'.$title.'"]'.$slider_content.'[/slider]')

    Of course, the variables will have to be defined, and some are only defined within the loop. (Same with many other “template tags”.)

  182. I get nothing inside of the concealed span when using do_shortcode, variable or not.
    Testing»

  183. Tyson, I see. So it doesn’t work outside the loop. Perhaps I am going to implement a standalone version of it that can be used in templates.

  184. Hi again, I tried to contact you through your contact page, a week ago. I would like to know if it is possible with this plug-in to achieve the same functionallity, even if the post is totally database-driven.

    Let me explain: my blog is a music one, and every post displays information for a certain album. Both albums and songs come from a MySql database.

    I tried to insert your code in those dynamic-posts and it only displays texts, that’s why I’m asking you. I am good with databases but very newbie with JS, so the futher you can explain, the better.

    Thanks in advance.

  185. Mau, WordPress shortcodes are processed when the written post content is rendered. Generated parts could be included, but it is up to the generating code, not to Sliding Notes. If you are willing to invest a couple of dollars, contact me for further discussion.

  186. Gidday Mr Hackadelic
    What a wonderful program you have developed in Hackadelic Sliding Notes. Thank you so very much.

    I am using your Version 1.6.2.1 with Wordpress 2.8.4, Atahualpa theme, and WP Simple Paypal Shopping cart v2.3. The shopping cart has a shortcode [wp_cart:ROMANTIC ROVOS:price:4798: var1[Colour|red|white|blue] :end], which does not work when it’s embedded in the Sliding Notes shortcode.

    I have the following text:
    [slider title="TOUR PRICES" shortcodes=on]…table containing prices [/slider]
    On my site, travelhorizonstyle.com.au you choose the COUNTRY Africa, then
    ROMANTIC ROVOS RAIL EXPERIENCE, and expand Tour Prices>> you’ll see the problem.

    Can I somehow change the order of the plugin code, so that the Shopping Cart works? (I did “shortcodes” with an S)

  187. Hi Joan,

    [wp_cart:...] is not a shortcode. It must have been implemented as a filter. Hence shortcodes=on has no effect.

    What comes to mind is that wp_cart’s filter priority may be too low, so it executes AFTER the slider shortcode. Can’t tell w/o deeper analysis though.

  188. I love the functionality of sliding notes, but don’t like the “powered by Hackadelic Sliding Notes 1.6.3″. What options do I have to be able to not present that on my site. This is a church website and it just doesn’t fit. Thanks.

  189. Eddie, it is like telling an artist that you like his picture, but not his signature on it.

    Also, I notice you have the “Arclite theme by digitalnature | powered by WordPress” credits on, so I can’t quite reproduce why that’s OK for a church website.

    Whatever. It doesn’t really matter. The point is, I’m providing great value and the fruits of my hard work for free, I never see a dime for it, and you can’t expect me to do that anonymously, too.

  190. Hi again – The [wp_cart:...] function php file had a line:
    add_filter(’the_content’, ‘print_wp_cart_button_new’,11);
    where I changed 11 to 1 & both Sliding-Notes & wp-cart now work together. Thank you so much for a fantastic plugin.

  191. Yeah! My instinct for software code never fails. I can smell a software bug a mile off ;-)

    Joan, you are welcome! Spread the word about me and my stuff, and we’re even. :-)

  192. Hello Dear!

    I also love your plugin, it’s very useful to me… But now, i need to add its functionality inside a template.php, exactly as Freddy.

    I saw your post and try as you said inside and outside the loop, like this way:

    But it doesn’t work anyway… I need that a lot…

    I’ll be so gratefully if you answer me… and thanks again for your time!

    Shirley.

  193. I’m looking at this code to create some sliding notes, but I too would like to remove your little note. No offence, but it is a distraction for users right in the middle of the content. I am happy to credit your skills, but not there: I’ll do it elsewhere in our site. And I am happy to make a small payment if it can be removed.

  194. Hi Shirley,

    what can I say. If it ain’t working, it ain’t working. The plugin was never meant to be used in another context.

    Sounds like you needed a standalone Sliding Notes edition. How much would such an edition be worth to you?

  195. Hi Noel,

    I think the signature is really unobtrusive in appearance, so to say it would be a “distraction” sounds a bit sanctimonious to me. I understand though that tastes are different, and I appreciate that you offer a compensation if I removed it.

    The point is, the place where the signature is now is the best place for me. If someone likes the Sliding Note, (s)he can see immediately what it is and where to get it. Removing it or moving it to some other place would be a significant devaluation.

    Let me think about it a bit. I’ll contact you.

  196. Hi there…

    I have to join in with the chorus about the signature.

    I think your code is elegant.. the plugin works wonderfully…

    But a page with 10 sliders would contain 10 of your signatures… respectfully you are sending out the wrong message this way as well as it will make people go search for other solutions since nobody would want your “ad” to appear 10 or 15 times on the page. Instead of thinking of you as the coder who made the great slider plugin – you would be the one we installed and had to uninstall.

    Honestly – when I see something that works well – I run to the page source and peek at who wrote it. I’d love to use this plugin.. its very well done. Whats your thoughts on softening the advertisement? I would definitely be looking at the page source on this one….

  197. Hi Mike,

    I appreciate your opinion, but you are apparently a technically versed person who can judge about code elegance and can deal with page source, which the average user cannot.

    Besides, the link will NOT appear “15 times” on a page. Not to the reader, anyway. Sliding Notes are collapsed by default, so in most cases none of the links would be visible. It will only ever appear when a note is clicked open, and that’s usually one at a time.

    Thus I conclude your concern is less about visual disturbance, but about page rank juice. Then you should know that Google counts all links on a page that go to the same target as one single link, so there is no difference whatsoever.

    Finally, holding up your finger and telling me I would loose some of my user base is… well… not really effective. First, you represent a viewpoint of a site owner, not a reader. That puts your statement into a perspective. Second, I used to distribute SN w/o signature for quite a while now, and despite the lots of coding and maintenance work on my side, I can tell you that I benefited from it nearly as much as having no users.

    As I already have said elsewhere, I’m open to any constructive proposal on “softening” the matter that is not to my disadvantage. If you have such a proposal to make, please do. I sure will consider it.

  198. OK… I do have such a proposal. One that will benefit everyone, as well as get you the advertising and marketing exposure that you are looking for.

    1. Offer the “branded” version of the software as you have it now over the Wordpress extension site.

    2. Include a note in the software package that directs anyone who wants an unbranded version to a special landing page on your site – where in order to get the version minus the “signature”, they need to register their email, agree to opt in for future mailings and answer some questions that might identify them as a potential client for your primary paid services.

    3. Start marketing your SEO and custom development services to the list you will now be building.

    You will now have exposed them to a list of your services on your site as well as you can repeat target your marketing in ongoing emails. Everyone wins. Email me if you need more details on how to make this work.

  199. I have had a reader complain that in Safari on Mac OS X (latest version at time of writing), the slider doesn’t work at all. It displays in closed form, but clicking it does not open it up. Perhaps it’s a nested paragraph? Is that the known limitation; wasn’t clear from above comments. Specifically, the first slider on this page is known to not work.

  200. Gravity, it doesn’t work on Firefox either (just checked it), nor on any browser, because it is not a browser issue. I’d say it’s because of your caching system. It seems to prevent jQuery from loading. Perhaps reseting the cache might help.

  201. Mike, wow, that’s a really interesting approach. I emailed you and I’m eagerly awaiting your response. :)

  202. Thanks Hack, I’ll see if I can fix it. W3 Total Cache might be the culprit then.

  203. This looks like such a nifty plugin!

    I’m putting this into my post (visual editor, yes?):
    [slider title="who we are"]test content[/slider]

    I’m getting this when I preview the page:
    who we are»
    test content
    Powered by Hackadelic Sliding Notes 1.6.3

    The title is clickable (as is byline) in that the cursor turns into a pointing finger, but nothing happens. And, the content isn’t even trying to hide…it’s just sitting there. :(

    Source code is:

    who we are»

    test content

    I admit, I am no expert. I only know enough to cause trouble. I added the CSS to the theme stylesheet (haven’t bothered styling it yet, though). I’m not sure what the javascript is all about…I didn’t add any, but I’m seeing it in the source code. Was I supposed to?

    Any help would be appreciated. Thanks!

  204. Josie, that’s interesting. Something like that never happened before, anywhere. Send me an URL where I can check it out, and I’ll see what I can do. (Use my contact form if you don’t want the URL displayed publicly.)

  205. Hi
    I’ve finally come to implement your brilliant plugin to a greater extent – but bumped into a problem. I’ve found a solution (by coincidence), but still: This is funny. Question is if this might be a bug, a plugin conflict or a matter of repeated short codes (or the like).
    Problem:
    After building the whole page a final preview suddenly showed a blank page (causing a slight panic). All code is there, but no content shows when viewing the page.
    Solution:
    Replace normal line breaks ” just before a sliding note short code – with light line breaks ”. Voilà! – content appears.
    Of course…
    I’ve seen Sarah’s question above and also read the debugging post you refered to, – but this is something else.
    I’m running WP284, have many images both in the page and inside the sliding notes, have Shadowbox JS 3003 installed (together with many other plugins…) – but no Shadowbox tags in this page.
    Here’s the short code used: ‘[slider title="Les mer... " hint="Klikk for å lese mer!" type=left-image group=a]Text-text[/slider]
    Any ideas?
    Thanks a lot for a great plugin – and keep up your good work!
    Kjetil

  206. Kjetil, you wrote Replace normal line breaks ” just before a sliding note short code – with light line breaks ”. Voilà! – content appears. Alas, the editor probably ate the tags.

    What exactly do you mean by “normal” vs. “light” line breaks. And are we in the WYSIWYG or the HTML editor?

  207. We’ve done most of the work in Visual mode, but after the problems started we had to finish it using Dreamweaver – a wysiwyg web page/html editor. From there we pasted the code into the wp page in html mode.
    I can’t refer the exact procedure regarding switching between html and visual mode – sorry.
    I should have mentioned that as well, but the visual editor acted strange too. Sometimes it just wouldn’t work. Maybe the switching from visual to html has harmed the code/eaten some tags – right? If so, maybe there’s no problem or conflict with your plugin anyway. (I’ve read several posts about similar visual editor problems in the wp forum in hopes of including a solution to that too, but no luck so far…)
    Thanks,
    Kj
    PS “Normal line breaks”: Return (resulting in a p in the code)
    “Light line breaks”: Shift-Return (resulting in a br in the code)

  208. Nothing is impossible in programming and you know it better than others.
    That’s why I think the “WordPress limitation” explanation you give when saying that it can’t handle nested custom tags is… BS.

    All you have to do is search for ending tags. Once you find one, you search backwards for the starting tag and take it out.

    Is that not achievable? Is that complicated?

    Btw: very nice job so far. I really like your work.

  209. Andrei Gheorghiu, what?!? You obviously don’t know what you are talking about! Either you are not a programmer at all, or you have no clue about WP’s ins and outs. And after telling me “my explanation is BS”, I won’t even bother to provide you any further explanations. Do you own research! (And go insulting someone else!)

  210. Hi Hackadelic,

    I try to use your plugin but don’t succed…but i don’t know why…

    It works with the default theme but not with mine….and I don’t find why…

    could you pls visit my website to say me if you find why it doesn’t work…

    http://aucrea.extradixit.com/?cat=7

    Thanks !

  211. Hi Hackadelic,

    Sorry…I missed one of your recommandation….to put in the footer.php file.

    Thanks for your amazing plugin. It’s very helpfull…

    Respect.

    JB

  212. Hi! I’m trying to implement this plugin into a site I’m building but it seems to be behaving badly, opening & closing the first panel in every transition… please check it out & let me know what you think/how I might be able to fix it?!

    http://www.livewirestudios.com.au/site/?page_id=10

  213. Josh, I see what you mean, but I can’t tell why it happens on your site (and not on others). Sorry.

    If you would like to have professional service and support, feel free to contact me.

  214. POWERFUL, amazing plugin created by you really nice. Its really helpful. Thanks for the post.

  215. Hi, First of all Thanks! for a super plugin! Works very well!

    I would love to use this with net NextGen Gallery plugin!
    What happens now, it’s will just show the line that’s suppose to show the gallery on the page.
    [nggallery id=2]

    Any thoughts on how to do this or is it just too complicated?
    Cheers
    Ben

  216. Ben, use shortcodes=on as described in chapter “Usage”.

  217. Thanks for your answer Hackadelic.
    Sorry for not reading the Usage chapter XD
    Cheers!

  218. Hi & thanks for the plugin. :)

    Hackadelic,
    CSS for open and closed state in the works?

  219. Kate, actually, it’s half way done, but my spare time is so limited that I can only make sporadic progress here. :(

  220. Hi, Hackadelic thanks for your excellent work, your plugin is just what I want.
    Now, I install it , put the CSS in the stylesheet, the button appears in the post but dónt work. Not expand the note.

    Finally I found that the trouble was incompatibiliy with Role Scoper plugin, when I deactivate it Sliding Notes works fine.
    Then I activate Role Scoper again and, the both works!
    After I see that the both works in Firefox, but not in Explorer 7 … Slidin Notes don´t display the note.

    Ihope you understand my english is worst that bad, thank you agian.

  221. Fum, it could be a cache issue. Try reseting your browser cache first. Also, have you read this post?

  222. Hi, yes I had restored the cache browser before.
    Here anything I saw in time between my question and your answer:

    At a time the button that works in Firefox stop working too. ugh…!
    Then I have read about the footer problems and I found a little differents between the footer call you present and that I found in the footer.php of my theme (it is Andreas09 Cyber Press)

    You recommended:

    I found in my archive:

    I changed it as you said, but not solve the problem.

    By the way I read your post about Scriptaculous and the troubles that diferent JQuery librarys may cause.
    As I said in my first consultation the button began not working, but then I have deactivate Role Scoper plugin and SN works fine. After it I reactivate RS, and the both plugins work at the same time. I’m thinking that something happens around this, perhaps not specifically with Role Scoper or not only with it. I try deactivating other plugins without result.
    And in one moment SN began to work again! (With any strange behaviors)
    Is there any way to know what plugins that I´m using d´ont uses the WordPress “built-in” jQuery library, and uses their own version JQuery library?

    Sorry for this large query, I really apreciate your work and your attention, very thanks and greetings.

  223. Fum,

    Is there any way to know what plugins that I´m using d´ont uses the WordPress “built-in” jQuery library, and uses their own version JQuery library?

    Yes, search for “jquery*.js” inside the wp-content/plugins directory. If a plugin includes jQuery, it will have an own copy in its directory. It will probably be named something like “jquery-x.y.z-min.js” (with x.y.z being its version, most likely 1.3.2 or 1.2.6).

  224. Hackadelic:
    I took a look on plugins folders,I dont found any folder Jquery, I found this:

    Cforms II have a folder JS and inside it a file jquery but not a Jquery folder.

    NextGen Gallery have not a folder JQuery but in admin/JS there are:
    jquery.Multifile.js
    jquery.Multifile.pack.js
    jquery.ui.tabs.js
    jquery.ui.tabs.pack.js

    And in admin/Js/Jcrop/Js

    a file: jquery.Jcrop.js

    Deactivating NextGen Gallery affects Sliding Notes but not always, some irregular thing occurs with this.
    Well thats all. Thanks you.

  225. Hi, sorry, I thought you will say me what do you think about this. Is possible for me do something more? O the case need more than could be possible in this way? I´m really interesting in Sliding Notes that do exactly what I want.

    In every case I thank you for all, your excellent works and time.
    Greetings.

  226. Fum, sorry, I’m out of ideas about what could cause your issues. A missing wp_footer() action would still be my best guess, but you said you checked that, so… without a thorough analysis, I can’t tell you much more.

  227. At this time unfortunately I cant ask you for professional service, that would be the best solution. If I find out something about this issue I will publish it here, thanks again.

  228. After I activate the sliding notes plugin, I get this code on the upper right corner of my blog:

    Warning: include(common/xsig.php) [function.include]: failed to open stream: No such file or directory in

    It goes away after I deactivate the plugin. I installed most recent Wordpress script, and am working in Chrome in Windows XP.

  229. Jonathan, that’s an issue that occurs in extremely rare server configurations. You are the 2nd person ever to report it.

    It should be fixed now. Hackadelic Sliding Notes version 1.6.4 will appear on wordpress.org any minute.

  230. Hi -
    Thanks so much for the slick plugin!

    Is it possible to take the little link to connect with your site off? I usually wouldn’t mind it being there as I appreciate the plugin and want to turn people on to your site, but it shows up in a place where I don’t want the viewer to leave my site, it’s part of the order form for my readings that I offer.

    I would be happy to donate in exchange for the link’s removal – just let me know if it’s possible.

    Thanks -
    W

  231. wwwindi, you are “talking turkey”, and you have a fair approach. :-)

    Yes, it will be possible really soon. (I’m setting things up for that right now. If you can’t wait, contact me for a quicker solution.)

Trackbacks/Pingbacks

  1. Sabahdaily.com » Hackadelic Sliding Notes
  2. Getting Started With Sliding Notes And MyCSS In 4 Super-Easy Steps | Hackadelic
  3. W5H » Blog Archive
  4. Wordpress plugins - My Faves!
  5. Hackadelic Sliding Notes Plugin | WordPress Plugins Database - WordPressPluginsDatabase.com
  6. Bill Selak educational technology : (ed)tech (bill)tech podcast
  7. The missing parts of daily journalism | Bryan Murley

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please ignore these 2 fields: