myStickymenu - Version 1.1

Version Description

Download this release

Release Info

Developer damiroquai
Plugin Icon 128x128 myStickymenu
Version 1.1
Comparing to
See all releases

Code changes from version 1.0 to 1.1

Files changed (5) hide show
  1. mystickymenu.js +4 -4
  2. mystickymenu.php +297 -7
  3. readme.txt +4 -12
  4. screenshot-1.png +0 -0
  5. screenshot-2.png +0 -0
mystickymenu.js CHANGED
@@ -1,7 +1,7 @@
1
- var navbar = document.querySelector('.navbar');
2
- var origOffsetY = navbar.offsetTop;
3
  function onScroll(e) {
4
- window.scrollY >= origOffsetY ? navbar.classList.add('myfixed') :
5
- navbar.classList.remove('myfixed');
6
  }
7
  document.addEventListener('scroll', onScroll);
1
+ var mysticky_navbar = document.querySelector(mysticky_name.mysticky_string);
2
+ var origOffsetY = mysticky_navbar.offsetTop;
3
  function onScroll(e) {
4
+ window.scrollY >= origOffsetY ? mysticky_navbar.classList.add('myfixed') :
5
+ mysticky_navbar.classList.remove('myfixed');
6
  }
7
  document.addEventListener('scroll', onScroll);
mystickymenu.php CHANGED
@@ -2,15 +2,265 @@
2
  /*
3
  Plugin Name: myStickymenu
4
  Plugin URI: http://wordpress.transformnews.com/plugins/mystickymenu-simple-sticky-fixed-on-top-menu-implementation-for-twentythirteen-menu-269
5
- Description: Simple sticky (fixed on top) menu implementation for default Twentythirteen navigation menu. For other themes, if navigation class is different than .navbar change it to .your_navbar_class on the beggining of mystickymenu.js script ('.navbar') and inside mystickymenu.css.
6
- Version: 1.0
7
  Author: m.r.d.a
8
  License: GPLv2 or later
9
  */
10
 
11
- //remove default option for more link that jumps at the midle of page and its covered by menu
 
 
 
 
 
 
12
 
13
- function remove_more_jump_link($link) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
14
  $offset = strpos($link, '#more-');
15
  if ($offset) {
16
  $end = strpos($link, '"',$offset);
@@ -20,14 +270,54 @@ function remove_more_jump_link($link) {
20
  }
21
  return $link;
22
  }
23
- add_filter('the_content_more_link', 'remove_more_jump_link');
24
 
25
- function mystickymenu_script() {
26
 
27
- wp_enqueue_style('mystickymenu',WP_PLUGIN_URL.'/mystickymenu/mystickymenu.css', false,'1.0.0');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  wp_register_script('mystickymenu', WP_PLUGIN_URL. '/mystickymenu/mystickymenu.js', false,'1.0.0', true);
29
  wp_enqueue_script( 'mystickymenu' );
30
 
 
 
 
 
 
31
  }
32
  add_action( 'wp_enqueue_scripts', 'mystickymenu_script' );
 
33
  ?>
2
  /*
3
  Plugin Name: myStickymenu
4
  Plugin URI: http://wordpress.transformnews.com/plugins/mystickymenu-simple-sticky-fixed-on-top-menu-implementation-for-twentythirteen-menu-269
5
+ Description: Simple sticky (fixed on top) menu implementation for default Twentythirteen navigation menu. For other themes, after install go to Settings / myStickymenu and change navigation class to .your_navbar_class or #your_navbar_id.
6
+ Version: 1.1
7
  Author: m.r.d.a
8
  License: GPLv2 or later
9
  */
10
 
