Отличия Вашего скрипта в 6 посте от моего только вот в этих строках:
#wrapper {
width: 100%;
margin: 0 auto;
margin-top: 100px;
}
#tabs,#tabs2,#tabs3,#tabs4,#tabs5 {
width: 100%;
margin: 0 auto;
margin-bottom: 40px;
}
и в наличии большого количества текста во вкладках. Откроем html страницу в браузере на весь экран, затем сделаем окно браузера в полэкрана, и наблюдаем, что часть текста уходит за пределы блока :(помогите, пожалуйста :( |
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);
|
Отлично, работает! :)
И еще вопрос, когда в коде ниже прописываешь "width": "100%" то некоторые браузеры вытягивают нижнюю границу.
divs.css({
"position": "absolute",
"top": "10px",
"width": "100%"
})
Можно как-нибудь это побороть? :) Хочу разместить по центру блока текст |
Ilya_Ru,
не понимаю зачем "width": "100%" и весь текст ниже |
Наверно я просто не правильно выразился :)
Если во вкладку вписать 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,
divs.css({
"position": "absolute",
"top": "10px", "right": 0, "left": 0, "text-align": "center", "margin": "0 auto"
}).addClass("make_transist");
|
Ilya_Ru,
правильнее в css добавить
.make_transist { right: 0; left: 0; text-align: center; margin: 0 auto; position: absolute;top:10px; }
а в скрипте оставить только
divs.addClass("make_transist");
|
рони,
Огромное спасибо :) Вы просто волшебник! :) |
рони,
Еще раз побеспокою. Если прописать .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 дал со своего хостинга... |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 00:46. |