The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Moving drop-down menu widget into Navbar or Toolbar?

View previous topic View next topic Go down

Moving drop-down menu widget into Navbar or Toolbar?

Post by Soulmonster on April 9th 2016, 5:39 pm

My last question, and this is a whooper!

If you look at my forum, http://www.a-4-d.com/, on the right side, where the widgets are, a bit down on the page, you can see four drop-down menus. Ideally I would like to move these into the Navbar or into the Toolbar, so that people can use them from the top of the page, and not have to scroll down to find them. Additionally, I would like to style them to either fit my Navbar or my Toolbar. Is this possible?

Soulmonster
Forumember

Posts : 203
Reputation : 2
Language : Norwegian

Back to top Go down

Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Soulmonster on April 10th 2016, 11:06 am

@Soulmonster wrote:My last question, and this is a whooper!

If you look at my forum, http://www.a-4-d.com/, on the right side, where the widgets are, a bit down on the page, you can see four drop-down menus. Ideally I would like to move these into the Navbar or into the Toolbar, so that people can use them from the top of the page, and not have to scroll down to find them. Additionally, I would like to style them to either fit my Navbar or my Toolbar. Is this possible?

Maybe I should phrase it a bit more generally:

Is it possible to insert a drop-down menu on the toolbar?

Soulmonster
Forumember

Posts : 203
Reputation : 2
Language : Norwegian

Back to top Go down

Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Jadster on April 13th 2016, 7:05 am

@Soulmonster,
Sorry for the delay in a response. To answer your question, YES, you can make a Drop Down Menu in PhpBB2. To do so, click the link below and look at @Ange Tuteur's code and it should help you!

http://help.forumotion.com/t143683-how-to-create-add-drop-down-menu

Regards,
James


Last edited by Meliodas on April 13th 2016, 4:28 pm; edited 1 time in total (Reason for editing : Added Link!)

Jadster
Forumember

Male Posts : 659
Reputation : 78
Language : English
Location : United States

http://adminvortex.forumotion.com

Back to top Go down

Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by APE on April 13th 2016, 4:21 pm

Meliodas wrote:@Soulmonster,
Sorry for the delay in a response. To answer your question, YES, you can make a Drop Down Menu in PhpBB2. To do so, click the link below and look at @Ange Tuteur's code and it should help you!

Regards,
James
@Meliodas You did not give a link to your last post Wink

Please EDIT your post and add the link

Thank you.

APE





APE
Manager
Manager

Male Posts : 8319
Reputation : 716
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Jadster on April 13th 2016, 4:28 pm

@APE,
Whoops! Just edited that! I thought for sure I had that put in. My bad!

Regards,
James

Jadster
Forumember

Male Posts : 659
Reputation : 78
Language : English
Location : United States

http://adminvortex.forumotion.com

Back to top Go down

Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Soulmonster on April 13th 2016, 6:21 pm

Meliodas wrote:@APE,
Whoops! Just edited that! I thought for sure I had that put in. My bad!

Regards,
James

Thank you James. It does not work on my forum, could be that my forum is PhpBB3 and not PhpBB2. I have no idea on how to convert it to my forum.

Soulmonster
Forumember

Posts : 203
Reputation : 2
Language : Norwegian

Back to top Go down

Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Soulmonster on April 14th 2016, 7:29 pm


Soulmonster
Forumember

Posts : 203
Reputation : 2
Language : Norwegian

Back to top Go down

Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Ange Tuteur on April 15th 2016, 1:49 am

Hi,

Sorry for the delay, I've been very busy. Go to Admin panel > Modules > JavaScript codes management and create a new script

Placement : In all the pages
Code:
$(function(){$(function(){
  var btn = $('<a id="fa_toggle_button" href="#">Toggle</a>').click(function() {

    var box = document.getElementById('fa_toggle_box'),
        offset = $(this).offset();
   
    if (/none/.test(box.style.display)) {
      box.style.display = '';
      box.style.left = offset.left + 'px';
    } else {
      box.style.display = 'none';
    }
   
    return false;
  })[0],

  box = $('<div id="fa_toggle_box" style="display:none;" />'),

  form = $('form:has(> select)', document.getElementById('right')),

  share = document.getElementById('fa_share');

  if (form[0] && share) {
    box.append(form);
    document.body.appendChild(box[0]);
    share.appendChild(btn);

    $('head').append('<style type="text/css">#fa_toggle_box { background:#333; padding:3px; position:fixed; z-index:30000; top:30px; } #fa_toggle_box select { margin:3px; }</style>');
  }
});});
Save the script and it should add a new button to the toolbar called "toggle". Click that button to toggle the dropdown. If you want to change the text to an icon, or add other attributes such as a title, modify the HTML at the top of the script :
Code:
<a id="fa_toggle_button" href="#">Toggle</a>

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Soulmonster on April 15th 2016, 11:26 am

@Ange Tuteur wrote:Hi,

Sorry for the delay, I've been very busy. Go to Admin panel > Modules > JavaScript codes management and create a new script

Placement : In all the pages
Code:
$(function(){$(function(){
  var btn = $('<a id="fa_toggle_button" href="#">Toggle</a>').click(function() {

    var box = document.getElementById('fa_toggle_box'),
        offset = $(this).offset();
   
    if (/none/.test(box.style.display)) {
      box.style.display = '';
      box.style.left = offset.left + 'px';
    } else {
      box.style.display = 'none';
    }
   
    return false;
  })[0],

  box = $('<div id="fa_toggle_box" style="display:none;" />'),

  form = $('form:has(> select)', document.getElementById('right')),

  share = document.getElementById('fa_share');

  if (form[0] && share) {
    box.append(form);
    document.body.appendChild(box[0]);
    share.appendChild(btn);

    $('head').append('<style type="text/css">#fa_toggle_box { background:#333; padding:3px; position:fixed; z-index:30000; top:30px; } #fa_toggle_box select { margin:3px; }</style>');
  }
});});
Save the script and it should add a new button to the toolbar called "toggle". Click that button to toggle the dropdown. If you want to change the text to an icon, or add other attributes such as a title, modify the HTML at the top of the script :
Code:
<a id="fa_toggle_button" href="#">Toggle</a>

That's fantastic and you never have to apologize for not helping me soon enough. I appreciate any help I can get, on your schedule.

I have a few questions, both to understand that script (since I know so little about JS) and on how to change it:

1. What part of the script defines the position of the "toggle" to be in the toolbar?

2. What part of the script is responsible for moving the widgets into the drop-down?

3. Ideally, I would like to break it down into four different drop down menus, one for each drop-down widget, is this possible?

4. Also ideally, I would like to be able to style the menus with CSS. Is that possible or must the drop-dpwn menu be re-made then?

EDIT: After a lot of testing and reading I have been able to style the forms, so point 4 is fixed.

Soulmonster
Forumember

Posts : 203
Reputation : 2
Language : Norwegian

Back to top Go down

Re: Moving drop-down menu widget into Navbar or Toolbar?

Post by Soulmonster on April 23rd 2016, 2:38 pm

Bump.

Soulmonster
Forumember

Posts : 203
Reputation : 2
Language : Norwegian

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum