Version Description
- Introduced a new/better method for making elements sticky
- Added Legacy Mode (for those who want to continue the old method)
- Split up settings screen in Basic and Advanced
- Debug mode uses uncompressed JS file for easier remote debugging
Download this release
Release Info
Developer | senff |
Plugin | Sticky Menu (or Anything!) on Scroll |
Version | 2.0 |
Comparing to | |
See all releases |
Code changes from version 1.3.1 to 2.0
- README.md +51 -25
- assets/css/sticky-anything-admin.css +23 -6
- assets/faq.php +29 -25
- assets/js/jq-sticky-anything.js +182 -23
- assets/js/jq-sticky-anything.min.js +4 -2
- assets/js/stickThis.js +4 -1
- assets/js/sticky-anything-admin.js +46 -17
- assets/plugin-info.php +4 -3
- assets/screenshots/screenshot-1.png +0 -0
- assets/screenshots/screenshot-2.png +0 -0
- readme.txt +52 -26
- sticky-menu-or-anything.php +89 -27
README.md
CHANGED
@@ -5,7 +5,7 @@
|
|
5 |
* Plugin URI: http://www.senff.com/plugins/sticky-anything-wp
|
6 |
* Requires at least: 3.6
|
7 |
* Tested up to: 4.5
|
8 |
-
* Stable tag:
|
9 |
* License: GPLv2 or later
|
10 |
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
11 |
|
@@ -27,7 +27,8 @@ A little bit of basic HTML/CSS knowledge is required. You just need to know how
|
|
27 |
* **Push-up element**: optionally, you can pick any other element lower on the page that will push the sticky element up again (for example a sidebar widget).
|
28 |
* **Admin Bar aware**: checks if the current user has an Admin Toolbar at the top of the page. If it has, the sticky element will not obscure it (or be obscured by it).
|
29 |
* **Z-index**: in case there are other elements on the page that obscure or peek through your sticky element, you can add a Z-index easily.
|
30 |
-
* **
|
|
|
31 |
* **Debug Mode:** find out possible reasons why your element doesn't stick by switching on Debug Mode, and error messages will appear in your browser's console.
|
32 |
|
33 |
|
@@ -42,58 +43,77 @@ A little bit of basic HTML/CSS knowledge is required. You just need to know how
|
|
42 |
## Frequently Asked Questions
|
43 |
|
44 |
### I selected a class/ID in the settings screen, but the element doesn't stick when I scroll down. Why not?
|
45 |
-
|
46 |
|
47 |
-
###
|
48 |
-
|
49 |
|
50 |
-
###
|
51 |
-
|
52 |
|
53 |
-
###
|
54 |
-
This
|
55 |
-
There is an alternative workaround however. According to reports from users who had this issue, a plugin called "Page Scroll To ID" (available in the WordPress.org plugin repo) is a worthy alternative to Easy Smooth Scroll Links and works with the Sticky Anything plugin.
|
56 |
-
|
57 |
-
### Users who are logged in to my site have a black Administrator Toolbar at the top of the screen, which would hide my sticky element when it's at the top of the screen. How can I fix that?
|
58 |
-
Check the "Consider Administrator Toolbar" checkbox in the plugin's settings. With this setting on, your sticky element will be placed a little lower if there's an Administrator Toolbar present on the page.
|
59 |
|
60 |
-
###
|
61 |
-
|
62 |
|
63 |
### Still doesn't work. What could be wrong?
|
64 |
-
Check the "Debug Mode" checkbox in the plugin's settings. Reload the page and you may see errors in your browser's console window. If you've used a selector that
|
65 |
|
66 |
### Is it possible to have multiple sticky elements?
|
67 |
-
The current version only allows one sticky element
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
68 |
|
69 |
### What is this Dynamic Mode thing exactly?
|
70 |
-
|
71 |
|
72 |
-
|
73 |
|
74 |
The original element always stays where it originally is on the page, while the cloned element is always at the top of the browser viewport screen. However, you will never see them both at the same time; depending on your scroll position, it always just shows either one or the other.
|
75 |
|
76 |
-
In the original plugin version, the clone would be created right when you load the page. Then when you would scroll down, it would become visible (and stick at the top) while the original element would disappear.
|
|
|
|
|
77 |
|
78 |
-
|
79 |
|
80 |
-
|
81 |
|
82 |
-
|
83 |
|
84 |
Phew!
|
85 |
|
86 |
### I'll need more help please!
|
87 |
-
|
88 |
|
89 |
|
90 |
## Screenshots
|
91 |
|
92 |
-
1.
|
|
|
93 |
|
94 |
|
95 |
## Changelog
|
96 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
97 |
### 1.3.1
|
98 |
* Minor bug fix for push-up element
|
99 |
|
@@ -137,6 +157,12 @@ The plugin's own page can be found [here](http://www.senff.com/plugins/sticky-an
|
|
137 |
|
138 |
## Upgrade Notice
|
139 |
|
|
|
|
|
|
|
|
|
|
|
|
|
140 |
### 1.3.1
|
141 |
* Minor bug fix for push-up element
|
142 |
|
5 |
* Plugin URI: http://www.senff.com/plugins/sticky-anything-wp
|
6 |
* Requires at least: 3.6
|
7 |
* Tested up to: 4.5
|
8 |
+
* Stable tag: 2.0
|
9 |
* License: GPLv2 or later
|
10 |
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
11 |
|
27 |
* **Push-up element**: optionally, you can pick any other element lower on the page that will push the sticky element up again (for example a sidebar widget).
|
28 |
* **Admin Bar aware**: checks if the current user has an Admin Toolbar at the top of the page. If it has, the sticky element will not obscure it (or be obscured by it).
|
29 |
* **Z-index**: in case there are other elements on the page that obscure or peek through your sticky element, you can add a Z-index easily.
|
30 |
+
* **Legacy Mode**: in 2.0, a new method of making things sticky was introduced. In Legacy Mode, the old method will be used. See FAQ for details.
|
31 |
+
* **Dynamic Mode**: some issues that frequently appear in responsive themes have been address by adding a Dynamic Mode (Legacy Mode only). See FAQ for details.
|
32 |
* **Debug Mode:** find out possible reasons why your element doesn't stick by switching on Debug Mode, and error messages will appear in your browser's console.
|
33 |
|
34 |
|
43 |
## Frequently Asked Questions
|
44 |
|
45 |
### I selected a class/ID in the settings screen, but the element doesn't stick when I scroll down. Why not?
|
46 |
+
First, make sure that if you select the element by its classname, it is preceded by a dot (e.g. ".main-menu"), and if you select it by its ID, that it's preceded by a pound/hash/number sign (e.g. "#main-menu"). Also, make sure there is only ONE element on the page with the selector you're using. If there is none, or more than one element that matches your selector, nothing will happen.
|
47 |
|
48 |
+
### Once the element becomes sticky, it's not positioned/sized properly at all.
|
49 |
+
There are situations when this happens, especially when the original element has specific properties that are specifically used to manipulate its location and/or size. Things like negative margins, absolute positioning or left/top values on the original element can have undesired effects when the element becomes sticky. Another possible reason is if the original element has "!important" applied to some of its CSS properties. If possible, try to avoid that. Also, inline elements might not get the desired results. If that happens, try using the plugin in Legacy Mode (see below).
|
50 |
|
51 |
+
### Once the element becomes sticky, there's a brief moment where you see it twice.
|
52 |
+
If you're using the plugin in Legacy Mode (see below), this happens when the sticky element (or any of its contents) has a CSS transition applied to it. Because the original element becomes invisible (and a cloned copy of it becomes visible), the visible-to-invisible status change will take place with a transition (ie. not instantly). Either remove any of the transitions the element has, or try disabling the Legacy Mode.
|
53 |
|
54 |
+
### My menu sticks, but it doesn't open on the Responsive theme when it's sticky.
|
55 |
+
This was a bug in pre-2.0 versions, and an incompatibility with the theme. It has been fixed in 2.0, but in Legacy Mode, this bug is still present. If you need to enable Legacy Mode for some reason, it would be better to turn off stickiness for the mobile menu (set "Do not stick element when screen smaller than:" to 651 pixels).
|
|
|
|
|
|
|
|
|
56 |
|
57 |
+
### I have another plugin called Easy Smooth Scroll Links, but once my menu becomes sticky, that one doesn't work anymore.
|
58 |
+
This was a bug in pre-2.0 versions, and an incompatibility with the plugin. It has been fixed in 2.0, but in Legacy Mode, this bug is still present. If you need Legacy Mode enabled for some reason, there is no fix for this bug, however there is an alternative workaround. According to reports from users who had this issue, a plugin called Page Scroll To ID is a worthy alternative to Easy Smooth Scroll Links and works with the Sticky Anything plugin in Legacy Mode.
|
59 |
|
60 |
### Still doesn't work. What could be wrong?
|
61 |
+
Check the "Debug Mode" checkbox in the plugin's settings. Reload the page and you may see errors in your browser's console window. If you've used a selector that doesn't exist, OR there are more of them on the page, you will be notified of that in the console.
|
62 |
|
63 |
### Is it possible to have multiple sticky elements?
|
64 |
+
The current version only allows one sticky element, but this functionality will be implemented in the next major version. No expected release date, though.
|
65 |
+
|
66 |
+
### What is Legacy Mode? Should I use it?
|
67 |
+
In version 2.0 of the plugin, a new/better method for making elements sticky was introduced. Before this, a sticky element would essentially be a cloned copy of the original element. Now, the element itself becomes sticky and doesn't use copying and cloning anymore, which solves a lot of issues.
|
68 |
+
|
69 |
+
So, should you use it or not? Well, if you upgraded this plugin from an earlier version, Legacy Mode will be turned ON by default, because chances are that the old method worked perfectly fine for your site. If that's the case, there is not really a need to use the new method and you can just continue using the old, classic method. If it ain't broke, don't fix it, right?
|
70 |
+
|
71 |
+
Having said that, it's worth checking if your element works just as well with Legacy Mode turned OFF, since this is the "better" method. Just give it a quick try. If it doesn't work, you can always just go back and enable it again.
|
72 |
+
|
73 |
+
NOTE: new installs of the plugin will have the Legacy Mode turned off by default. Only UPGRADES from 1.4 (or before) should have it turned on by default.
|
74 |
|
75 |
### What is this Dynamic Mode thing exactly?
|
76 |
+
This mode is only available in Legacy Mode, and to properly explain this, we'll need to go a little deeper in the plugin's functionality. So bear with me...
|
77 |
|
78 |
+
In Legacy Mode, when an element becomes sticky at the top of the page (and keeps its place regardless of the scrolling), it's actually not the element itself you see, but a cloned copy of it, while the actuak original element is out of view and invisible.
|
79 |
|
80 |
The original element always stays where it originally is on the page, while the cloned element is always at the top of the browser viewport screen. However, you will never see them both at the same time; depending on your scroll position, it always just shows either one or the other.
|
81 |
|
82 |
+
In the original plugin version, the clone would be created right the moment when you load the page (but not visible right away). Then when you would scroll down, it would become visible (and stick at the top), while the original element would disappear from view.
|
83 |
+
|
84 |
+
However, some themes use JavaScript to dynamically create elements (menus, mostly) for mobile sites. With this method, a menu doesn't exist in the HTML source code when you load the page, but is created some time after the page is fully loaded -- in many cases, these menus would just be generated ONLY when the screen is more (or less) than a certain specific width. With the original version of the plugin, the problem would be that the original element (that you want to make sticky) may not have been fully created upon page load, so the clone would also not be fully functional.
|
85 |
|
86 |
+
Enter Dynamic Mode. Now, a clone of the element is not created on page load -- instead, it's only created when the user scrolls and hits the "sticky" point. This ensures that the cloned element is an actual 1-on-1 copy of what the original element consists of at that specific point in time (and not at the "page is loaded" point, which may be different if the element was altered since).
|
87 |
|
88 |
+
Why don't we use Dynamic Mode all the time then? This has to do with the fact that other plugins initialize themselves on page load and may need the full markup (including the cloned element) at that point. In Dynamic Mode, there is no clone available yet on page load, so that could cause an issue if that other plugin is looking for an element that doesn't exist yet.
|
89 |
|
90 |
+
(This may all sound terribly confusing. And it is! So, much work was done to fix this nonsense: since v2.0 of the plugin, a whole different method is being used to make elements sticky, and Dynamic Mode is not even an issue anymore.)
|
91 |
|
92 |
Phew!
|
93 |
|
94 |
### I'll need more help please!
|
95 |
+
Please go to the plugin's [support forum on WordPress.org](https://wordpress.org/support/plugin/sticky-menu-or-anything-on-scroll) and post a message (include a link to your site if possible). Repsonse time is usually within a few hours maximum.
|
96 |
|
97 |
|
98 |
## Screenshots
|
99 |
|
100 |
+
1. Basic settings screen
|
101 |
+
2. Advanced settings screen
|
102 |
|
103 |
|
104 |
## Changelog
|
105 |
|
106 |
+
### 2.0
|
107 |
+
* Introduced a new/better method for making elements sticky
|
108 |
+
* Added Legacy Mode (for those who want to continue the old method)
|
109 |
+
* Split up settings screen in Basic and Advanced
|
110 |
+
* Debug mode uses uncompressed JS file for easier remote debugging
|
111 |
+
|
112 |
+
### 1.4
|
113 |
+
* Removed error notification if no pushup-element is selected
|
114 |
+
* Renaming class "cloned" to "sticky-element-cloned" and "original" to "sticky-element-original" to avoid conflicts with Owl Carousel
|
115 |
+
* Fixed bug where cloned element width would be rounded down if it contained sub-pixels
|
116 |
+
|
117 |
### 1.3.1
|
118 |
* Minor bug fix for push-up element
|
119 |
|
157 |
|
158 |
## Upgrade Notice
|
159 |
|
160 |
+
## 2.0
|
161 |
+
* Bug fixes and new/better method of making elements sticky
|
162 |
+
|
163 |
+
## 1.4
|
164 |
+
* Couple of bug fixes
|
165 |
+
|
166 |
### 1.3.1
|
167 |
* Minor bug fix for push-up element
|
168 |
|
assets/css/sticky-anything-admin.css
CHANGED
@@ -14,13 +14,24 @@
|
|
14 |
border-bottom:solid 1px #fff;
|
15 |
}
|
16 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
17 |
.main-content .new-feature th,
|
18 |
.main-content .new-feature td {
|
19 |
padding-left:10px;
|
20 |
}
|
21 |
|
22 |
-
.main-content .new
|
23 |
-
|
|
|
24 |
color:#e00;
|
25 |
}
|
26 |
|
@@ -28,21 +39,27 @@
|
|
28 |
width:200px;
|
29 |
}
|
30 |
|
31 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
32 |
font-size:14px;
|
33 |
margin-bottom:20px;
|
34 |
}
|
35 |
|
36 |
-
|
37 |
color:#222;
|
38 |
-
font-size:16px;
|
39 |
padding-top:20px;
|
40 |
margin-bottom:3px;
|
41 |
border-top:solid 1px #ccc;
|
42 |
display:block;
|
43 |
}
|
44 |
|
45 |
-
|
46 |
border-top:none;
|
47 |
}
|
48 |
|
14 |
border-bottom:solid 1px #fff;
|
15 |
}
|
16 |
|
17 |
+
.main-content .form-table .disabled-feature {
|
18 |
+
opacity:0.65;
|
19 |
+
}
|
20 |
+
|
21 |
+
.main-content .form-table .disabled-feature input,
|
22 |
+
.main-content .form-table .disabled-feature label {
|
23 |
+
cursor:default;
|
24 |
+
}
|
25 |
+
|
26 |
+
|
27 |
.main-content .new-feature th,
|
28 |
.main-content .new-feature td {
|
29 |
padding-left:10px;
|
30 |
}
|
31 |
|
32 |
+
.main-content .new,
|
33 |
+
.main-content .solved {
|
34 |
+
font-weight:bold;
|
35 |
color:#e00;
|
36 |
}
|
37 |
|
39 |
width:200px;
|
40 |
}
|
41 |
|
42 |
+
.main-content .tab-sticky-advanced textarea {
|
43 |
+
font-family:courier new;
|
44 |
+
font-size:12px;
|
45 |
+
height:140px;
|
46 |
+
overflow-y:scroll;
|
47 |
+
}
|
48 |
+
|
49 |
+
.tab-sticky-faq p {
|
50 |
font-size:14px;
|
51 |
margin-bottom:20px;
|
52 |
}
|
53 |
|
54 |
+
.tab-sticky-faq strong {
|
55 |
color:#222;
|
|
|
56 |
padding-top:20px;
|
57 |
margin-bottom:3px;
|
58 |
border-top:solid 1px #ccc;
|
59 |
display:block;
|
60 |
}
|
61 |
|
62 |
+
.tab-sticky-faq p:nth-of-type(1) strong {
|
63 |
border-top:none;
|
64 |
}
|
65 |
|
assets/faq.php
CHANGED
@@ -1,38 +1,42 @@
|
|
1 |
<h2><?php _e('FAQ','Sticky Anything plugin'); ?>/<?php _e('Troubleshooting','Sticky Anything plugin'); ?></h2>
|
2 |
|
3 |
-
<p><strong><?php _e('Q: I selected a class/ID in the settings screen, but the element doesn\'t stick when I scroll down. Why not?','Sticky Anything plugin'); ?></strong
|
4 |
-
<?php _e('
|
5 |
|
6 |
-
<p><strong><?php _e('Q:
|
7 |
-
<?php _e('
|
8 |
|
9 |
-
<p><strong><?php _e('Q:
|
10 |
-
<?php _e('
|
11 |
|
12 |
-
<p><strong><?php _e('Q:
|
13 |
-
<?php _e('This
|
14 |
|
15 |
-
<p><strong><?php _e('Q:
|
16 |
-
<?php _e('
|
17 |
|
18 |
-
<p><strong><?php _e('Q:
|
19 |
-
<?php _e('
|
20 |
|
21 |
-
<p><strong><?php _e('Q:
|
22 |
-
<?php _e('
|
23 |
|
24 |
-
<p><strong><?php _e('Q:
|
25 |
-
<?php _e('
|
|
|
|
|
|
|
26 |
|
27 |
-
<p><strong><?php _e('Q: What is this Dynamic Mode thing exactly?','Sticky Anything plugin'); ?></strong
|
28 |
-
<?php _e('
|
29 |
-
<p><?php _e('
|
30 |
<p><?php _e('The original element always stays where it originally is on the page, while the cloned element is always at the top of the browser viewport screen. However, you will never see them both at the same time; depending on your scroll position, it always just shows either one or the other.','Sticky Anything plugin'); ?></p>
|
31 |
-
<p><?php _e('In the original plugin version, the clone would be created right when you load the page. Then when you would scroll down, it would become visible (and stick at the top) while the original element would disappear.','Sticky Anything plugin'); ?></p>
|
32 |
-
<p><?php _e('However, some themes use
|
33 |
-
<p><?php _e('
|
34 |
-
<p><?php _e('Why don\'t we use Dynamic Mode all the time then? This has to do with the fact that other plugins initialize themselves on page load and may need the full markup (including the cloned element) at that point. In Dynamic Mode, there is no clone available yet on page load, so that could cause an issue.','Sticky Anything plugin'); ?></p>
|
|
|
35 |
<p><?php _e('Phew!','Sticky Anything plugin'); ?></p>
|
36 |
|
37 |
-
<p><strong><?php _e('Q: I\'ll need more help please!','Sticky Anything plugin'); ?></strong
|
38 |
-
<?php _e('The plugin\'s own page can be found at <a href="http://www.senff.com/plugins/sticky-anything-wp" target="_blank">http://www.senff.com/plugins/sticky-anything-wp</a>. If that still doesn\'t help you solve your issue, please do NOT file a bug through the form on my website, but instead go to the plugin\'s
|
1 |
<h2><?php _e('FAQ','Sticky Anything plugin'); ?>/<?php _e('Troubleshooting','Sticky Anything plugin'); ?></h2>
|
2 |
|
3 |
+
<p><strong><?php _e('Q: I selected a class/ID in the settings screen, but the element doesn\'t stick when I scroll down. Why not?','Sticky Anything plugin'); ?></strong><br />
|
4 |
+
<?php _e('First, make sure that if you select the element by its classname, it is preceded by a dot (e.g. ".main-menu"), and if you select it by its ID, that it\'s preceded by a pound/hash/number sign (e.g. "#main-menu"). Also, make sure there is only ONE element on the page with the selector you\'re using. If there is none, or more than one element that matches your selector, nothing will happen.','Sticky Anything plugin'); ?></p>
|
5 |
|
6 |
+
<p><strong><?php _e('Q: Once the element becomes sticky, it\'s not positioned/sized properly at all.','Sticky Anything plugin'); ?></strong><br />
|
7 |
+
<?php _e('There are situations when this happens, especially when the original element has specific properties that are specifically used to manipulate its location and/or size. Things like negative margins, absolute positioning or left/top values on the original element can have undesired effects when the element becomes sticky. Another possible reason is if the original element has "!important" applied to some of its CSS properties. If possible, try to avoid all that. Also, inline elements might not get the desired results. If that happens, try using the plugin in Legacy Mode (see below).','Sticky Anything plugin'); ?></p>
|
8 |
|
9 |
+
<p><strong><?php _e('Q: Once the element becomes sticky, there\'s a brief moment where you see it twice.','Sticky Anything plugin'); ?></strong><br />
|
10 |
+
<?php _e('If you\'re using the plugin in Legacy Mode (see below), this happens when the sticky element (or any of its contents) has a CSS transition applied to it. Because the original element becomes invisible (and a cloned copy of it becomes visible), the visible-to-invisible status change will take place with a transition (ie. not instantly). Either remove any of the transitions the element has, or try disabling the Legacy Mode.','Sticky Anything plugin'); ?></p>
|
11 |
|
12 |
+
<p><strong><?php _e('Q: My menu sticks, but it doesn\'t open on the <a href="https://wordpress.org/themes/responsive" target="_blank">Responsive</a> theme when it\'s sticky.','Sticky Anything plugin'); ?></strong><br />
|
13 |
+
<?php _e('This was a bug in pre-2.0 versions, and an incompatibility with the theme. It has been fixed in 2.0, but in Legacy Mode, this bug is still present. If you need to enable Legacy Mode for some reason, it would be better to turn off stickiness for the mobile menu (set "Do not stick element when screen smaller than:" to 651 pixels).','Sticky Anything plugin'); ?></p>
|
14 |
|
15 |
+
<p><strong><?php _e('Q: I have another plugin called <a href="https://wordpress.org/plugins/easy-smooth-scroll-links/" target="_blank">Easy Smooth Scroll Links</a>, but once my menu becomes sticky, that one doesn\'t work anymore.','Sticky Anything plugin'); ?></strong><br />
|
16 |
+
<?php _e('This was a bug in pre-2.0 versions, and an incompatibility with the plugin. It has been fixed in 2.0, but in Legacy Mode, this bug is still present. If you need Legacy Mode enabled for some reason, there is no fix for this bug, however there is an alternative workaround. According to reports from users who had this issue, a plugin called <a href="https://wordpress.org/plugins/page-scroll-to-id/" target="_blank">Page Scroll To ID</a> is a worthy alternative to Easy Smooth Scroll Links and works with the Sticky Anything plugin in Legacy Mode.','Sticky Anything plugin'); ?></p>
|
17 |
|
18 |
+
<p><strong><?php _e('Q: Still doesn\'t work. What could be wrong?','Sticky Anything plugin'); ?></strong><br />
|
19 |
+
<?php _e('Check the "Debug Mode" checkbox in the plugin\'s settings. Reload the page and you may see errors in your browser\'s console window. If you\'ve used a selector that doesn\'t exist, OR there are more of them on the page, you will be notified of that in the console.','Sticky Anything plugin'); ?></p>
|
20 |
|
21 |
+
<p><strong><?php _e('Q: Is it possible to have multiple sticky elements?','Sticky Anything plugin'); ?></strong><br />
|
22 |
+
<?php _e('The current version only allows one sticky element, but this functionality will be implemented in the next major version. No expected release date, though.','Sticky Anything plugin'); ?></p>
|
23 |
|
24 |
+
<p><strong><?php _e('Q: What is Legacy Mode? Should I use it?','Sticky Anything plugin'); ?></strong><br />
|
25 |
+
<?php _e('In version 2.0 of the plugin, a new/better method for making elements sticky was introduced. Before this, a sticky element would essentially be a cloned copy of the original element. Now, the element itself becomes sticky and doesn\'t use copying and cloning anymore, which solves a lot of issues.'); ?></p>
|
26 |
+
<p><?php _e('So, should you use it or not? Well, if you <em>upgraded</em> this plugin from an earlier version, Legacy Mode will be turned ON by default, because chances are that the old method worked perfectly fine for your site. If that\'s the case, there is not really a need to use the new method and you can just continue using the old, classic method. If it ain\'t broke, don\'t fix it, right?'); ?></p>
|
27 |
+
<p><?php _e('Having said that, it\'s worth checking if your element works just as well with Legacy Mode turned OFF, since this is the "better" method. Just give it a quick try. If it doesn\'t work, you can always just go back and enable it again.'); ?></p>
|
28 |
+
<p><?php _e('<span style="font-weight:bold;">NOTE: new installs of the plugin will have the Legacy Mode turned off by default. Only UPGRADES from 1.4 (or before) should have it turned on by default.</span>'); ?>
|
29 |
|
30 |
+
<p><strong><?php _e('Q: What is this Dynamic Mode thing exactly?','Sticky Anything plugin'); ?></strong><br />
|
31 |
+
<?php _e('This mode is only available in Legacy Mode, and to properly explain this, we\'ll need to go a little deeper in the plugin\'s functionality. So bear with me...','Sticky Anything plugin'); ?></p>
|
32 |
+
<p><?php _e('In Legacy Mode, when an element becomes sticky at the top of the page (and keeps its place regardless of the scrolling), it\'s actually not the element itself you see, but a cloned copy of it, while the actuak original element is out of view and invisible.','Sticky Anything plugin'); ?></p>
|
33 |
<p><?php _e('The original element always stays where it originally is on the page, while the cloned element is always at the top of the browser viewport screen. However, you will never see them both at the same time; depending on your scroll position, it always just shows either one or the other.','Sticky Anything plugin'); ?></p>
|
34 |
+
<p><?php _e('In the original plugin version, the clone would be created right the moment when you load the page (but not visible right away). Then when you would scroll down, it would become visible (and stick at the top), while the original element would disappear from view.','Sticky Anything plugin'); ?></p>
|
35 |
+
<p><?php _e('However, some themes use JavaScript to dynamically create elements (menus, mostly) for mobile sites. With this method, a menu doesn\'t exist in the HTML source code when you load the page, but is created some time after the page is fully loaded -- in many cases, these menus would just be generated ONLY when the screen is more (or less) than a certain specific width. With the original version of the plugin, the problem would be that the original element (that you want to make sticky) may not have been fully created upon page load, so the clone would also not be fully functional.','Sticky Anything plugin'); ?></p>
|
36 |
+
<p><?php _e('Enter Dynamic Mode. Now, a clone of the element is not created on page load -- instead, it\'s only created when the user scrolls and hits the "sticky" point. This ensures that the cloned element is an actual 1-on-1 copy of what the original element consists of at that specific point in time (and not at the "page is loaded" point, which may be different if the element was altered since).','Sticky Anything plugin'); ?></p>
|
37 |
+
<p><?php _e('Why don\'t we use Dynamic Mode all the time then? This has to do with the fact that other plugins initialize themselves on page load and may need the full markup (including the cloned element) at that point. In Dynamic Mode, there is no clone available yet on page load, so that could cause an issue if that other plugin is looking for an element that doesn\'t exist yet.','Sticky Anything plugin'); ?></p>
|
38 |
+
<p><?php _e('(This may all sound terribly confusing. And it is! So, much work was done to fix this nonsense: since v2.0 of the plugin, a whole different method is being used to make elements sticky, and Dynamic Mode is not even an issue anymore.)','Sticky Anything plugin'); ?></p>
|
39 |
<p><?php _e('Phew!','Sticky Anything plugin'); ?></p>
|
40 |
|
41 |
+
<p><strong><?php _e('Q: I\'ll need more help please!','Sticky Anything plugin'); ?></strong><br />
|
42 |
+
<?php _e('<!-- The plugin\'s own page can be found at <a href="http://www.senff.com/plugins/sticky-anything-wp" target="_blank">http://www.senff.com/plugins/sticky-anything-wp</a>. If that still doesn\'t help you solve your issue, please do NOT file a bug through the form on my website, but instead --> Please go to the plugin\'s <a href="https://wordpress.org/support/plugin/sticky-menu-or-anything-on-scroll" target="_blank">support forum on WordPress.org</a> and post a message (include a link to your site if possible). Repsonse time is usually within a few hours maximum.','Sticky Anything plugin'); ?></p>
|
assets/js/jq-sticky-anything.js
CHANGED
@@ -1,7 +1,10 @@
|
|
1 |
/**
|
2 |
-
* @preserve Sticky Anything
|
3 |
*/
|
4 |
|
|
|
|
|
|
|
5 |
(function ($) {
|
6 |
|
7 |
$.fn.stickThis = function(options) {
|
@@ -12,6 +15,7 @@
|
|
12 |
minscreenwidth: 0,
|
13 |
maxscreenwidth: 99999,
|
14 |
zindex: 1,
|
|
|
15 |
dynamicmode: false,
|
16 |
debugmode: false,
|
17 |
pushup: '',
|
@@ -21,10 +25,9 @@
|
|
21 |
var numElements = $(this).length;
|
22 |
var numPushElements = $(settings.pushup).length;
|
23 |
|
24 |
-
|
25 |
if (numPushElements < 1) {
|
26 |
// There are no elements on the page with the called selector for the Push-up Element.
|
27 |
-
if(settings.debugmode == true) {
|
28 |
console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the Push-up element ("'+settings.pushup+'").');
|
29 |
}
|
30 |
// Resetting it to NOTHING.
|
@@ -41,7 +44,6 @@
|
|
41 |
settings.pushup = '';
|
42 |
}
|
43 |
|
44 |
-
|
45 |
if (numElements < 1) {
|
46 |
// There are no elements on the page with the called selector.
|
47 |
if(settings.debugmode == true) {
|
@@ -56,22 +58,176 @@
|
|
56 |
console.error('STICKY ANYTHING DEBUG: There There are '+numPushElements+' elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'"). You can only make ONE element sticky.');
|
57 |
}
|
58 |
} else {
|
59 |
-
$(this).addClass('original');
|
60 |
-
if(settings.dynamicmode != true) {
|
61 |
-
// Create a clone of the menu, right next to original (in the DOM) on initial page load
|
62 |
-
createClone(settings.top,settings.zindex,settings.adminbar);
|
63 |
-
}
|
64 |
|
65 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
66 |
}
|
67 |
|
68 |
return this;
|
69 |
};
|
70 |
|
71 |
|
72 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
73 |
|
74 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
75 |
orgElementTop = orgElementPos.top;
|
76 |
|
77 |
if(pushup) {
|
@@ -98,17 +254,20 @@
|
|
98 |
// scrolled past the original position; now only show the cloned, sticky element.
|
99 |
|
100 |
// Cloned element should always have same left position and width as original element.
|
101 |
-
orgElement = $('.original');
|
102 |
coordsOrgElement = orgElement.offset();
|
103 |
leftOrgElement = coordsOrgElement.left;
|
104 |
-
widthOrgElement = orgElement.
|
|
|
|
|
|
|
105 |
heightOrgElement = orgElement.outerHeight();
|
106 |
|
107 |
// If padding is percentages, convert to pixels
|
108 |
paddingOrgElement = [orgElement.css('padding-top'), orgElement.css('padding-right'), orgElement.css('padding-bottom'), orgElement.css('padding-left')];
|
109 |
paddingCloned = paddingOrgElement[0] + ' ' + paddingOrgElement[1] + ' ' + paddingOrgElement[2] + ' ' + paddingOrgElement[3];
|
110 |
|
111 |
-
if( (dynamic == true) && ($('.cloned').length < 1) ) {
|
112 |
// DYNAMIC MODE: if there is no clone present, create it right now
|
113 |
createClone(stickyTop,stickyZindex);
|
114 |
}
|
@@ -116,9 +275,9 @@
|
|
116 |
// Fixes bug where height of original element returns zero
|
117 |
elementHeight = 0;
|
118 |
if (heightOrgElement < 1) {
|
119 |
-
elementHeight = $('.cloned').outerHeight();
|
120 |
} else {
|
121 |
-
elementHeight = $('.original').outerHeight();
|
122 |
}
|
123 |
|
124 |
// If scrolled position = pushup-element (top coordinate) - space between top and element - element height - admin bar
|
@@ -129,21 +288,21 @@
|
|
129 |
stickyTopMargin = adminBarHeight;
|
130 |
}
|
131 |
|
132 |
-
$('.cloned').css('left',leftOrgElement+'px').css('top',stickyTop+'px').css('width',widthOrgElement).css('margin-top',stickyTopMargin).css('padding',paddingCloned).show();
|
133 |
-
$('.original').css('visibility','hidden');
|
134 |
} else {
|
135 |
// not scrolled past the menu; only show the original menu.
|
136 |
if(dynamic == true) {
|
137 |
-
$('.cloned').remove();
|
138 |
} else {
|
139 |
-
$('.cloned').hide();
|
140 |
}
|
141 |
-
$('.original').css('visibility','visible');
|
142 |
}
|
143 |
}
|
144 |
|
145 |
function createClone(cloneTop,cloneZindex) {
|
146 |
-
$('.original').clone().insertAfter($('.original')).addClass('cloned').css('position','fixed').css('top',cloneTop+'px').css('margin-left','0').css('z-index',cloneZindex).removeClass('original').hide();
|
147 |
}
|
148 |
|
149 |
}(jQuery));
|
1 |
/**
|
2 |
+
* @preserve Sticky Anything 2.0 | @senff | GPL2 Licensed
|
3 |
*/
|
4 |
|
5 |
+
console.error('PLEASE NOTE: this is just a notification that the Sticky Menu (or Anything!) plugin is now working in Debug Mode.');
|
6 |
+
console.error('Even though this mode will not impact any functionality, do NOT use this mode in production environments!');
|
7 |
+
|
8 |
(function ($) {
|
9 |
|
10 |
$.fn.stickThis = function(options) {
|
15 |
minscreenwidth: 0,
|
16 |
maxscreenwidth: 99999,
|
17 |
zindex: 1,
|
18 |
+
legacymode: false,
|
19 |
dynamicmode: false,
|
20 |
debugmode: false,
|
21 |
pushup: '',
|
25 |
var numElements = $(this).length;
|
26 |
var numPushElements = $(settings.pushup).length;
|
27 |
|
|
|
28 |
if (numPushElements < 1) {
|
29 |
// There are no elements on the page with the called selector for the Push-up Element.
|
30 |
+
if((settings.debugmode == true) && (settings.pushup)) {
|
31 |
console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the Push-up element ("'+settings.pushup+'").');
|
32 |
}
|
33 |
// Resetting it to NOTHING.
|
44 |
settings.pushup = '';
|
45 |
}
|
46 |
|
|
|
47 |
if (numElements < 1) {
|
48 |
// There are no elements on the page with the called selector.
|
49 |
if(settings.debugmode == true) {
|
58 |
console.error('STICKY ANYTHING DEBUG: There There are '+numPushElements+' elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'"). You can only make ONE element sticky.');
|
59 |
}
|
60 |
} else {
|
|
|
|
|
|
|
|
|
|
|
61 |
|
62 |
+
if(settings.legacymode == true) {
|
63 |
+
|
64 |
+
// LEGACY MODE
|
65 |
+
$(this).addClass('sticky-element-original');
|
66 |
+
if(settings.dynamicmode != true) {
|
67 |
+
// Create a clone of the menu, right next to original (in the DOM) on initial page load
|
68 |
+
createClone(settings.top,settings.zindex,settings.adminbar);
|
69 |
+
}
|
70 |
+
checkElement = setInterval(function(){stickItLegacy(settings.top,settings.minscreenwidth,settings.maxscreenwidth,settings.zindex,settings.pushup,settings.dynamicmode,settings.adminbar)},10);
|
71 |
+
|
72 |
+
} else {
|
73 |
+
|
74 |
+
// MODERN MODE
|
75 |
+
$(this).addClass('sticky-element-original');
|
76 |
+
orgAssignedStyles = cssStyles($(this)); // All original element styles, assigned by CSS.
|
77 |
+
orgInlineStyles = $('.sticky-element-original').attr('style');
|
78 |
+
if (orgInlineStyles == null) {
|
79 |
+
orgInlineStyles = '';
|
80 |
+
}
|
81 |
+
createPlaceholder();
|
82 |
+
|
83 |
+
checkElement = setInterval(function(){stickIt(settings.top,settings.minscreenwidth,settings.maxscreenwidth,settings.zindex,settings.pushup,settings.adminbar,orgAssignedStyles,orgInlineStyles)},10);
|
84 |
+
}
|
85 |
}
|
86 |
|
87 |
return this;
|
88 |
};
|
89 |
|
90 |
|
91 |
+
// The new StickIt function
|
92 |
+
function stickIt(stickyTop,minwidth,maxwidth,stickyZindex,pushup,adminbar,originalAssignedStyles,originalInlineStyles) {
|
93 |
+
|
94 |
+
// We need to check the position of the ACTIVE element.
|
95 |
+
// This is the original one when it's not sticky, but when it's sticky, it's the placeholder.
|
96 |
+
$listenerElement = $('.sticky-element-active');
|
97 |
+
|
98 |
+
var orgElementPos = $listenerElement.offset();
|
99 |
+
orgElementTop = orgElementPos.top;
|
100 |
+
|
101 |
+
if(pushup) {
|
102 |
+
var pushElementPos = $(pushup).offset();
|
103 |
+
pushElementTop = pushElementPos.top;
|
104 |
+
}
|
105 |
+
|
106 |
+
// Calculating actual viewport width
|
107 |
+
var e = window, a = 'inner';
|
108 |
+
if (!('innerWidth' in window )) {
|
109 |
+
a = 'client';
|
110 |
+
e = document.documentElement || document.body;
|
111 |
+
}
|
112 |
+
viewport = e[ a+'Width' ];
|
113 |
+
|
114 |
+
if ((adminbar) && $('body').hasClass('admin-bar') && (viewport > 600)) {
|
115 |
+
// below 600, the adminbar is not fixed
|
116 |
+
adminBarHeight = $('#wpadminbar').height();
|
117 |
+
} else {
|
118 |
+
adminBarHeight = 0;
|
119 |
+
}
|
120 |
+
|
121 |
+
if (($(window).scrollTop() >= (orgElementTop - stickyTop - adminBarHeight)) && (viewport >= minwidth) && (viewport <= maxwidth)) {
|
122 |
+
|
123 |
+
// We've scrolled PAST the original position; this is where we need to make the element sticky.
|
124 |
+
|
125 |
+
// Placeholder element should always have same left position as original element (see comment below).
|
126 |
+
// The sticky element will NOT have a TOP or the LEFT margin. This is because the left/top reference point of the original
|
127 |
+
// element does not consider the margin. So, we're checking the left/top point of the actual original element and then
|
128 |
+
// use that position for the sticky element.
|
129 |
+
|
130 |
+
// LEFT POSITION
|
131 |
+
coordsOrgElement = $listenerElement.offset();
|
132 |
+
leftOrgElement = coordsOrgElement.left; // This is the position REGARDLESS of the margin.
|
133 |
|
134 |
+
// WIDTH/HEIGHT
|
135 |
+
// The placeholder needs to have the width and height of the original element, WITHOUT the margins but WITH the padding and borders
|
136 |
+
// Whatever margins the original has, the placeholder needs to have that too.
|
137 |
+
|
138 |
+
widthPlaceholder = $listenerElement[0].getBoundingClientRect().width;
|
139 |
+
if (!widthPlaceholder) {
|
140 |
+
widthPlaceholder = $listenerElement.css('width'); // FALLBACK for subpixels
|
141 |
+
}
|
142 |
+
heightPlaceholder = $listenerElement[0].getBoundingClientRect().height;
|
143 |
+
if (!heightPlaceholder) {
|
144 |
+
heightPlaceholder = $listenerElement.css('height'); // FALLBACK for subpixels
|
145 |
+
}
|
146 |
+
|
147 |
+
// WIDTH/HEIGHT OF STICKY ELEMENT
|
148 |
+
// The original element though, needs to have the inner width and height of the original (non-sticky) element
|
149 |
+
// No padding, no borders, because that will be applied later anyway, regardless of box-sizing
|
150 |
+
widthSticky = $('.sticky-element-original').css('width');
|
151 |
+
if(widthSticky == '0px') {
|
152 |
+
widthSticky = ($('.sticky-element-original')[0].getBoundingClientRect().width);
|
153 |
+
}
|
154 |
+
heightSticky = $('.sticky-element-original').height();
|
155 |
+
|
156 |
+
// PADDING
|
157 |
+
// If padding is percentages, convert to pixels
|
158 |
+
// Just a leftover from the old method. We will not use padding for the placeholder
|
159 |
+
paddingOrgElement = [$listenerElement.css('padding-top'), $listenerElement.css('padding-right'), $listenerElement.css('padding-bottom'),$listenerElement.css('padding-left')];
|
160 |
+
paddingPlaceholder = paddingOrgElement[0] + ' ' + paddingOrgElement[1] + ' ' + paddingOrgElement[2] + ' ' + paddingOrgElement[3];
|
161 |
+
|
162 |
+
// MARGIN
|
163 |
+
marginOrgElement = [$listenerElement.css('margin-top'), $listenerElement.css('margin-right'), $listenerElement.css('margin-bottom'),$listenerElement.css('margin-left')];
|
164 |
+
marginPlaceholder = marginOrgElement[0] + ' ' + marginOrgElement[1] + ' ' + marginOrgElement[2] + ' ' + marginOrgElement[3];
|
165 |
+
|
166 |
+
// OTHER ELEMENTS
|
167 |
+
// if original has float, display, etc., we need to assign that to the placeholder
|
168 |
+
// Though not as important as the width/height/margin/padding
|
169 |
+
|
170 |
+
assignedStyles = '';
|
171 |
+
for (var importantStyle in originalAssignedStyles) {
|
172 |
+
if (originalAssignedStyles[importantStyle] == 'inline') {
|
173 |
+
assignedStyles += importantStyle+':inline-block; ';
|
174 |
+
} else {
|
175 |
+
assignedStyles += importantStyle+':'+originalAssignedStyles[importantStyle]+'; ';
|
176 |
+
}
|
177 |
+
}
|
178 |
+
|
179 |
+
// Fixes bug where height of original element returns zero
|
180 |
+
// Is this still needed for the post-2.0 mode??
|
181 |
+
elementHeight = 0;
|
182 |
+
if (heightPlaceholder < 1) {
|
183 |
+
elementHeight = $('.sticky-element-cloned').outerHeight();
|
184 |
+
} else {
|
185 |
+
elementHeight = $('.sticky-element-original').outerHeight();
|
186 |
+
}
|
187 |
+
|
188 |
+
// If scrolled position = pushup-element (top coordinate) - space between top and element - element height - admin bar
|
189 |
+
// In other words, if the pushup element hits the bottom of the sticky element
|
190 |
+
if (pushup && ($(window).scrollTop() > (pushElementTop-stickyTop-elementHeight-adminBarHeight))) {
|
191 |
+
stickyTopMargin = (pushElementTop-stickyTop-elementHeight-$(window).scrollTop());
|
192 |
+
} else {
|
193 |
+
stickyTopMargin = adminBarHeight;
|
194 |
+
}
|
195 |
+
|
196 |
+
assignedStyles += 'width:'+widthPlaceholder+'px; height:'+heightPlaceholder+'px; margin:'+marginPlaceholder+';';
|
197 |
+
|
198 |
+
$('.sticky-element-original').removeClass('sticky-element-active').css('position','fixed').css('left',leftOrgElement+'px').css('top',stickyTop+'px').css('width',widthSticky).css('margin-left',0).css('margin-top',stickyTopMargin).css('z-index',stickyZindex);
|
199 |
+
if(!$('.sticky-element-placeholder').hasClass('sticky-element-active')) {
|
200 |
+
$('.sticky-element-placeholder').addClass('sticky-element-active').attr('style',assignedStyles);
|
201 |
+
}
|
202 |
+
|
203 |
+
} else {
|
204 |
+
// not scrolled past the menu; only show the original element.
|
205 |
+
$('.sticky-element-original').addClass('sticky-element-active').attr('style',originalInlineStyles);
|
206 |
+
if($('.sticky-element-placeholder').hasClass('sticky-element-active')) {
|
207 |
+
$('.sticky-element-placeholder').removeClass('sticky-element-active').removeAttr('style').css('width','0').css('height','0').css('margin','0').css('padding','0');
|
208 |
+
}
|
209 |
+
}
|
210 |
+
|
211 |
+
}
|
212 |
+
|
213 |
+
function createPlaceholder() {
|
214 |
+
$('.sticky-element-original').addClass('sticky-element-active').before('<div class="sticky-element-placeholder" style="width:0; height:0; margin:0; padding:0; visibility:hidden;"></div>');
|
215 |
+
}
|
216 |
+
|
217 |
+
// Helper function: get the important CSS rules from an element
|
218 |
+
function cssStyles(el) {
|
219 |
+
o = {};
|
220 |
+
importantStyles = ['display','float','flex','box-sizing','clear','overflow','transform'];
|
221 |
+
for(var styleProp in importantStyles) {
|
222 |
+
o[importantStyles[styleProp]] = el.css(importantStyles[styleProp]);
|
223 |
+
}
|
224 |
+
return o;
|
225 |
+
}
|
226 |
+
|
227 |
+
// The old StickIt function
|
228 |
+
function stickItLegacy(stickyTop,minwidth,maxwidth,stickyZindex,pushup,dynamic,adminbar) {
|
229 |
+
|
230 |
+
var orgElementPos = $('.sticky-element-original').offset();
|
231 |
orgElementTop = orgElementPos.top;
|
232 |
|
233 |
if(pushup) {
|
254 |
// scrolled past the original position; now only show the cloned, sticky element.
|
255 |
|
256 |
// Cloned element should always have same left position and width as original element.
|
257 |
+
orgElement = $('.sticky-element-original');
|
258 |
coordsOrgElement = orgElement.offset();
|
259 |
leftOrgElement = coordsOrgElement.left;
|
260 |
+
widthOrgElement = orgElement[0].getBoundingClientRect().width;
|
261 |
+
if (!widthOrgElement) {
|
262 |
+
widthOrgElement = orgElement.css('width'); // FALLBACK for subpixels
|
263 |
+
}
|
264 |
heightOrgElement = orgElement.outerHeight();
|
265 |
|
266 |
// If padding is percentages, convert to pixels
|
267 |
paddingOrgElement = [orgElement.css('padding-top'), orgElement.css('padding-right'), orgElement.css('padding-bottom'), orgElement.css('padding-left')];
|
268 |
paddingCloned = paddingOrgElement[0] + ' ' + paddingOrgElement[1] + ' ' + paddingOrgElement[2] + ' ' + paddingOrgElement[3];
|
269 |
|
270 |
+
if( (dynamic == true) && ($('.sticky-element-cloned').length < 1) ) {
|
271 |
// DYNAMIC MODE: if there is no clone present, create it right now
|
272 |
createClone(stickyTop,stickyZindex);
|
273 |
}
|
275 |
// Fixes bug where height of original element returns zero
|
276 |
elementHeight = 0;
|
277 |
if (heightOrgElement < 1) {
|
278 |
+
elementHeight = $('.sticky-element-cloned').outerHeight();
|
279 |
} else {
|
280 |
+
elementHeight = $('.sticky-element-original').outerHeight();
|
281 |
}
|
282 |
|
283 |
// If scrolled position = pushup-element (top coordinate) - space between top and element - element height - admin bar
|
288 |
stickyTopMargin = adminBarHeight;
|
289 |
}
|
290 |
|
291 |
+
$('.sticky-element-cloned').css('left',leftOrgElement+'px').css('top',stickyTop+'px').css('width',widthOrgElement).css('margin-top',stickyTopMargin).css('padding',paddingCloned).show();
|
292 |
+
$('.sticky-element-original').css('visibility','hidden');
|
293 |
} else {
|
294 |
// not scrolled past the menu; only show the original menu.
|
295 |
if(dynamic == true) {
|
296 |
+
$('.sticky-element-cloned').remove();
|
297 |
} else {
|
298 |
+
$('.sticky-element-cloned').hide();
|
299 |
}
|
300 |
+
$('.sticky-element-original').css('visibility','visible');
|
301 |
}
|
302 |
}
|
303 |
|
304 |
function createClone(cloneTop,cloneZindex) {
|
305 |
+
$('.sticky-element-original').clone().insertAfter($('.sticky-element-original')).addClass('sticky-element-cloned').css('position','fixed').css('top',cloneTop+'px').css('margin-left','0').css('z-index',cloneZindex).removeClass('sticky-element-original').hide();
|
306 |
}
|
307 |
|
308 |
}(jQuery));
|
assets/js/jq-sticky-anything.min.js
CHANGED
@@ -1,5 +1,7 @@
|
|
1 |
/**
|
2 |
-
* @preserve Sticky Anything
|
3 |
*/
|
4 |
|
5 |
-
|
|
|
|
1 |
/**
|
2 |
+
* @preserve Sticky Anything 2.0 | @senff | GPL2 Licensed
|
3 |
*/
|
4 |
|
5 |
+
var stickyAnythingBreakpoint = '' // solely to use as a debugging breakpoint, if needed.
|
6 |
+
|
7 |
+
!function(e){function t(t,i,n,l,s,r,o,d){$listenerElement=e(".sticky-element-active");var m=$listenerElement.offset();if(orgElementTop=m.top,s){var a=e(s).offset();pushElementTop=a.top}var c=window,g="inner";if("innerWidth"in window||(g="client",c=document.documentElement||document.body),viewport=c[g+"Width"],r&&e("body").hasClass("admin-bar")&&viewport>600?adminBarHeight=e("#wpadminbar").height():adminBarHeight=0,e(window).scrollTop()>=orgElementTop-t-adminBarHeight&&viewport>=i&&viewport<=n){coordsOrgElement=$listenerElement.offset(),leftOrgElement=coordsOrgElement.left,widthPlaceholder=$listenerElement[0].getBoundingClientRect().width,widthPlaceholder||(widthPlaceholder=$listenerElement.css("width")),heightPlaceholder=$listenerElement[0].getBoundingClientRect().height,heightPlaceholder||(heightPlaceholder=$listenerElement.css("height")),widthSticky=e(".sticky-element-original").css("width"),heightSticky=e(".sticky-element-original").height(),paddingOrgElement=[$listenerElement.css("padding-top"),$listenerElement.css("padding-right"),$listenerElement.css("padding-bottom"),$listenerElement.css("padding-left")],paddingPlaceholder=paddingOrgElement[0]+" "+paddingOrgElement[1]+" "+paddingOrgElement[2]+" "+paddingOrgElement[3],marginOrgElement=[$listenerElement.css("margin-top"),$listenerElement.css("margin-right"),$listenerElement.css("margin-bottom"),$listenerElement.css("margin-left")],marginPlaceholder=marginOrgElement[0]+" "+marginOrgElement[1]+" "+marginOrgElement[2]+" "+marginOrgElement[3],assignedStyles="";for(var h in o)assignedStyles+=h+":"+o[h]+"; ";elementHeight=0,heightPlaceholder<1?elementHeight=e(".sticky-element-cloned").outerHeight():elementHeight=e(".sticky-element-original").outerHeight(),s&&e(window).scrollTop()>pushElementTop-t-elementHeight-adminBarHeight?stickyTopMargin=pushElementTop-t-elementHeight-e(window).scrollTop():stickyTopMargin=adminBarHeight,assignedStyles+="width:"+widthPlaceholder+"px; height:"+heightPlaceholder+"px; margin:"+marginPlaceholder+";",e(".sticky-element-original").removeClass("sticky-element-active").css("position","fixed").css("left",leftOrgElement+"px").css("top",t+"px").css("width",widthSticky).css("margin-left",0).css("margin-top",stickyTopMargin).css("z-index",l),e(".sticky-element-placeholder").hasClass("sticky-element-active")||e(".sticky-element-placeholder").addClass("sticky-element-active").attr("style",assignedStyles)}else e(".sticky-element-original").addClass("sticky-element-active").attr("style",d),e(".sticky-element-placeholder").hasClass("sticky-element-active")&&e(".sticky-element-placeholder").removeClass("sticky-element-active").removeAttr("style").css("width","0").css("height","0").css("margin","0").css("padding","0")}function i(){e(".sticky-element-original").addClass("sticky-element-active").before('<div class="sticky-element-placeholder" style="width:0; height:0; margin:0; padding:0; visibility:hidden;"></div>')}function n(e){o={},importantStyles=["display","float","flex","box-sizing","clear","overflow"];for(var t in importantStyles)o[importantStyles[t]]=e.css(importantStyles[t]);return o}function l(t,i,n,l,r,o,d){var m=e(".sticky-element-original").offset();if(orgElementTop=m.top,r){var a=e(r).offset();pushElementTop=a.top}var c=window,g="inner";"innerWidth"in window||(g="client",c=document.documentElement||document.body),viewport=c[g+"Width"],d&&e("body").hasClass("admin-bar")&&viewport>600?adminBarHeight=e("#wpadminbar").height():adminBarHeight=0,e(window).scrollTop()>=orgElementTop-t-adminBarHeight&&viewport>=i&&viewport<=n?(orgElement=e(".sticky-element-original"),coordsOrgElement=orgElement.offset(),leftOrgElement=coordsOrgElement.left,widthOrgElement=orgElement[0].getBoundingClientRect().width,widthOrgElement||(widthOrgElement=orgElement.css("width")),heightOrgElement=orgElement.outerHeight(),paddingOrgElement=[orgElement.css("padding-top"),orgElement.css("padding-right"),orgElement.css("padding-bottom"),orgElement.css("padding-left")],paddingCloned=paddingOrgElement[0]+" "+paddingOrgElement[1]+" "+paddingOrgElement[2]+" "+paddingOrgElement[3],1==o&&e(".sticky-element-cloned").length<1&&s(t,l),elementHeight=0,heightOrgElement<1?elementHeight=e(".sticky-element-cloned").outerHeight():elementHeight=e(".sticky-element-original").outerHeight(),r&&e(window).scrollTop()>pushElementTop-t-elementHeight-adminBarHeight?stickyTopMargin=pushElementTop-t-elementHeight-e(window).scrollTop():stickyTopMargin=adminBarHeight,e(".sticky-element-cloned").css("left",leftOrgElement+"px").css("top",t+"px").css("width",widthOrgElement).css("margin-top",stickyTopMargin).css("padding",paddingCloned).show(),e(".sticky-element-original").css("visibility","hidden")):(1==o?e(".sticky-element-cloned").remove():e(".sticky-element-cloned").hide(),e(".sticky-element-original").css("visibility","visible"))}function s(t,i){e(".sticky-element-original").clone().insertAfter(e(".sticky-element-original")).addClass("sticky-element-cloned").css("position","fixed").css("top",t+"px").css("margin-left","0").css("z-index",i).removeClass("sticky-element-original").hide()}e.fn.stickThis=function(r){var o=e.extend({top:0,minscreenwidth:0,maxscreenwidth:99999,zindex:1,legacymode:!1,dynamicmode:!1,debugmode:!1,pushup:"",adminbar:!1},r),d=e(this).length,m=e(o.pushup).length;return 1>m?(1==o.debugmode&&o.pushup&&console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the Push-up element ("'+o.pushup+'").'),o.pushup=""):m>1&&(1==o.debugmode&&console.error("STICKY ANYTHING DEBUG: There are "+m+' elements on the page with the selector/class/ID you selected for the push-up element ("'+o.pushup+'"). You can select only ONE element to push the sticky element up.'),o.pushup=""),1>d?1==o.debugmode&&console.error('STICKY ANYTHING DEBUG: There are no elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'").'):d>1?1==o.debugmode&&console.error("STICKY ANYTHING DEBUG: There There are "+m+' elements with the selector/class/ID you selected for the sticky element ("'+this.selector+'"). You can only make ONE element sticky.'):1==o.legacymode?(e(this).addClass("sticky-element-original"),1!=o.dynamicmode&&s(o.top,o.zindex,o.adminbar),checkElement=setInterval(function(){l(o.top,o.minscreenwidth,o.maxscreenwidth,o.zindex,o.pushup,o.dynamicmode,o.adminbar)},10)):(e(this).addClass("sticky-element-original"),orgAssignedStyles=n(e(this)),orgInlineStyles=e(".sticky-element-original").attr("style"),null==orgInlineStyles&&(orgInlineStyles=""),i(),checkElement=setInterval(function(){t(o.top,o.minscreenwidth,o.maxscreenwidth,o.zindex,o.pushup,o.adminbar,orgAssignedStyles,orgInlineStyles)},10)),this}}(jQuery);
|
assets/js/stickThis.js
CHANGED
@@ -1,15 +1,18 @@
|
|
1 |
/**
|
2 |
-
* @preserve Sticky Anything
|
3 |
*/
|
4 |
|
5 |
(function($) {
|
6 |
$(document).ready(function($) {
|
7 |
|
|
|
|
|
8 |
$(sticky_anything_engage.element).stickThis({
|
9 |
top:sticky_anything_engage.topspace,
|
10 |
minscreenwidth:sticky_anything_engage.minscreenwidth,
|
11 |
maxscreenwidth:sticky_anything_engage.maxscreenwidth,
|
12 |
zindex:sticky_anything_engage.zindex,
|
|
|
13 |
dynamicmode:sticky_anything_engage.dynamicmode,
|
14 |
debugmode:sticky_anything_engage.debugmode,
|
15 |
pushup:sticky_anything_engage.pushup,
|
1 |
/**
|
2 |
+
* @preserve Sticky Anything 2.0 | @senff | GPL2 Licensed
|
3 |
*/
|
4 |
|
5 |
(function($) {
|
6 |
$(document).ready(function($) {
|
7 |
|
8 |
+
var thisIsSomeBreakpoint = '' // solely to use as a debugging breakpoint, if needed.
|
9 |
+
|
10 |
$(sticky_anything_engage.element).stickThis({
|
11 |
top:sticky_anything_engage.topspace,
|
12 |
minscreenwidth:sticky_anything_engage.minscreenwidth,
|
13 |
maxscreenwidth:sticky_anything_engage.maxscreenwidth,
|
14 |
zindex:sticky_anything_engage.zindex,
|
15 |
+
legacymode:sticky_anything_engage.legacymode,
|
16 |
dynamicmode:sticky_anything_engage.dynamicmode,
|
17 |
debugmode:sticky_anything_engage.debugmode,
|
18 |
pushup:sticky_anything_engage.pushup,
|
assets/js/sticky-anything-admin.js
CHANGED
@@ -1,35 +1,64 @@
|
|
1 |
/**
|
2 |
-
* @preserve Sticky Anything
|
3 |
*/
|
4 |
|
5 |
jQuery(function($) {
|
6 |
|
7 |
// --- HANDLING THE TABS -----------------------------------
|
8 |
|
9 |
-
|
10 |
-
|
11 |
-
|
12 |
-
|
13 |
-
if (hash != '') {
|
14 |
-
$('.nav-tab-wrapper a[href="' + hash + '"]').addClass('nav-tab-active');
|
15 |
-
$('.tabs-content div' + hash.replace('#', '#sticky-')).removeClass('hide');
|
16 |
-
} else {
|
17 |
-
$('.nav-tab-wrapper a:first-child').addClass('nav-tab-active');
|
18 |
-
$('.tabs-content div#sticky-main').removeClass('hide');
|
19 |
-
|
20 |
-
}
|
21 |
-
|
22 |
-
$('.nav-tab-wrapper a').on('click',function() {
|
23 |
-
var tab_id = $(this).attr('href').replace('#', '#sticky-');
|
24 |
|
25 |
// Set the current tab active
|
26 |
$(this).parent().children().removeClass('nav-tab-active');
|
27 |
$(this).addClass('nav-tab-active');
|
28 |
|
29 |
// Show the active content
|
30 |
-
$('.
|
31 |
$('.tabs-content div' + tab_id).removeClass('hide');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
32 |
});
|
33 |
|
34 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
35 |
});
|
1 |
/**
|
2 |
+
* @preserve Sticky Anything 2.0 | @senff | GPL2 Licensed
|
3 |
*/
|
4 |
|
5 |
jQuery(function($) {
|
6 |
|
7 |
// --- HANDLING THE TABS -----------------------------------
|
8 |
|
9 |
+
$('.nav-tab-wrapper a, a.faq').on('click',function(t) {
|
10 |
+
var tab_id = $(this).attr('href').replace('#', '.tab-sticky-');
|
11 |
+
var tab_name = $(this).attr('href').replace('#', '');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
12 |
|
13 |
// Set the current tab active
|
14 |
$(this).parent().children().removeClass('nav-tab-active');
|
15 |
$(this).addClass('nav-tab-active');
|
16 |
|
17 |
// Show the active content
|
18 |
+
$('.tab-content').addClass('hide');
|
19 |
$('.tabs-content div' + tab_id).removeClass('hide');
|
20 |
+
$('input[name="sa_tab"]').val(tab_name);
|
21 |
+
|
22 |
+
// Change the URL
|
23 |
+
var currentURL = window.location.href;
|
24 |
+
if(currentURL.indexOf('&tab')>0) {
|
25 |
+
var newURL = currentURL.substring(0, currentURL.indexOf('&tab')) + '&tab=' + tab_name;
|
26 |
+
} else {
|
27 |
+
var newURL = currentURL + '&tab=' + tab_name;
|
28 |
+
}
|
29 |
+
|
30 |
+
switch(tab_name) {
|
31 |
+
case 'advanced':
|
32 |
+
var tab_title = 'Advanced Settings';
|
33 |
+
break;
|
34 |
+
case 'faq':
|
35 |
+
var tab_title = 'FAQ';
|
36 |
+
break;
|
37 |
+
default:
|
38 |
+
var tab_title = 'Basic Settings';
|
39 |
+
}
|
40 |
+
|
41 |
+
window.history.pushState(tab_title, tab_title, newURL);
|
42 |
+
t.preventDefault();
|
43 |
+
});
|
44 |
+
|
45 |
+
$('a.faq').on('click',function(t) {
|
46 |
+
$('.nav-tab-wrapper a').removeClass('nav-tab-active');
|
47 |
+
$('.nav-tab-wrapper a[href="#faq"]').addClass('nav-tab-active');
|
48 |
});
|
49 |
|
50 |
|
51 |
+
$('#sa_legacymode').on('change',function() {
|
52 |
+
if($("#sa_legacymode").is(':checked')) {
|
53 |
+
$("#row-dynamic-mode").removeClass('disabled-feature');
|
54 |
+
$("#row-dynamic-mode .showhide").slideDown();
|
55 |
+
} else {
|
56 |
+
$("#row-dynamic-mode").addClass('disabled-feature');
|
57 |
+
$("#row-dynamic-mode .showhide").slideUp();
|
58 |
+
}
|
59 |
+
});
|
60 |
+
|
61 |
+
$('.form-table').on('click','.disabled-feature', function(e) {
|
62 |
+
e.preventDefault();
|
63 |
+
});
|
64 |
});
|
assets/plugin-info.php
CHANGED
@@ -10,11 +10,12 @@
|
|
10 |
<ul>
|
11 |
<li><strong><?php _e('Author:','Sticky Anything plugin'); ?></strong> <a href="http://www.senff.com" target="_blank">Mark Senff</a></li>
|
12 |
<li><strong><?php _e('Version:','Sticky Anything plugin'); ?></strong> <?php echo $version; ?></li>
|
13 |
-
<li><strong><?php _e('Detailed Documentation:','Sticky Anything plugin'); ?></strong> <a href="http://www.senff.com/plugins/sticky-anything-wp" target="_blank">Senff.com</a></li>
|
14 |
<li><strong><?php _e('Support Forum','Sticky Anything plugin'); ?></strong>: <a href="https://wordpress.org/support/plugin/sticky-menu-or-anything-on-scroll" target="_blank">WordPress.org</a></li>
|
15 |
-
<li><strong><?php _e('
|
16 |
<li><strong><?php _e('Non-WP version:','Sticky Anything plugin'); ?></strong> <a href="https://github.com/senff/Sticky-Anything" target="_blank">GitHub</a></li>
|
17 |
-
<li><strong><?php _e('Twitter:','Sticky Anything plugin'); ?></strong> <a href="http://www.twitter.com/senff" target="_blank">@Senff</a
|
|
|
18 |
</ul>
|
19 |
|
20 |
</div>
|
10 |
<ul>
|
11 |
<li><strong><?php _e('Author:','Sticky Anything plugin'); ?></strong> <a href="http://www.senff.com" target="_blank">Mark Senff</a></li>
|
12 |
<li><strong><?php _e('Version:','Sticky Anything plugin'); ?></strong> <?php echo $version; ?></li>
|
13 |
+
<!-- <li><strong><?php _e('Detailed Documentation:','Sticky Anything plugin'); ?></strong> <a href="http://www.senff.com/plugins/sticky-anything-wp" target="_blank">Senff.com</a></li> -->
|
14 |
<li><strong><?php _e('Support Forum','Sticky Anything plugin'); ?></strong>: <a href="https://wordpress.org/support/plugin/sticky-menu-or-anything-on-scroll" target="_blank">WordPress.org</a></li>
|
15 |
+
<li><strong><?php _e('Development:','Sticky Anything plugin'); ?></strong> <a href="https://bitbucket.org/senff/sticky-menu-or-anything-wp" target="_blank">BitBucket</a></li>
|
16 |
<li><strong><?php _e('Non-WP version:','Sticky Anything plugin'); ?></strong> <a href="https://github.com/senff/Sticky-Anything" target="_blank">GitHub</a></li>
|
17 |
+
<li><strong><?php _e('Twitter:','Sticky Anything plugin'); ?></strong> <a href="http://www.twitter.com/senff" target="_blank">@Senff</a><br> </li>
|
18 |
+
<li><strong><?php _e('Donate:','Sticky Anything plugin'); ?></strong> <a href="http://www.senff.com/donate" target="_blank">Paypal</a></li>
|
19 |
</ul>
|
20 |
|
21 |
</div>
|
assets/screenshots/screenshot-1.png
ADDED
Binary file
|
assets/screenshots/screenshot-2.png
ADDED
Binary file
|
readme.txt
CHANGED
@@ -5,7 +5,7 @@ Tags: sticky header, sticky menu, sticky, header, menu
|
|
5 |
Plugin URI: http://www.senff.com/plugins/sticky-anything-wp
|
6 |
Requires at least: 3.6
|
7 |
Tested up to: 4.5
|
8 |
-
Stable tag:
|
9 |
License: GPLv2 or later
|
10 |
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
11 |
|
@@ -27,7 +27,8 @@ A little bit of basic HTML/CSS knowledge is required. You just need to know how
|
|
27 |
* **Push-up element**: optionally, you can pick any other element lower on the page that will push the sticky element up again (for example a sidebar widget).
|
28 |
* **Admin Bar aware**: checks if the current user has an Admin Toolbar at the top of the page. If it has, the sticky element will not obscure it (or be obscured by it).
|
29 |
* **Z-index**: in case there are other elements on the page that obscure or peek through your sticky element, you can add a Z-index easily.
|
30 |
-
* **
|
|
|
31 |
* **Debug Mode:** find out possible reasons why your element doesn't stick by switching on Debug Mode, and error messages will appear in your browser's console.
|
32 |
|
33 |
|
@@ -43,59 +44,78 @@ A little bit of basic HTML/CSS knowledge is required. You just need to know how
|
|
43 |
== Frequently Asked Questions ==
|
44 |
|
45 |
= I selected a class/ID in the settings screen, but the element doesn't stick when I scroll down. Why not? =
|
46 |
-
|
47 |
|
48 |
-
=
|
49 |
-
|
50 |
|
51 |
-
=
|
52 |
-
|
53 |
|
54 |
-
=
|
55 |
-
This
|
56 |
-
There is an alternative workaround however. According to reports from users who had this issue, a plugin called "Page Scroll To ID" (available in the WordPress.org plugin repo) is a worthy alternative to Easy Smooth Scroll Links and works with the Sticky Anything plugin.
|
57 |
-
|
58 |
-
= Users who are logged in to my site have a black Administrator Toolbar at the top of the screen, which would hide my sticky element when it's at the top of the screen. How can I fix that? =
|
59 |
-
Check the "Consider Administrator Toolbar" checkbox in the plugin's settings. With this setting on, your sticky element will be placed a little lower if there's an Administrator Toolbar present on the page.
|
60 |
|
61 |
-
=
|
62 |
-
|
63 |
|
64 |
= Still doesn't work. What could be wrong? =
|
65 |
-
Check the "Debug Mode" checkbox in the plugin's settings. Reload the page and you may see errors in your browser's console window. If you've used a selector that
|
66 |
|
67 |
= Is it possible to have multiple sticky elements? =
|
68 |
-
The current version only allows one sticky element
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
69 |
|
70 |
= What is this Dynamic Mode thing exactly? =
|
71 |
-
|
72 |
|
73 |
-
|
74 |
|
75 |
The original element always stays where it originally is on the page, while the cloned element is always at the top of the browser viewport screen. However, you will never see them both at the same time; depending on your scroll position, it always just shows either one or the other.
|
76 |
|
77 |
-
In the original plugin version, the clone would be created right when you load the page. Then when you would scroll down, it would become visible (and stick at the top) while the original element would disappear.
|
|
|
|
|
78 |
|
79 |
-
|
80 |
|
81 |
-
|
82 |
|
83 |
-
|
84 |
|
85 |
Phew!
|
86 |
|
87 |
-
= I'll need more help please! =
|
88 |
-
|
89 |
|
90 |
|
91 |
|
92 |
== Screenshots ==
|
93 |
|
94 |
-
1. Settings screen
|
|
|
95 |
|
96 |
|
97 |
== Changelog ==
|
98 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
99 |
= 1.3.1 =
|
100 |
* Minor bug fix for push-up element
|
101 |
|
@@ -139,6 +159,12 @@ The plugin's own page can be found [here](http://www.senff.com/plugins/sticky-an
|
|
139 |
|
140 |
== Upgrade Notice ==
|
141 |
|
|
|
|
|
|
|
|
|
|
|
|
|
142 |
= 1.3.1 =
|
143 |
* Minor bug fix for push-up element
|
144 |
|
5 |
Plugin URI: http://www.senff.com/plugins/sticky-anything-wp
|
6 |
Requires at least: 3.6
|
7 |
Tested up to: 4.5
|
8 |
+
Stable tag: 2.0
|
9 |
License: GPLv2 or later
|
10 |
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
11 |
|
27 |
* **Push-up element**: optionally, you can pick any other element lower on the page that will push the sticky element up again (for example a sidebar widget).
|
28 |
* **Admin Bar aware**: checks if the current user has an Admin Toolbar at the top of the page. If it has, the sticky element will not obscure it (or be obscured by it).
|
29 |
* **Z-index**: in case there are other elements on the page that obscure or peek through your sticky element, you can add a Z-index easily.
|
30 |
+
* **Legacy Mode**: in 2.0, a new method of making things sticky was introduced. In Legacy Mode, the old method will be used. See FAQ for details.
|
31 |
+
* **Dynamic Mode**: some issues that frequently appear in responsive themes have been address by adding a Dynamic Mode (Legacy Mode only). See FAQ for details.
|
32 |
* **Debug Mode:** find out possible reasons why your element doesn't stick by switching on Debug Mode, and error messages will appear in your browser's console.
|
33 |
|
34 |
|
44 |
== Frequently Asked Questions ==
|
45 |
|
46 |
= I selected a class/ID in the settings screen, but the element doesn't stick when I scroll down. Why not? =
|
47 |
+
First, make sure that if you select the element by its classname, it is preceded by a dot (e.g. ".main-menu"), and if you select it by its ID, that it's preceded by a pound/hash/number sign (e.g. "#main-menu"). Also, make sure there is only ONE element on the page with the selector you're using. If there is none, or more than one element that matches your selector, nothing will happen.
|
48 |
|
49 |
+
= Once the element becomes sticky, it's not positioned/sized properly at all. =
|
50 |
+
There are situations when this happens, especially when the original element has specific properties that are specifically used to manipulate its location and/or size. Things like negative margins, absolute positioning or left/top values on the original element can have undesired effects when the element becomes sticky. Another possible reason is if the original element has "!important" applied to some of its CSS properties. If possible, try to avoid that. Also, inline elements might not get the desired results. If that happens, try using the plugin in Legacy Mode (see below).
|
51 |
|
52 |
+
= Once the element becomes sticky, there's a brief moment where you see it twice. =
|
53 |
+
If you're using the plugin in Legacy Mode (see below), this happens when the sticky element (or any of its contents) has a CSS transition applied to it. Because the original element becomes invisible (and a cloned copy of it becomes visible), the visible-to-invisible status change will take place with a transition (ie. not instantly). Either remove any of the transitions the element has, or try disabling the Legacy Mode.
|
54 |
|
55 |
+
= My menu sticks, but it doesn't open on the Responsive theme when it's sticky. =
|
56 |
+
This was a bug in pre-2.0 versions, and an incompatibility with the theme. It has been fixed in 2.0, but in Legacy Mode, this bug is still present. If you need to enable Legacy Mode for some reason, it would be better to turn off stickiness for the mobile menu (set "Do not stick element when screen smaller than:" to 651 pixels).
|
|
|
|
|
|
|
|
|
57 |
|
58 |
+
= I have another plugin called Easy Smooth Scroll Links, but once my menu becomes sticky, that one doesn't work anymore. =
|
59 |
+
This was a bug in pre-2.0 versions, and an incompatibility with the plugin. It has been fixed in 2.0, but in Legacy Mode, this bug is still present. If you need Legacy Mode enabled for some reason, there is no fix for this bug, however there is an alternative workaround. According to reports from users who had this issue, a plugin called Page Scroll To ID is a worthy alternative to Easy Smooth Scroll Links and works with the Sticky Anything plugin in Legacy Mode.
|
60 |
|
61 |
= Still doesn't work. What could be wrong? =
|
62 |
+
Check the "Debug Mode" checkbox in the plugin's settings. Reload the page and you may see errors in your browser's console window. If you've used a selector that doesn't exist, OR there are more of them on the page, you will be notified of that in the console.
|
63 |
|
64 |
= Is it possible to have multiple sticky elements? =
|
65 |
+
The current version only allows one sticky element, but this functionality will be implemented in the next major version. No expected release date, though.
|
66 |
+
|
67 |
+
= What is Legacy Mode? Should I use it? =
|
68 |
+
In version 2.0 of the plugin, a new/better method for making elements sticky was introduced. Before this, a sticky element would essentially be a cloned copy of the original element. Now, the element itself becomes sticky and doesn't use copying and cloning anymore, which solves a lot of issues.
|
69 |
+
|
70 |
+
So, should you use it or not? Well, if you upgraded this plugin from an earlier version, Legacy Mode will be turned ON by default, because chances are that the old method worked perfectly fine for your site. If that's the case, there is not really a need to use the new method and you can just continue using the old, classic method. If it ain't broke, don't fix it, right?
|
71 |
+
|
72 |
+
Having said that, it's worth checking if your element works just as well with Legacy Mode turned OFF, since this is the "better" method. Just give it a quick try. If it doesn't work, you can always just go back and enable it again.
|
73 |
+
|
74 |
+
NOTE: new installs of the plugin will have the Legacy Mode turned off by default. Only UPGRADES from 1.4 (or before) should have it turned on by default.
|
75 |
|
76 |
= What is this Dynamic Mode thing exactly? =
|
77 |
+
This mode is only available in Legacy Mode, and to properly explain this, we'll need to go a little deeper in the plugin's functionality. So bear with me...
|
78 |
|
79 |
+
In Legacy Mode, when an element becomes sticky at the top of the page (and keeps its place regardless of the scrolling), it's actually not the element itself you see, but a cloned copy of it, while the actuak original element is out of view and invisible.
|
80 |
|
81 |
The original element always stays where it originally is on the page, while the cloned element is always at the top of the browser viewport screen. However, you will never see them both at the same time; depending on your scroll position, it always just shows either one or the other.
|
82 |
|
83 |
+
In the original plugin version, the clone would be created right the moment when you load the page (but not visible right away). Then when you would scroll down, it would become visible (and stick at the top), while the original element would disappear from view.
|
84 |
+
|
85 |
+
However, some themes use JavaScript to dynamically create elements (menus, mostly) for mobile sites. With this method, a menu doesn't exist in the HTML source code when you load the page, but is created some time after the page is fully loaded -- in many cases, these menus would just be generated ONLY when the screen is more (or less) than a certain specific width. With the original version of the plugin, the problem would be that the original element (that you want to make sticky) may not have been fully created upon page load, so the clone would also not be fully functional.
|
86 |
|
87 |
+
Enter Dynamic Mode. Now, a clone of the element is not created on page load -- instead, it's only created when the user scrolls and hits the "sticky" point. This ensures that the cloned element is an actual 1-on-1 copy of what the original element consists of at that specific point in time (and not at the "page is loaded" point, which may be different if the element was altered since).
|
88 |
|
89 |
+
Why don't we use Dynamic Mode all the time then? This has to do with the fact that other plugins initialize themselves on page load and may need the full markup (including the cloned element) at that point. In Dynamic Mode, there is no clone available yet on page load, so that could cause an issue if that other plugin is looking for an element that doesn't exist yet.
|
90 |
|
91 |
+
(This may all sound terribly confusing. And it is! So, much work was done to fix this nonsense: since v2.0 of the plugin, a whole different method is being used to make elements sticky, and Dynamic Mode is not even an issue anymore.)
|
92 |
|
93 |
Phew!
|
94 |
|
95 |
+
= I'll need more help please! =
|
96 |
+
Please go to the plugin's [support forum on WordPress.org](https://wordpress.org/support/plugin/sticky-menu-or-anything-on-scroll) and post a message (include a link to your site if possible). Repsonse time is usually within a few hours maximum.
|
97 |
|
98 |
|
99 |
|
100 |
== Screenshots ==
|
101 |
|
102 |
+
1. Basic Settings screen
|
103 |
+
1. Advanced Settings screen
|
104 |
|
105 |
|
106 |
== Changelog ==
|
107 |
|
108 |
+
= 2.0 =
|
109 |
+
* Introduced a new/better method for making elements sticky
|
110 |
+
* Added Legacy Mode (for those who want to continue the old method)
|
111 |
+
* Split up settings screen in Basic and Advanced
|
112 |
+
* Debug mode uses uncompressed JS file for easier remote debugging
|
113 |
+
|
114 |
+
= 1.4 =
|
115 |
+
* Removed error notification if no pushup-element is selected
|
116 |
+
* Renaming class "cloned" to "sticky-element-cloned" and "original" to "sticky-element-original" to avoid conflicts with Owl Carousel
|
117 |
+
* Fixed bug where cloned element width would be rounded down if it contained sub-pixels
|
118 |
+
|
119 |
= 1.3.1 =
|
120 |
* Minor bug fix for push-up element
|
121 |
|
159 |
|
160 |
== Upgrade Notice ==
|
161 |
|
162 |
+
= 2.0 =
|
163 |
+
* Bug fixes and new/better method of making elements sticky
|
164 |
+
|
165 |
+
= 1.4 =
|
166 |
+
* Couple of bug fixes
|
167 |
+
|
168 |
= 1.3.1 =
|
169 |
* Minor bug fix for push-up element
|
170 |
|
sticky-menu-or-anything.php
CHANGED
@@ -5,7 +5,7 @@ Plugin URI: http://www.senff.com/plugins/sticky-anything-wp
|
|
5 |
Description: Pick any element on your page, and it will stick when it reaches the top of the page when you scroll down. Usually handy for navigation menus, but can be used for any (unique) element on your page.
|
6 |
Author: Mark Senff
|
7 |
Author URI: http://www.senff.com
|
8 |
-
Version:
|
9 |
*/
|
10 |
|
11 |
defined('ABSPATH') or die('INSERT COIN');
|
@@ -16,11 +16,12 @@ defined('ABSPATH') or die('INSERT COIN');
|
|
16 |
*/
|
17 |
|
18 |
/**
|
|
|
19 |
* --- IF DATABASE VALUES ARE NOT SET AT ALL, ADD DEFAULT OPTIONS TO DATABASE ---------------------------
|
20 |
*/
|
21 |
if (!function_exists('sticky_anthing_default_options')) {
|
22 |
function sticky_anthing_default_options() {
|
23 |
-
$versionNum = '
|
24 |
if (get_option('sticky_anything_options') === false) {
|
25 |
$new_options['sa_version'] = $versionNum;
|
26 |
$new_options['sa_element'] = '';
|
@@ -29,6 +30,7 @@ if (!function_exists('sticky_anthing_default_options')) {
|
|
29 |
$new_options['sa_minscreenwidth'] = '';
|
30 |
$new_options['sa_maxscreenwidth'] = '';
|
31 |
$new_options['sa_zindex'] = '';
|
|
|
32 |
$new_options['sa_dynamicmode'] = false;
|
33 |
$new_options['sa_debugmode'] = false;
|
34 |
$new_options['sa_pushup'] = '';
|
@@ -38,13 +40,13 @@ if (!function_exists('sticky_anthing_default_options')) {
|
|
38 |
}
|
39 |
|
40 |
/**
|
41 |
-
* --- IF DATABASE VALUES EXIST, CHECK IF NEWER OPTIONS EXIST
|
42 |
* --- IF NOT, ADD THESE OPTIONS WITH DEFAULT VALUES ---------------------------------------------------
|
43 |
* --- AND UPDATE VERSION NUMBER FOR SURE --------------------------------------------------------------
|
44 |
*/
|
45 |
if (!function_exists('sticky_anything_update')) {
|
46 |
function sticky_anything_update() {
|
47 |
-
$versionNum = '
|
48 |
$existing_options = get_option('sticky_anything_options');
|
49 |
|
50 |
if(!isset($existing_options['sa_minscreenwidth'])) {
|
@@ -64,6 +66,12 @@ if (!function_exists('sticky_anything_update')) {
|
|
64 |
$existing_options['sa_adminbar'] = true;
|
65 |
}
|
66 |
|
|
|
|
|
|
|
|
|
|
|
|
|
67 |
$existing_options['sa_version'] = $versionNum;
|
68 |
update_option('sticky_anything_options',$existing_options);
|
69 |
}
|
@@ -80,11 +88,13 @@ if (!function_exists('load_sticky_anything')) {
|
|
80 |
$versionNum = $options['sa_version'];
|
81 |
|
82 |
// Main jQuery plugin file
|
83 |
-
|
|
|
|
|
|
|
|
|
84 |
wp_enqueue_script('stickyAnythingLib');
|
85 |
|
86 |
-
$options = get_option('sticky_anything_options');
|
87 |
-
|
88 |
// Set defaults for by-default-empty elements (because '' does not work with the JQ plugin)
|
89 |
if (!$options['sa_topspace']) {
|
90 |
$options['sa_topspace'] = '0';
|
@@ -99,7 +109,7 @@ if (!function_exists('load_sticky_anything')) {
|
|
99 |
}
|
100 |
|
101 |
// If empty, set to 1 - not to 0. Also, if set to "0", keep it at 0.
|
102 |
-
if (strlen($options['sa_zindex']) == "0") {
|
103 |
$options['sa_zindex'] = '1';
|
104 |
}
|
105 |
|
@@ -109,6 +119,7 @@ if (!function_exists('load_sticky_anything')) {
|
|
109 |
'minscreenwidth' => $options['sa_minscreenwidth'],
|
110 |
'maxscreenwidth' => $options['sa_maxscreenwidth'],
|
111 |
'zindex' => $options['sa_zindex'],
|
|
|
112 |
'dynamicmode' => $options['sa_dynamicmode'],
|
113 |
'debugmode' => $options['sa_debugmode'],
|
114 |
'pushup' => $options['sa_pushup'],
|
@@ -160,9 +171,18 @@ if (!function_exists('sticky_anything_config_page')) {
|
|
160 |
|
161 |
<div class="main-content">
|
162 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
163 |
<h2 class="nav-tab-wrapper">
|
164 |
-
<a class="nav-tab" href="#main"><?php _e('
|
165 |
-
<a class="nav-tab" href="#
|
|
|
166 |
</h2>
|
167 |
|
168 |
<br>
|
@@ -244,9 +264,9 @@ if (!function_exists('sticky_anything_config_page')) {
|
|
244 |
|
245 |
<div class="tabs-content">
|
246 |
|
247 |
-
<
|
248 |
|
249 |
-
<
|
250 |
|
251 |
<input type="hidden" name="action" value="save_sticky_anything_options" />
|
252 |
<!-- Adding security through hidden referrer field -->
|
@@ -261,7 +281,7 @@ if (!function_exists('sticky_anything_config_page')) {
|
|
261 |
if ($sticky_anything_options['sa_element'] != '#NO-ELEMENT') {
|
262 |
echo esc_html( $sticky_anything_options['sa_element'] );
|
263 |
}
|
264 |
-
?>"/> <em><?php _e('(choose ONE element, e.g.
|
265 |
</td>
|
266 |
</tr>
|
267 |
|
@@ -273,8 +293,8 @@ if (!function_exists('sticky_anything_config_page')) {
|
|
273 |
</td>
|
274 |
</tr>
|
275 |
|
276 |
-
<tr
|
277 |
-
<th scope="row"
|
278 |
<td>
|
279 |
<input type="checkbox" id="sa_adminbar" name="sa_adminbar" <?php if ($sticky_anything_options['sa_adminbar'] ) echo ' checked="checked" ';?> />
|
280 |
<label for="sa_adminbar"><strong><?php _e('Move the sticky element down a little if there is an Administrator Toolbar at the top (for logged in users).','Sticky Anything plugin'); ?></strong></label>
|
@@ -295,6 +315,18 @@ if (!function_exists('sticky_anything_config_page')) {
|
|
295 |
</td>
|
296 |
</tr>
|
297 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
298 |
<tr>
|
299 |
<th scope="row"><?php _e('Z-index: (optional)','Sticky Anything plugin'); ?> <a href="#" title="<?php _e('If there are other elements on the page that obscure/overlap the sticky element, adding a Z-index might help. If you have no idea what that means, try entering 99999.','Sticky Anything plugin'); ?>" class="help">?</a></th>
|
300 |
<td>
|
@@ -302,23 +334,33 @@ if (!function_exists('sticky_anything_config_page')) {
|
|
302 |
</td>
|
303 |
</tr>
|
304 |
|
305 |
-
<tr
|
306 |
-
<th scope="row"
|
307 |
<td>
|
308 |
<input type="text" id="sa_pushup" name="sa_pushup" value="<?php
|
309 |
if ($sticky_anything_options['sa_pushup'] != '#NO-ELEMENT') {
|
310 |
echo esc_html( $sticky_anything_options['sa_pushup'] );
|
311 |
}
|
312 |
-
?>"/> <em><?php _e('(choose ONE element, e.g.
|
313 |
</td>
|
314 |
</tr>
|
315 |
|
316 |
<tr>
|
317 |
-
<th scope="row"><?php _e('
|
318 |
<td>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
319 |
<input type="checkbox" id="sa_dynamicmode" name="sa_dynamicmode" <?php if ($sticky_anything_options['sa_dynamicmode'] ) echo ' checked="checked" ';?> />
|
320 |
<label for="sa_dynamicmode"><strong><?php _e('If the plugin doesn\'t work in your theme (often the case with responsive themes), try it in Dynamic Mode.','Sticky Anything plugin'); ?></strong></label>
|
321 |
<p class="description"><?php _e('NOTE: this is not a \'Magic Checkbox\' that fixes all problems. It simply solves some issues that frequently appear with some responsive themes, but doesn\'t necessarily work in ALL situations.','Sticky Anything plugin'); ?></p>
|
|
|
322 |
</td>
|
323 |
</tr>
|
324 |
|
@@ -327,21 +369,25 @@ if (!function_exists('sticky_anything_config_page')) {
|
|
327 |
<td>
|
328 |
<input type="checkbox" id="sa_debugmode" name="sa_debugmode" <?php if ($sticky_anything_options['sa_debugmode'] ) echo ' checked="checked" ';?> />
|
329 |
<label for="sa_debugmode"><strong><?php _e('Log plugin errors in browser console','Sticky Anything plugin'); ?></strong></label>
|
330 |
-
<p class="description"><?php _e('Do NOT check this option in production environments.','Sticky Anything plugin'); ?></p>
|
331 |
</td>
|
332 |
</tr>
|
333 |
|
334 |
</table>
|
335 |
|
336 |
-
|
337 |
|
338 |
-
|
339 |
-
</form>
|
340 |
|
|
|
|
|
|
|
341 |
|
342 |
-
|
343 |
|
344 |
-
|
|
|
|
|
345 |
<?php include 'assets/faq.php'; ?>
|
346 |
</div>
|
347 |
|
@@ -422,6 +468,14 @@ if (!function_exists('process_sticky_anything_options')) {
|
|
422 |
}
|
423 |
}
|
424 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
425 |
foreach ( array('sa_dynamicmode') as $option_name ) {
|
426 |
if ( isset( $_POST[$option_name] ) ) {
|
427 |
$options[$option_name] = true;
|
@@ -438,9 +492,17 @@ if (!function_exists('process_sticky_anything_options')) {
|
|
438 |
}
|
439 |
}
|
440 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
441 |
update_option( 'sticky_anything_options', $options );
|
442 |
wp_redirect( add_query_arg(
|
443 |
-
array('page' => 'stickyanythingmenu', 'message' => '1'),
|
444 |
admin_url( 'options-general.php' )
|
445 |
)
|
446 |
);
|
@@ -459,7 +521,7 @@ if (!function_exists('sticky_anything_styles')) {
|
|
459 |
return;
|
460 |
}
|
461 |
|
462 |
-
wp_register_script('stickyAnythingAdminScript', plugins_url('/assets/js/sticky-anything-admin.js', __FILE__), array( 'jquery' ), '
|
463 |
wp_enqueue_script('stickyAnythingAdminScript');
|
464 |
|
465 |
wp_register_style('stickyAnythingAdminStyle', plugins_url('/assets/css/sticky-anything-admin.css', __FILE__) );
|
5 |
Description: Pick any element on your page, and it will stick when it reaches the top of the page when you scroll down. Usually handy for navigation menus, but can be used for any (unique) element on your page.
|
6 |
Author: Mark Senff
|
7 |
Author URI: http://www.senff.com
|
8 |
+
Version: 2.0
|
9 |
*/
|
10 |
|
11 |
defined('ABSPATH') or die('INSERT COIN');
|
16 |
*/
|
17 |
|
18 |
/**
|
19 |
+
* --- TRIGGERED ON ACTIVATION --------------------------------------------------------------------------
|
20 |
* --- IF DATABASE VALUES ARE NOT SET AT ALL, ADD DEFAULT OPTIONS TO DATABASE ---------------------------
|
21 |
*/
|
22 |
if (!function_exists('sticky_anthing_default_options')) {
|
23 |
function sticky_anthing_default_options() {
|
24 |
+
$versionNum = '2.0';
|
25 |
if (get_option('sticky_anything_options') === false) {
|
26 |
$new_options['sa_version'] = $versionNum;
|
27 |
$new_options['sa_element'] = '';
|
30 |
$new_options['sa_minscreenwidth'] = '';
|
31 |
$new_options['sa_maxscreenwidth'] = '';
|
32 |
$new_options['sa_zindex'] = '';
|
33 |
+
$new_options['sa_legacymode'] = false;
|
34 |
$new_options['sa_dynamicmode'] = false;
|
35 |
$new_options['sa_debugmode'] = false;
|
36 |
$new_options['sa_pushup'] = '';
|
40 |
}
|
41 |
|
42 |
/**
|
43 |
+
* --- IF DATABASE VALUES EXIST, THEN THIS IS AN UPGRADE, SO CHECK IF NEWER OPTIONS EXIST --------------
|
44 |
* --- IF NOT, ADD THESE OPTIONS WITH DEFAULT VALUES ---------------------------------------------------
|
45 |
* --- AND UPDATE VERSION NUMBER FOR SURE --------------------------------------------------------------
|
46 |
*/
|
47 |
if (!function_exists('sticky_anything_update')) {
|
48 |
function sticky_anything_update() {
|
49 |
+
$versionNum = '2.0';
|
50 |
$existing_options = get_option('sticky_anything_options');
|
51 |
|
52 |
if(!isset($existing_options['sa_minscreenwidth'])) {
|
66 |
$existing_options['sa_adminbar'] = true;
|
67 |
}
|
68 |
|
69 |
+
if(!isset($existing_options['sa_legacymode'])) {
|
70 |
+
// Introduced in version 2.0
|
71 |
+
// Keep the old/legacy mode, since that mode obviously worked before the upgrade.
|
72 |
+
$existing_options['sa_legacymode'] = true;
|
73 |
+
}
|
74 |
+
|
75 |
$existing_options['sa_version'] = $versionNum;
|
76 |
update_option('sticky_anything_options',$existing_options);
|
77 |
}
|
88 |
$versionNum = $options['sa_version'];
|
89 |
|
90 |
// Main jQuery plugin file
|
91 |
+
if($options['sa_debugmode']==true){
|
92 |
+
wp_register_script('stickyAnythingLib', plugins_url('/assets/js/jq-sticky-anything.js', __FILE__), array( 'jquery' ), $versionNum);
|
93 |
+
} else {
|
94 |
+
wp_register_script('stickyAnythingLib', plugins_url('/assets/js/jq-sticky-anything.min.js', __FILE__), array( 'jquery' ), $versionNum);
|
95 |
+
}
|
96 |
wp_enqueue_script('stickyAnythingLib');
|
97 |
|
|
|
|
|
98 |
// Set defaults for by-default-empty elements (because '' does not work with the JQ plugin)
|
99 |
if (!$options['sa_topspace']) {
|
100 |
$options['sa_topspace'] = '0';
|
109 |
}
|
110 |
|
111 |
// If empty, set to 1 - not to 0. Also, if set to "0", keep it at 0.
|
112 |
+
if (strlen($options['sa_zindex']) == "0") { // LENGTH is 0 (not the actual value)
|
113 |
$options['sa_zindex'] = '1';
|
114 |
}
|
115 |
|
119 |
'minscreenwidth' => $options['sa_minscreenwidth'],
|
120 |
'maxscreenwidth' => $options['sa_maxscreenwidth'],
|
121 |
'zindex' => $options['sa_zindex'],
|
122 |
+
'legacymode' => $options['sa_legacymode'],
|
123 |
'dynamicmode' => $options['sa_dynamicmode'],
|
124 |
'debugmode' => $options['sa_debugmode'],
|
125 |
'pushup' => $options['sa_pushup'],
|
171 |
|
172 |
<div class="main-content">
|
173 |
|
174 |
+
<?php
|
175 |
+
if ( isset( $_GET['tab'] )) {
|
176 |
+
$activeTab = $_GET['tab'];
|
177 |
+
} else {
|
178 |
+
$activeTab = 'main';
|
179 |
+
}
|
180 |
+
?>
|
181 |
+
|
182 |
<h2 class="nav-tab-wrapper">
|
183 |
+
<a class="nav-tab <?php if ($activeTab == 'main') { echo 'nav-tab-active'; } ?>" href="#main"><?php _e('Basic settings','Sticky Anything plugin'); ?></a>
|
184 |
+
<a class="nav-tab <?php if ($activeTab == 'advanced') { echo 'nav-tab-active'; } ?>" href="#advanced"><?php _e('Advanced settings','Sticky Anything plugin'); ?></a>
|
185 |
+
<a class="nav-tab <?php if ($activeTab == 'faq') { echo ' nav-tab-active'; } ?>" href="#faq"><?php _e('FAQ/Troubleshooting','Sticky Anything plugin'); ?></a>
|
186 |
</h2>
|
187 |
|
188 |
<br>
|
264 |
|
265 |
<div class="tabs-content">
|
266 |
|
267 |
+
<form method="post" action="admin-post.php">
|
268 |
|
269 |
+
<div class="tab-content tab-sticky-main <?php if ($activeTab != 'main') {echo 'hide';} ?>">
|
270 |
|
271 |
<input type="hidden" name="action" value="save_sticky_anything_options" />
|
272 |
<!-- Adding security through hidden referrer field -->
|
281 |
if ($sticky_anything_options['sa_element'] != '#NO-ELEMENT') {
|
282 |
echo esc_html( $sticky_anything_options['sa_element'] );
|
283 |
}
|
284 |
+
?>"/> <em><?php _e('(choose ONE element, e.g. <strong>#main-navigation</strong>, OR <strong>.main-menu-1</strong>, OR <strong>header nav</strong>, etc.)','Sticky Anything plugin'); ?></em>
|
285 |
</td>
|
286 |
</tr>
|
287 |
|
293 |
</td>
|
294 |
</tr>
|
295 |
|
296 |
+
<tr>
|
297 |
+
<th scope="row"><?php _e('Check for Admin Toolbar:','Sticky Anything plugin'); ?> <a href="#" title="<?php _e('If the sticky element gets obscured by the Administrator Toolbar for logged in users (or vice versa), check this box.','Sticky Anything plugin'); ?>" class="help">?</a></th>
|
298 |
<td>
|
299 |
<input type="checkbox" id="sa_adminbar" name="sa_adminbar" <?php if ($sticky_anything_options['sa_adminbar'] ) echo ' checked="checked" ';?> />
|
300 |
<label for="sa_adminbar"><strong><?php _e('Move the sticky element down a little if there is an Administrator Toolbar at the top (for logged in users).','Sticky Anything plugin'); ?></strong></label>
|
315 |
</td>
|
316 |
</tr>
|
317 |
|
318 |
+
</table>
|
319 |
+
|
320 |
+
</div>
|
321 |
+
|
322 |
+
<div class="tab-content tab-sticky-advanced <?php if ($activeTab != 'advanced') {echo 'hide';}?>">
|
323 |
+
|
324 |
+
<input type="hidden" name="action" value="save_sticky_anything_options" />
|
325 |
+
<!-- Adding security through hidden referrer field -->
|
326 |
+
<?php wp_nonce_field( 'sticky_anything' ); ?>
|
327 |
+
|
328 |
+
<table class="form-table">
|
329 |
+
|
330 |
<tr>
|
331 |
<th scope="row"><?php _e('Z-index: (optional)','Sticky Anything plugin'); ?> <a href="#" title="<?php _e('If there are other elements on the page that obscure/overlap the sticky element, adding a Z-index might help. If you have no idea what that means, try entering 99999.','Sticky Anything plugin'); ?>" class="help">?</a></th>
|
332 |
<td>
|
334 |
</td>
|
335 |
</tr>
|
336 |
|
337 |
+
<tr>
|
338 |
+
<th scope="row"><?php _e('Push-up element (optional):','Sticky Anything plugin'); ?> <a href="#" title="<?php _e('If you want your sticky element to be \'pushed up\' again by another element lower on the page, enter it here. Make sure this is a unique identifier.','Sticky Anything plugin'); ?>" class="help">?</a></th>
|
339 |
<td>
|
340 |
<input type="text" id="sa_pushup" name="sa_pushup" value="<?php
|
341 |
if ($sticky_anything_options['sa_pushup'] != '#NO-ELEMENT') {
|
342 |
echo esc_html( $sticky_anything_options['sa_pushup'] );
|
343 |
}
|
344 |
+
?>"/> <em><?php _e('(choose ONE element, e.g. <strong>#footer</strong>, OR <strong>.widget-bottom</strong>, etc.)','Sticky Anything plugin'); ?></em>
|
345 |
</td>
|
346 |
</tr>
|
347 |
|
348 |
<tr>
|
349 |
+
<th scope="row"><span class="new"><?php _e('NEW!','Sticky Anything plugin'); ?></span> <?php _e('Legacy mode:','Sticky Anything plugin'); ?> <a href="#" title="<?php _e('If you upgraded from an earlier version and it always worked before, use legacy mode to keep using the old method.','Sticky Anything plugin'); ?>" class="help">?</a></th>
|
350 |
<td>
|
351 |
+
<input type="checkbox" id="sa_legacymode" name="sa_legacymode" <?php if ($sticky_anything_options['sa_legacymode'] == true ) echo ' checked="checked" ';?> />
|
352 |
+
<label for="sa_legacymode"><strong><?php _e('Legacy Mode (only recommended if you upgraded from earlier version).','Sticky Anything plugin'); ?></strong></label>
|
353 |
+
<p class="description"><?php _e('In version 2.0, a new/better method for making elements sticky was introduced. However, if you upgraded this plugin from an earlier version, and the old method always worked for you, there is no need to use the new method and you should keep this option checked.<br>More information about this setting can be found in the <a href="#faq" class="faq">FAQ</a>.','Sticky Anything plugin'); ?></p>
|
354 |
+
</td>
|
355 |
+
</tr>
|
356 |
+
|
357 |
+
<tr id="row-dynamic-mode" <?php if ($sticky_anything_options['sa_legacymode'] == false ) echo 'class="disabled-feature"';?>>
|
358 |
+
<th scope="row"><div class="showhide" <?php if ($sticky_anything_options['sa_legacymode'] == false ) echo 'style="display:none;"';?>><?php _e('Dynamic mode:','Sticky Anything plugin'); ?> <a href="#" title="<?php _e('When Dynamic Mode is OFF, a cloned element will be created upon page load. If this mode is ON, a cloned element will be created every time your scrolled position hits the \'sticky\' point (option available in Legacy Mode only).','Sticky Anything plugin'); ?>" class="help">?</a></div></th>
|
359 |
+
<td><div class="showhide" <?php if ($sticky_anything_options['sa_legacymode'] == false ) echo 'style="display:none;"';?>>
|
360 |
<input type="checkbox" id="sa_dynamicmode" name="sa_dynamicmode" <?php if ($sticky_anything_options['sa_dynamicmode'] ) echo ' checked="checked" ';?> />
|
361 |
<label for="sa_dynamicmode"><strong><?php _e('If the plugin doesn\'t work in your theme (often the case with responsive themes), try it in Dynamic Mode.','Sticky Anything plugin'); ?></strong></label>
|
362 |
<p class="description"><?php _e('NOTE: this is not a \'Magic Checkbox\' that fixes all problems. It simply solves some issues that frequently appear with some responsive themes, but doesn\'t necessarily work in ALL situations.','Sticky Anything plugin'); ?></p>
|
363 |
+
</div>
|
364 |
</td>
|
365 |
</tr>
|
366 |
|
369 |
<td>
|
370 |
<input type="checkbox" id="sa_debugmode" name="sa_debugmode" <?php if ($sticky_anything_options['sa_debugmode'] ) echo ' checked="checked" ';?> />
|
371 |
<label for="sa_debugmode"><strong><?php _e('Log plugin errors in browser console','Sticky Anything plugin'); ?></strong></label>
|
372 |
+
<p class="description"><?php _e('This will help debugging the plugin in case of problems. Do NOT check this option in production environments.','Sticky Anything plugin'); ?></p>
|
373 |
</td>
|
374 |
</tr>
|
375 |
|
376 |
</table>
|
377 |
|
378 |
+
</div>
|
379 |
|
380 |
+
<div class="tab-content tab-sticky-main tab-sticky-advanced <?php if (($activeTab != 'main') && ($activeTab != 'advanced')) {echo 'hide';} ?>">
|
|
|
381 |
|
382 |
+
<input type="hidden" name="sa_tab" value="<?php echo $activeTab ?>">
|
383 |
+
|
384 |
+
<br><input type="submit" value="<?php _e('SAVE SETTINGS','Sticky Anything plugin'); ?>" class="button-primary"/>
|
385 |
|
386 |
+
</div>
|
387 |
|
388 |
+
</form>
|
389 |
+
|
390 |
+
<div class="tab-content tab-sticky-faq <?php if ($activeTab != 'faq') {echo 'hide';} ?>">
|
391 |
<?php include 'assets/faq.php'; ?>
|
392 |
</div>
|
393 |
|
468 |
}
|
469 |
}
|
470 |
|
471 |
+
foreach ( array('sa_legacymode') as $option_name ) {
|
472 |
+
if ( isset( $_POST[$option_name] ) ) {
|
473 |
+
$options[$option_name] = true;
|
474 |
+
} else {
|
475 |
+
$options[$option_name] = false;
|
476 |
+
}
|
477 |
+
}
|
478 |
+
|
479 |
foreach ( array('sa_dynamicmode') as $option_name ) {
|
480 |
if ( isset( $_POST[$option_name] ) ) {
|
481 |
$options[$option_name] = true;
|
492 |
}
|
493 |
}
|
494 |
|
495 |
+
foreach ( array('sa_tab') as $option_name ) {
|
496 |
+
if ( isset( $_POST[$option_name] ) ) {
|
497 |
+
$options[$option_name] = sanitize_text_field( $_POST[$option_name] );
|
498 |
+
}
|
499 |
+
}
|
500 |
+
|
501 |
+
$tabValue = $_POST['sa_tab'];
|
502 |
+
|
503 |
update_option( 'sticky_anything_options', $options );
|
504 |
wp_redirect( add_query_arg(
|
505 |
+
array('page' => 'stickyanythingmenu', 'message' => '1', 'tab' => $tabValue),
|
506 |
admin_url( 'options-general.php' )
|
507 |
)
|
508 |
);
|
521 |
return;
|
522 |
}
|
523 |
|
524 |
+
wp_register_script('stickyAnythingAdminScript', plugins_url('/assets/js/sticky-anything-admin.js', __FILE__), array( 'jquery' ), '2.0');
|
525 |
wp_enqueue_script('stickyAnythingAdminScript');
|
526 |
|
527 |
wp_register_style('stickyAnythingAdminStyle', plugins_url('/assets/css/sticky-anything-admin.css', __FILE__) );
|