27.10.2016, 22:30
|
|
Аспирант
|
|
Регистрация: 06.04.2015
Сообщений: 42
|
|
Отличия Вашего скрипта в 6 посте от моего только вот в этих строках:
#wrapper {
width: 100%;
margin: 0 auto;
margin-top: 100px;
}
#tabs,#tabs2,#tabs3,#tabs4,#tabs5 {
width: 100%;
margin: 0 auto;
margin-bottom: 40px;
}
и в наличии большого количества текста во вкладках.
Откроем html страницу в браузере на весь экран, затем сделаем окно браузера в полэкрана, и наблюдаем, что часть текста уходит за пределы блока  помогите, пожалуйста |
|
27.10.2016, 23:47
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
tabulous resize
Ilya_Ru,
(function($) {
$.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": "40px"
}).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())
})
}).eq(0).click();
$(window).resize(function() {
block.height(divs.filter("." + show).height())
})
})
}
})(jQuery);
|
|
28.10.2016, 00:07
|
|
Аспирант
|
|
Регистрация: 06.04.2015
Сообщений: 42
|
|
Отлично, работает! 
И еще вопрос, когда в коде ниже прописываешь "width": "100%" то некоторые браузеры вытягивают нижнюю границу.
divs.css({
"position": "absolute",
"top": "10px",
"width": "100%"
})
Можно как-нибудь это побороть? Хочу разместить по центру блока текст |
|
28.10.2016, 01:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Ilya_Ru,
не понимаю зачем "width": "100%" и весь текст ниже
|
|
28.10.2016, 02:40
|
|
Аспирант
|
|
Регистрация: 06.04.2015
Сообщений: 42
|
|
Наверно я просто не правильно выразился
Если во вкладку вписать 1-2 слова и попытаться сделать их выравнивание по середине строки - текст будет все равно выравнен по левому краю.
Приведу пример:
...
<div id="tabs-1">
<p style="text-align:center">привет,<br> мир!</p>
</div>
...
- в этом случае как раз идёт странное выравнивание. Оно наверно связано с position:absolute
Если же в скрипт прописать "wight":"100%", то в коде страницы, само собой, увидем это:
...
<div class="класс_скрипта" style="position:absolute; top:40px; wight:100%" id="tabs-1">
<p style="text-align:center">привет,<br> мир!</p>
</div>
...
- данный вариант выравнивает текст по правильному, по центру, но, некоторые браузеры отображают большой отступ до нижней границы блока вкладки (скринсшот)
http://hostingkartinok.com/show-imag...3fae0af279d193
Может быть Вы знаете как это победить?
PS: за ошибки прошу прощения. Пишу с телефона.
Последний раз редактировалось Ilya_Ru, 28.10.2016 в 02:47.
|
|
28.10.2016, 09:06
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Ilya_Ru,
divs.css({
"position": "absolute",
"top": "10px", "right": 0, "left": 0, "text-align": "center", "margin": "0 auto"
}).addClass("make_transist");
|
|
28.10.2016, 09:14
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Ilya_Ru,
правильнее в css добавить
.make_transist { right: 0; left: 0; text-align: center; margin: 0 auto; position: absolute;top:10px; }
а в скрипте оставить только
divs.addClass("make_transist");
|
|
28.10.2016, 17:41
|
|
Аспирант
|
|
Регистрация: 06.04.2015
Сообщений: 42
|
|
рони,
Огромное спасибо Вы просто волшебник!
|
|
29.10.2016, 03:06
|
|
Аспирант
|
|
Регистрация: 06.04.2015
Сообщений: 42
|
|
рони,
Еще раз побеспокою.
Если прописать .make_transist { right: 0; left: 0; text-align: center; margin: 0 auto; position: absolute;top:10px; }, то возвращается старая проблема со ссылками. А точнее ссылка становится не кликабельной во многих браузерах (Яндекс браузер, Мозилла, другие не проверял). Будто бы не ссылка вовсе, а обычный текст.
И у меня почему-то возникает проблема с выравниванием вкладок, когда в одной из них текста много... Пытаюсь сделать, чтобы они все были одной высоты с выравниванием по центру, но, увы, что-то идет не так. Оговорюсь сразу, верстку пытаюсь сделать адаптивной.
Отправляю все, что причастно ко вкладкам, в том числе кусочки своего css, где есть какое-либо отношение ко вкладкам. Может в чем-то там дело.
<!DOCTYPE html>
<html lang="en-US"><head>
<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($) {
$.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())
})
}).eq(0).click();
$(window).resize(function() {
block.height(divs.filter("." + show).height())
})
})
}
})(jQuery);</script>
<style>
@media (max-width: 520px) and (min-width: 200px) {
.art-content .art-postcontent-0 .layout-item-old-0 {
padding-right: 3px;
padding-left: 3px;
}
.art-post {
padding: 3px;
}
.art-footer {
padding: 10px 0px 0px 0px;
}
}
</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><a href="#tabs-1" title="">текст, которому не хватает одной строки</a></li>
<li><a href="#tabs-2" title="">простой текст</a></li>
<li><a href="#tabs-3" title="">еще один простой текст</a></li>
<li><a href="#tabs-4" title="">заключительный текст</a></li>
</ul>
<div id="tabs_container">
<div id="tabs-1">
<p style="text-align:center">
здесь просто какой-то текст <a href="#" >ссылочка</a>.<br>
</p>
</div>
<div id="tabs-2">
<p>
текст по правому краю<br>
простой.
</p>
</div>
<div id="tabs-3">
<p>
тоже простой текст<br>
</p>
</div>
<div id="tabs-4">
<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>
</body>
</html>
PS: надеюсь, ничего страшного, что ссылки на css и js дал со своего хостинга...
Последний раз редактировалось Ilya_Ru, 29.10.2016 в 10:56.
|
|
29.10.2016, 10:23
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от Ilya_Ru
|
|
А точнее ссылка становится не кликабельно
|
это просто решается, если понять как расположены вкладки.(попробуйте сами решить, позднее напишу)
|
Сообщение от Ilya_Ru
|
|
И у меня почему-то возникает проблема с выравниванием вкладок, когда в одной из них текста много... Пытаюсь сделать, чтобы они все были одной высоты с выравниванием по центру, но, увы, что-то идет не так
|
это не понял. |
|
|
|
