http://playground.sysadminwiki.ru/w/api.php?action=feedcontributions&feedformat=atom&user=Coder
СисадминВики песочница - Вклад участника [ru]
2026-04-18T12:08:05Z
Вклад участника
MediaWiki 1.31.0
http://playground.sysadminwiki.ru/w/index.php?title=MediaWiki:Common.js&diff=397
MediaWiki:Common.js
2017-06-28T05:50:46Z
<p>Coder: </p>
<hr />
<div>/**<br />
* Slide panel with 2 buttons<br />
*/<br />
var maximumWidthText = $("#text").width();<br />
var maximumWidthTextWithWin1 = maximumWidthText - $(".block1").width() - $("#win1").width();<br />
var maximumWidthTextWithWin2 = maximumWidthText - $(".block1").width() - $("#win2").width();<br />
var maxHeightBlock = 0;<br />
var maxHeightBlockb = 0;<br />
var indent = document.body.offsetWidth - $('#aside1').offset().left - $('#aside1').width();<br />
$(function() {<br />
$("#toc").css("display",'block');<br />
$("#toc").css("overflow",'scroll'); <br />
<br />
});<br />
<br />
<br />
$("#but1").click(function (event) {<br />
if ($("#win1").is(':visible')) {<br />
$("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );<br />
$("#win1").hide('slow');<br />
$('#text').animate({<br />
width : maximumWidthText, <br />
});<br />
<br />
} else {<br />
$("#but1").removeClass( "info_but" ).addClass( "info_but_pressed" );<br />
$("#win1").show('slow');<br />
$('#text').animate({<br />
width : maximumWidthTextWithWin1},<br />
function(){<br />
var ff= 0;<br />
if (z - $(window).scrollTop() < 0) { <br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 99;<br />
} <br />
scrl = 0;<br />
posit = $("#block").position().top<br />
posit2 = $("#toc").position().top<br />
} else {<br />
scrl = $(window).scrollTop();<br />
posit = $("#block").offset().top<br />
posit2 = $("#toc").offset().top<br />
}<br />
var xx = document.body.offsetHeight -(posit+17) + scrl -ff;<br />
var xxb = document.body.offsetHeight -(posit2+26);<br />
$("#block").css("max-height",xx+'px');<br />
$("#toc").css("max-height",xxb+'px'); <br />
maxHeightBlock = xx;<br />
maxHeightBlockb = xxb;<br />
} <br />
);<br />
<br />
if ($("#win2").is(':visible')) {<br />
$("#win2").hide('slow');<br />
$("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );<br />
}<br />
}<br />
<br />
<br />
});<br />
<br />
$("#but2").click(function (event) {<br />
if ($("#win2").is(':visible')) {<br />
$("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );<br />
$("#win2").hide('slow');<br />
$('#text').animate({<br />
width : maximumWidthText, <br />
});<br />
<br />
} else {<br />
$("#but2").removeClass( "toc_but" ).addClass( "toc_but_pressed" );<br />
$("#win2").show('slow');<br />
$('#text').animate({<br />
width : maximumWidthTextWithWin2,<br />
});<br />
<br />
if ($("#win1").is(':visible')) {<br />
$("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );<br />
$("#win1").hide('slow');<br />
}<br />
}<br />
var ff = 0;<br />
if (z - $(window).scrollTop() < 0) {<br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 46;<br />
} <br />
<br />
scrl = 0;<br />
pos = $("#block").position().top<br />
pos2 = $("#toc").position().top<br />
} else {<br />
scrl = $(window).scrollTop();<br />
pos = $("#block").offset().top<br />
pos2 = $("#toc").offset().top<br />
}<br />
var xx = document.body.offsetHeight -(pos+17) ;<br />
var xxb = document.body.offsetHeight -(pos2+26) +scrl -ff;<br />
$("#block").css("max-height",xx+'px');<br />
<br />
$("#toc").css("max-height",xxb+'px'); <br />
maxHeightBlock = xx;<br />
maxHeightBlockb = xxb;<br />
<br />
});<br />
<br />
var z = $("#aside1").offset().top;<br />
<br />
(function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными<br />
var a = document.querySelector('#aside1'), b = null; // селектор блока, который нужно закрепить<br />
<br />
window.addEventListener('scroll', Ascroll, false);<br />
document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100%<br />
function Ascroll() {<br />
if (b === null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями<br />
var Sa = getComputedStyle(a, ''), s = '';<br />
for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя<br />
if (Sa[i].indexOf('overflow') === 0 || Sa[i].indexOf('padding') === 0 || Sa[i].indexOf('border') === 0 || Sa[i].indexOf('outline') === 0 || Sa[i].indexOf('box-shadow') === 0 || Sa[i].indexOf('background') === 0) {<br />
s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '<br />
}<br />
}<br />
b = document.createElement('div'); // создать потомка<br />
var kk = a.offsetWidth;<br />
b.style.cssText = s + ' box-sizing: border-box;';<br />
a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок первым<br />
var l = a.childNodes.length;<br />
for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты)<br />
b.appendChild(a.childNodes[1]);<br />
}<br />
//a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение<br />
//a.style.height = '950px'; // если под скользящим элементом есть другие блоки, можно своё значение<br />
<br />
a.style.padding = '0';<br />
a.style.border = '0'; // если элементу присвоен padding или border<br />
} <br />
<br />
//$("#aside1").offset({top:z});<br />
<br />
if (z - $(window).scrollTop() <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера<br />
<br />
//$("#aside1").offset({top:$(window).scrollTop()});<br />
b.className = 'sticky';<br />
<br />
b.style.right = indent + 'px';<br />
<br />
} else {<br />
//$("#aside1").offset({top:z});<br />
b.className = '';<br />
}<br />
var ff = 0;<br />
var ff2 = 0;<br />
if (z - $(window).scrollTop() < 0) { <br />
pos = $("#block").position().top<br />
pos2 = $("#toc").position().top<br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 99;<br />
ff2= 46;<br />
} <br />
} else {<br />
pos = $("#block").offset().top<br />
pos2 = $("#toc").offset().top<br />
}<br />
maxHeightBlock = document.body.offsetHeight -(pos+17);<br />
maxHeightBlockb = document.body.offsetHeight -(pos2+26);<br />
<br />
var xx0 = z - $(window).scrollTop();<br />
if (xx0 < 0) { xx0 = z;}<br />
var xx = maxHeightBlock + z - xx0 - ff;<br />
var xxb = maxHeightBlockb + z - xx0- ff2;<br />
xx = xx + 'px';<br />
xxb = xxb + 'px';<br />
$("#block").css("max-height",xx);<br />
$("#toc").css("max-height",xxb); <br />
}<br />
})()<br />
/* slide panel with 2 buttons */<br />
<br />
/**<br />
* Slide panel with 1 button<br />
* @author mwjames<br />
*/<br />
<br />
$("#panel-tab").click( function (event) {<br />
event.stopPropagation();<br />
showIfNotVisible( "#panel-content" );<br />
} );<br />
<br />
function showIfNotVisible( element ) {<br />
var width = $( '#panel' ).find( 'table').width() + 8; <br />
if ( $(element).css( "width" ) == width + 'px' )<br />
$(element).animate( { width: 0 }, 1500);<br />
else<br />
$(element).animate( { width: width }, 1500);<br />
};<br />
<br />
$( function() {<br />
var element = $("#panel-content"),<br />
status = element.attr( 'class' ),<br />
width = element.find( 'table').width() + 8;<br />
<br />
if ( status === 'close' ){<br />
element<br />
.width( width )<br />
.animate( { width: 0 }, 1200);<br />
} else {<br />
element<br />
.width( width );<br />
}<br />
<br />
<br />
} );<br />
/* slide panel with 1 button */</div>
Coder
http://playground.sysadminwiki.ru/w/index.php?title=MediaWiki:Common.js&diff=396
MediaWiki:Common.js
2017-06-28T03:23:57Z
<p>Coder: </p>
<hr />
<div>/**<br />
* Slide panel with 2 buttons<br />
*/<br />
var maximumWidthText = $("#text").width();<br />
var maximumWidthTextWithWin1 = maximumWidthText - $(".block1").width() - $("#win1").width();<br />
var maximumWidthTextWithWin2 = maximumWidthText - $(".block1").width() - $("#win2").width();<br />
var maxHeightBlock = 0;<br />
var maxHeightBlockb = 0;<br />
var indent = document.body.offsetWidth - $('#aside1').offset().left - $('#aside1').width();<br />
$(function() {<br />
$("#toc").css("display",'block');<br />
$("#toc").css("overflow",'scroll'); <br />
<br />
});<br />
$(".go_top").click(function (event) {<br />
$('html, body').animate({<br />
scrollTop: 0<br />
}, 'slow');<br />
});<br />
<br />
$(".go_down").click(function (event) {<br />
$('html, body').animate({<br />
scrollTop: document.documentElement.scrollHeight<br />
}, 'slow');<br />
});<br />
<br />
$("#but1").click(function (event) {<br />
if ($("#win1").is(':visible')) {<br />
$("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );<br />
$("#win1").hide('slow');<br />
$('#text').animate({<br />
width : maximumWidthText, <br />
});<br />
<br />
} else {<br />
$("#but1").removeClass( "info_but" ).addClass( "info_but_pressed" );<br />
$("#win1").show('slow');<br />
$('#text').animate({<br />
width : maximumWidthTextWithWin1},<br />
function(){<br />
var ff= 0;<br />
if (z - $(window).scrollTop() < 0) { <br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 99;<br />
} <br />
scrl = 0;<br />
posit = $("#block").position().top<br />
posit2 = $("#toc").position().top<br />
} else {<br />
scrl = $(window).scrollTop();<br />
posit = $("#block").offset().top<br />
posit2 = $("#toc").offset().top<br />
}<br />
var xx = document.body.offsetHeight -(posit+17) + scrl -ff;<br />
var xxb = document.body.offsetHeight -(posit2+26);<br />
$("#block").css("max-height",xx+'px');<br />
$("#toc").css("max-height",xxb+'px'); <br />
maxHeightBlock = xx;<br />
maxHeightBlockb = xxb;<br />
} <br />
);<br />
<br />
if ($("#win2").is(':visible')) {<br />
$("#win2").hide('slow');<br />
$("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );<br />
}<br />
}<br />
<br />
<br />
});<br />
<br />
$("#but2").click(function (event) {<br />
if ($("#win2").is(':visible')) {<br />
$("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );<br />
$("#win2").hide('slow');<br />
$('#text').animate({<br />
width : maximumWidthText, <br />
});<br />
<br />
} else {<br />
$("#but2").removeClass( "toc_but" ).addClass( "toc_but_pressed" );<br />
$("#win2").show('slow');<br />
$('#text').animate({<br />
width : maximumWidthTextWithWin2,<br />
});<br />
<br />
if ($("#win1").is(':visible')) {<br />
$("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );<br />
$("#win1").hide('slow');<br />
}<br />
}<br />
var ff = 0;<br />
if (z - $(window).scrollTop() < 0) {<br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 46;<br />
} <br />
<br />
scrl = 0;<br />
pos = $("#block").position().top<br />
pos2 = $("#toc").position().top<br />
} else {<br />
scrl = $(window).scrollTop();<br />
pos = $("#block").offset().top<br />
pos2 = $("#toc").offset().top<br />
}<br />
var xx = document.body.offsetHeight -(pos+17) ;<br />
var xxb = document.body.offsetHeight -(pos2+26) +scrl -ff;<br />
$("#block").css("max-height",xx+'px');<br />
<br />
$("#toc").css("max-height",xxb+'px'); <br />
maxHeightBlock = xx;<br />
maxHeightBlockb = xxb;<br />
<br />
});<br />
<br />
var z = $("#aside1").offset().top;<br />
<br />
(function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными<br />
var a = document.querySelector('#aside1'), b = null; // селектор блока, который нужно закрепить<br />
<br />
window.addEventListener('scroll', Ascroll, false);<br />
document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100%<br />
function Ascroll() {<br />
if (b === null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями<br />
var Sa = getComputedStyle(a, ''), s = '';<br />
for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя<br />
if (Sa[i].indexOf('overflow') === 0 || Sa[i].indexOf('padding') === 0 || Sa[i].indexOf('border') === 0 || Sa[i].indexOf('outline') === 0 || Sa[i].indexOf('box-shadow') === 0 || Sa[i].indexOf('background') === 0) {<br />
s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '<br />
}<br />
}<br />
b = document.createElement('div'); // создать потомка<br />
var kk = a.offsetWidth;<br />
b.style.cssText = s + ' box-sizing: border-box;';<br />
a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок первым<br />
var l = a.childNodes.length;<br />
for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты)<br />
b.appendChild(a.childNodes[1]);<br />
}<br />
//a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение<br />
//a.style.height = '950px'; // если под скользящим элементом есть другие блоки, можно своё значение<br />
<br />
a.style.padding = '0';<br />
a.style.border = '0'; // если элементу присвоен padding или border<br />
} <br />
<br />
//$("#aside1").offset({top:z});<br />
<br />
if (z - $(window).scrollTop() <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера<br />
<br />
//$("#aside1").offset({top:$(window).scrollTop()});<br />
b.className = 'sticky';<br />
<br />
b.style.right = indent + 'px';<br />
<br />
} else {<br />
//$("#aside1").offset({top:z});<br />
b.className = '';<br />
}<br />
var ff = 0;<br />
var ff2 = 0;<br />
if (z - $(window).scrollTop() < 0) { <br />
pos = $("#block").position().top<br />
pos2 = $("#toc").position().top<br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 99;<br />
ff2= 46;<br />
} <br />
} else {<br />
pos = $("#block").offset().top<br />
pos2 = $("#toc").offset().top<br />
}<br />
maxHeightBlock = document.body.offsetHeight -(pos+17);<br />
maxHeightBlockb = document.body.offsetHeight -(pos2+26);<br />
<br />
var xx0 = z - $(window).scrollTop();<br />
if (xx0 < 0) { xx0 = z;}<br />
var xx = maxHeightBlock + z - xx0 - ff;<br />
var xxb = maxHeightBlockb + z - xx0- ff2;<br />
xx = xx + 'px';<br />
xxb = xxb + 'px';<br />
$("#block").css("max-height",xx);<br />
$("#toc").css("max-height",xxb); <br />
}<br />
})()<br />
/* slide panel with 2 buttons */<br />
<br />
/**<br />
* Slide panel with 1 button<br />
* @author mwjames<br />
*/<br />
<br />
$("#panel-tab").click( function (event) {<br />
event.stopPropagation();<br />
showIfNotVisible( "#panel-content" );<br />
} );<br />
<br />
function showIfNotVisible( element ) {<br />
var width = $( '#panel' ).find( 'table').width() + 8; <br />
if ( $(element).css( "width" ) == width + 'px' )<br />
$(element).animate( { width: 0 }, 1500);<br />
else<br />
$(element).animate( { width: width }, 1500);<br />
};<br />
<br />
$( function() {<br />
var element = $("#panel-content"),<br />
status = element.attr( 'class' ),<br />
width = element.find( 'table').width() + 8;<br />
<br />
if ( status === 'close' ){<br />
element<br />
.width( width )<br />
.animate( { width: 0 }, 1200);<br />
} else {<br />
element<br />
.width( width );<br />
}<br />
<br />
<br />
} );<br />
/* slide panel with 1 button */</div>
Coder
http://playground.sysadminwiki.ru/w/index.php?title=MediaWiki:Common.js&diff=395
MediaWiki:Common.js
2017-06-27T04:52:28Z
<p>Coder: </p>
<hr />
<div>/**<br />
* Slide panel with 2 buttons<br />
*/<br />
var maximumWidthText = $("#text").width();<br />
var maximumWidthTextWithWin1 = maximumWidthText - $(".block1").width() - $("#win1").width();<br />
var maximumWidthTextWithWin2 = maximumWidthText - $(".block1").width() - $("#win2").width();<br />
var maxHeightBlock = 0;<br />
var maxHeightBlockb = 0;<br />
var indent = document.body.offsetWidth - $('#aside1').offset().left - $('#aside1').width();<br />
$(function() {<br />
$("#toc").css("display",'block');<br />
$("#toc").css("overflow",'scroll'); <br />
<br />
});<br />
$(".go_top").click(function (event) {<br />
$('html, body').animate({<br />
scrollTop: 0<br />
}, 'slow');<br />
});<br />
<br />
$(".go_down").click(function (event) {<br />
$('html, body').animate({<br />
scrollTop: document.documentElement.scrollHeight<br />
}, 'slow');<br />
});<br />
<br />
$("#but1").click(function (event) {<br />
if ($("#win1").is(':visible')) {<br />
$("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );<br />
$("#win1").hide('slow');<br />
$('#text').animate({<br />
width : maximumWidthText, <br />
});<br />
<br />
} else {<br />
$("#but1").removeClass( "info_but" ).addClass( "info_but_pressed" );<br />
$("#win1").show('slow');<br />
$('#text').animate({<br />
width : maximumWidthTextWithWin1},<br />
function(){<br />
var ff= 0;<br />
if (z - $(window).scrollTop() < 0) { <br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 99;<br />
} <br />
scrl = 0;<br />
posit = $("#block").position().top<br />
posit2 = $("#toc").position().top<br />
} else {<br />
scrl = $(window).scrollTop();<br />
posit = $("#block").offset().top<br />
posit2 = $("#toc").offset().top<br />
}<br />
var xx = document.body.offsetHeight -(posit+17) + scrl -ff;<br />
var xxb = document.body.offsetHeight -(posit2+26);<br />
$("#block").css("max-height",xx+'px');<br />
$("#toc").css("max-height",xxb+'px'); <br />
maxHeightBlock = xx;<br />
maxHeightBlockb = xxb;<br />
} <br />
);<br />
<br />
if ($("#win2").is(':visible')) {<br />
$("#win2").hide('slow');<br />
$("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );<br />
}<br />
}<br />
<br />
<br />
});<br />
<br />
$("#but2").click(function (event) {<br />
if ($("#win2").is(':visible')) {<br />
$("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );<br />
$("#win2").hide('slow');<br />
$('#text').animate({<br />
width : maximumWidthText, <br />
});<br />
<br />
} else {<br />
$("#but2").removeClass( "toc_but" ).addClass( "toc_but_pressed" );<br />
$("#win2").show('slow');<br />
$('#text').animate({<br />
width : maximumWidthTextWithWin2,<br />
});<br />
<br />
if ($("#win1").is(':visible')) {<br />
$("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );<br />
$("#win1").hide('slow');<br />
}<br />
}<br />
var ff = 0;<br />
if (z - $(window).scrollTop() < 0) {<br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 46;<br />
} <br />
<br />
scrl = 0;<br />
pos = $("#block").position().top<br />
pos2 = $("#toc").position().top<br />
} else {<br />
scrl = $(window).scrollTop();<br />
pos = $("#block").offset().top<br />
pos2 = $("#toc").offset().top<br />
}<br />
var xx = document.body.offsetHeight -(pos+17) ;<br />
var xxb = document.body.offsetHeight -(pos2+26) +scrl -ff;<br />
$("#block").css("max-height",xx+'px');<br />
<br />
$("#toc").css("max-height",xxb+'px'); <br />
maxHeightBlock = xx;<br />
maxHeightBlockb = xxb;<br />
<br />
});<br />
<br />
var z = $("#aside1").offset().top;<br />
<br />
(function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными<br />
var a = document.querySelector('#aside1'), b = null; // селектор блока, который нужно закрепить<br />
<br />
window.addEventListener('scroll', Ascroll, false);<br />
document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100%<br />
function Ascroll() {<br />
if (b === null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями<br />
var Sa = getComputedStyle(a, ''), s = '';<br />
for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя<br />
if (Sa[i].indexOf('overflow') === 0 || Sa[i].indexOf('padding') === 0 || Sa[i].indexOf('border') === 0 || Sa[i].indexOf('outline') === 0 || Sa[i].indexOf('box-shadow') === 0 || Sa[i].indexOf('background') === 0) {<br />
s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '<br />
}<br />
}<br />
b = document.createElement('div'); // создать потомка<br />
var kk = a.offsetWidth;<br />
b.style.cssText = s + ' box-sizing: border-box;';<br />
a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок первым<br />
var l = a.childNodes.length;<br />
for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты)<br />
b.appendChild(a.childNodes[1]);<br />
}<br />
//a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение<br />
//a.style.height = '950px'; // если под скользящим элементом есть другие блоки, можно своё значение<br />
<br />
a.style.padding = '0';<br />
a.style.border = '0'; // если элементу присвоен padding или border<br />
} <br />
<br />
//$("#aside1").offset({top:z});<br />
<br />
if (z - $(window).scrollTop() <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера<br />
<br />
//$("#aside1").offset({top:$(window).scrollTop()});<br />
b.className = 'sticky';<br />
<br />
b.style.right = indent + 'px';<br />
<br />
} else {<br />
//$("#aside1").offset({top:z});<br />
b.className = '';<br />
}<br />
var ff = 0;<br />
var ff2 = 0;<br />
if (z - $(window).scrollTop() < 0) { <br />
pos = $("#block").position().top<br />
pos2 = $("#toc").position().top<br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 99;<br />
ff2= 46;<br />
} <br />
} else {<br />
pos = $("#block").offset().top<br />
pos2 = $("#toc").offset().top<br />
}<br />
maxHeightBlock = document.body.offsetHeight -(pos+17);<br />
maxHeightBlockb = document.body.offsetHeight -(pos2+26);<br />
<br />
var xx0 = z - $(window).scrollTop();<br />
if (xx0 < 0) { xx0 = z;}<br />
var xx = maxHeightBlock + z - xx0 - ff;<br />
var xxb = maxHeightBlockb + z - xx0- ff2;<br />
xx = xx + 'px';<br />
xxb = xxb + 'px';<br />
$("#block").css("max-height",xx);<br />
$("#toc").css("max-height",xxb); <br />
}<br />
})()<br />
/* slide panel with 2 buttons */<br />
<br />
/**<br />
* Slide panel with 1 button<br />
* @author mwjames<br />
*/<br />
<br />
$("#panel-tab").click( function (event) {<br />
event.stopPropagation();<br />
showIfNotVisible( "#panel-content" );<br />
} );<br />
<br />
function showIfNotVisible( element ) {<br />
var width = $( '#panel' ).find( 'table').width() + 8; <br />
if ( $(element).css( "width" ) == width + 'px' )<br />
$(element).animate( { width: 0 }, 1500);<br />
else<br />
$(element).animate( { width: width }, 1500);<br />
};<br />
<br />
$( function() {<br />
var element = $("#panel-content"),<br />
status = element.attr( 'class' ),<br />
width = element.find( 'table').width() + 8;<br />
<br />
if ( status === 'close' ){<br />
element<br />
.width( width )<br />
.animate( { width: 0 }, 1200);<br />
} else {<br />
element<br />
.width( width );<br />
}<br />
<br />
if (document.documentElement.scrollHeight - document.documentElement.clientHeight <= 0 ) {<br />
$('.go_top').css( 'display', 'none' );<br />
$('.go_down').css( 'display', 'none' );<br />
}<br />
<br />
} );<br />
/* slide panel with 1 button */</div>
Coder
http://playground.sysadminwiki.ru/w/index.php?title=MediaWiki:Common.js&diff=388
MediaWiki:Common.js
2017-06-21T04:11:16Z
<p>Coder: </p>
<hr />
<div>/**<br />
* Slide panel with 2 buttons<br />
*/<br />
var maximumWidthText = $("#text").width();<br />
var maximumWidthTextWithWin1 = maximumWidthText - $(".block1").width() - $("#win1").width();<br />
var maximumWidthTextWithWin2 = maximumWidthText - $(".block1").width() - $("#win2").width();<br />
var maxHeightBlock = 0;<br />
var maxHeightBlockb = 0;<br />
var indent = document.body.offsetWidth - $('#aside1').offset().left - $('#aside1').width();<br />
$(function() {<br />
$("#toc").css("display",'block');<br />
$("#toc").css("overflow",'scroll'); <br />
<br />
});<br />
$(".go_top").click(function (event) {<br />
$('html, body').animate({<br />
scrollTop: 0<br />
}, 'slow');<br />
});<br />
<br />
$(".go_down").click(function (event) {<br />
$('html, body').animate({<br />
scrollTop: document.documentElement.scrollHeight<br />
}, 'slow');<br />
});<br />
<br />
$("#but1").click(function (event) {<br />
if ($("#win1").is(':visible')) {<br />
$("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );<br />
$("#win1").hide('slow');<br />
$('#text').animate({<br />
width : maximumWidthText, <br />
});<br />
<br />
} else {<br />
$("#but1").removeClass( "info_but" ).addClass( "info_but_pressed" );<br />
$("#win1").show('slow');<br />
$('#text').animate({<br />
width : maximumWidthTextWithWin1},<br />
function(){<br />
var ff= 0;<br />
if (z - $(window).scrollTop() < 0) { <br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 99;<br />
} <br />
scrl = 0;<br />
posit = $("#block").position().top<br />
posit2 = $("#toc").position().top<br />
} else {<br />
scrl = $(window).scrollTop();<br />
posit = $("#block").offset().top<br />
posit2 = $("#toc").offset().top<br />
}<br />
var xx = document.body.offsetHeight -(posit+17) + scrl -ff;<br />
var xxb = document.body.offsetHeight -(posit2+26);<br />
$("#block").css("max-height",xx+'px');<br />
$("#toc").css("max-height",xxb+'px'); <br />
maxHeightBlock = xx;<br />
maxHeightBlockb = xxb;<br />
} <br />
);<br />
<br />
if ($("#win2").is(':visible')) {<br />
$("#win2").hide('slow');<br />
$("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );<br />
}<br />
}<br />
<br />
<br />
});<br />
<br />
$("#but2").click(function (event) {<br />
if ($("#win2").is(':visible')) {<br />
$("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );<br />
$("#win2").hide('slow');<br />
$('#text').animate({<br />
width : maximumWidthText, <br />
});<br />
<br />
} else {<br />
$("#but2").removeClass( "toc_but" ).addClass( "toc_but_pressed" );<br />
$("#win2").show('slow');<br />
$('#text').animate({<br />
width : maximumWidthTextWithWin2,<br />
});<br />
<br />
if ($("#win1").is(':visible')) {<br />
$("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );<br />
$("#win1").hide('slow');<br />
}<br />
}<br />
var ff = 0;<br />
if (z - $(window).scrollTop() < 0) {<br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 46;<br />
} <br />
<br />
scrl = 0;<br />
pos = $("#block").position().top<br />
pos2 = $("#toc").position().top<br />
} else {<br />
scrl = $(window).scrollTop();<br />
pos = $("#block").offset().top<br />
pos2 = $("#toc").offset().top<br />
}<br />
var xx = document.body.offsetHeight -(pos+17) ;<br />
var xxb = document.body.offsetHeight -(pos2+26) +scrl -ff;<br />
$("#block").css("max-height",xx+'px');<br />
<br />
$("#toc").css("max-height",xxb+'px'); <br />
maxHeightBlock = xx;<br />
maxHeightBlockb = xxb;<br />
<br />
});<br />
<br />
var z = $("#aside1").offset().top;<br />
<br />
(function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными<br />
var a = document.querySelector('#aside1'), b = null; // селектор блока, который нужно закрепить<br />
<br />
window.addEventListener('scroll', Ascroll, false);<br />
document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100%<br />
function Ascroll() {<br />
if (b === null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями<br />
var Sa = getComputedStyle(a, ''), s = '';<br />
for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя<br />
if (Sa[i].indexOf('overflow') === 0 || Sa[i].indexOf('padding') === 0 || Sa[i].indexOf('border') === 0 || Sa[i].indexOf('outline') === 0 || Sa[i].indexOf('box-shadow') === 0 || Sa[i].indexOf('background') === 0) {<br />
s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '<br />
}<br />
}<br />
b = document.createElement('div'); // создать потомка<br />
var kk = a.offsetWidth;<br />
b.style.cssText = s + ' box-sizing: border-box;';<br />
a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок первым<br />
var l = a.childNodes.length;<br />
for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты)<br />
b.appendChild(a.childNodes[1]);<br />
}<br />
//a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение<br />
//a.style.height = '950px'; // если под скользящим элементом есть другие блоки, можно своё значение<br />
<br />
a.style.padding = '0';<br />
a.style.border = '0'; // если элементу присвоен padding или border<br />
} <br />
<br />
//$("#aside1").offset({top:z});<br />
<br />
if (z - $(window).scrollTop() <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера<br />
<br />
//$("#aside1").offset({top:$(window).scrollTop()});<br />
b.className = 'sticky';<br />
<br />
b.style.right = indent + 'px';<br />
<br />
} else {<br />
//$("#aside1").offset({top:z});<br />
b.className = '';<br />
}<br />
var ff = 0;<br />
var ff2 = 0;<br />
if (z - $(window).scrollTop() < 0) { <br />
pos = $("#block").position().top<br />
pos2 = $("#toc").position().top<br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 99;<br />
ff2= 46;<br />
} <br />
} else {<br />
pos = $("#block").offset().top<br />
pos2 = $("#toc").offset().top<br />
}<br />
maxHeightBlock = document.body.offsetHeight -(pos+17);<br />
maxHeightBlockb = document.body.offsetHeight -(pos2+26);<br />
<br />
var xx0 = z - $(window).scrollTop();<br />
if (xx0 < 0) { xx0 = z;}<br />
var xx = maxHeightBlock + z - xx0 - ff;<br />
var xxb = maxHeightBlockb + z - xx0- ff2;<br />
xx = xx + 'px';<br />
xxb = xxb + 'px';<br />
$("#block").css("max-height",xx);<br />
$("#toc").css("max-height",xxb); <br />
}<br />
})()<br />
/* slide panel with 2 buttons */<br />
<br />
/**<br />
* Slide panel with 1 button<br />
* @author mwjames<br />
*/<br />
<br />
$("#panel-tab").click( function (event) {<br />
event.stopPropagation();<br />
showIfNotVisible( "#panel-content" );<br />
} );<br />
<br />
function showIfNotVisible( element ) {<br />
var width = $( '#panel' ).find( 'table').width() + 8; <br />
if ( $(element).css( "width" ) == width + 'px' )<br />
$(element).animate( { width: 0 }, 1500);<br />
else<br />
$(element).animate( { width: width }, 1500);<br />
};<br />
<br />
$( function() {<br />
var element = $("#panel-content"),<br />
status = element.attr( 'class' ),<br />
width = element.find( 'table').width() + 8;<br />
<br />
if ( status === 'close' ){<br />
element<br />
.width( width )<br />
.animate( { width: 0 }, 1200);<br />
} else {<br />
element<br />
.width( width );<br />
}<br />
} );<br />
/* slide panel with 1 button */</div>
Coder
http://playground.sysadminwiki.ru/w/index.php?title=MediaWiki:Common.js&diff=387
MediaWiki:Common.js
2017-06-21T04:09:28Z
<p>Coder: </p>
<hr />
<div>/**<br />
* Slide panel with 2 buttons<br />
*/<br />
var maximumWidthText = $("#text").width();<br />
var maximumWidthTextWithWin1 = maximumWidthText - $(".block1").width() - $("#win1").width();<br />
var maximumWidthTextWithWin2 = maximumWidthText - $(".block1").width() - $("#win2").width();<br />
var maxHeightBlock = 0;<br />
var maxHeightBlockb = 0;<br />
var indent = document.body.offsetWidth - $('#aside1').offset().left - $('#aside1').width();<br />
$(function() {<br />
$("#toc").css("display",'block');<br />
$("#toc").css("overflow",'scroll'); <br />
<br />
});<br />
$(".go_top").click(function (event) {<br />
$('html, body').animate({<br />
scrollTop: 0<br />
}, 'slow');<br />
});<br />
<br />
$(".go_down").click(function (event) {<br />
$('html, body').animate({<br />
scrollTop: document.documentElement.scrollHeight<br />
}, 'slow');<br />
});<br />
<br />
$("#but1").click(function (event) {<br />
if ($("#win1").is(':visible')) {<br />
$("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );<br />
$("#win1").hide('slow');<br />
$('#text').animate({<br />
width : maximumWidthText, <br />
});<br />
<br />
} else {<br />
$("#but1").removeClass( "info_but" ).addClass( "info_but_pressed" );<br />
$("#win1").show('slow');<br />
$('#text').animate({<br />
width : maximumWidthTextWithWin1},<br />
function(){<br />
var ff= 0;<br />
if (z - $(window).scrollTop() < 0) { <br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 99;<br />
} <br />
scrl = 0;<br />
posit = $("#block").position().top<br />
posit2 = $("#toc").position().top<br />
} else {<br />
scrl = $(window).scrollTop();<br />
posit = $("#block").offset().top<br />
posit2 = $("#toc").offset().top<br />
}<br />
var xx = document.body.offsetHeight -(posit+17) + scrl -ff;<br />
var xxb = document.body.offsetHeight -(posit2+26);<br />
$("#block").css("max-height",xx+'px');<br />
$("#toc").css("max-height",xxb+'px'); <br />
maxHeightBlock = xx;<br />
maxHeightBlockb = xxb;<br />
} <br />
);<br />
<br />
if ($("#win2").is(':visible')) {<br />
$("#win2").hide('slow');<br />
$("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );<br />
}<br />
}<br />
<br />
<br />
});<br />
<br />
$("#but2").click(function (event) {<br />
if ($("#win2").is(':visible')) {<br />
$("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );<br />
$("#win2").hide('slow');<br />
$('#text').animate({<br />
width : maximumWidthText, <br />
});<br />
<br />
} else {<br />
$("#but2").removeClass( "toc_but" ).addClass( "toc_but_pressed" );<br />
$("#win2").show('slow');<br />
$('#text').animate({<br />
width : maximumWidthTextWithWin2,<br />
});<br />
<br />
if ($("#win1").is(':visible')) {<br />
$("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );<br />
$("#win1").hide('slow');<br />
}<br />
}<br />
var ff = 0;<br />
if (z - $(window).scrollTop() < 0) {<br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 46;<br />
} <br />
<br />
scrl = 0;<br />
pos = $("#block").position().top<br />
pos2 = $("#toc").position().top<br />
} else {<br />
scrl = $(window).scrollTop();<br />
pos = $("#block").offset().top<br />
pos2 = $("#toc").offset().top<br />
}<br />
var xx = document.body.offsetHeight -(pos+17) ;<br />
var xxb = document.body.offsetHeight -(pos2+26) +scrl -ff;<br />
$("#block").css("max-height",xx+'px');<br />
<br />
$("#toc").css("max-height",xxb+'px'); <br />
maxHeightBlock = xx;<br />
maxHeightBlockb = xxb;<br />
<br />
});<br />
<br />
var z = $("#aside1").offset().top;<br />
<br />
(function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными<br />
var a = document.querySelector('#aside1'), b = null; // селектор блока, который нужно закрепить<br />
<br />
window.addEventListener('scroll', Ascroll, false);<br />
document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100%<br />
function Ascroll() {<br />
if (b === null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями<br />
var Sa = getComputedStyle(a, ''), s = '';<br />
for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя<br />
if (Sa[i].indexOf('overflow') === 0 || Sa[i].indexOf('padding') === 0 || Sa[i].indexOf('border') === 0 || Sa[i].indexOf('outline') === 0 || Sa[i].indexOf('box-shadow') === 0 || Sa[i].indexOf('background') === 0) {<br />
s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '<br />
}<br />
}<br />
b = document.createElement('div'); // создать потомка<br />
var kk = a.offsetWidth;<br />
b.style.cssText = s + ' box-sizing: border-box;';<br />
a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок первым<br />
var l = a.childNodes.length;<br />
for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты)<br />
b.appendChild(a.childNodes[1]);<br />
}<br />
//a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение<br />
//a.style.height = '950px'; // если под скользящим элементом есть другие блоки, можно своё значение<br />
<br />
a.style.padding = '0';<br />
a.style.border = '0'; // если элементу присвоен padding или border<br />
} <br />
<br />
//$("#aside1").offset({top:z});<br />
<br />
if (z - $(window).scrollTop() <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера<br />
<br />
//$("#aside1").offset({top:$(window).scrollTop()});<br />
b.className = 'sticky';<br />
<br />
b.style.right = indent + 'px';<br />
<br />
} else {<br />
//$("#aside1").offset({top:z});<br />
b.className = '';<br />
}<br />
var ff = 0;<br />
var ff2 = 0;<br />
if (z - $(window).scrollTop() < 0) { <br />
pos = $("#block").position().top<br />
pos2 = $("#toc").position().top<br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 99;<br />
ff2= 46;<br />
} <br />
} else {<br />
pos = $("#block").offset().top<br />
pos2 = $("#toc").offset().top<br />
}<br />
maxHeightBlock = document.body.offsetHeight -(pos+17);<br />
maxHeightBlockb = document.body.offsetHeight -(pos2+26);<br />
<br />
var xx0 = z - $(window).scrollTop();<br />
if (xx0 < 0) { xx0 = z;}<br />
var xx = maxHeightBlock + z - xx0 - ff;<br />
var xxb = maxHeightBlockb + z - xx0- ff2;<br />
xx = xx + 'px';<br />
xxb = xxb + 'px';<br />
$("#block").css("max-height",xx);<br />
$("#toc").css("max-height",xxb); <br />
}<br />
})()<br />
/* slide panel with 2 buttons */<br />
<br />
/**<br />
* Slide panel with 1 button<br />
* @author mwjames<br />
*/<br />
<br />
$("#panel-tab").click( function (event) {<br />
event.stopPropagation();<br />
showIfNotVisible( "#panel-content" );<br />
} );<br />
<br />
function showIfNotVisible( element ) {<br />
var width = $( '#panel' ).find( 'table').width() + 8; <br />
if ( $(element).css( "width" ) == width + 'px' )<br />
$(element).animate( { width: 0 }, 1500);<br />
else<br />
$(element).animate( { width: width }, 1500);<br />
};<br />
<br />
$( function() {<br />
var element = $("#panel-content"),<br />
status = element.attr( 'class' ),<br />
width = element.find( 'table').width() + 8;<br />
<br />
if ( status === 'close' ){<br />
element<br />
.width( width )<br />
.animate( { width: 0 }, 1200);<br />
} else {<br />
element<br />
.width( width );<br />
}<br />
} );<br />
/* slide panel with 1 button */<br />
<br />
$(document).ready(function(){<br />
console.log('fsfsdf');<br />
$('.go_top').css( 'display', 'none' );<br />
<br />
});</div>
Coder
http://playground.sysadminwiki.ru/w/index.php?title=MediaWiki:Common.js&diff=386
MediaWiki:Common.js
2017-06-21T04:06:15Z
<p>Coder: </p>
<hr />
<div>/**<br />
* Slide panel with 2 buttons<br />
*/<br />
var maximumWidthText = $("#text").width();<br />
var maximumWidthTextWithWin1 = maximumWidthText - $(".block1").width() - $("#win1").width();<br />
var maximumWidthTextWithWin2 = maximumWidthText - $(".block1").width() - $("#win2").width();<br />
var maxHeightBlock = 0;<br />
var maxHeightBlockb = 0;<br />
var indent = document.body.offsetWidth - $('#aside1').offset().left - $('#aside1').width();<br />
$(function() {<br />
$("#toc").css("display",'block');<br />
$("#toc").css("overflow",'scroll'); <br />
<br />
});<br />
$(".go_top").click(function (event) {<br />
$('html, body').animate({<br />
scrollTop: 0<br />
}, 'slow');<br />
});<br />
<br />
$(".go_down").click(function (event) {<br />
$('html, body').animate({<br />
scrollTop: document.documentElement.scrollHeight<br />
}, 'slow');<br />
});<br />
<br />
$("#but1").click(function (event) {<br />
if ($("#win1").is(':visible')) {<br />
$("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );<br />
$("#win1").hide('slow');<br />
$('#text').animate({<br />
width : maximumWidthText, <br />
});<br />
<br />
} else {<br />
$("#but1").removeClass( "info_but" ).addClass( "info_but_pressed" );<br />
$("#win1").show('slow');<br />
$('#text').animate({<br />
width : maximumWidthTextWithWin1},<br />
function(){<br />
var ff= 0;<br />
if (z - $(window).scrollTop() < 0) { <br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 99;<br />
} <br />
scrl = 0;<br />
posit = $("#block").position().top<br />
posit2 = $("#toc").position().top<br />
} else {<br />
scrl = $(window).scrollTop();<br />
posit = $("#block").offset().top<br />
posit2 = $("#toc").offset().top<br />
}<br />
var xx = document.body.offsetHeight -(posit+17) + scrl -ff;<br />
var xxb = document.body.offsetHeight -(posit2+26);<br />
$("#block").css("max-height",xx+'px');<br />
$("#toc").css("max-height",xxb+'px'); <br />
maxHeightBlock = xx;<br />
maxHeightBlockb = xxb;<br />
} <br />
);<br />
<br />
if ($("#win2").is(':visible')) {<br />
$("#win2").hide('slow');<br />
$("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );<br />
}<br />
}<br />
<br />
<br />
});<br />
<br />
$("#but2").click(function (event) {<br />
if ($("#win2").is(':visible')) {<br />
$("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" );<br />
$("#win2").hide('slow');<br />
$('#text').animate({<br />
width : maximumWidthText, <br />
});<br />
<br />
} else {<br />
$("#but2").removeClass( "toc_but" ).addClass( "toc_but_pressed" );<br />
$("#win2").show('slow');<br />
$('#text').animate({<br />
width : maximumWidthTextWithWin2,<br />
});<br />
<br />
if ($("#win1").is(':visible')) {<br />
$("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" );<br />
$("#win1").hide('slow');<br />
}<br />
}<br />
var ff = 0;<br />
if (z - $(window).scrollTop() < 0) {<br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 46;<br />
} <br />
<br />
scrl = 0;<br />
pos = $("#block").position().top<br />
pos2 = $("#toc").position().top<br />
} else {<br />
scrl = $(window).scrollTop();<br />
pos = $("#block").offset().top<br />
pos2 = $("#toc").offset().top<br />
}<br />
var xx = document.body.offsetHeight -(pos+17) ;<br />
var xxb = document.body.offsetHeight -(pos2+26) +scrl -ff;<br />
$("#block").css("max-height",xx+'px');<br />
<br />
$("#toc").css("max-height",xxb+'px'); <br />
maxHeightBlock = xx;<br />
maxHeightBlockb = xxb;<br />
<br />
});<br />
<br />
var z = $("#aside1").offset().top;<br />
<br />
(function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными<br />
var a = document.querySelector('#aside1'), b = null; // селектор блока, который нужно закрепить<br />
<br />
window.addEventListener('scroll', Ascroll, false);<br />
document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100%<br />
function Ascroll() {<br />
if (b === null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями<br />
var Sa = getComputedStyle(a, ''), s = '';<br />
for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя<br />
if (Sa[i].indexOf('overflow') === 0 || Sa[i].indexOf('padding') === 0 || Sa[i].indexOf('border') === 0 || Sa[i].indexOf('outline') === 0 || Sa[i].indexOf('box-shadow') === 0 || Sa[i].indexOf('background') === 0) {<br />
s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; '<br />
}<br />
}<br />
b = document.createElement('div'); // создать потомка<br />
var kk = a.offsetWidth;<br />
b.style.cssText = s + ' box-sizing: border-box;';<br />
a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок первым<br />
var l = a.childNodes.length;<br />
for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты)<br />
b.appendChild(a.childNodes[1]);<br />
}<br />
//a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение<br />
//a.style.height = '950px'; // если под скользящим элементом есть другие блоки, можно своё значение<br />
<br />
a.style.padding = '0';<br />
a.style.border = '0'; // если элементу присвоен padding или border<br />
} <br />
<br />
//$("#aside1").offset({top:z});<br />
<br />
if (z - $(window).scrollTop() <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера<br />
<br />
//$("#aside1").offset({top:$(window).scrollTop()});<br />
b.className = 'sticky';<br />
<br />
b.style.right = indent + 'px';<br />
<br />
} else {<br />
//$("#aside1").offset({top:z});<br />
b.className = '';<br />
}<br />
var ff = 0;<br />
var ff2 = 0;<br />
if (z - $(window).scrollTop() < 0) { <br />
pos = $("#block").position().top<br />
pos2 = $("#toc").position().top<br />
if (navigator.userAgent.search(/Firefox/) > -1) {<br />
ff= 99;<br />
ff2= 46;<br />
} <br />
} else {<br />
pos = $("#block").offset().top<br />
pos2 = $("#toc").offset().top<br />
}<br />
maxHeightBlock = document.body.offsetHeight -(pos+17);<br />
maxHeightBlockb = document.body.offsetHeight -(pos2+26);<br />
<br />
var xx0 = z - $(window).scrollTop();<br />
if (xx0 < 0) { xx0 = z;}<br />
var xx = maxHeightBlock + z - xx0 - ff;<br />
var xxb = maxHeightBlockb + z - xx0- ff2;<br />
xx = xx + 'px';<br />
xxb = xxb + 'px';<br />
$("#block").css("max-height",xx);<br />
$("#toc").css("max-height",xxb); <br />
}<br />
})()<br />
/* slide panel with 2 buttons */<br />
<br />
/**<br />
* Slide panel with 1 button<br />
* @author mwjames<br />
*/<br />
<br />
$("#panel-tab").click( function (event) {<br />
event.stopPropagation();<br />
showIfNotVisible( "#panel-content" );<br />
} );<br />
<br />
function showIfNotVisible( element ) {<br />
var width = $( '#panel' ).find( 'table').width() + 8; <br />
if ( $(element).css( "width" ) == width + 'px' )<br />
$(element).animate( { width: 0 }, 1500);<br />
else<br />
$(element).animate( { width: width }, 1500);<br />
};<br />
<br />
$( function() {<br />
var element = $("#panel-content"),<br />
status = element.attr( 'class' ),<br />
width = element.find( 'table').width() + 8;<br />
<br />
if ( status === 'close' ){<br />
element<br />
.width( width )<br />
.animate( { width: 0 }, 1200);<br />
} else {<br />
element<br />
.width( width );<br />
}<br />
} );<br />
/* slide panel with 1 button */<br />
<br />
$(document).ready(function(){<br />
$( '.go_top' ).css( 'display', 'none' );<br />
<br />
});</div>
Coder
http://playground.sysadminwiki.ru/w/index.php?title=MediaWiki:Common.css&diff=379
MediaWiki:Common.css
2017-06-19T10:07:48Z
<p>Coder: </p>
<hr />
<div>/* отодвигаем боковое мению для отображения кнопок соц сетей */<br />
#mw-panel {<br />
padding-left: 0.7em;<br />
}<br />
<br />
/* отодвигаем статьи справа, чтобы текст не перекрывался кнопками панели */<br />
.mw-body {<br />
margin-right: 1.7em;<br />
}<br />
<br />
/**<br />
* Slide panel with 2 buttons<br />
*/<br />
<br />
div.slideTab {<br />
color: white;<br />
float: right;<br />
margin: 3px 0;<br />
padding: 0px;<br />
background: #164EAF;<br />
display: block; <br />
cursor:pointer; <br />
border: 2px solid #fff; <br />
border-right: 0;<br />
-webkit-border-top-left-radius: 5px;<br />
-webkit-border-bottom-left-radius: 5px;<br />
border-radius: 5px 0 0 5px;<br />
box-shadow: 0px 1px 5px 0px #000;<br />
filter: progid:DXImageTransform.Microsoft.DropShadow(sProperties);<br />
-webkit-box-shadow: 0px 1px 5px 0px #000;<br />
-moz-box-shadow: 0px 1px 5px 0px #000;<br />
}<br />
<br />
.info_but:before{<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/info.png');<br />
}<br />
<br />
.info_but_pressed:before{<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/info_pressed.png');<br />
}<br />
<br />
.toc_but:before{<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/toc.png');<br />
}<br />
<br />
.toc_but_pressed:before{<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/toc_pressed.png');<br />
}<br />
<br />
div.slideTab2 {<br />
color: white;<br />
float: right;<br />
margin: 3px 0;<br />
padding: 0px;<br />
background: green;<br />
display: block; <br />
cursor:pointer; <br />
border: 2px solid #fff; <br />
border-right: 0;<br />
-webkit-border-top-left-radius: 5px;<br />
-webkit-border-bottom-left-radius: 5px;<br />
border-radius: 5px 0 0 5px;<br />
box-shadow: 0px 1px 5px 0px #000;<br />
filter: progid:DXImageTransform.Microsoft.DropShadow(sProperties);<br />
-webkit-box-shadow: 0px 1px 5px 0px #000;<br />
-moz-box-shadow: 0px 1px 5px 0px #000;<br />
}<br />
<br />
div.slideContent {<br />
position: relative;<br />
overflow: hidden;<br />
height: 100%;<br />
background: transparent;<br />
background: #fff;<br />
border: 0 solid #000;<br />
float:right;<br />
width: 100%;<br />
margin-left: 10px; <br />
}<br />
<br />
table.slideTable { <br />
background: #164eaf;<br />
border: 1px solid black;<br />
margin: 0 0 0 0px;<br />
padding: 3px 3px 3px 3px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px;<br />
width: 100%;<br />
}<br />
<br />
table.slideTable tr {<br />
background: #fff;<br />
position: relative<br />
}<br />
<br />
table.slideTable td {<br />
padding: 5px;<br />
vertical-align: top !important;<br />
max-height:500px;<br />
}<br />
<br />
table.slideTable th {<br />
background: #164eaf;<br />
border: 0px;<br />
padding: 5px;<br />
font-size: 120%;<br />
font-weight: bold;<br />
font-family: Trebuchet MS, Helvetica, Arial, sans-serif;<br />
color: white;<br />
vertical-align: top !important;<br />
}<br />
<br />
table.slideTable th a {<br />
color: #fff;<br />
}<br />
<br />
.sticky { /* -pm-используется в функции js*/<br />
position: fixed;<br />
top: 0px;<br />
z-index: 101; <br />
}<br />
<br />
.common {<br />
display: inline;<br />
position: relative;<br />
float: right;<br />
left:30px;<br />
margin: -17px;<br />
}<br />
<br />
.block1 {<br />
float: right;<br />
width:50px<br />
}<br />
<br />
.block2 {<br />
float: right; <br />
}<br />
/* end of slide panel with 2 buttons*/<br />
<br />
/* -------------------------------------------- */<br />
/* -pm- Go top button*/<br />
<br />
div.go_top: before {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/up.png');<br />
} <br />
<br />
div.go_top: hover: before {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/up_over.png');<br />
} <br />
div.go_top {<br />
/*content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/up.png');*/<br />
cursor:pointer;<br />
position: fixed;<br />
z-index: 1;<br />
top: 183px;<br />
/*right: 5px;*/<br />
left: 158px;<br />
/*border: 3px solid grey;*/<br />
border-radius: 12px 12px 7px 7px;<br />
/*box-shadow: 0 0 10px rgba(0,0,0,0.5);*/<br />
color: grey;<br />
font-style: bold;<br />
text-shadow: 3px 3px 3px grey;<br />
font-size: 120%;<br />
text-decoration: none;<br />
}<br />
<br />
div.go_down: before {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/down.png');<br />
}<br />
div.go_down: hover: before {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/down_over.png');<br />
}<br />
<br />
div.go_down:hover {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/down_over.png');<br />
}<br />
<br />
div.go_down {<br />
/*content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/down.png');*/<br />
cursor:pointer;<br />
position: fixed;<br />
z-index: 1;<br />
top: 225px;<br />
/*right: 5px;*/<br />
left: 158px;<br />
/*border: 3px solid grey;*/<br />
border-radius: 7px 7px 12px 12px;<br />
/*box-shadow: 0 0 10px rgba(0,0,0,0.5);*/<br />
color: grey;<br />
font-style: bold;<br />
text-shadow: 3px 3px 3px grey;<br />
font-size: 120%;<br />
text-decoration: none;<br />
}<br />
/* -pm- Go down button*/<br />
<br />
/* ---Содержание-------------------------------------*/<br />
/* Убираем номер пункта в содержании */<br />
.tocnumber { display: none; }<br />
<br />
/* Убираем слово "Содержание" и ссылку "убрать/показать" */<br />
#blockb #toctitle { display: none; }<br />
/*.toctoggle { display: none; }*/<br />
<br />
/* Свои символы перед пунктами в содержании*/<br />
.toctext {<br />
display: inherit;<br />
}<br />
.toc li.toclevel-2 {<br />
list-style: none; /* Убираем исходные маркеры */ <br />
}<br />
.toc li.toclevel-2: before{<br />
display: inline;<br />
content: "•"; /* добавляем свой */<br />
}<br />
.toc li.toclevel-3:before{<br />
content: "°";<br />
}<br />
<br />
.right_block_test {<br />
width:29%;<br />
}<br />
.left_block_test {<br />
width:70%;<br />
}<br />
@media screen and (max-width: 1300px) {<br />
.right_block_test {<br />
width:100%;<br />
}<br />
.left_block_test {<br />
width:100%;<br />
} <br />
<br />
}</div>
Coder
http://playground.sysadminwiki.ru/w/index.php?title=%D0%9F%D0%BE%D1%80%D1%8F%D0%B4%D0%BE%D0%BA_%D0%B1%D0%BB%D0%BE%D0%BA%D0%BE%D0%B2_%D0%BF%D1%80%D0%B8_%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B8_%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%8B&diff=378
Порядок блоков при изменении ширины
2017-06-19T10:06:51Z
<p>Coder: </p>
<hr />
<div><br />
== Правый блок помещается НАД левым ==<br />
<br />
<div style="float:right; width: 29%; min-width: 300px; max-width: 500px; background-color:#d19a04; margin: 10px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи<br />
</div><br />
<br />
{| class=wikitable cellspacing="5" cellpadding="5"<br />
|- valign=top<br />
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.<br />
|}<br />
<br />
== Правый блок помещается ПОД левым ==<br />
<div style=" width:100%; background-color: blue; margin: 0 auto;">ВЕРХНИЙ БЛОК (шапка): название страницы, приветствие, статистика</div><br />
<br />
{|<br />
|-<br />
|<br />
<div class="left_block_test" style="float:left; min-width: 400px;"><br />
{| class=wikitable cellspacing="5" cellpadding="5"<br />
|- valign=top<br />
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.<br />
|}<br />
</div><br />
<br />
<div class = "right_block_test" style="float:right; min-width: 300px; background-color:#d19a04; margin: 16px 0 0 7px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи<br />
</div><br />
|}<br />
<br />
<div style=" width:100%; background-color: green; margin: 0 auto;">НИЖНИЙ БЛОК (подвал): контакты, важные ссылки</div></div>
Coder
http://playground.sysadminwiki.ru/w/index.php?title=MediaWiki:Common.css&diff=377
MediaWiki:Common.css
2017-06-19T10:05:34Z
<p>Coder: </p>
<hr />
<div>/* отодвигаем боковое мению для отображения кнопок соц сетей */<br />
#mw-panel {<br />
padding-left: 0.7em;<br />
}<br />
<br />
/* отодвигаем статьи справа, чтобы текст не перекрывался кнопками панели */<br />
.mw-body {<br />
margin-right: 1.7em;<br />
}<br />
<br />
/**<br />
* Slide panel with 2 buttons<br />
*/<br />
<br />
div.slideTab {<br />
color: white;<br />
float: right;<br />
margin: 3px 0;<br />
padding: 0px;<br />
background: #164EAF;<br />
display: block; <br />
cursor:pointer; <br />
border: 2px solid #fff; <br />
border-right: 0;<br />
-webkit-border-top-left-radius: 5px;<br />
-webkit-border-bottom-left-radius: 5px;<br />
border-radius: 5px 0 0 5px;<br />
box-shadow: 0px 1px 5px 0px #000;<br />
filter: progid:DXImageTransform.Microsoft.DropShadow(sProperties);<br />
-webkit-box-shadow: 0px 1px 5px 0px #000;<br />
-moz-box-shadow: 0px 1px 5px 0px #000;<br />
}<br />
<br />
.info_but:before{<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/info.png');<br />
}<br />
<br />
.info_but_pressed:before{<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/info_pressed.png');<br />
}<br />
<br />
.toc_but:before{<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/toc.png');<br />
}<br />
<br />
.toc_but_pressed:before{<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/toc_pressed.png');<br />
}<br />
<br />
div.slideTab2 {<br />
color: white;<br />
float: right;<br />
margin: 3px 0;<br />
padding: 0px;<br />
background: green;<br />
display: block; <br />
cursor:pointer; <br />
border: 2px solid #fff; <br />
border-right: 0;<br />
-webkit-border-top-left-radius: 5px;<br />
-webkit-border-bottom-left-radius: 5px;<br />
border-radius: 5px 0 0 5px;<br />
box-shadow: 0px 1px 5px 0px #000;<br />
filter: progid:DXImageTransform.Microsoft.DropShadow(sProperties);<br />
-webkit-box-shadow: 0px 1px 5px 0px #000;<br />
-moz-box-shadow: 0px 1px 5px 0px #000;<br />
}<br />
<br />
div.slideContent {<br />
position: relative;<br />
overflow: hidden;<br />
height: 100%;<br />
background: transparent;<br />
background: #fff;<br />
border: 0 solid #000;<br />
float:right;<br />
width: 100%;<br />
margin-left: 10px; <br />
}<br />
<br />
table.slideTable { <br />
background: #164eaf;<br />
border: 1px solid black;<br />
margin: 0 0 0 0px;<br />
padding: 3px 3px 3px 3px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px;<br />
width: 100%;<br />
}<br />
<br />
table.slideTable tr {<br />
background: #fff;<br />
position: relative<br />
}<br />
<br />
table.slideTable td {<br />
padding: 5px;<br />
vertical-align: top !important;<br />
max-height:500px;<br />
}<br />
<br />
table.slideTable th {<br />
background: #164eaf;<br />
border: 0px;<br />
padding: 5px;<br />
font-size: 120%;<br />
font-weight: bold;<br />
font-family: Trebuchet MS, Helvetica, Arial, sans-serif;<br />
color: white;<br />
vertical-align: top !important;<br />
}<br />
<br />
table.slideTable th a {<br />
color: #fff;<br />
}<br />
<br />
.sticky { /* -pm-используется в функции js*/<br />
position: fixed;<br />
top: 0px;<br />
z-index: 101; <br />
}<br />
<br />
.common {<br />
display: inline;<br />
position: relative;<br />
float: right;<br />
left:30px;<br />
margin: -17px;<br />
}<br />
<br />
.block1 {<br />
float: right;<br />
width:50px<br />
}<br />
<br />
.block2 {<br />
float: right; <br />
}<br />
/* end of slide panel with 2 buttons*/<br />
<br />
/* -------------------------------------------- */<br />
/* -pm- Go top button*/<br />
<br />
div.go_top: before {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/up.png');<br />
} <br />
<br />
div.go_top: hover: before {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/up_over.png');<br />
} <br />
div.go_top {<br />
/*content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/up.png');*/<br />
cursor:pointer;<br />
position: fixed;<br />
z-index: 1;<br />
top: 183px;<br />
/*right: 5px;*/<br />
left: 158px;<br />
/*border: 3px solid grey;*/<br />
border-radius: 12px 12px 7px 7px;<br />
/*box-shadow: 0 0 10px rgba(0,0,0,0.5);*/<br />
color: grey;<br />
font-style: bold;<br />
text-shadow: 3px 3px 3px grey;<br />
font-size: 120%;<br />
text-decoration: none;<br />
}<br />
<br />
div.go_down: before {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/down.png');<br />
}<br />
div.go_down: hover: before {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/down_over.png');<br />
}<br />
<br />
div.go_down:hover {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/down_over.png');<br />
}<br />
<br />
div.go_down {<br />
/*content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/down.png');*/<br />
cursor:pointer;<br />
position: fixed;<br />
z-index: 1;<br />
top: 225px;<br />
/*right: 5px;*/<br />
left: 158px;<br />
/*border: 3px solid grey;*/<br />
border-radius: 7px 7px 12px 12px;<br />
/*box-shadow: 0 0 10px rgba(0,0,0,0.5);*/<br />
color: grey;<br />
font-style: bold;<br />
text-shadow: 3px 3px 3px grey;<br />
font-size: 120%;<br />
text-decoration: none;<br />
}<br />
/* -pm- Go down button*/<br />
<br />
/* ---Содержание-------------------------------------*/<br />
/* Убираем номер пункта в содержании */<br />
.tocnumber { display: none; }<br />
<br />
/* Убираем слово "Содержание" и ссылку "убрать/показать" */<br />
#blockb #toctitle { display: none; }<br />
/*.toctoggle { display: none; }*/<br />
<br />
/* Свои символы перед пунктами в содержании*/<br />
.toctext {<br />
display: inherit;<br />
}<br />
.toc li.toclevel-2 {<br />
list-style: none; /* Убираем исходные маркеры */ <br />
}<br />
.toc li.toclevel-2: before{<br />
display: inline;<br />
content: "•"; /* добавляем свой */<br />
}<br />
.toc li.toclevel-3:before{<br />
content: "°";<br />
}<br />
<br />
.right_block_test {<br />
width:29%;<br />
}<br />
<br />
@media screen and (max-width: 1300px) {<br />
.right_block_test {<br />
width:100%;<br />
}<br />
<br />
}</div>
Coder
http://playground.sysadminwiki.ru/w/index.php?title=MediaWiki:Common.css&diff=376
MediaWiki:Common.css
2017-06-19T10:04:38Z
<p>Coder: </p>
<hr />
<div>/* отодвигаем боковое мению для отображения кнопок соц сетей */<br />
#mw-panel {<br />
padding-left: 0.7em;<br />
}<br />
<br />
/* отодвигаем статьи справа, чтобы текст не перекрывался кнопками панели */<br />
.mw-body {<br />
margin-right: 1.7em;<br />
}<br />
<br />
/**<br />
* Slide panel with 2 buttons<br />
*/<br />
<br />
div.slideTab {<br />
color: white;<br />
float: right;<br />
margin: 3px 0;<br />
padding: 0px;<br />
background: #164EAF;<br />
display: block; <br />
cursor:pointer; <br />
border: 2px solid #fff; <br />
border-right: 0;<br />
-webkit-border-top-left-radius: 5px;<br />
-webkit-border-bottom-left-radius: 5px;<br />
border-radius: 5px 0 0 5px;<br />
box-shadow: 0px 1px 5px 0px #000;<br />
filter: progid:DXImageTransform.Microsoft.DropShadow(sProperties);<br />
-webkit-box-shadow: 0px 1px 5px 0px #000;<br />
-moz-box-shadow: 0px 1px 5px 0px #000;<br />
}<br />
<br />
.info_but:before{<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/info.png');<br />
}<br />
<br />
.info_but_pressed:before{<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/info_pressed.png');<br />
}<br />
<br />
.toc_but:before{<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/toc.png');<br />
}<br />
<br />
.toc_but_pressed:before{<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/toc_pressed.png');<br />
}<br />
<br />
div.slideTab2 {<br />
color: white;<br />
float: right;<br />
margin: 3px 0;<br />
padding: 0px;<br />
background: green;<br />
display: block; <br />
cursor:pointer; <br />
border: 2px solid #fff; <br />
border-right: 0;<br />
-webkit-border-top-left-radius: 5px;<br />
-webkit-border-bottom-left-radius: 5px;<br />
border-radius: 5px 0 0 5px;<br />
box-shadow: 0px 1px 5px 0px #000;<br />
filter: progid:DXImageTransform.Microsoft.DropShadow(sProperties);<br />
-webkit-box-shadow: 0px 1px 5px 0px #000;<br />
-moz-box-shadow: 0px 1px 5px 0px #000;<br />
}<br />
<br />
div.slideContent {<br />
position: relative;<br />
overflow: hidden;<br />
height: 100%;<br />
background: transparent;<br />
background: #fff;<br />
border: 0 solid #000;<br />
float:right;<br />
width: 100%;<br />
margin-left: 10px; <br />
}<br />
<br />
table.slideTable { <br />
background: #164eaf;<br />
border: 1px solid black;<br />
margin: 0 0 0 0px;<br />
padding: 3px 3px 3px 3px;<br />
-moz-border-radius: 4px;<br />
border-radius: 4px;<br />
width: 100%;<br />
}<br />
<br />
table.slideTable tr {<br />
background: #fff;<br />
position: relative<br />
}<br />
<br />
table.slideTable td {<br />
padding: 5px;<br />
vertical-align: top !important;<br />
max-height:500px;<br />
}<br />
<br />
table.slideTable th {<br />
background: #164eaf;<br />
border: 0px;<br />
padding: 5px;<br />
font-size: 120%;<br />
font-weight: bold;<br />
font-family: Trebuchet MS, Helvetica, Arial, sans-serif;<br />
color: white;<br />
vertical-align: top !important;<br />
}<br />
<br />
table.slideTable th a {<br />
color: #fff;<br />
}<br />
<br />
.sticky { /* -pm-используется в функции js*/<br />
position: fixed;<br />
top: 0px;<br />
z-index: 101; <br />
}<br />
<br />
.common {<br />
display: inline;<br />
position: relative;<br />
float: right;<br />
left:30px;<br />
margin: -17px;<br />
}<br />
<br />
.block1 {<br />
float: right;<br />
width:50px<br />
}<br />
<br />
.block2 {<br />
float: right; <br />
}<br />
/* end of slide panel with 2 buttons*/<br />
<br />
/* -------------------------------------------- */<br />
/* -pm- Go top button*/<br />
<br />
div.go_top: before {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/up.png');<br />
} <br />
<br />
div.go_top: hover: before {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/up_over.png');<br />
} <br />
div.go_top {<br />
/*content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/up.png');*/<br />
cursor:pointer;<br />
position: fixed;<br />
z-index: 1;<br />
top: 183px;<br />
/*right: 5px;*/<br />
left: 158px;<br />
/*border: 3px solid grey;*/<br />
border-radius: 12px 12px 7px 7px;<br />
/*box-shadow: 0 0 10px rgba(0,0,0,0.5);*/<br />
color: grey;<br />
font-style: bold;<br />
text-shadow: 3px 3px 3px grey;<br />
font-size: 120%;<br />
text-decoration: none;<br />
}<br />
<br />
div.go_down: before {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/down.png');<br />
}<br />
div.go_down: hover: before {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/down_over.png');<br />
}<br />
<br />
div.go_down:hover {<br />
content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/down_over.png');<br />
}<br />
<br />
div.go_down {<br />
/*content:url('http://playground.sysadminwiki.ru/w/skins/Vector/pm_add/down.png');*/<br />
cursor:pointer;<br />
position: fixed;<br />
z-index: 1;<br />
top: 225px;<br />
/*right: 5px;*/<br />
left: 158px;<br />
/*border: 3px solid grey;*/<br />
border-radius: 7px 7px 12px 12px;<br />
/*box-shadow: 0 0 10px rgba(0,0,0,0.5);*/<br />
color: grey;<br />
font-style: bold;<br />
text-shadow: 3px 3px 3px grey;<br />
font-size: 120%;<br />
text-decoration: none;<br />
}<br />
/* -pm- Go down button*/<br />
<br />
/* ---Содержание-------------------------------------*/<br />
/* Убираем номер пункта в содержании */<br />
.tocnumber { display: none; }<br />
<br />
/* Убираем слово "Содержание" и ссылку "убрать/показать" */<br />
#blockb #toctitle { display: none; }<br />
/*.toctoggle { display: none; }*/<br />
<br />
/* Свои символы перед пунктами в содержании*/<br />
.toctext {<br />
display: inherit;<br />
}<br />
.toc li.toclevel-2 {<br />
list-style: none; /* Убираем исходные маркеры */ <br />
}<br />
.toc li.toclevel-2: before{<br />
display: inline;<br />
content: "•"; /* добавляем свой */<br />
}<br />
.toc li.toclevel-3:before{<br />
content: "°";<br />
}<br />
<br />
.right_block {<br />
width:29%;<br />
}<br />
<br />
@media screen and (max-width: 1300px) {<br />
.right_block {<br />
width:100%;<br />
}<br />
<br />
}</div>
Coder
http://playground.sysadminwiki.ru/w/index.php?title=%D0%9F%D0%BE%D1%80%D1%8F%D0%B4%D0%BE%D0%BA_%D0%B1%D0%BB%D0%BE%D0%BA%D0%BE%D0%B2_%D0%BF%D1%80%D0%B8_%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B8_%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%8B&diff=375
Порядок блоков при изменении ширины
2017-06-19T09:59:17Z
<p>Coder: </p>
<hr />
<div><br />
== Правый блок помещается НАД левым ==<br />
<br />
<div style="float:right; width: 29%; min-width: 300px; max-width: 500px; background-color:#d19a04; margin: 10px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи<br />
</div><br />
<br />
{| class=wikitable cellspacing="5" cellpadding="5"<br />
|- valign=top<br />
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.<br />
|}<br />
<br />
== Правый блок помещается ПОД левым ==<br />
<div style=" width:100%; background-color: blue; margin: 0 auto;">ВЕРХНИЙ БЛОК (шапка): название страницы, приветствие, статистика</div><br />
<br />
{|<br />
|-<br />
|<br />
<div style="float:left; width: 70%; min-width: 400px;"><br />
{| class=wikitable cellspacing="5" cellpadding="5"<br />
|- valign=top<br />
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.<br />
|}<br />
</div><br />
<br />
<div class = "right_block_test" style="float:right; min-width: 300px; background-color:#d19a04; margin: 16px 0 0 7px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи<br />
</div><br />
|}<br />
<br />
<div style=" width:100%; background-color: green; margin: 0 auto;">НИЖНИЙ БЛОК (подвал): контакты, важные ссылки</div></div>
Coder
http://playground.sysadminwiki.ru/w/index.php?title=%D0%9F%D0%BE%D1%80%D1%8F%D0%B4%D0%BE%D0%BA_%D0%B1%D0%BB%D0%BE%D0%BA%D0%BE%D0%B2_%D0%BF%D1%80%D0%B8_%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B8_%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%8B&diff=374
Порядок блоков при изменении ширины
2017-06-19T09:56:52Z
<p>Coder: </p>
<hr />
<div><br />
== Правый блок помещается НАД левым ==<br />
<br />
<div style="float:right; width: 29%; min-width: 300px; max-width: 500px; background-color:#d19a04; margin: 10px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи<br />
</div><br />
<br />
{| class=wikitable cellspacing="5" cellpadding="5"<br />
|- valign=top<br />
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.<br />
|}<br />
<br />
== Правый блок помещается ПОД левым ==<br />
<div style=" width:100%; background-color: blue; margin: 0 auto;">ВЕРХНИЙ БЛОК (шапка): название страницы, приветствие, статистика</div><br />
<br />
{|<br />
|-<br />
|<br />
<div style="float:left; width: 70%; min-width: 400px;"><br />
{| class=wikitable cellspacing="5" cellpadding="5"<br />
|- valign=top<br />
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.<br />
|}<br />
</div><br />
<br />
<div class = "right_block" style="float:right; min-width: 300px; background-color:#d19a04; margin: 16px 0 0 7px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи<br />
</div><br />
|}<br />
<br />
<div style=" width:100%; background-color: green; margin: 0 auto;">НИЖНИЙ БЛОК (подвал): контакты, важные ссылки</div></div>
Coder
http://playground.sysadminwiki.ru/w/index.php?title=%D0%9F%D0%BE%D1%80%D1%8F%D0%B4%D0%BE%D0%BA_%D0%B1%D0%BB%D0%BE%D0%BA%D0%BE%D0%B2_%D0%BF%D1%80%D0%B8_%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B8_%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%8B&diff=373
Порядок блоков при изменении ширины
2017-06-19T09:51:08Z
<p>Coder: /* Правый блок помещается НАД левым */</p>
<hr />
<div><style><br />
.right_block {<br />
width:29%;<br />
}<br />
<br />
@media screen and (max-width: 1300px) {<br />
.right_block {<br />
width:100%;<br />
}<br />
<br />
}<br />
</style><br />
<br />
<br />
<br />
== Правый блок помещается НАД левым ==<br />
<br />
<div style="float:right; width: 29%; min-width: 300px; max-width: 500px; background-color:#d19a04; margin: 10px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи<br />
</div><br />
<br />
{| class=wikitable cellspacing="5" cellpadding="5"<br />
|- valign=top<br />
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.<br />
|}<br />
<br />
== Правый блок помещается ПОД левым ==<br />
<div style=" width:100%; background-color: blue; margin: 0 auto;">ВЕРХНИЙ БЛОК (шапка): название страницы, приветствие, статистика</div><br />
<br />
{|<br />
|-<br />
|<br />
<div style="float:left; width: 70%; min-width: 400px;"><br />
{| class=wikitable cellspacing="5" cellpadding="5"<br />
|- valign=top<br />
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.<br />
|}<br />
</div><br />
<br />
<div class = "right_block" style="float:right; min-width: 300px; background-color:#d19a04; margin: 16px 0 0 7px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи<br />
</div><br />
|}<br />
<br />
<div style=" width:100%; background-color: green; margin: 0 auto;">НИЖНИЙ БЛОК (подвал): контакты, важные ссылки</div></div>
Coder
http://playground.sysadminwiki.ru/w/index.php?title=%D0%9F%D0%BE%D1%80%D1%8F%D0%B4%D0%BE%D0%BA_%D0%B1%D0%BB%D0%BE%D0%BA%D0%BE%D0%B2_%D0%BF%D1%80%D0%B8_%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B8_%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%8B&diff=372
Порядок блоков при изменении ширины
2017-06-19T09:50:06Z
<p>Coder: </p>
<hr />
<div>== Правый блок помещается НАД левым ==<br />
<style><br />
.right_block {<br />
width:29%;<br />
}<br />
<br />
@media screen and (max-width: 1300px) {<br />
.right_block {<br />
width:100%;<br />
}<br />
<br />
}<br />
</style><br />
<br />
<div style="float:right; width: 29%; min-width: 300px; max-width: 500px; background-color:#d19a04; margin: 10px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи<br />
</div><br />
<br />
{| class=wikitable cellspacing="5" cellpadding="5"<br />
|- valign=top<br />
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.<br />
|}<br />
<br />
<br />
== Правый блок помещается ПОД левым ==<br />
<div style=" width:100%; background-color: blue; margin: 0 auto;">ВЕРХНИЙ БЛОК (шапка): название страницы, приветствие, статистика</div><br />
<br />
{|<br />
|-<br />
|<br />
<div style="float:left; width: 70%; min-width: 400px;"><br />
{| class=wikitable cellspacing="5" cellpadding="5"<br />
|- valign=top<br />
| ЛЕВЫЙ БЛОК: избранные статьи, изображения. В таблице, где много данных. В ширину данные могут занимать всю ширину окна, поэтому ширину блока таблицы необходимо контролировать.<br />
|}<br />
</div><br />
<br />
<div class = "right_block" style="float:right; min-width: 300px; background-color:#d19a04; margin: 16px 0 0 7px;">ПРАВЫЙ БЛОК: Перечень порталов, ссылки на популярные статьи<br />
</div><br />
|}<br />
<br />
<div style=" width:100%; background-color: green; margin: 0 auto;">НИЖНИЙ БЛОК (подвал): контакты, важные ссылки</div></div>
Coder