Code

Sliding Post Navigator

Sliding Post Navigator

Nowadays creating a quality posts is difficult job, especially since studies shown that a post’s length has really big impact on the users. So you start creating longer and longer posts, and the reader sometimes gets confused as to which part was this sentece really reffering. What if you have a inside post navigation? For example you want to create a 3000 words post and it is splited into 15 different paragraphs whith their own titles. You could then use Sliding Post Navigator to automatically create quick navigation offering those 15 paragraphs’s titles inside the navigation. Just use heading types for the titles of the paragraphs and set the same heading tags inside the widget’s settings. The best part is the navigation is sticky, so it’s always visible for the reader while reading the long post. He can see how much has read and how much there is to be read, what part of the article is he currently reading and ofcourse he can click on desired item.

Basically slider post navigator is like a navigation for your posts, like the navigation for the website, it’s also helpful and a must for the long or list-like posts.

Sliding Post Navigator is actually a siderbar widget, using jquery to unstick and stick to the window of the reader, so he can see all the different areas of the posts. Now best thing is, if you activate it and the post doesn’t have the required tags it will not show up. Meaning if you have set up the widget to create navigation using headin3 titles and your post have it it will create the navigation, but if you have some post that don’t have heading 3 tags insite its content the widget will not show bothering the reader.

The widget offers animated and statick effect, while scrolling, and it’s really easy to configurate it. You can take a look at the Live Preview.


Quick startup guide
1.After downloading the file, unzip it and upload the folder “sliding-post-navigator” to your plugins directory
2.Login with admin details and go to Admin area > Plugins, locate the Sliding post navigator and click Activate
3.Go to Appearance > Widgets and activate the Sliding post navigator widget at the bottom position of your sidebar, custumize the widget appearance and chose which tag should be used as a anchor point and save the settings
4.Make sure you have atleast 1 post with the chosen heading tag (for instance you have chosen heading tag h3, make sure your post has atleast 1 of those tags). View the post with the specified tag and you will see the widget working
5.If your theme has sticky header, you can set the widget top position so it would not interfere with the header, go to Admin area > Appearance > Widgets and locate the widget at the sidebar, click the pointing down arrow to open the widget’s settings and click again on the Appearance tab inside the widget box, there you should see field for the Top box position – enter values in px, for instance 18 and save the settings


Features
easy to install
ready to use out of the box
compatible with all of the major browsers (IE,CHROME,OPERA,FIREFOX)
incredible animated effects for scrolling
easily integrates with your theme
works with most properly codded themes
chose which heading tag should be considered as navigation point: h1;h2;h3;h4;h5;h6
chose only specific category/ies for widget to be shown
ability to customize the look:position;width;padding;font size;background;font color;hover color;border color;adnimation speed;
choose between6 pre-defined list images;
psd file for list images included so that you can shape them in any way you want
color picker included for easier custumization to all the HEX input fields
automatically shows list image when chosing it in widget settings
translation ready (english and bulgarian included)





== Changelog

03.05.2014 [1.97]
Fixed if specific category check and widget is set to be visible in both Post and Pages it will show up on every page and only in posts with specified categories
02.05.2014 [1.96]
widget is now working with posts and pages (available to choose from widget settings window)

06.04.2014 [1.95]
added specific category/ies choice for widget to be shown
fixed minor bug on first plugin installation

31.03.2014 [1.94]
fixed if background is set to transparent, its set to white on mobile view;
removed arrow scroll and added facebooklike scroll on mobile view, which is scrollable witht touch under any mobile device;
added new FLAT design;
added styling the margin between list elements;
added styling the hover border color;

30.03.2014 [1.93] added custom div with class for anchor;

ability to choose heading6 not only heading 1,2,3,4,5,6

fixed changing bullet image while selecting it;

fixed animation even if top pos is 0;

added auto responsive to height of the browser scroll of the list;

fixed deactivation hook;

fixed minor bug for widget instance number;



23.03.2014 [1.92]
mobile devices compatible
currently reading element highlighting

21.03.2014 [1.91]
hide list image by choice
automatically and fully hides if current post doesn’t have the chosen tags
animated or static sliding effect
background option could be transparent if field is left empty
cleans up any data used by the widget on widget deactivation/uninstall

by
by
by
by
by
by