Форум

рони · #31 (**permalink**) 31.10.2016, 17:20

Ilya_Ru,
пробуйте

(function($) {
    function setEqualHeight(columns) {
        var tallestcolumn = 0;
        columns.each(function() {
            currentHeight = $(this).css({
                height: ""
            }).height();
            if (currentHeight > tallestcolumn) tallestcolumn = currentHeight
        });
        columns.height(tallestcolumn)
    }
    $.fn.tabulous = function(options) {
        var settings = $.extend({
            effect: "scale"
        }, options);
        return this.each(function() {
            var parent = $(this),
                ul = $(">ul", parent),
                links = $(">li a", ul),
                block = $("> div", parent),
                divs = $("> div", block),
                hide = "hide" + settings.effect,
                show = "show" + settings.effect;
            ul.append('<span class="tabulousclear"></span>');
            divs.css({
                "position": "absolute",
                "top": "10px",
                "left": 0,
                "right": 0
            }).addClass("make_transist");
            block.addClass("transition");

            links.each(function(indx, a) {
                var a = $(a);
                a.on("click", function(event) {
                    event.preventDefault();
                    links.not(a.addClass("tabulous_active")).removeClass("tabulous_active");
                    var div = divs.eq(indx);
                    divs.removeClass(show).not(div.addClass(show)).addClass(hide);
                    //block.height(div.height())
                    timerHeight();
                })
            }).eq(0).click();
 function timerHeight()
 {
window.setTimeout(function() {
  block.height(divs.filter("." + show).height())
},300)
 }

            setEqualHeight(links);
            $(window).resize(function() {
                timerHeight()
               // block.height(divs.filter("." + show)[0].scrollHeight);
                setEqualHeight(links)
            })
        })
    }
})(jQuery);

Ilya_Ru · #32 (**permalink**) 31.10.2016, 20:05

рони,
Почти хорошо))).
Высота самих вкладок только не адаптируется, пока окно не дернешь. Может в скрипте где ещё задержку надо сделать? )))

Ilya_Ru · #33 (**permalink**) 31.10.2016, 20:12

Скринсшот глюка: http://hostingkartinok.com/show-imag...3e2463bc40c4f7

рони · #34 (**permalink**) 31.10.2016, 20:19

Ilya_Ru,
ссылка с новым вариантом где?

Ilya_Ru · #35 (**permalink**) 31.10.2016, 20:35

Прошу прощение, что не ссылкой, я не с компьютера(((. Заменил только текст во вкладке. Глюк ловлю только тогда, когда текст во вкладке в полноэкранном режиме умещается в одну строку, а при просмотре в пол экрана - нет.

<!DOCTYPE html>
<html lang="en-US" class="responsive responsive-tablet"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no, width = device-width">
    <link rel="stylesheet" href="http://php-ilyaru.rhcloud.com/moysite/style-cleaned.css" media="screen">
    <link rel="stylesheet" href="http://php-ilyaru.rhcloud.com/moysite/style.responsive-cleaned.css" media="all">
	<link href="http://php-ilyaru.rhcloud.com/moysite/tabulous.css" rel="stylesheet" type="text/css">
	
<script src="http://php-ilyaru.rhcloud.com/moysite/jquery.js"></script>
    <script src="http://php-ilyaru.rhcloud.com/moysite/script.responsive.js"></script>


<script type="text/javascript">
(function($) {
    function setEqualHeight(columns) {
        var tallestcolumn = 0;
        columns.each(function() {
            currentHeight = $(this).css({
                height: ""
            }).height();
            if (currentHeight > tallestcolumn) tallestcolumn = currentHeight
        });
        columns.height(tallestcolumn)
    }
    $.fn.tabulous = function(options) {
        var settings = $.extend({
            effect: "scale"
        }, options);
        return this.each(function() {
            var parent = $(this),
                ul = $(">ul", parent),
                links = $(">li a", ul),
                block = $("> div", parent),
                divs = $("> div", block),
                hide = "hide" + settings.effect,
                show = "show" + settings.effect;
            ul.append('<span class="tabulousclear"></span>');
            divs.css({
                "position": "absolute",
                "top": "10px",
                "left": 0,
                "right": 0
            }).addClass("make_transist");
            block.addClass("transition");

            links.each(function(indx, a) {
                var a = $(a);
                a.on("click", function(event) {
                    event.preventDefault();
                    links.not(a.addClass("tabulous_active")).removeClass("tabulous_active");
                    var div = divs.eq(indx);
                    divs.removeClass(show).not(div.addClass(show)).addClass(hide);
                   // block.height(div.height())
                    timerHeight();
                })
            }).eq(0).click();
 function timerHeight()
 {
window.setTimeout(function() {
  block.height(divs.filter("." + show).height())
},300)
 }

            setEqualHeight(links);
            $(window).resize(function() {
                timerHeight()
               // block.height(divs.filter("." + show)[0].scrollHeight);
                setEqualHeight(links)
            })
        })
    }
})(jQuery);</script>



<style>
ul {
width:100%;
}
li {
//margin:0 10px 20px 5px;
//padding:10px;
width:160px;
display:inline-block;
vertical-align:top;
*display:inline;
*zoom:1;
}
.licent {
width:100%;
//height:121px;
text-align:center;
display:table;
position:relative;
}
.licent span {
display:table;
vertical-align:middle;
    text-align: center;
    width: 100%;
}
.licent a {
display:table-cell;
vertical-align:middle;
    text-align: center;
 //   width: 100%;
}
</style>
</head>

<body>
<div id="art-main">
<div>
            <div class="art-layout-wrapper">
                <div class="art-content-layout">
                    <div class="art-content-layout-row">
                        <div class="art-layout-cell art-content">
	<div id="wrapper">
<div id="tabs3">
<ul id="tabs_tabs">
<li><div class="licent"><span><a href="http://php-ilyaru.rhcloud.com/moysite/moy.html#tabs-1" title="" class="tabulous_active" style="height: 36px;"><span style="display: table;">текст в несколько строчек</span></a></span></div></li>
<li><div class="licent"><span><a href="http://php-ilyaru.rhcloud.com/moysite/moy.html#tabs-1" title="" style="height: 36px;"><span style="display: table;">простой текст</span></a></span></div></li>
<li><div class="licent"><span><a href="http://php-ilyaru.rhcloud.com/moysite/moy.html#tabs-1" title="" style="height: 36px;"><span style="display: table;">еще один простой текст</span></a></span></div></li>
<li><div class="licent"><span><a href="http://php-ilyaru.rhcloud.com/moysite/moy.html#tabs-1" title="" style="height: 36px;"><span style="display: table;">заключительный текст</span></a></span></div></li>
<span class="tabulousclear"></span></ul>
<div id="tabs_container" class="transition" style="height: 396px;">
<div id="tabs-1" class="make_transist showup" style="position: absolute; top: 10px; left: 0px; right: 0px;">
<p style="text-align:center"> 
здесь просто какой-то адски длинный текст, например вот этот: Много десятилетий люди не знали, что именно курят так называемые профессиональные историки в своих кабинетах, что обсуждают и на чем основываются. И потому - принимали Историю за настоящую науку, а историков - за ученых.
Катастрофа для Истории случилась всего полтора десятка лет назад, с развитием информационной революции, когда миллионы образованных людей смогли не только почитать все то, что историки выдавали за "научные данные", но и сравнить подобные "трактаты" с первоисточниками или своими знаниями в различных дисциплинах. И вот тут то и обнаружилось, что король-то голый!!!Что нет такой науки, как История, а есть дурацкая ахинея, которую некому и нечем защищать. И чем дальше — тем чаще тут и там случаются беседы, подобные вот таким:
Профессиональный историк: Рассказ о человеческой цивилизации я начну с самого начала, с появления людей в Европе. Когда-то, давным-давно сюда, в Европу переселились негры из Африки и основали здесь первые поселения, что подтверждается находками черепов негритянского типа...
Образованный человек: Постойте-постойте!!! Какие еще черепа?! На тысячу двести раскопанных у нас палеостоянок нашелся только 1 (один) череп, в котором удалось рассмотреть признаки негроидности! Да и тот оказался носителем славянской гаплогруппы «I» — той самой, которую по сей день носит каждый четвертый русский человек! Мы же не негры?
Профессиональный историк: Генетика — это лженаука! Генетики ничего не понимают в истории. Вы не должны верить генетикам, вы должны верить только нам, носителям высшей неоспоримой истины! К тому же с тех пор население русской равнины неоднократно менялось полностью. Народы приходили, уходили, снова приходили, исчезали, опять заселялись...
Образованный человек: Подождите, это с какой стати? Генетические исследования доказали, что праславянская гаплогруппа «I» зародилась именно здесь, в Европе, 50 тысяч лет назад и никогда никуда не исчезала! Мы и сегодня здесь живем. Каждый четвертый русский — это потомок сунгирцев, костенковцев, коренной житель в тысячах поколений. Плюс есть еще часть народов, подселившихся сюда в последние 3-4 тысячи лет, но никак праславян не вытеснивших и не заменивших.
Профессиональный историк: Да говорят же вам, что генетика — это лженаука! Славяне вообще родились всего тысячу лет назад. А до этого на Русской равнине жили монголоиды. Берем культуру ямочно-гребенчатой керамики эпохи неолита (кон. 4 - сер. 2-го тыс. до н. э.). Это почти вся Русская равнина. Поселения этой культуры всегда сопровождаются захоронениями представителей уральской расы, в фенотипе которой обнаруживают монголоидные элементы, понятно?
Образованный человек: Постойте-постойте!!! Какие еще захоронения?! В 56 найденных погребениях только 2 (два) черепа из погребений 19 и 20 (Сахтыш II) обозваны носящими «следы смягченной монголоидности». Да и по тем антропологи дали заключения, что черепа однозначно принадлежат европеоидам, с отклонениями в пределах нормы.
Профессиональный историк: Антропология — это лженаука! Антропологи ничего не смыслят  <a href="http://php-ilyaru.rhcloud.com/moysite/moy.html#">ссылочка</a>.<br> 
</p>


</div>
<div id="tabs-2" class="make_transist hideup" style="position: absolute; top: 10px; left: 0px; right: 0px;">
<p>
текст по правому краю<br>
простой.
</p>
</div>
<div id="tabs-3" class="make_transist hideup" style="position: absolute; top: 10px; left: 0px; right: 0px;">
<p>
тоже простой текст<br>
</p>
</div>
<div id="tabs-4" class="make_transist hideup" style="position: absolute; top: 10px; left: 0px; right: 0px;">
<p>
заключительный текст<br>
для третьей вкладки 
</p>
</div>
</div>
</div>
</div>  
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('#tabs').tabulous({ effect: 'scale' });
$('#tabs2').tabulous({ effect: 'left' });
$('#tabs3').tabulous({ effect: 'up' });
$('#tabs4').tabulous({ effect: 'flip' });
});
</script>
</div><div id="art-resp"><div id="art-resp-m"></div><div id="art-resp-t"></div></div></body></html>

рони · #36 (**permalink**) 31.10.2016, 20:45

Ilya_Ru,

(function($) {
    function setEqualHeight(columns) {
        var tallestcolumn = 0;
        columns.each(function() {
            currentHeight = $(this).css({
                height: ""
            }).height();
            if (currentHeight > tallestcolumn) tallestcolumn = currentHeight
        });
        columns.height(tallestcolumn)
    }
    $.fn.tabulous = function(options) {
        var settings = $.extend({
            effect: "scale"
        }, options);
        return this.each(function() {
            var parent = $(this),
                ul = $(">ul", parent),
                links = $(">li a", ul),
                block = $("> div", parent),
                divs = $("> div", block),
                hide = "hide" + settings.effect,
                show = "show" + settings.effect;
            ul.append('<span class="tabulousclear"></span>');
            divs.css({
                "position": "absolute",
                "top": "10px",
                "left": 0,
                "right": 0
            }).addClass("make_transist");
            block.addClass("transition");

            links.each(function(indx, a) {
                var a = $(a);
                a.on("click", function(event) {
                    event.preventDefault();
                    links.not(a.addClass("tabulous_active")).removeClass("tabulous_active");
                    var div = divs.eq(indx);
                    divs.removeClass(show).not(div.addClass(show)).addClass(hide);
                   // block.height(div.height())
                    timerHeight();
                })
            }).eq(0).click();
 function timerHeight()
 {
window.setTimeout(function() { setEqualHeight(links)
  block.height(divs.filter("." + show).height());

},300)
 }

            //setEqualHeight(links);
            $(window).resize(function() {
                timerHeight();
               // block.height(divs.filter("." + show)[0].scrollHeight);

            })
        })
    }
})(jQuery);

Ilya_Ru · #37 (**permalink**) 03.11.2016, 00:54

рони,Огромнейшее спасибо!))) Больших успехов тебе и удачи во всем! Спасибо за потраченное время на написание всего этого чуда.))) Скрипт идеален!))). Надеюсь, он пригодится ещё кому-нибудь.)))

рони · #38 (**permalink**) 03.11.2016, 01:06

Ilya_Ru,

Форум

Справочник

Discord чат

Курсы javascript