The Hide/Show Widgets Tutorial Is Causing Issues With The Toolbar

Technical Details

Forum version : #phpBB3
Position : Founder
Concerned browser(s) : Mozilla Firefox
Who the problem concerns : All members
When the problem appeared : This week.
Forum link : http://fmthemes.forumotion.com/

Description of problem

When I installed this tutorial: https://help.forumotion.com/t78898-show-hide-widgets-script?highlight=widgets , it causes the toolbar to disappear when you are viewing the topics. The toolbar appears on the homepage and sub-forums. I do have other customized widgets. The tutorial is also causing some of my JavaScript codes that effect posts to not work.

Bump

Hmm.. try using the following instead for phpbb3. I wrote it up for the new theme awhile back so it should work better. Just create a new widget with the following settings.

Use a table type : No
Widget Source :

Code:

<script type="text/javascrit">//<![CDATA[
(function() {
  // updated widget toggle for phpbb3
  window._faWidgets = {
    smoothness : '300ms', // transitional smoothness
    buttonHide : '<',
    buttonShow : '>',
    title : 'Toggle widgets column',
   
    state : 1, // display state
   
    // DOM nodes
    // tip : change 'right' to 'left' if you're using left widgets
    toggler : document.createElement('A'),
    column : document.getElementById('left'),
    content : document.getElementById('content'),
   
    // toggle the widget column
    toggle : function() {
      if (_faWidgets.state) {
        _faWidgets.state = 0;
        my_setcookie('fa_widgets', 'hidden');
       
        _faWidgets.toggler.innerHTML = _faWidgets.buttonShow;
        _faWidgets.toggler.className = 'fa_widgets_show';
       
        _faWidgets.column.style.width = 0;
        _faWidgets.column.style.marginBottom = '-9999em';
        _faWidgets.column.style.visibility = 'hidden';
       
        if (_faWidgets.column.id == 'right') _faWidgets.content.style.marginRight = '0px';
      } else {
        _faWidgets.state = 1;
        my_setcookie('fa_widgets', 'shown');
       
        _faWidgets.toggler.innerHTML = _faWidgets.buttonHide;
        _faWidgets.toggler.className = 'fa_widgets_hide';
       
        _faWidgets.column.style.width = _faWidgets.colWidth + 'px';
        _faWidgets.column.style.marginBottom = '';
        _faWidgets.column.style.visibility = '';
       
        if (_faWidgets.column.id == 'right') _faWidgets.content.style.marginRight = _faWidgets.colWidth + 3 + 'px';
      }
     
      return false;
    }
  };
 
  if (!_faWidgets.column || !_faWidgets.content) return;
 
  // cache widget width
  _faWidgets.colWidth = _faWidgets.column.scrollWidth;
 
  // toggler attributes
  _faWidgets.toggler.id = 'fa_widget_toggle';
  _faWidgets.toggler.innerHTML = _faWidgets.buttonHide;
  _faWidgets.toggler.title = _faWidgets.title;
  _faWidgets.toggler.href = '#';
  _faWidgets.toggler.style.float = _faWidgets.column.id;
  _faWidgets.toggler.onclick = _faWidgets.toggle;
 
  // insert toggler into the DOM
  _faWidgets.column.parentNode.insertBefore(_faWidgets.toggler, _faWidgets.column);
 
  // toggle widgets if they're hidden in the cookie
  if (my_getcookie('fa_widgets') == 'hidden') _faWidgets.toggle();
 
  // apply transitional smoothness to our columns
  window.setTimeout(function() {
    _faWidgets.column.style.transition = _faWidgets.smoothness;
    _faWidgets.content.style.transition = _faWidgets.smoothness;
  }, 100); // but wait a bit so the transition doesn't play on cookie hiding
  // par ange tuteur
})();
//]]></script>

Then just add this to your stylesheet :

Code:

#fa_widget_toggle {
  color:#FFF;
  font-size:12px;
  font-weight:bold;
  text-align:center;
  background:#39C;
  border-bottom:2px solid #17A;
  border-radius:3px;
  display:inline-block;
  padding:0 6px;
  margin-top:20px;
  transition:300ms;
}

#fa_widget_toggle:hover {
  background-color:#333;
  border-color:#111;
}

