The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

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

3 posters

Go down

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

Post by SLGray March 11th 2016, 05:02

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.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51172
Reputation : 3507
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: The Hide/Show Widgets Tutorial Is Causing Issues With The Toolbar

Post by SLGray March 12th 2016, 21:28

Bump


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

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

Male Posts : 51172
Reputation : 3507
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: The Hide/Show Widgets Tutorial Is Causing Issues With The Toolbar

Post by Ange Tuteur March 13th 2016, 00:39

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

Male Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: The Hide/Show Widgets Tutorial Is Causing Issues With The Toolbar

Post by SLGray March 13th 2016, 00:52

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

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


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

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

Male Posts : 51172
Reputation : 3507
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: The Hide/Show Widgets Tutorial Is Causing Issues With The Toolbar

Post by Take Notes March 13th 2016, 01:00

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.
Take Notes
Take Notes
Helper
Helper

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

Back to top Go down

Solved Re: The Hide/Show Widgets Tutorial Is Causing Issues With The Toolbar

Post by SLGray March 13th 2016, 01:05

Ok, but I do not see any arrows.


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

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

Male Posts : 51172
Reputation : 3507
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: The Hide/Show Widgets Tutorial Is Causing Issues With The Toolbar

Post by Take Notes March 13th 2016, 01:07

Please send the widget source you have in a widget.

Take Notes
Take Notes
Helper
Helper

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

Back to top Go down

Solved Re: The Hide/Show Widgets Tutorial Is Causing Issues With The Toolbar

Post by SLGray March 13th 2016, 01:10

I have moved the widgets to the right side.

I am using the one @Ange Tuteur gave.


Last edited by SLGray on March 13th 2016, 01:35; edited 1 time in total


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

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

Male Posts : 51172
Reputation : 3507
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: The Hide/Show Widgets Tutorial Is Causing Issues With The Toolbar

Post by Ange Tuteur March 13th 2016, 01:11

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" Razz
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: The Hide/Show Widgets Tutorial Is Causing Issues With The Toolbar

Post by SLGray March 13th 2016, 01:17

I still do not see any arrows.


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

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

Male Posts : 51172
Reputation : 3507
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: The Hide/Show Widgets Tutorial Is Causing Issues With The Toolbar

Post by Ange Tuteur March 13th 2016, 01:19

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

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

Male Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: The Hide/Show Widgets Tutorial Is Causing Issues With The Toolbar

Post by SLGray March 13th 2016, 01:34

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.


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

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

Male Posts : 51172
Reputation : 3507
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: The Hide/Show Widgets Tutorial Is Causing Issues With The Toolbar

Post by Ange Tuteur March 13th 2016, 02:06

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;
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13244
Reputation : 2998
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Solved Re: The Hide/Show Widgets Tutorial Is Causing Issues With The Toolbar

Post by SLGray March 13th 2016, 03:59

Perfect!

Topic solved and archived


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

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

Male Posts : 51172
Reputation : 3507
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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