Скрыть колонку виджетов

автор **Феникс** Декабрь 19th 2016, 18:38

У нас есть уже туториал скрытия виджетов, но в этом уроке малость по-другому.

Этот код вставляем в виджет :
Ставить в видимую колонку виджетов. То есть, в ту, которую хотите прятать под кнопку.

Код:: <script type="text/javascript">//<![CDATA[ (function() { // updated widget toggle for phpbb3 window._faWidgets = { smoothness : '300ms', // transitional smoothness buttonHide : '<', buttonShow : '>', title : 'Скрыть/показать виджеты', 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>

Этот в таблицу CSS :

Код:: #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; }

Результат :
Скрыть колонку виджетов 0249598001517586830