Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 JavaScript - Push Menu State
#
I was wondering if someone could help me with a script I'm using on my board. Although it's not something that's created by Jcink, I know there's a lot of people in the General Support forum that know way more JavaScript than me (my knowledge of scripting is about 0). And I know this is a popular script that many sites use, so they may have the same question as I do.

If this isn't the proper place to ask this questions just let me know. I'll preface this by saying that I've already contacted the creator of the script but I haven't heard anything back yet.

I am using a push menu script created by MERC (link to script) and I noticed that when I first load my board I see that the state of the push menu is set to "Undefined", which shows up in my menu bar:

user posted image

It's supposed to show an icon from Font Awesome:

user posted image

but I'm guessing it shows undefined as default because the user hasn't selected an option (open or closed menu bar) when they first visit the site (after leaving the menu bar open or closed the script leaves a cookie for the user to remember the option that was last selected).

I was wondering if there's anything I could add or change the script so that would choose the open option automatically instead of showing "Undefined" in the menu bar area?

Additionally, I did edit the script Merc is using to show icons instead of the default "Open" or "Closed" text that they have on their test site. My board is located at: http://muerte.jcink.net/ (I haven't opened yet because I am still working on the skin). I've copied my edits below:

CODE
<script>
/*****************
Put this just before the body tag ends but
above the push-menu div. You can delete this
when you are done.
*****************/
$(document).ready(function(){

var $body = $('body'),
    $btn = $('#push-menu-toggle'),
    $menu = $('#push-menu'),
    menu_state = $.cookie('my_cookie_name'),
    viewportX = $(window).width();

var cookieValue = $.cookie('my_cookie_name');

if ( cookieValue === '<span title="Show Sidebar" class="fas fa-chevron-circle-right"></span>' ) {
  $body.addClass('small-menu');
} else {
  $body.removeClass('small-menu');
}
 
$.cookie('my_cookie_name', menu_state);

$('.cookie-is').find('em').remove();
$('.cookie-is').prepend().html( '<em>' + $.cookie('my_cookie_name') + '</em>');
   
$btn.click(function(){
     
  $body.toggleClass('small-menu');
 
  $.removeCookie('my_cookie_name');
 
  if ( $body.hasClass('small-menu') ) {
    menu_state = '<span title="Show Sidebar" class="fas fa-chevron-circle-right"></span>';
  } else {
    menu_state = '<span title="Hide Sidebar" class="fas fa-chevron-circle-left"></span>';
  }
 
  $.cookie('my_cookie_name', menu_state);

  $('.cookie-is').find('em').remove();
  $('.cookie-is').prepend().html( '<em>' + $.cookie('my_cookie_name') + '</em>');
});

});
/*****************
Find more cookie resources at:
http://mercdoescookies.jcink.net
*****************/
</script>


This post has been edited by croixbones: Mar 23 2018, 03:19 AM
PM
#
Try downloading this file https://github.com/js-cookie/js-cookie/blob...rc/js.cookie.js and save it in the FileManager.

Then add this on top of the script.

CODE
<script src="/path/to/js.cookie.js"></script>


Or try changing the my_cookie_name

This post has been edited by CrunchDrop: Mar 23 2018, 03:58 AM

signature
Add me on Line http://line.me/ti/p/j4FHQtHFRE Jabber me segentra@chinwag.im
Or join the conference room anime@rooms.chinwag.im

user posted image
#
Hey! Can you post the top part as well? Looks like you might have accidentally left the

CODE
<span class='cookie-is'></span>


in there! I left that in there in case people wanted changing text to say open/close the cbox but this is most likely the thing you're trying to delete!

croixbones

This post has been edited by PANSY PARKINSON: Mar 23 2018, 03:12 PM
#
Thanks for the tip, CrunchDrop. I tried it, but it didn't work.

PANSY PARKINSON Thanks! I tried removing the span, but then nothing shows up when first loading the page making it impossible to hide or show the push menu?

Would I need to place an icon inside of the cookie-is span? Or replace the cookie-is span with an icon in both html and script?


Wait no, I think there was a misunderstanding, I want changing text to show when the menu bar is open/closed, but what I've done is replaced the text "open/close" with icons and I'm using those icons as the "burger" to open and close the menu bar.

Here's the top part of my code:
CODE
<div id="nav">
   <ul>
 <li><div id='push-menu-toggle'><span class='cookie-is'></span></div></li>
 <li>
   <i class="lnr lnr-menu" title="Navigation"></i>
   <ul id="navhov">
     <li><a href="/">Rules</a></li>
     <li><a href="/">Plot</a></li>
     <li><a href="/">Setting</a></li>
     <li><a href="/">Membergroups</a></li>
     <li><a href="/">World Guide</a></li>
     <li><a href="/index.php?act=Search">Search</a></li>
     <li><a href="#" class="modal-link" data-modal-target="mappop">Map</a></li>
    </ul>
 </li>
 <li class="g-<!-- |g_id| -->" style="display:none;"><a href="/index.php?act=Login&CODE=00" title="Sign in" class="lnr lnr-enter"></a></li>
 <li class="g-<!-- |g_id| -->" style="display:none;"><a href="/index.php?act=Reg&CODE=00" title="Register" class="lnr lnr-file-add"></a></li>
 <a id="scroll" href="#top" class="lnr lnr-chevron-up"></a>
   </ul>
</div>


I also replaced "my_cookie_name" with an actual name:
CODE
<script>
$(document).ready(function(){

var $body = $('body'),
    $btn = $('#push-menu-toggle'),
    $menu = $('#push-menu'),
    menu_state = $.cookie('psalms'),
    viewportX = $(window).width();

var cookieValue = $.cookie('psalms');

if ( cookieValue === '<span title="Show Sidebar" class="fas fa-chevron-circle-right"></span>' ) {
  $body.addClass('small-menu');
} else {
  $body.removeClass('small-menu');
}
 
$.cookie('psalms', menu_state);

$('.cookie-is').find('em').remove();
$('.cookie-is').prepend().html( '<em>' + $.cookie('psalms') + '</em>');
   
$btn.click(function(){
     
  $body.toggleClass('small-menu');
 
  $.removeCookie('psalms');
 
  if ( $body.hasClass('small-menu') ) {
    menu_state = '<span title="Show Sidebar" class="fas fa-chevron-circle-right"></span>';
  } else {
    menu_state = '<span title="Hide Sidebar" class="fas fa-chevron-circle-left"></span>';
  }
 
  $.cookie('psalms', menu_state);

  $('.cookie-is').find('em').remove();
  $('.cookie-is').prepend().html( '<em>' + $.cookie('psalms') + '</em>');
});

});
/*****************
Find more cookie resources at:
http://mercdoescookies.jcink.net
*****************/
</script>


This post has been edited by croixbones: Mar 24 2018, 04:29 PM
PM
#
Oh lmao, just add this:

CODE
if ( menu_state == null ){
   menu_state = 'YOUR ICON FONT CODE GOES HERE';
}


That way, when it loads in for the first time, it'll load your icon instead of saying undefined BECAUSE the menu_state doesn't have a value (my bad, I totally overlooked that part) so it'll read as null/undefined. This worked on the board I tested it on, but it'll assign a value if you get a null value.

croixbones

This post has been edited by PANSY PARKINSON: Mar 25 2018, 10:58 AM
#
PANSY PARKINSON Great!! It works perfectly, thank you so much!
PM
#
No problem (:
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll