Sliding Notes
After 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 than 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!
[toc]
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:
- It did not cover paragraphs with styles properly.
- 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.
- 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. [↩]
- 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. [↩]
- This was also the goal of the 1.1 series, alas… [↩]
- I first thought it’s a TinyMCE behaviour, but it turned out that it’s a WordPress filter that causes the effect. [↩]
- This is a a WP-Footnotes coexistence test,» examine the footnote mark above. [↩]
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.
It works correctly when using the standard WP editor. I’ve installed and used the FolioPress fckeditor plugin and it works as it should as well, so I presume this is a problem Dean’s editor has when processing quoted strings.
Love this plugin, thank you! I’m using it for inline editorial commentary when reviewing articles (couldn’t find a better alternative) and I’m sure it will come in handy for real post content soon too.
Haber, have you check out yet the successor plugin, Smart Sliding Notes?
I’ve tried to go through all of the questions and your feedback (it hurts my head after awhile) and I just want to clarify the existing situation. The plugin cannot be used in a theme’s header.php or sidebar.php. It only works within posts and pages. Is that correct?
Also, this is probably one of the coolest plugins I’ve ever found. It will (I believe) allow me to create websites that do not require endless scrolling. So much information can be offered to the visitor without ever leaving the page. Yet, that same “information-heavy” page remains streamlined and elegant.
By the way, do the search engine bots click through these links and read the embedded text?
Sklep, if you think this plugin is cool, you should definitely give its successor a shot: Smart Sliding Notes is a mature, nearly universal WordPress toggle plugin; It uniformly handles almost any type of toggled content, and supports skinnable and nested (!) tabs, accordions, spoilers, of course, sliding notes, and even call-out boxes, out of the box.
Hi there! I was going to use this plugin – it seems really great! BUT.. the “Powered by..” credits in the slider put me off.
It’s fine to advertise your links and such in the dashboard, but having them display on my site when I’m using the plugin, without the option to remove them, made me delete this plugin and find something else instead.
Just a thought, perhaps have the option to exclude your credit links from the slider.
Bonita, as I already explained elsewhere, the credits is like my signature. Exactly as artists won’t be willing to remove their signature from their pictures (unless payed well to do so), I’m utterly unreceptive to requests to make it easy to remove it.
Having said that, there is a PRO version that does provide the option to remove the credits, Smart Sliding Notes, and costs less than you spent on a single Friday night. And if you don’t want to spend anything, the Free Edition’s credits are designed to blend in so neatly that they shouldn’t be represent any esthetic issue whatsoever.
I apologize if I havent’ looked in the right spot, but I’m looking into using Hackadelic Sliding Notes, but I am NOT using wordpress. Just straight HTML5.
Is there somewhere that I can find the libraries needed? or instructions?
If not, is there another option you might know of?
thank you!
One option is, if you have the budget, you can have me implemented for you. 😉
Hi there!
For now I’m still using your excellent, free Sliding Notes 1.6.5.
Little introduction first: A few days ago I planned to set up a new page which uses a shortcode inside the slider shortcode using “shortcodes=on”. Guess what, it didn’t work. The slider code was generated without the note.
Fortunately after countless hours of playing around with the priority of “add_filter()” etc. I found a solution that seems to work: “hackadelic-sliders.php” -> “function preProcessContent()” (line 69) -> remove of “$this->notes = ”;”
Question: Is it save to remove the reset of notes for this unit (in line 72)? Will my other slider normal shortcodes work?
Thanks for your help,
Rumli
This code base is not being developed any longer, so I strongly recommend you give Smart Sliding Notes a try. (There’s a free edition of it, too.)
After several years experience with such issues, I can safely tell the problem is most likely not in my plugin, but in some conflicting code elsewhere.
As for you question: Not sure what you mean by “for this unit”, but generally, of course it is NOT SAFE to remove any code.
If it was safe to remove some code, that would mean the code in question does nothing and is thus superfluous. That in turn would mean I don’t know my craft as well as I say I do, which would make me a conman and a liar.
Are you asking me if I’m a conman and a liar?
…
Yeah, I know you’re not. Just kidding. 😉
Oh well, I just realized that removing that line of code isn’t all I need to do. I also need to embed the the other shortcode on the same layer of Sliding Notes at least once! Like this:
“[slider][othershortcode][/slider]
[slider][othershortcode][/slider]
Cool other text and html…
[othershortcode]”
If the last line isn’t included my fix of removing the “notes=”” doesn’t work…
Hi,
9 W3C errors with all version of Hackadelic Sliding Notes.
I can’t use it if you do not resolve this issue!!!
Francesco.
In fact the errors are not with Sliding Notes but with what content you put inside. W3C is pretty anal on containment rules, and WordPress has it’s own constrains. (I’ve written elsewhere about this.) Sliding Notes do the best they can to correctly render ANY content that you put inside, such that it looks good on screen, for the actual visitors on which your website success depends.
This means that I can’t resolve this “issue”. Hell it is not even entirely my issue! It’s your content, too.
Now if this means I won’t have you as a user… then I can only hope one day I will learn to live with that. 😉
BTW, I recommend this reading on usage of multiple exclamation marks. 😉
Hey Hackadelic,
First, LOVE the plugin, made a donation…great work.
I have a problem with the latest release (1.6.5) and WP 3.1.4 on the Thesis Theme (1.6). The only thing that’s changed was that I upgraded the core WP files from 3.0 to 3.1.4. I’ve tried pulling out all the custom css and I’ve tried re-installing the plugin to no avail. I’ve even checked and made sure the javascript existed and it seems to be there.
The specific page where I’m having the problem is here:
http://macocnj.com/membership/resource-links/
I’ve even tried creating a blank page with only a single note on it to no avail.
I’m out of ideas on what to check…any troubleshooting suggestions?
Mariano, if the upgrade from WP 3.0 was the only change, then I’m out of ideas myself. On the other hand WP 3.1 has messed up quite some stuff (that got mostly unnoticed in the usual upgrade euphoria), so I’m not that surprised… unfortunately.
Re donation: I haven’t received any recently. Sure there’s no mistake?
Apologies! Totally thought I had given something but when I looked in my records I saw that I in fact hadn’t. Rectified that tonight…thanks for your efforts.
If you come up with any ideas for my problem would appreciate the feedback!
Thanks!
Thank you, Mariano. Very much appreciated!
Okay, so…super-weird.
I was playing around with the site tonight and I decided to de-activate all plugins for the heck of it and re-activate them one by one. I got to the end of the list and the notes started working again. No *new* plugins, and all the same plugins were activated as before.
I dunno why, but it seems to have kicked whatever bug was in there out. I seem to be good to go now!
That makes sense to me. Such bugs are mostly conflicts with other plugins. I believe it was the activation order that made the difference.
Just like I thought, the code didn’t show, so i took out the left and right arrows like below
span style=”font-size: 14px; background: #FFFFC1; font-weight: bold;”>[slider title=" Some button wording here"]</span
Your note message here. Can be styled from your tool bar as normal.
/slider
I’m crazy about this plugin!
I’m new to WordPress, and noticed right off that it doesn’t have a toolbar option for making a background color for text. If it has, I haven’t found it yet. So, after a lot of trial an error for changing the background color on the button, and putting it in bold text, I found the below code works well.
Trying to change text color, or set it to bold from the tool bar had erroneous results with the button truncating strangely. However all the tool bar settings would work for styling in the drop down message part.
Change button background color with bold text: ( I hope this code displays in this window)
[slider title=" Some button wording here"]
Your note message here. Can be styled from your tool bar as normal.
I changed the hover color, border color, etc., in the following code that I pasted in the bottom of my theme’s style sheet css page. Don’t remember where I found this code, might have already been there for all I know.
.hackadelic-sliderPanel {
border: 4px solid #800000;
padding: 15px;
-moz-border-radius: 1em; -webkit-border-radius: 1em;
}
a.hackadelic-sliderButton {
border: 2px solid darkred;
color: #B3960E;
padding: 0 3px;
-moz-border-radius: 1em; -webkit-border-radius: 1em;
}
a.hackadelic-sliderButton:hover {
border: 4px solid #800000;
background-color: #00Ffff;
}
.entry .hackadelic-sliderPanel {
background-color: #fcfcfc;
}
.textwidget .hackadelic-sliderButton {
display: block;
text-align: center;
margin: .5em;
}
.textwidget .hackadelic-sliderPanel {
background-color: #F0F0E0;
I thought it might be nice to have a close-it-back-up button at the bottom of the note, so they wouldn’t have to scroll way back to the top (on a really long note) and do it there if they wanted.
Hi Hackadelic,
Great work, I’m wondering if there’s a way to style the hackadelic-sliderButton when its active or open, I’d like to put a background-color on it only when opened. Do you know of a way I can do that?
Thanks
Mike
Mike, have a look here: Sync Button And Note States.
Hi Hackadelic.
Thanks for such a nice plugin.
It have a conflict with the Transpoosh Translation, when i enter in the traducted page the Plugin doesn’t slide if i go to the main page it works, but in the primary language.
Do you know any solution for this?
Best regards,
Bruno
Bruno, sorry, I suppose it could be something related to filter priorities, but I’m not sure.
Hello, does this work on the latest version of WordPress? I’m planning to create a small website for my graphic design project in the university and I want to implement this plug-in. Thanks.
Janet T., yes, it does.
Hi Hackadelic,
Congrats for your plugin, even if i can’t make it work for the moment, it doesn’t slide.
The plugin is correctly installed, with a my.css set
For some reasons, when i look forward in the generated HTML code, the span tag that should be filled with the content remains empty.
Here is the code i inserted into my page
[slider title="Etude de votre projet" group="accordion-1"]a[/slider]
[slider title="Proposition d'une solution sur mesure" group="accordion-1"]blablablza[/slider]
[slider title="Redaction du cahier des charges" group="accordion-1"]blablablza[/slider]
[slider title="Developpement de pistes graphiques" group="accordion-1"]blablablza[/slider]
[slider title="Integration dans une solution CMS" group="accordion-1"]blablablza[/slider]
[slider title="Recettage et mise en ligne" group="accordion-1"]blablablza[/slider]
Any idea ?
Septentrio, looks like a perfectly valid shortcode. I supporse it’ll be a conflict with your theme or another plugin. That’s all I can tell for now.
Please ignore the comment about the videos on: http://www.curtisgroup.com/guru-on-your-website-and-in-your-practice/ being added at the bottom. As I read further in your website, you’ve made it clear that only YouTube videos will work in your plugin. Is that correct?
Mark, I’ve checked out the page you appointed as problematic, but it seems you’ve removed the sliding notes around the videos.
Thanks for compliments. You are right, and that’s one of the reasons I created the plugin – to be able to put more content in less space, while keeping it nicely accessible to readers. “Information at your fingertips” taken to a wordpress blog. 🙂
And yes, search engines see all of the note content. 🙂
Sliding Notes work in any “user-level” content: Posts, pages, text widgets. They don’t work in “theme-level” content – content that is contained in a theme template directly. In future I will offer an API for theme developers, but right now, there is none.
Regarding your question about whether SN works with YouTube videos only: The answer is no. It works potentially with any video service, but services that use javascript to embed their videos may cause problems. YouTube has proven to work very nicely with the plugin, so it’s a safe choice.
I’ve tried to go through all of the questions and your feedback (it hurts my head after awhile) and I just want to clarify the existing situation. The plugin cannot be used in a theme’s header.php or sidebar.php. It only works within posts and pages. Is that correct?
Also, this is probably one of the coolest plugins I’ve ever found. It will (I believe) allow me to create websites that do not require endless scrolling. So much information can be offered to the visitor without ever leaving the page. Yet, that same “information-heavy” page remains streamlined and elegant.
By the way, do the search engine bots click through these links and read the embedded text?
I am using your plugin on our website, http://www.CurtisGroup.com, and on one page it works great and on another there’s a problem. The page that works great is at: http://www.curtisgroup.com/dental-tv-ads/ and the one with the problem is at: http://www.curtisgroup.com/guru-on-your-website-and-in-your-practice/
The second page loads up all of the actual videos under the list of sliding titles. They’re not called out to be there. Any idea why this happens?
Nice idea an interface. May use it in my blogs. Can the SERPS read everything inside?
Do I sense spam behind “Larry’s” comment, or is it paranoia? I’ll answer it anyway:
Yes, search engines can read everything inside.
Hi there,
at first thanks for your plugin – I installed it and it works like a charm!
Now the problem: When I enable another plugin called Embedder no content is displayed. I can see the code being included at the bottom but the content itself is missing…is this a bug?
Rumli, there may be a conflict between the plugins, though I don’t know why there should be one. I read Embedder is using an own shortcode parser, so there might be a bug in that perhaps. I’m interested in this case though, so I will experiment with Embedder as I find the time.
I’m building a customer site which has several contact forms throughout the site (for different departments and facilities). I was wanting to visually hide the forms to be revealed only if someone was going to make contact (eg. click to reveal contact form).
I had originally thought that they would need the extensive options available in cFormsII… as it turns out they don’t. And since there is no way to embed cForms with traditional shortcode in square brackets I have decided to look for a different form plugin that does utilize the traditional shortcode placement, so that I can place them inside your hide/reveal sliding notes.
I have used your sliding notes many times and never had any trouble with placing other shortcode elements inside them. This is the first time anything had not worked properly, but you’ve helped me to realize why it wasn’t working (ie. shortcode not in traditional brackets).
Thank you very much for your kind reply 🙂
Your sliding notes plugin is awesome!
SN not work in WP 3.02?
Samax, of course it does. This site runs on WP 3.0.2 (and soon on 3.0.3).
Is there any way to use this with cFormsII please? I have tried the shortcodes=on and this does not work. The cForms short code is like this
<!--cforms name="Privacy"-->. Is the problem that cforms shortcode is not in brackets? Thank you for any help you can provide towards a solution.Leopard-Lady, you provided too little information. Where/how exactly do you intend to use the short code with cforms?
BTW, a shortcode in WP sense is always in square brackets. But that cannot really be the problem.
nevermind, it seems to be a finch due to a frontend edit plugin.
it seems don’t work with chinese words.(UTF-8)
Yes I do. Well I was embedding a posting board into the sliding note. Keeping the posting board aligned right and the button aligned right. I had a problem in Safari for some reason that having the button float right kept the button open once it was initiated. So I took out the float and positioned it by negative margins. Now once it’s clicked the button itself bounces upward as the note slides down but its resting place always comes back to normal, and the note closes.
Hey I have need of using the note outside of post/page and widgets. I’ve looked at add_filter() and do_shortcode(). Still not sure where to add it, the sliding note will physically be in my header.php beneath the .
Thank you.
Justing, thanks for sharing.
Unfortunately, SN cannot be safely used in theme (yet).
I Found that the contents of the sliders show up in my feed below the article containing them. Can this be avoided? For an example please check out the feed of the site I entered when commenting here. The last article about adding recipes to your blog has a couple of sliders…
Ovidiu, that cannot be avoided at this moment. The reasons are twofold:
1. SN were originally meant as footnote replacements, and in context where JavaScript is unavailable (like feeds), they naturally appear at the end, as footnotes do.
2. It turned out that a smooth implementation cannot be guaranteed if notes are stored in the HTML where they are defined (i.e. where the shortcode stands). This has something to do with W3C rules and how browsers implement them. Bottom line is: If implemented any other way, cross-browser problems arise.
However, I believe that your request is use-case specific. If you would share your use case, I might be able to come up with an idea how to smoothly cover it. 🙂
Thanks for the Slides. It was very usefull. i will donate something for you 🙂
Scratch that, I found a work around. Thanks!
Justin, don’t you want to share you workaround with us?
I don’t know where to look since it works in every other browser. Any resources that you think would help point me in the right direction?
In safari, my slider “Needs of the community post board” opens but won’t close. What more info would you need to help me?
Justin, I can’t think of anything why a SN won’t close other than a JS exception thrown in between, and that is something that may well stem from any other code on the page. I’m pretty sure it’s not a bug in SN.
How well does Sliding Notes plug-in for WordPress perform in regards to SEO?
I’m working on a redesign website for Orbit Studio and what to use The Sliding Note plug-in for WP. I just don’t know how well it performs with Google Search Engines.
Does anybody know?
kind regards,
Anne
Anne, Sliding Notes has no features that would harm any SEO factors, and good content in Sliding Notes will equally improve your keyword ranking as anywhere else.
WoooW! Very usefull and great plugin!
Thank you a lot!
Hoping to use this plugin on my next project.
Was wondering if there’s a way you could support nesting by using a slightly different shortcode for the inside nested item.
The Special Text Boxes plugin uses this methodology and it works well.
Special Text Boxes site:
http://www.simplelib.com/?p=11
Just hoping…
Hey MileHighTechGuy, that’s a cool hint. Thanks man. I’ll see to incorporate that into the “Next Generation” of Sliding Notes. 🙂
Hi – There is a strange problem where if there are more than 24 sliders on a page, all the post content disappears from the page in some browsers – that is, literally, the post content is not delivered by WordPress, but the Hackadelic code is still inserted and all the headers etc. are still there. Particularly IE and Mozilla on the PC. This is with WP 3.01. This was on a critical page, so I had to work around it. If you need help debugging it, I could build a test page for you.
.phil
Phil van Allen, I can imagine the “next generation” of sliding notes that is in the do will have all those little diseases fixed already.
Nice plugin, it’s very useful.
I have a question or a feature request: is there a way to integrate it into the theme’s files? It would be a good idea to have a function that has the same parameters as shortcode has and displays the html code in the pages.
Thanks!
Conualfy, not with the current version, but I have juggled around with ideas for what a good API to Sliding Notes I could provide. Let’s see how that turns out.
Doug,
Can you tell what you did to get rid of the +- signs. Love the plug and I’m trying to replace the button text with a 16x100px image and I get the same “+_” symbols where the button should be.
Mr. Hackadelic, could you give me a simple example of the complete inline code for inserting an image? Maybe I’m not adding the bstyle part correctly?
Thanks,
waahoo, pehaps my accordion menu tutorial would help.
thank you for this informative website
Well, posting these things in blog comments is always tricky because of the encoding on the front-end. If you want a precise bug report, please email me at dave-AT-boostpro.com
Hey, love this plugin, but I think I found a bug. If I embed a greater-than symbol inside an HTML comment in a slider, it messes up the following slider:
[slider] a comment [/slider] [slider]no comment here[/slider]
Dave, thanks for the hint with the HTML comment.
Hello,
I’m testing your plugin because its realy what i was searching for to integrate into a custom site.
For your Info:
With WP 3.0.1 – so far no problems detected.
Browser:
OK! with firefox 3.6, safari, chrome, opera
IE 8 Problem:
it does not show the whole text – just 3 lines of it.
Any idea why?
Question:
As it will be for a customer site I’m always donating for plugins, but doing this I want to remove any advertising stuff etc. – but,
every author will be mentioned in the “credit” menue with link.
So, after donating, you give me instructions on how to remove
ads within the plugin (like the one showing up at the bottom of slider)?
Thanks for quick reply!
Best regards from Austria
Guenter
Hello Guenter, I’m puzzled with your IE8 issue – I’m watching this page in IE8 right now and I have no issues.
I have emailed you on the credits topic already a week ago.
There seems to be a problem when using Dean’s fckeditor plugin instead of the standard WP editor with Sliding Notes.
When using Dean’s editor, the button title ignores quotes and delimits by spaces. For Example ‘title=”Slider Button Title”‘ displays on the web page as ‘”Slider>>’ .
It works correctly when using the standard WP editor. I’ve installed and used the FolioPress fckeditor plugin and it works as it should as well, so I presume this is a problem Dean’s editor has when processing quoted strings.
I’ll contact Dean with the issue, but I was wondering it there is a work around in the mean time, besides using the standard editor, that is.
DixieGeek, thanks for the hint. No, there is no workaround, and there can’t be one within Sliding Notes, as their code and the post editor code are invoked at disjunct times and contexts.
Ignore earlier comment, figured it out.
Sorry.
Hi,
I love the plugin — it’s so simple and is working really well for what I want to do.
The one issue I’m having is when I try to change the font size of the note “title”, where once published is replaced by +/- »
What am I doing wrong?
Thanks!!! 🙂
Love this plugin, thank you! I’m using it for inline editorial commentary when reviewing articles (couldn’t find a better alternative) and I’m sure it will come in handy for real post content soon too.
Just noticed that if I begin a post with a slider and try to preview, it seems everything is hidden or missing. If I move that slider a few words into the article, all is well.
Dave,
I am wondering about the issue. I think I already had such cases with no issues, but I’ll check it out.
Cool plugin.
I’m not to keen on the signature though, luckily it is easy to remove.
(I reckon that since it is GPL I am allowed to modify the code)
Thanks!
Wim, I can’t stop that from happening, though I do consider it unfair use.
how to change title color in your slider notes plug in
Sujit, read the configuration instructions.
Oups, forgot to put the link of my page with defect dropdowns and working sliders page: http://eskermedia.com/?p=1025
The theme’s menu (won’t display dropdowns) of the beautiful theme “DynamiX” seems not to be compatible with your also beautiful work on that plugin, and I find it sad. http://themeforest.net/item/dynamix-premium-wordpress-theme/113901
Any clue what is wrong?
Danny, sorry, that’s a commercial theme, and I can’t test against commercial themes. (I’d had to pay for every theme I test against. No thanks. ;-))
Yes that would be perfect.
Hey Hackadelic,
I was thinking of some sort of anchor and “a” name situation. i have done this before with an accordion, but it was out side of wordpress.
Regards
Luke
Hi Luke,
so you imagine that when going to example.com/my-post#my-note would not only jump to where the note is, but also expand the note, right?
Gotta think about it.