Show/Hide Widgets Script

Go down

In progress Show/Hide Widgets Script

Post by omarpop23 on Thu Mar 24, 2016 10:25 pm

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

avatar
omarpop23
Forumember

Male Posts : 179
Reputation : 3
Language : Arabic
Location : Egypt

http://devs.ahlamontada.com

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by SLGray on Thu Mar 24, 2016 10:27 pm



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43520
Reputation : 3094
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by Take Notes on Thu Mar 24, 2016 10:28 pm

Can you please provide a little more information in what you are having issues with?
avatar
Take Notes
Helper
Helper

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by omarpop23 on Thu Mar 24, 2016 10:51 pm

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

Male Posts : 179
Reputation : 3
Language : Arabic
Location : Egypt

http://devs.ahlamontada.com

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by Take Notes on Thu Mar 24, 2016 10:52 pm

What is your forum link?
avatar
Take Notes
Helper
Helper

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by omarpop23 on Thu Mar 24, 2016 11:19 pm

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
avatar
omarpop23
Forumember

Male Posts : 179
Reputation : 3
Language : Arabic
Location : Egypt

http://devs.ahlamontada.com

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by SLGray on Fri Mar 25, 2016 1:40 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43520
Reputation : 3094
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by omarpop23 on Fri Mar 25, 2016 2:01 pm

Doesn't Work :'(

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

Male Posts : 179
Reputation : 3
Language : Arabic
Location : Egypt

http://devs.ahlamontada.com

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by SLGray on Fri Mar 25, 2016 4:06 pm

Follow the post below this one.


Last edited by SLGray on Fri Mar 25, 2016 4:36 pm; edited 1 time in total


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43520
Reputation : 3094
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by Take Notes on Fri Mar 25, 2016 4:24 pm

@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;
}
avatar
Take Notes
Helper
Helper

Male Posts : 2337
Reputation : 324
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by omarpop23 on Fri Mar 25, 2016 7:21 pm

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

Male Posts : 179
Reputation : 3
Language : Arabic
Location : Egypt

http://devs.ahlamontada.com

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by SLGray on Fri Mar 25, 2016 9:44 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43520
Reputation : 3094
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by omarpop23 on Sat Mar 26, 2016 4:40 pm

@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
avatar
omarpop23
Forumember

Male Posts : 179
Reputation : 3
Language : Arabic
Location : Egypt

http://devs.ahlamontada.com

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by Ange Tuteur on Sat Mar 26, 2016 4:43 pm

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.
avatar
Ange Tuteur
Forumaster

Male Posts : 13202
Reputation : 2918
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by omarpop23 on Sat Mar 26, 2016 4:48 pm

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
avatar
omarpop23
Forumember

Male Posts : 179
Reputation : 3
Language : Arabic
Location : Egypt

http://devs.ahlamontada.com

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by SLGray on Sat Mar 26, 2016 6:27 pm

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.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43520
Reputation : 3094
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by omarpop23 on Sat Mar 26, 2016 8:15 pm

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

Male Posts : 179
Reputation : 3
Language : Arabic
Location : Egypt

http://devs.ahlamontada.com

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by SLGray on Sat Mar 26, 2016 10:16 pm

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>>]]//


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43520
Reputation : 3094
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by omarpop23 on Sat Mar 26, 2016 10:24 pm

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

dosen't work


Last edited by omarpop23 on Sat Mar 26, 2016 10:41 pm; edited 1 time in total
avatar
omarpop23
Forumember

Male Posts : 179
Reputation : 3
Language : Arabic
Location : Egypt

http://devs.ahlamontada.com

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by SLGray on Sat Mar 26, 2016 10:31 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43520
Reputation : 3094
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

In progress Re: Show/Hide Widgets Script

Post by omarpop23 on Sat Mar 26, 2016 10:43 pm

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

Male Posts : 179
Reputation : 3
Language : Arabic
Location : Egypt

http://devs.ahlamontada.com

Back to top Go down

Back to top


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