MediaWiki:Common.js — различия между версиями
24pm (обсуждение | вклад) (Новая страница: « $("#but1").click(function (event) { if ($("#win1").is(':visible')) { $("#win1").hide('slow'); } else { $("#win1").show…») |
Coder (обсуждение | вклад) |
||
(не показаны 133 промежуточные версии 3 участников) | |||
Строка 1: | Строка 1: | ||
− | $("# | + | /** |
− | + | * Slide panel with 2 buttons | |
− | + | */ | |
− | + | var maximumWidthText = $("#text").width(); | |
− | + | var maximumWidthTextWithWin1 = maximumWidthText - $(".block1").width() - $("#win1").width(); | |
− | + | var maximumWidthTextWithWin2 = maximumWidthText - $(".block1").width() - $("#win2").width(); | |
− | + | var maxHeightBlock = 0; | |
− | + | var maxHeightBlockb = 0; | |
− | + | var indent = document.body.offsetWidth - $('#aside1').offset().left - $('#aside1').width(); | |
+ | $(function() { | ||
+ | $("#toc").css("display",'block'); | ||
+ | $("#toc").css("overflow",'scroll'); | ||
}); | }); | ||
− | + | ||
+ | $("#but1").click(function (event) { | ||
+ | if ($("#win1").is(':visible')) { | ||
+ | $("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" ); | ||
+ | $("#win1").hide('slow'); | ||
+ | $('#text').animate({ | ||
+ | width : maximumWidthText, | ||
+ | }); | ||
+ | |||
+ | } else { | ||
+ | $("#but1").removeClass( "info_but" ).addClass( "info_but_pressed" ); | ||
+ | $("#win1").show('slow'); | ||
+ | $('#text').animate({ | ||
+ | width : maximumWidthTextWithWin1}, | ||
+ | function(){ | ||
+ | var ff= 0; | ||
+ | if (z - $(window).scrollTop() < 0) { | ||
+ | if (navigator.userAgent.search(/Firefox/) > -1) { | ||
+ | ff= 99; | ||
+ | } | ||
+ | scrl = 0; | ||
+ | posit = $("#block").position().top | ||
+ | posit2 = $("#toc").position().top | ||
+ | } else { | ||
+ | scrl = $(window).scrollTop(); | ||
+ | posit = $("#block").offset().top | ||
+ | posit2 = $("#toc").offset().top | ||
+ | } | ||
+ | var xx = document.body.offsetHeight -(posit+17) + scrl -ff; | ||
+ | var xxb = document.body.offsetHeight -(posit2+26); | ||
+ | $("#block").css("max-height",xx+'px'); | ||
+ | $("#toc").css("max-height",xxb+'px'); | ||
+ | maxHeightBlock = xx; | ||
+ | maxHeightBlockb = xxb; | ||
+ | } | ||
+ | ); | ||
+ | |||
if ($("#win2").is(':visible')) { | if ($("#win2").is(':visible')) { | ||
$("#win2").hide('slow'); | $("#win2").hide('slow'); | ||
− | } else { | + | $("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" ); |
− | + | } | |
− | + | } | |
− | + | ||
− | + | ||
+ | }); | ||
+ | |||
+ | $("#but2").click(function (event) { | ||
+ | if ($("#win2").is(':visible')) { | ||
+ | $("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" ); | ||
+ | $("#win2").hide('slow'); | ||
+ | $('#text').animate({ | ||
+ | width : maximumWidthText, | ||
+ | }); | ||
+ | |||
+ | } else { | ||
+ | $("#but2").removeClass( "toc_but" ).addClass( "toc_but_pressed" ); | ||
+ | $("#win2").show('slow'); | ||
+ | $('#text').animate({ | ||
+ | width : maximumWidthTextWithWin2, | ||
+ | }); | ||
+ | |||
+ | if ($("#win1").is(':visible')) { | ||
+ | $("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" ); | ||
+ | $("#win1").hide('slow'); | ||
} | } | ||
+ | } | ||
+ | var ff = 0; | ||
+ | if (z - $(window).scrollTop() < 0) { | ||
+ | if (navigator.userAgent.search(/Firefox/) > -1) { | ||
+ | ff= 46; | ||
+ | } | ||
+ | |||
+ | scrl = 0; | ||
+ | pos = $("#block").position().top | ||
+ | pos2 = $("#toc").position().top | ||
+ | } else { | ||
+ | scrl = $(window).scrollTop(); | ||
+ | pos = $("#block").offset().top | ||
+ | pos2 = $("#toc").offset().top | ||
+ | } | ||
+ | var xx = document.body.offsetHeight -(pos+17) ; | ||
+ | var xxb = document.body.offsetHeight -(pos2+26) +scrl -ff; | ||
+ | $("#block").css("max-height",xx+'px'); | ||
+ | |||
+ | $("#toc").css("max-height",xxb+'px'); | ||
+ | maxHeightBlock = xx; | ||
+ | maxHeightBlockb = xxb; | ||
+ | |||
+ | }); | ||
− | + | var z = $("#aside1").offset().top; | |
(function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными | (function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными | ||
− | + | var a = document.querySelector('#aside1'), b = null; // селектор блока, который нужно закрепить | |
− | + | ||
− | + | window.addEventListener('scroll', Ascroll, false); | |
− | + | document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100% | |
− | + | function Ascroll() { | |
− | + | if (b === null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями | |
− | + | var Sa = getComputedStyle(a, ''), s = ''; | |
− | + | for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя | |
− | + | 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) { | |
− | + | s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; ' | |
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | b = document.createElement('div'); // создать потомка | |
− | + | var kk = a.offsetWidth; | |
− | + | b.style.cssText = s + ' box-sizing: border-box;'; | |
− | + | a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок первым | |
− | b. | + | var l = a.childNodes.length; |
+ | for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты) | ||
+ | b.appendChild(a.childNodes[1]); | ||
} | } | ||
− | + | //a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение | |
− | + | //a.style.height = '950px'; // если под скользящим элементом есть другие блоки, можно своё значение | |
− | + | ||
+ | a.style.padding = '0'; | ||
+ | a.style.border = '0'; // если элементу присвоен padding или border | ||
+ | } | ||
+ | |||
+ | //$("#aside1").offset({top:z}); | ||
+ | |||
+ | if (z - $(window).scrollTop() <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера | ||
+ | |||
+ | //$("#aside1").offset({top:$(window).scrollTop()}); | ||
+ | b.className = 'sticky'; | ||
+ | |||
+ | b.style.right = indent + 'px'; | ||
+ | |||
+ | } else { | ||
+ | //$("#aside1").offset({top:z}); | ||
+ | b.className = ''; | ||
+ | } | ||
+ | var ff = 0; | ||
+ | var ff2 = 0; | ||
+ | if (z - $(window).scrollTop() < 0) { | ||
+ | pos = $("#block").position().top | ||
+ | pos2 = $("#toc").position().top | ||
+ | if (navigator.userAgent.search(/Firefox/) > -1) { | ||
+ | ff= 99; | ||
+ | ff2= 46; | ||
+ | } | ||
+ | } else { | ||
+ | pos = $("#block").offset().top | ||
+ | pos2 = $("#toc").offset().top | ||
} | } | ||
− | })() | + | maxHeightBlock = document.body.offsetHeight -(pos+17); |
+ | maxHeightBlockb = document.body.offsetHeight -(pos2+26); | ||
+ | |||
+ | var xx0 = z - $(window).scrollTop(); | ||
+ | if (xx0 < 0) { xx0 = z;} | ||
+ | var xx = maxHeightBlock + z - xx0 - ff; | ||
+ | var xxb = maxHeightBlockb + z - xx0- ff2; | ||
+ | xx = xx + 'px'; | ||
+ | xxb = xxb + 'px'; | ||
+ | $("#block").css("max-height",xx); | ||
+ | $("#toc").css("max-height",xxb); | ||
+ | } | ||
+ | })() | ||
+ | /* slide panel with 2 buttons */ | ||
+ | |||
+ | /** | ||
+ | * Slide panel with 1 button | ||
+ | * @author mwjames | ||
+ | */ | ||
+ | |||
+ | $("#panel-tab").click( function (event) { | ||
+ | event.stopPropagation(); | ||
+ | showIfNotVisible( "#panel-content" ); | ||
+ | } ); | ||
+ | |||
+ | function showIfNotVisible( element ) { | ||
+ | var width = $( '#panel' ).find( 'table').width() + 8; | ||
+ | if ( $(element).css( "width" ) == width + 'px' ) | ||
+ | $(element).animate( { width: 0 }, 1500); | ||
+ | else | ||
+ | $(element).animate( { width: width }, 1500); | ||
+ | }; | ||
+ | |||
+ | $( function() { | ||
+ | var element = $("#panel-content"), | ||
+ | status = element.attr( 'class' ), | ||
+ | width = element.find( 'table').width() + 8; | ||
+ | |||
+ | if ( status === 'close' ){ | ||
+ | element | ||
+ | .width( width ) | ||
+ | .animate( { width: 0 }, 1200); | ||
+ | } else { | ||
+ | element | ||
+ | .width( width ); | ||
+ | } | ||
+ | |||
+ | |||
+ | } ); | ||
+ | /* slide panel with 1 button */ |
Текущая версия на 08:50, 28 июня 2017
/** * Slide panel with 2 buttons */ var maximumWidthText = $("#text").width(); var maximumWidthTextWithWin1 = maximumWidthText - $(".block1").width() - $("#win1").width(); var maximumWidthTextWithWin2 = maximumWidthText - $(".block1").width() - $("#win2").width(); var maxHeightBlock = 0; var maxHeightBlockb = 0; var indent = document.body.offsetWidth - $('#aside1').offset().left - $('#aside1').width(); $(function() { $("#toc").css("display",'block'); $("#toc").css("overflow",'scroll'); }); $("#but1").click(function (event) { if ($("#win1").is(':visible')) { $("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" ); $("#win1").hide('slow'); $('#text').animate({ width : maximumWidthText, }); } else { $("#but1").removeClass( "info_but" ).addClass( "info_but_pressed" ); $("#win1").show('slow'); $('#text').animate({ width : maximumWidthTextWithWin1}, function(){ var ff= 0; if (z - $(window).scrollTop() < 0) { if (navigator.userAgent.search(/Firefox/) > -1) { ff= 99; } scrl = 0; posit = $("#block").position().top posit2 = $("#toc").position().top } else { scrl = $(window).scrollTop(); posit = $("#block").offset().top posit2 = $("#toc").offset().top } var xx = document.body.offsetHeight -(posit+17) + scrl -ff; var xxb = document.body.offsetHeight -(posit2+26); $("#block").css("max-height",xx+'px'); $("#toc").css("max-height",xxb+'px'); maxHeightBlock = xx; maxHeightBlockb = xxb; } ); if ($("#win2").is(':visible')) { $("#win2").hide('slow'); $("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" ); } } }); $("#but2").click(function (event) { if ($("#win2").is(':visible')) { $("#but2").removeClass( "toc_but_pressed" ).addClass( "toc_but" ); $("#win2").hide('slow'); $('#text').animate({ width : maximumWidthText, }); } else { $("#but2").removeClass( "toc_but" ).addClass( "toc_but_pressed" ); $("#win2").show('slow'); $('#text').animate({ width : maximumWidthTextWithWin2, }); if ($("#win1").is(':visible')) { $("#but1").removeClass( "info_but_pressed" ).addClass( "info_but" ); $("#win1").hide('slow'); } } var ff = 0; if (z - $(window).scrollTop() < 0) { if (navigator.userAgent.search(/Firefox/) > -1) { ff= 46; } scrl = 0; pos = $("#block").position().top pos2 = $("#toc").position().top } else { scrl = $(window).scrollTop(); pos = $("#block").offset().top pos2 = $("#toc").offset().top } var xx = document.body.offsetHeight -(pos+17) ; var xxb = document.body.offsetHeight -(pos2+26) +scrl -ff; $("#block").css("max-height",xx+'px'); $("#toc").css("max-height",xxb+'px'); maxHeightBlock = xx; maxHeightBlockb = xxb; }); var z = $("#aside1").offset().top; (function(){ // анонимная функция (function(){ })(), чтобы переменные "a" и "b" не стали глобальными var a = document.querySelector('#aside1'), b = null; // селектор блока, который нужно закрепить window.addEventListener('scroll', Ascroll, false); document.body.addEventListener('scroll', Ascroll, false); // если у html и body высота равна 100% function Ascroll() { if (b === null) { // добавить потомка-обёртку, чтобы убрать зависимость с соседями var Sa = getComputedStyle(a, ''), s = ''; for (var i = 0; i < Sa.length; i++) { // перечислить стили CSS, которые нужно скопировать с родителя 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) { s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; ' } } b = document.createElement('div'); // создать потомка var kk = a.offsetWidth; b.style.cssText = s + ' box-sizing: border-box;'; a.insertBefore(b, a.firstChild); // поместить потомка в цепляющийся блок первым var l = a.childNodes.length; for (var i = 1; i < l; i++) { // переместить во вновь созданного потомка всех остальных потомков (итого: создан потомок-обёртка, внутри которого по прежнему работают скрипты) b.appendChild(a.childNodes[1]); } //a.style.height = b.getBoundingClientRect().height + 'px'; // если под скользящим элементом есть другие блоки, можно своё значение //a.style.height = '950px'; // если под скользящим элементом есть другие блоки, можно своё значение a.style.padding = '0'; a.style.border = '0'; // если элементу присвоен padding или border } //$("#aside1").offset({top:z}); if (z - $(window).scrollTop() <= 0) { // elem.getBoundingClientRect() возвращает в px координаты элемента относительно верхнего левого угла области просмотра окна браузера //$("#aside1").offset({top:$(window).scrollTop()}); b.className = 'sticky'; b.style.right = indent + 'px'; } else { //$("#aside1").offset({top:z}); b.className = ''; } var ff = 0; var ff2 = 0; if (z - $(window).scrollTop() < 0) { pos = $("#block").position().top pos2 = $("#toc").position().top if (navigator.userAgent.search(/Firefox/) > -1) { ff= 99; ff2= 46; } } else { pos = $("#block").offset().top pos2 = $("#toc").offset().top } maxHeightBlock = document.body.offsetHeight -(pos+17); maxHeightBlockb = document.body.offsetHeight -(pos2+26); var xx0 = z - $(window).scrollTop(); if (xx0 < 0) { xx0 = z;} var xx = maxHeightBlock + z - xx0 - ff; var xxb = maxHeightBlockb + z - xx0- ff2; xx = xx + 'px'; xxb = xxb + 'px'; $("#block").css("max-height",xx); $("#toc").css("max-height",xxb); } })() /* slide panel with 2 buttons */ /** * Slide panel with 1 button * @author mwjames */ $("#panel-tab").click( function (event) { event.stopPropagation(); showIfNotVisible( "#panel-content" ); } ); function showIfNotVisible( element ) { var width = $( '#panel' ).find( 'table').width() + 8; if ( $(element).css( "width" ) == width + 'px' ) $(element).animate( { width: 0 }, 1500); else $(element).animate( { width: width }, 1500); }; $( function() { var element = $("#panel-content"), status = element.attr( 'class' ), width = element.find( 'table').width() + 8; if ( status === 'close' ){ element .width( width ) .animate( { width: 0 }, 1200); } else { element .width( width ); } } ); /* slide panel with 1 button */