myStickymenu - Version 1.4

Version Description

Download this release

Release Info

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

Code changes from version 1.3 to 1.4

Files changed (3) hide show
  1. mystickymenu.js +22 -4
  2. mystickymenu.php +43 -18
  3. readme.txt +2 -2
mystickymenu.js CHANGED
@@ -1,9 +1,27 @@
 
1
  var mysticky_navbar = document.querySelector(mysticky_name.mysticky_string);
2
- var origOffsetY = mysticky_navbar.offsetTop;
3
- var hasScrollY = 'scrollY' in window;
4
 
5
- function onScroll(e) {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  var y = hasScrollY ? window.scrollY : document.documentElement.scrollTop;
7
- y >= origOffsetY ? mysticky_navbar.classList.add('myfixed') : mysticky_navbar.classList.remove('myfixed');
8
  }
9
  document.addEventListener('scroll', onScroll);
1
+ // select mysticky class
2
  var mysticky_navbar = document.querySelector(mysticky_name.mysticky_string);
 
 
3
 
4
+ // add mysticky_wrap div around selected mysticky class
5
+ var myparent = mysticky_navbar.parentNode;
6
+ var mywrapper = document.createElement('div');
7
+ var position = 0;
8
+ for(var i = 0; i < myparent.childNodes.length; i++) {
9
+ if(myparent.childNodes[i] == mysticky_navbar) {
10
+ position = i;
11
+ break;
12
+ };
13
+ };
14
+ mywrapper.id = 'mysticky_wrap';
15
+ mywrapper.appendChild(mysticky_navbar);
16
+ myparent.insertBefore(mywrapper, myparent.childNodes[position]);
17
+ var mydivHeight = ((mysticky_navbar.offsetHeight) + 'px');
18
+ mywrapper.style.height = mydivHeight;
19
+
20
+ // add myfixed class to selected mysticky class
21
+ var origOffsetY = mysticky_navbar.offsetTop + 100;
22
+ var hasScrollY = 'scrollY' in window;
23
+ function onScroll(e) {
24
  var y = hasScrollY ? window.scrollY : document.documentElement.scrollTop;
25
+ y >= origOffsetY ? mysticky_navbar.classList.add('myfixed') : mysticky_navbar.classList.remove('myfixed');
26
  }
27
  document.addEventListener('scroll', onScroll);
mystickymenu.php CHANGED
@@ -2,8 +2,8 @@
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.3
7
  Author: m.r.d.a
8
  License: GPLv2 or later
9
  */
@@ -80,10 +80,11 @@ class MyStickyMenuPage
80
 
81
  'mysticky_class_selector' => '.navbar',
82
  'myfixed_zindex' => '1000000',
83
- 'myfixed_width' => '',
84
  'myfixed_bgcolor' => '#F39A30',
85
  'myfixed_opacity' => '95',
86
  'myfixed_transition_time' => '0.3',
 
87
  'myfixed_disable_small_screen' => false,
88
  'myfixed_disable_admin_bar' => false
89
 
@@ -161,6 +162,13 @@ class MyStickyMenuPage
161
  'setting_section_id'
162
  );
163
  add_settings_field(
 
 
 
 
 
 
 
164
  'myfixed_disable_small_screen',
165
  'Enable at Small Screen Sizes',
166
  array( $this, 'myfixed_disable_small_screen_callback' ),
@@ -173,7 +181,7 @@ class MyStickyMenuPage
173
  array( $this, 'myfixed_disable_admin_bar_callback' ),
174
  'my-stickymenu-settings',
175
  'setting_section_id'
176
- );
177
  }
178
 
179
  /**
@@ -202,6 +210,9 @@ class MyStickyMenuPage
202
  if( isset( $input['myfixed_transition_time'] ) )
203
  $new_input['myfixed_transition_time'] = sanitize_text_field( $input['myfixed_transition_time'] );
204
 
 
 
 
205
  if( isset( $input['myfixed_disable_small_screen'] ) )
206
  $new_input['myfixed_disable_small_screen'] = sanitize_text_field( $input['myfixed_disable_small_screen'] );
207
 
@@ -241,7 +252,7 @@ class MyStickyMenuPage
241
  public function myfixed_width_callback()
242
  {
243
  printf(
244
- '<input type="text" id="myfixed_width" name="mysticky_option_name[myfixed_width]" value="%s" /> sticky width in px or percentage, leave empty for default' ,
245
  isset( $this->options['myfixed_width'] ) ? esc_attr( $this->options['myfixed_width']) : ''
246
  );
247
  }
@@ -270,9 +281,18 @@ class MyStickyMenuPage
270
  );
271
  }
272
 
 
 
 
 
 
 
 
 
 
273
  public function myfixed_disable_small_screen_callback()
274
  {
275
- printf(
276
  '<input id="%1$s" name="mysticky_option_name[myfixed_disable_small_screen]" type="checkbox" %2$s /> Enable mysticky menu on small resolutions, less than 359px, default unchecked.',
277
  'myfixed_disable_small_screen',
278
  checked( isset( $this->options['myfixed_disable_small_screen'] ), true, false )
@@ -280,7 +300,7 @@ class MyStickyMenuPage
280
  }
281
  public function myfixed_disable_admin_bar_callback()
282
  {
283
- printf(
284
  '<input id="%1$s" name="mysticky_option_name[myfixed_disable_admin_bar]" type="checkbox" %2$s /> Select this only if your theme does not show fixed admin bar on frontpage, default unchecked.',
285
  'myfixed_disable_admin_bar',
286
  checked( isset( $this->options['myfixed_disable_admin_bar'] ), true, false )
@@ -313,20 +333,17 @@ add_filter('the_content_more_link', 'mysticky_remove_more_jump_link');
313
  function mysticky_build_stylesheet_content() {
314
  $mysticky_options = get_option( 'mysticky_option_name' );
315
  echo
316
- '<style type="text/css">
317
- ';
318
  if ($mysticky_options ['myfixed_disable_admin_bar'] == false ){
319
  echo
320
- '#wpadminbar {
321
- position: absolute !important;
322
- top: 0px !important;
323
- }
324
  ';
325
  }
326
  echo
327
  '.myfixed {
328
- position: fixed;
329
  top: 0px!important;
 
330
  margin-top: 0px!important;
331
  z-index: '. $mysticky_options ['myfixed_zindex'] .';
332
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=' . $mysticky_options ['myfixed_opacity'] . ')";
@@ -335,11 +352,12 @@ function mysticky_build_stylesheet_content() {
335
  ';
336
  if ($mysticky_options ['myfixed_width'] >= 1 ){
337
  echo
338
- 'width:' . $mysticky_options ['myfixed_width'] . '!important;
 
339
  ';
340
  }
341
  echo
342
- 'background-color: ' . $mysticky_options ['myfixed_bgcolor'] . '!important;
343
  -webkit-transition: ' . $mysticky_options ['myfixed_transition_time'] . 's;
344
  -moz-transition: ' . $mysticky_options ['myfixed_transition_time'] . 's;
345
  -o-transition: ' . $mysticky_options ['myfixed_transition_time'] . 's;
@@ -351,6 +369,14 @@ function mysticky_build_stylesheet_content() {
351
  '@media (max-width: 359px) {.myfixed {position: static!important;}}
352
  ';
353
  }
 
 
 
 
 
 
 
 
354
  echo '</style>
355
  ';
356
  }
@@ -369,8 +395,7 @@ wp_enqueue_script( 'mystickymenu' );
369
  $mysticky_translation_array = array( 'mysticky_string' => $mysticky_options['mysticky_class_selector'] );
370
 
371
  wp_localize_script( 'mystickymenu', 'mysticky_name', $mysticky_translation_array );
372
-
373
  }
374
- add_action( 'wp_enqueue_scripts', 'mystickymenu_script' );
375
 
 
376
  ?>
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 Sticky Class to .your_navbar_class or #your_navbar_id.
6
+ Version: 1.4
7
  Author: m.r.d.a
8
  License: GPLv2 or later
9
  */
80
 
81
  'mysticky_class_selector' => '.navbar',
82
  'myfixed_zindex' => '1000000',
83
+ 'myfixed_width' => '100%',
84
  'myfixed_bgcolor' => '#F39A30',
85
  'myfixed_opacity' => '95',
86
  'myfixed_transition_time' => '0.3',
87
+ 'myfixed_fade' => false,
88
  'myfixed_disable_small_screen' => false,
89
  'myfixed_disable_admin_bar' => false
90
 
162
  'setting_section_id'
163
  );
164
  add_settings_field(
165
+ 'myfixed_fade',
166
+ 'Fade or slide effect',
167
+ array( $this, 'myfixed_fade_callback' ),
168
+ 'my-stickymenu-settings',
169
+ 'setting_section_id'
170
+ );
171
+ add_settings_field(
172
  'myfixed_disable_small_screen',
173
  'Enable at Small Screen Sizes',
174
  array( $this, 'myfixed_disable_small_screen_callback' ),
181
  array( $this, 'myfixed_disable_admin_bar_callback' ),
182
  'my-stickymenu-settings',
183
  'setting_section_id'
184
+ );
185
  }
186
 
187
  /**
210
  if( isset( $input['myfixed_transition_time'] ) )
211
  $new_input['myfixed_transition_time'] = sanitize_text_field( $input['myfixed_transition_time'] );
212
 
213
+ if( isset( $input['myfixed_fade'] ) )
214
+ $new_input['myfixed_fade'] = sanitize_text_field( $input['myfixed_fade'] );
215
+
216
  if( isset( $input['myfixed_disable_small_screen'] ) )
217
  $new_input['myfixed_disable_small_screen'] = sanitize_text_field( $input['myfixed_disable_small_screen'] );
218
 
252
  public function myfixed_width_callback()
253
  {
254
  printf(
255
+ '<input type="text" id="myfixed_width" name="mysticky_option_name[myfixed_width]" value="%s" /> sticky width in px or percentage' ,
256
  isset( $this->options['myfixed_width'] ) ? esc_attr( $this->options['myfixed_width']) : ''
257
  );
258
  }
281
  );
282
  }
283
 
284
+ public function myfixed_fade_callback()
285
+ {
286
+ printf(
287
+ '<input id="%1$s" name="mysticky_option_name[myfixed_fade]" type="checkbox" %2$s /> Checked is fade, unchecked is slide.',
288
+ 'myfixed_fade',
289
+ checked( isset( $this->options['myfixed_fade'] ), true, false )
290
+ );
291
+ }
292
+
293
  public function myfixed_disable_small_screen_callback()
294
  {
295
+ printf(
296
  '<input id="%1$s" name="mysticky_option_name[myfixed_disable_small_screen]" type="checkbox" %2$s /> Enable mysticky menu on small resolutions, less than 359px, default unchecked.',
297
  'myfixed_disable_small_screen',
298
  checked( isset( $this->options['myfixed_disable_small_screen'] ), true, false )
300
  }
301
  public function myfixed_disable_admin_bar_callback()
302
  {
303
+ printf(
304
  '<input id="%1$s" name="mysticky_option_name[myfixed_disable_admin_bar]" type="checkbox" %2$s /> Select this only if your theme does not show fixed admin bar on frontpage, default unchecked.',
305
  'myfixed_disable_admin_bar',
306
  checked( isset( $this->options['myfixed_disable_admin_bar'] ), true, false )
333
  function mysticky_build_stylesheet_content() {
334
  $mysticky_options = get_option( 'mysticky_option_name' );
335
  echo
336
+ '<style type="text/css">';
 
337
  if ($mysticky_options ['myfixed_disable_admin_bar'] == false ){
338
  echo
339
+ ' #wpadminbar { position: absolute !important; top: 0px !important;}
 
 
 
340
  ';
341
  }
342
  echo
343
  '.myfixed {
344
+ position: fixed!important;
345
  top: 0px!important;
346
+ left: 0px!important;
347
  margin-top: 0px!important;
348
  z-index: '. $mysticky_options ['myfixed_zindex'] .';
349
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=' . $mysticky_options ['myfixed_opacity'] . ')";
352
  ';
353
  if ($mysticky_options ['myfixed_width'] >= 1 ){
354
  echo
355
+ ' width:' . $mysticky_options ['myfixed_width'] . '!important;
356
+
357
  ';
358
  }
359
  echo
360
+ ' background-color: ' . $mysticky_options ['myfixed_bgcolor'] . '!important;
361
  -webkit-transition: ' . $mysticky_options ['myfixed_transition_time'] . 's;
362
  -moz-transition: ' . $mysticky_options ['myfixed_transition_time'] . 's;
363
  -o-transition: ' . $mysticky_options ['myfixed_transition_time'] . 's;
369
  '@media (max-width: 359px) {.myfixed {position: static!important;}}
370
  ';
371
  }
372
+ echo
373
+ '#mysticky_wrap { width:100%; }
374
+ ';
375
+
376
+ if ($mysticky_options ['myfixed_fade'] == false ){
377
+ echo
378
+ ''. $mysticky_options ['mysticky_class_selector'] . '{ top: -100px; width:100%; position: static; max-width: 100% !important; }';
379
+ }
380
  echo '</style>
381
  ';
382
  }
395
  $mysticky_translation_array = array( 'mysticky_string' => $mysticky_options['mysticky_class_selector'] );
396
 
397
  wp_localize_script( 'mystickymenu', 'mysticky_name', $mysticky_translation_array );
 
398
  }
 
399
 
400
+ add_action( 'wp_enqueue_scripts', 'mystickymenu_script' );
401
  ?>
readme.txt CHANGED
@@ -3,8 +3,8 @@ 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.3
8
  License: GPLv2 or later
9
 
10
  This lightweight plugin will made your menu sticky on top of page, after scroll, when selected sticky class hits upper border.
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.9
7
+ Stable tag: 1.4
8
  License: GPLv2 or later
9
 
10
  This lightweight plugin will made your menu sticky on top of page, after scroll, when selected sticky class hits upper border.