11
+ // add plugin admin settings by otto
12
+ class MyStickyMenuPage
13
+ {
14
+ /**
15
+ * Holds the values to be used in the fields callbacks
16
+ */
17
+ private $options;
18
 
19
+ /**
20
+ * Start up
21
+ */
22
+ public function __construct()
23
+ {
24
+ add_action( 'admin_menu', array( $this, 'add_plugin_page' ) );
25
+ add_action( 'admin_init', array( $this, 'page_init' ) );
26
+ add_action( 'admin_init', array( $this, 'mysticky_default_options' ) );
27
+ }
28
+
29
+ /**
30
+ * Add options page
31
+ */
32
+ public function add_plugin_page()
33
+ {
34
+ // This page will be under "Settings"
35
+
36
+ add_options_page(
37
+ 'Settings Admin',
38
+ 'myStickymenu',
39
+ 'manage_options',
40
+ 'my-stickymenu-settings',
41
+ array( $this, 'create_admin_page' )
42
+ );
43
+ }
44
+
45
+ /**
46
+ * Options page callback
47
+ */
48
+ public function create_admin_page()
49
+ {
50
+ // Set class property
51
+ $this->options = get_option( 'mysticky_option_name');
52
+ ?>
53
+ <div class="wrap">
54
+ <?php screen_icon(); ?>
55
+ <h2>myStickymenu Settings</h2>
56
+ <form method="post" action="options.php">
57
+ <?php
58
+ // This prints out all hidden setting fields
59
+ settings_fields( 'mysticky_option_group' );
60
+ do_settings_sections( 'my-stickymenu-settings' );
61
+ submit_button();
62
+ ?>
63
+ </form>
64
+ </div>
65
+ <?php
66
+ }
67
+
68
+ /**
69
+ * Load Defaults
70
+ */
71
+ public function mysticky_default_options() {
72
+
73
+ global $options;
74
+
75
+ if ( false === get_option('mysticky_option_name') ) {
76
+
77
+ $default = array(
78
+
79
+ 'mysticky_class_selector' => '.navbar',
80
+ 'myfixed_zindex' => '1000000',
81
+ 'myfixed_width' => '',
82
+ 'myfixed_bgcolor' => '#F39A30',
83
+ 'myfixed_opacity' => '95',
84
+ 'myfixed_transition_time' => '0.3',
85
+
86
+ );
87
+
88
+ add_option( 'mysticky_option_name', $default );
89
+ }
90
+ }
91
+
92
+ /**
93
+ * Register and add settings
94
+ */
95
+ public function page_init()
96
+ {
97
+ register_setting(
98
+ 'mysticky_option_group', // Option group
99
+ 'mysticky_option_name', // Option name
100
+ array( $this, 'sanitize' ) // Sanitize
101
+ );
102
+
103
+ add_settings_field( $id, $title, $callback, $page, $section = 'default', $args = array() );
104
+
105
+ add_settings_section(
106
+ 'setting_section_id', // ID
107
+ 'myStickymenu Options', // Title
108
+ array( $this, 'print_section_info' ), // Callback
109
+ 'my-stickymenu-settings' // Page
110
+ );
111
+
112
+ add_settings_field(
113
+ 'mysticky_class_selector', // ID
114
+ 'mySticky Class', // Title
115
+ array( $this, 'mysticky_class_selector_callback' ), // Callback
116
+ 'my-stickymenu-settings', // Page
117
+ 'setting_section_id' // Section
118
+ );
119
+
120
+ add_settings_field(
121
+ 'myfixed_zindex',
122
+ 'mySticky z-index',
123
+ array( $this, 'myfixed_zindex_callback' ),
124
+ 'my-stickymenu-settings',
125
+ 'setting_section_id'
126
+ );
127
+
128
+ add_settings_field(
129
+ 'myfixed_width',
130
+ 'mySticky Width',
131
+ array( $this, 'myfixed_width_callback' ),
132
+ 'my-stickymenu-settings',
133
+ 'setting_section_id'
134
+ );
135
+
136
+ add_settings_field(
137
+ 'myfixed_bgcolor',
138
+ 'mySticky Background Color',
139
+ array( $this, 'myfixed_bgcolor_callback' ),
140
+ 'my-stickymenu-settings',
141
+ 'setting_section_id'
142
+ );
143
+
144
+ add_settings_field(
145
+ 'myfixed_opacity',
146
+ 'Sticky Opacity',
147
+ array( $this, 'myfixed_opacity_callback' ),
148
+ 'my-stickymenu-settings',
149
+ 'setting_section_id'
150
+ );
151
+
152
+ add_settings_field(
153
+ 'myfixed_transition_time',
154
+ 'mySticky Transition Time',
155
+ array( $this, 'myfixed_transition_time_callback' ),
156
+ 'my-stickymenu-settings',
157
+ 'setting_section_id'
158
+ );
159
+
160
+ }
161
+
162
+ /**
163
+ * Sanitize each setting field as needed
164
+ *
165
+ * @param array $input Contains all settings fields as array keys
166
+ */
167
+ public function sanitize( $input )
168
+ {
169
+ $new_input = array();
170
+ if( isset( $input['mysticky_class_selector'] ) )
171
+ $new_input['mysticky_class_selector'] = sanitize_text_field( $input['mysticky_class_selector'] );
172
+
173
+ if( isset( $input['myfixed_zindex'] ) )
174
+ $new_input['myfixed_zindex'] = absint( $input['myfixed_zindex'] );
175
+
176
+ if( isset( $input['myfixed_width'] ) )
177
+ $new_input['myfixed_width'] = sanitize_text_field( $input['myfixed_width'] );
178
+
179
+ if( isset( $input['myfixed_bgcolor'] ) )
180
+ $new_input['myfixed_bgcolor'] = sanitize_text_field( $input['myfixed_bgcolor'] );
181
+
182
+ if( isset( $input['myfixed_opacity'] ) )
183
+ $new_input['myfixed_opacity'] = sanitize_text_field( $input['myfixed_opacity'] );
184
+
185
+ if( isset( $input['myfixed_transition_time'] ) )
186
+ $new_input['myfixed_transition_time'] = sanitize_text_field( $input['myfixed_transition_time'] );
187
+
188
+ return $new_input;
189
+ }
190
+
191
+ /**
192
+ * Print the Section text
193
+ */
194
+ public function print_section_info()
195
+ {
196
+ print 'Change mySticky options to suite your needs';
197
+ }
198
+
199
+ /**
200
+ * Get the settings option array and print one of its values
201
+ */
202
+ public function mysticky_class_selector_callback()
203
+ {
204
+ printf(
205
+ '<input type="text" id="mysticky_class_selector" name="mysticky_option_name[mysticky_class_selector]" value="%s" /> .navbar for Twenty Thirteen template, for other templates inspect your code to find apropriate menu/navigation bar class or id.',
206
+ isset( $this->options['mysticky_class_selector'] ) ? esc_attr( $this->options['mysticky_class_selector']) : ''
207
+ );
208
+ }
209
+
210
+ /**
211
+ * Get the settings option array and print one of its values*/
212
+
213
+ public function myfixed_zindex_callback()
214
+ {
215
+ printf(
216
+ '<input type="text" id="myfixed_zindex" name="mysticky_option_name[myfixed_zindex]" value="%s" /> sticky z-index, default 1000000',
217
+ isset( $this->options['myfixed_zindex'] ) ? esc_attr( $this->options['myfixed_zindex']) : ''
218
+ );
219
+ }
220
+
221
+ public function myfixed_width_callback()
222
+ {
223
+ printf(
224
+ '<input type="text" id="myfixed_width" name="mysticky_option_name[myfixed_width]" value="%s" /> sticky width in px or percentage, leave empty for default' ,
225
+ isset( $this->options['myfixed_width'] ) ? esc_attr( $this->options['myfixed_width']) : ''
226
+ );
227
+ }
228
+
229
+ public function myfixed_bgcolor_callback()
230
+ {
231
+ printf(
232
+ '<input type="text" id="myfixed_bgcolor" name="mysticky_option_name[myfixed_bgcolor]" value="%s" /> default #F39A30' ,
233
+ isset( $this->options['myfixed_bgcolor'] ) ? esc_attr( $this->options['myfixed_bgcolor']) : ''
234
+ );
235
+ }
236
+
237
+ public function myfixed_opacity_callback()
238
+ {
239
+ printf(
240
+ '<input type="text" id="myfixed_opacity" name="mysticky_option_name[myfixed_opacity]" value="%s" /> numbers 1-100, default 95',
241
+ isset( $this->options['myfixed_opacity'] ) ? esc_attr( $this->options['myfixed_opacity']) : ''
242
+ );
243
+ }
244
+
245
+ public function myfixed_transition_time_callback()
246
+ {
247
+ printf(
248
+ '<input type="text" id="myfixed_transition_time" name="mysticky_option_name[myfixed_transition_time]" value="%s" /> in seconds, default 0.3',
249
+ isset( $this->options['myfixed_transition_time'] ) ? esc_attr( $this->options['myfixed_transition_time']) : ''
250
+ );
251
+ }
252
+
253
+ }
254
+
255
+ if( is_admin() )
256
+ $my_settings_page = new MyStickyMenuPage();
257
+
258
+ // end plugin admin settings
259
+
260
+
261
+ // remove default option for more link that jumps at the midle of page and its covered by menu
262
+
263
+ function mysticky_remove_more_jump_link($link) {
264
  $offset = strpos($link, '#more-');
265
  if ($offset) {
266
  $end = strpos($link, '"',$offset);
270
  }
271
  return $link;
272
  }
