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.