#fa_widget_toggle:active, #fa_widget_toggle:focus {
  background-color:#8B5;
  border-color:#693;
}

It was originally made for the widgets on the right, so if there are any problems let me know.

I do not see any arrows to press to hide/show the widgets.

Do I add the new widget to the top or bottom?

SLGray wrote:I do not see any arrows to press to hide/show the widgets.

Do I add the new widget to the top or bottom?

Adding the widget to the top or bottom shouldn't affect it.

Ok, but I do not see any arrows.

Please send the widget source you have in a widget.

I have moved the widgets to the right side.

I am using the one @Ange Tuteur gave.

I'm sorry, I made a smaaaaaaaall typo in the widget source. Replace :

Code:

<script type="text/javascrit">

by :

Code:

<script type="text/javascript">

or add the missing "p" so it says "javascript"

I still do not see any arrows.

Oh, you changed them to the right now, sorry I didn't notice.

Change the widget source to this then :

Code:

<script type="text/javascrit">//<![CDATA[
(function() {
  // updated widget toggle for phpbb3
  window._faWidgets = {
    smoothness : '300ms', // transitional smoothness
    buttonHide : '>',
    buttonShow : '<',
    title : 'Toggle widgets column',
 
    state : 1, // display state
 
    // DOM nodes
    // tip : change 'right' to 'left' if you're using left widgets
    toggler : document.createElement('A'),
    column : document.getElementById('right'),
    content : document.getElementById('content'),
 
    // toggle the widget column
    toggle : function() {
      if (_faWidgets.state) {
        _faWidgets.state = 0;
        my_setcookie('fa_widgets', 'hidden');
     
        _faWidgets.toggler.innerHTML = _faWidgets.buttonShow;
        _faWidgets.toggler.className = 'fa_widgets_show';
     
        _faWidgets.column.style.width = 0;
        _faWidgets.column.style.marginBottom = '-9999em';
        _faWidgets.column.style.visibility = 'hidden';
     
        if (_faWidgets.column.id == 'right') _faWidgets.content.style.marginRight = '0px';
      } else {
        _faWidgets.state = 1;
        my_setcookie('fa_widgets', 'shown');
     
        _faWidgets.toggler.innerHTML = _faWidgets.buttonHide;
        _faWidgets.toggler.className = 'fa_widgets_hide';
     
        _faWidgets.column.style.width = _faWidgets.colWidth + 'px';
        _faWidgets.column.style.marginBottom = '';
        _faWidgets.column.style.visibility = '';
     
        if (_faWidgets.column.id == 'right') _faWidgets.content.style.marginRight = _faWidgets.colWidth + 3 + 'px';
      }
   
      return false;
    }
  };
 
  if (!_faWidgets.column || !_faWidgets.content) return;
 
  // cache widget width
  _faWidgets.colWidth = _faWidgets.column.scrollWidth;
 
  // toggler attributes
  _faWidgets.toggler.id = 'fa_widget_toggle';
  _faWidgets.toggler.innerHTML = _faWidgets.buttonHide;
  _faWidgets.toggler.title = _faWidgets.title;
  _faWidgets.toggler.href = '#';
  _faWidgets.toggler.style.float = _faWidgets.column.id;
  _faWidgets.toggler.onclick = _faWidgets.toggle;
 
  // insert toggler into the DOM
  _faWidgets.column.parentNode.insertBefore(_faWidgets.toggler, _faWidgets.column);
 
  // toggle widgets if they're hidden in the cookie
  if (my_getcookie('fa_widgets') == 'hidden') _faWidgets.toggle();
 
  // apply transitional smoothness to our columns
  window.setTimeout(function() {
    _faWidgets.column.style.transition = _faWidgets.smoothness;
    _faWidgets.content.style.transition = _faWidgets.smoothness;
  }, 100); // but wait a bit so the transition doesn't play on cookie hiding
  // par ange tuteur
})();
//]]></script>

The code works when you correct the spelling.

One issue I notice is that the arrow cover the mark all forums read link when hiding the widgets.

Oooh I see it. Find this part in the CSS :

Code:

margin-top:20px;

and change it to a negative value :

Code:

margin-top:-20px;

Perfect!

Topic solved and archived