273
+ add_filter('the_content_more_link', 'mysticky_remove_more_jump_link');
274
 
275
+ // create style from options
276
 
277
+ function mysticky_build_stylesheet_content() {
278
+ $mysticky_options = get_option( 'mysticky_option_name' );
279
+ echo '
280
+ <style type="text/css">
281
+ #wpadminbar {
282
+ position: absolute !important;
283
+ top: 0px !important;
284
+ }
285
+ .myfixed {
286
+ position: fixed ;
287
+ top: 0px;
288
+ z-index: '. $mysticky_options ['myfixed_zindex'] .';
289
+ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=' . $mysticky_options ['myfixed_opacity'] . ')";
290
+ filter: alpha(opacity=' . $mysticky_options ['myfixed_opacity'] . ');
291
+ opacity:.' . $mysticky_options ['myfixed_opacity'] . ';
292
+ width:' . $mysticky_options ['myfixed_width'] . ';
293
+ background-color: '. $mysticky_options ['myfixed_bgcolor'] . ';
294
+ -webkit-transition: ' . $mysticky_options ['myfixed_transition_time'] . 's;
295
+ -moz-transition: ' . $mysticky_options ['myfixed_transition_time'] . 's;
296
+ -o-transition: ' . $mysticky_options ['myfixed_transition_time'] . 's;
297
+ transition: ' . $mysticky_options ['myfixed_transition_time'] . 's;
298
+ }
299
+ </style>
300
+ ';
301
+
302
+ }
303
+ add_action('wp_head', 'mysticky_build_stylesheet_content');
304
+
305
+
306
+ function mystickymenu_script() {
307
+
308
+ // options on frontpage
309
+ $mysticky_options = get_option( 'mysticky_option_name' );
310
+
311
+ // register scripts
312
  wp_register_script('mystickymenu', WP_PLUGIN_URL. '/mystickymenu/mystickymenu.js', false,'1.0.0', true);
313
  wp_enqueue_script( 'mystickymenu' );
314
 
315
+ // Localize mystickymenu.js script with myStickymenu options
316
+ $mysticky_translation_array = array( 'mysticky_string' => $mysticky_options['mysticky_class_selector'] );
317
+
318
+ wp_localize_script( 'mystickymenu', 'mysticky_name', $mysticky_translation_array );
319
+
320
  }
321
  add_action( 'wp_enqueue_scripts', 'mystickymenu_script' );
322
+
323
  ?>
readme.txt CHANGED
@@ -1,10 +1,10 @@
1
  === myStickymenu ===
2
  Contributors: (Damiroquai)
3
  Donate link: http://wordpress.transformnews.com
4
- Tags: sticky menu, twentythirteen
5
  Requires at least: 3.8
6
  Tested up to: 3.8.1
7
- Stable tag: 1.0
8
  License: GPLv2 or later
9
 
10
  This lightweight plugin will made your Twentythirteen menu sticky on top of page after scroll hits upper border.
@@ -14,23 +14,15 @@ Plugin is designed for Twentythirteen template but should work on any theme, it'
14
 
15
  Plugin Home + Demo URL: http://wordpress.transformnews.com/plugins/mystickymenu-simple-sticky-fixed-on-top-menu-implementation-for-twentythirteen-menu-269
16
 
17
-
18
  == Installation ==
19
 
20
  Install like any other plugin. After install activate.
21
 
22
- If using template other than Twentythirteen open wp-content/plugins/mystickymenu/mystickymenu.js and edit selector class based on your template navigation bar class.
23
-
24
- "var navbar = document.querySelector('.navbar');"
25
-
26
- "var navbar = document.querySelector('.your_navbar_class');"
27
 
28
-
29
- Edit /mystickymenu/mystickymenu.css to edit menu style, width, color...
30
  Original javascript used from http://jsbin.com/omanut/2/edit
31
 
32
-
33
-
34
  == Screenshots ==
35
  1. screenshot-1.png in plugin folder shows menu when page is opened, and not scrolled.
36
  2. screenshot-2.png shows menu when page is scrolled towards the bottom.
 
1
  === myStickymenu ===
2
  Contributors: (Damiroquai)
3
  Donate link: http://wordpress.transformnews.com
4
+ Tags: sticky menu, twentythirteen, twenty-thirteen, plugin, menu
5
  Requires at least: 3.8
6
  Tested up to: 3.8.1
7
+ Stable tag: 1.1
8
  License: GPLv2 or later
9
 
10
  This lightweight plugin will made your Twentythirteen menu sticky on top of page after scroll hits upper border.
14
 
15
  Plugin Home + Demo URL: http://wordpress.transformnews.com/plugins/mystickymenu-simple-sticky-fixed-on-top-menu-implementation-for-twentythirteen-menu-269
16
 
 
17
  == Installation ==
18
 
19
  Install like any other plugin. After install activate.
20
 
21
+ If using template other than Twenty Thirteen go to Settings / myStickymenu and change navigation class to .your_navbar_class or #your_navbar_id..
 
 
 
 
22
 
 
 
23
  Original javascript used from http://jsbin.com/omanut/2/edit
24
 
 
 
25
  == Screenshots ==
26
  1. screenshot-1.png in plugin folder shows menu when page is opened, and not scrolled.
27
  2. screenshot-2.png shows menu when page is scrolled towards the bottom.
28
+ 3. screenshot-3.png shows myStickymenu admin settings page.
screenshot-1.png CHANGED
Binary file
screenshot-2.png CHANGED
Binary file