Show/Hide Widgets Script

This code does'nt work well with me Show/Hide Widgets Script

Can you please provide a little more information in what you are having issues with?

i don't understand what should i do @SLGray
but this is my problem
please explain more
i cant see arrows

What is your forum link?

its worked but its floating left
and widgets hide but content still same width
http://hamor-shabik.arab.st

my Eniglish is very weak sorry

Create a widget with this code:

Code:

        <script type="text/javascript">//<![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>

Add this to your CSS:

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;
        }

Doesn't Work :'(

can i give you Admin ID & Password To Help Me ?

Follow the post below this one.

@SLGray try copying all of the code except the very last } as Firefox seems to space things wrong under certain circumstances.

@omarpop23

Create a widget called Toggle widgets column or something, do not use a table and for the widget source put this:

Code:

<script type="text/javascript">//<![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>

Then add this to your CSS:

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;
}

doesn't Work
if you want account of administrator i will send you PM now

You can send it to me, but create a test account.

SLGray wrote:
Because your forum is in Arabic, it is changing the codes.  You need to translate the codes from English to Arabic.

@Ange Tuteur
what should i do this code dosen't in Arabic Support Fourm

This is just an assumption, but change

Code: document.getElementById('right')

into

Code: document.getElementById('left')

. I'll take a closer look later if it's still giving you trouble.

okay , thank you i will change my widget into left side
but try to fix this code and make it works well in Arabic forums because this code dosn't there in Arabic support Forum

The issue is that when you enter the widget code it is being changed to the Arabic language.  In Arabic, you post right to left, but in English we post from left to right.

Dosen't work PLEASE Desgin code for Arabic forums @Ange Tuteur

The issue is with this code:

Code:

        <script type="text/javascript">//<![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 {}'s, \'s, etc. are being moved to different parts of the code.  The reason why is your forum is in Arabic which is read from right to left.

When I checked the widget code, parts of it was messed up.

For Example The Last Part of the Code was Like This:

Code:

</script>>]]//

did you test it in
http://hamor-shabik.arab.st

dosen't work

What do you mean by test?  Also you do not have forum widgets on that forum.

sorry i wrote wrong Forum
test it in this Forum
http://hamor-shabik.arab.st