смещение блоков при клике
про табы наверное знают все - клик на таб и появляется инфа
так вот, хочу сделать одну фишку, но с чего начать не имею малейшего понятия.. в чем суть - активный там всегда по центру, когда кликаешь на левый или правый таб, он становится активным и перемещается в центр, а тот что в центре был перемещается на место "кликнутого" подскажите пожалуйста, как эту мысль реализовать, или хотя бы где капнуть информацию |
maximamus,
http://alexchizhov.com/pwstabs/ |
рони, что-то я тебя не узнаю 35кб скриптов + jQuery ради одних табов :haha:
|
куча табов, а то что нужно нету)
|
Poznakomlus,
:-? |
|
Кстати, случайно узнал что Array.apply не работает Firefox 3.6 - древность, но все же обидно :(
Цитата:
|
ооот .. елки ж))
еще раз попытаюсь обьяснить, что нужно активный таб ВСЕГДА должен находится по центру то есть таб1 - таб2(активный) - таб3 когда кликаем на третий, допустим, таб, то второй, что был активным, переходит на место третьего меняются сами заголовки таба думаю уловите мысль |
maximamus,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
width: 200px;
height: 100px;
position: absolute;
}
.tab1 {
background: #FFCC00;
left : 0
}
.tab2{
background: #66CC66;
left: 200px;
}
.tab3 {
background: #3399CC;
left: 400px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var div = $("div"), temp = div[1];
div.click(function() {
var left = $(this).css("left");
$(this).stop().animate({left: 200},1500);
$(temp).stop().animate({left: left},1500);
temp = this;
});
});
</script>
</head>
<body>
<div class='tab1'></div>
<div class='tab2'></div>
<div class='tab3'></div>
</body>
</html>
|
:)
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
display: flex;
}
div {
width: 200px;
height: 100px;
overflow: hidden;
margin: 0;
}
.tab1 {
background: #FFCC00;
width: 20px;
}
.tab2{
background: #66CC66;
}
.tab3 {
background: #3399CC;
width: 20px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var div = $("div"), temp = div[1];
div.click(function() {
var left = $(this).css("left");
$(this).stop().animate({width: 200},1500);
$(temp).not(this).stop().animate({width: 20},1500);
temp = this;
});
});
</script>
</head>
<body>
<div class='tab1'></div>
<div class='tab2'></div>
<div class='tab3'></div>
</body>
</html>
|
рони, а теперь быстро покликай по всем табам. :)
Надоели вы уже все со своим jQuery, лучше всё на CSS3 делать. :) |
Ruslan_xDD,
1. это макет 2. это вопрос к тс что он всё-таки ищет первый вариант или второй или неугадал? 3. да это можно сделать без js |
|
спасибо! оно
|
а без js не подскажете как сделать?
|
maximamus,
три input radio - ниже 3 label (это табы) - остальное css привязано какой input выбран. тот же способ тут http://css-live.ru/Primer/slider-css/slider-css.html |
а тут уже ничего не перемещается как в вашем примере (9е сообщение) в этой теме
|
maximamus,
не совсем то но похоже )))
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
width: 200px;
height: 100px;
}
.tab1 {
background: #FFCC00;
}
.tab2{
background: #66CC66;
}
.tab3 {
background: #3399CC;
}
label {
transition: all 0.8s ease-out;
width: 200px;
height: 100px;
position: absolute;
left :0;
top: 10px;
border: #FF3300 1px solid;
}
#slide1:checked ~ label:nth-of-type(1),
#slide2:checked ~ label:nth-of-type(2),
#slide3:checked ~ label:nth-of-type(3){
left: 200px;
}
#slide1:checked ~ label:nth-of-type(3){
left: 400px;
}
#slide1:checked ~ label:nth-of-type(2){
left: 0px;
}
#slide2:checked ~ label:nth-of-type(1){
left: 0px;
}
#slide2:checked ~ label:nth-of-type(3){
left: 400px;
}
#slide3:checked ~ label:nth-of-type(2){
left: 400px;
}
#slide3:checked ~ label:nth-of-type(1){
left: 0px;
}
input{
display: none;
}
</style>
</head>
<body>
<input type=radio name=slider id=slide1 />
<input checked type=radio name=slider id=slide2 />
<input type=radio name=slider id=slide3 />
<label for=slide1><div class='tab1'>1</div></label>
<label for=slide2><div class='tab2'>2</div></label>
<label for=slide3><div class='tab3'>3</div></label>
</body>
</html>
|
гуд джоб)))) спасибо! попробую сейчас реализовать
|
Извращенцы. :)
|
Ruslan_xDD,
есть лучше решение??)))) рони, и вот последний вопрос, надеюсь)) можно ли сделать так, что бы сменялся только текст, а локи на месте оставались? я так понимаю для этого нужно lable всунуть в середину div'a? |
Цитата:
|
рони,
Сейчас, при нажатии смещается блок вместе с текстом. Можно ли сделать так, что бы смещался только текст, а блок оставался на месте? |
maximamus,
:-?
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
width: 200px;
height: 100px;
}
.tab1 {
background: #FFCC00;
}
.tab2{
background: #66CC66;
}
.tab3 {
background: #3399CC;
}
label {
transition: all 0.8s ease-out;
width: 200px;
height: 100px;
position: absolute;
left :0;
top: 0px;
}
#slide1:checked ~ div label:nth-of-type(1),
#slide2:checked ~ div label:nth-of-type(2),
#slide3:checked ~ div label:nth-of-type(3){
left: 200px;
}
#slide1:checked ~ div label:nth-of-type(3){
left: 400px;
}
#slide1:checked ~ div label:nth-of-type(2){
left: 0px;
}
#slide2:checked ~ div label:nth-of-type(1){
left: 0px;
}
#slide2:checked ~ div label:nth-of-type(3){
left: 400px;
}
#slide3:checked ~ div label:nth-of-type(2){
left: 400px;
}
#slide3:checked ~ div label:nth-of-type(1){
left: 0px;
}
input{
display: none;
}
.gr{
width: 600px;
position: relative;
height: 100px;
border: 5px #FF0033 solid;
}
.gr div{
float: left;
}
</style>
</head>
<body>
<input type=radio name=slider id=slide1 />
<input checked type=radio name=slider id=slide2 />
<input type=radio name=slider id=slide3 />
<div class='gr'><label for=slide1><p>Lorem ipsum dolor sit amet, consectetur </p></label><div class='tab1'></div>
<label for=slide2><p>Lorem ipsum dolor sit amet, consectetur </p></label><div class='tab2'></div>
<label for=slide3><p>Lorem ipsum dolor sit amet, consectetur </p></label><div class='tab3'></div></div>
</body>
</html>
|
рони,
действительно профессор))) еще раз - огромное спасибо! |
а вот чисто ради уже интереса, чистым css'ом, без применения импутов и лейбов, есть решение?
а то посмотрев кучу уроков, убедился, что 3 версия ну уж сииильно можная и решений есть куча, даже не прибегая js и прочих лишних элементов |
Цитата:
|
Цитата:
нашел в загашнике пример на клик без инпута http://jsfiddle.net/vlasenkofedor/59T3Z/ |
Poznakomlus,
я сам в шоке от его нервов) не часто встретишь такого "учителя" извините конечно за наглость, подскажите пожалуйста, как этот пример реализовать в мою "головную боль"?( |
Цитата:
Цитата:
|
рони,
понял, спасибо |
и снова - Здравствуйте!)
в общем мучал-мучал и не домучал Учитывая тяжесть конструкции, с инпутами и лейбами все едет и кошмар, что получается. Можно ли сделать так, исходя из моего примера, что бы при клике на боковые табы, текст перемещался в центральный? |
maximamus,
делайте на jquery - и лишних тегов не будет и сам текст летать не будет сделайте блок для текста |
рони,
это я так понял с этого примера
<script>
$(function(){
var div = $("div"), temp = div[1];
div.click(function() {
var left = $(this).css("left");
$(this).stop().animate({left: 200},1500);
$(temp).stop().animate({left: left},1500);
temp = this;
});
});
</script>
|
maximamus,
да его можно доработать - если будет ваш хотябы код html css |
рони,
jQuery(document).ready(function ($) {
// Spoiler
$('body:not(.su-other-shortcodes-loaded)').on('click', '.su-spoiler-title', function (e) {
var $title = $(this),
$spoiler = $title.parent(),
bar = ($('#wpadminbar').length > 0) ? 28 : 0;
// Open/close spoiler
$spoiler.toggleClass('su-spoiler-closed');
// Close other spoilers in accordion
$spoiler.parent('.su-accordion').children('.su-spoiler').not($spoiler).addClass('su-spoiler-closed');
// Scroll in spoiler in accordion
if ($(window).scrollTop() > $title.offset().top) $(window).scrollTop($title.offset().top - $title.height() - bar);
e.preventDefault();
});
$('.su-spoiler-content').removeAttr('style');
// Tabs
$('body:not(.su-other-shortcodes-loaded)').on('click', '.su-tabs-nav span', function (e) {
var $tab = $(this),
data = $tab.data(),
index = $tab.index(),
is_disabled = $tab.hasClass('su-tabs-disabled'),
$tabs = $tab.parent('.su-tabs-nav').children('span'),
$panes = $tab.parents('.su-tabs').find('.su-tabs-pane'),
$gmaps = $panes.eq(index).find('.su-gmap:not(.su-gmap-reloaded)');
// Check tab is not disabled
if (is_disabled) return false;
// Hide all panes, show selected pane
$panes.hide().eq(index).show();
// Disable all tabs, enable selected tab
$tabs.removeClass('su-tabs-current').eq(index).addClass('su-tabs-current');
// Reload gmaps
if ($gmaps.length > 0) $gmaps.each(function () {
var $iframe = $(this).find('iframe:first');
$(this).addClass('su-gmap-reloaded');
$iframe.attr('src', $iframe.attr('src'));
});
// Set height for vertical tabs
tabs_height();
// Open specified url
if (data.url !== '') {
if (data.target === 'self') window.location = data.url;
else if (data.target === 'blank') window.open(data.url);
}
e.preventDefault();
});
// Activate tabs
$('.su-tabs').each(function () {
var active = parseInt($(this).data('active')) - 1;
$(this).children('.su-tabs-nav').children('span').eq(active).trigger('click');
tabs_height();
});
// Activate anchor nav for tabs and spoilers
anchor_nav();
// Lightbox
$('.su-lightbox').each(function () {
$(this).on('click', function (e) {
e.preventDefault();
e.stopPropagation();
if ($(this).parent().attr('id') === 'su-generator-preview') $(this).html(su_other_shortcodes.no_preview);
else {
var type = $(this).data('mfp-type');
$(this).magnificPopup({
type: type,
tClose: su_magnific_popup.close,
tLoading: su_magnific_popup.loading,
gallery: {
tPrev: su_magnific_popup.prev,
tNext: su_magnific_popup.next,
tCounter: su_magnific_popup.counter
},
image: {
tError: su_magnific_popup.error
},
ajax: {
tError: su_magnific_popup.error
}
}).magnificPopup('open');
}
});
});
// Tables
$('.su-table tr:even').addClass('su-even');
// Frame
$('.su-frame-align-center, .su-frame-align-none').each(function () {
var frame_width = $(this).find('img').width();
$(this).css('width', frame_width + 12);
});
// Tooltip
$('.su-tooltip').each(function () {
var $tt = $(this),
$content = $tt.find('.su-tooltip-content'),
is_advanced = $content.length > 0,
data = $tt.data(),
config = {
style: {
classes: data.classes
},
position: {
my: data.my,
at: data.at,
viewport: $(window)
},
content: {
title: '',
text: ''
}
};
if (data.title !== '') config.content.title = data.title;
if (is_advanced) config.content.text = $content;
else config.content.text = $tt.attr('title');
if (data.close === 'yes') config.content.button = true;
if (data.behavior === 'click') {
config.show = 'click';
config.hide = 'click';
$tt.on('click', function (e) {
e.preventDefault();
e.stopPropagation();
});
$(window).on('scroll resize', function () {
$tt.qtip('reposition');
});
} else if (data.behavior === 'always') {
config.show = true;
config.hide = false;
$(window).on('scroll resize', function () {
$tt.qtip('reposition');
});
} else if (data.behavior === 'hover' && is_advanced) {
config.hide = {
fixed: true,
delay: 600
}
}
$tt.qtip(config);
});
// Expand
$('.su-expand').each(function () {
var $this = $(this),
$content = $this.children('.su-expand-content'),
$more = $this.children('.su-expand-link-more'),
$less = $this.children('.su-expand-link-less'),
data = $this.data(),
col = 'su-expand-collapsed';
$more.on('click', function (e) {
$content.css('max-height', 'none');
$this.removeClass(col);
});
$less.on('click', function (e) {
$content.css('max-height', data.height + 'px');
$this.addClass(col);
});
});
function is_transition_supported() {
var thisBody = document.body || document.documentElement,
thisStyle = thisBody.style,
support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined;
return support;
}
// Animations is supported
if (is_transition_supported()) {
// Animate
$('.su-animate').each(function () {
$(this).one('inview', function (e) {
var $this = $(this),
data = $this.data();
window.setTimeout(function () {
$this.addClass(data.animation);
$this.addClass('animated');
$this.css('visibility', 'visible');
}, data.delay * 1000);
});
});
}
// Animations isn't supported
else {
$('.su-animate').css('visibility', 'visible');
}
function tabs_height() {
$('.su-tabs-vertical').each(function () {
var $tabs = $(this),
$nav = $tabs.children('.su-tabs-nav'),
$panes = $tabs.find('.su-tabs-pane'),
height = 0;
$panes.css('min-height', $nav.outerHeight(true));
});
}
function anchor_nav() {
// Check hash
if (document.location.hash === '') return;
// Go through tabs
$('.su-tabs-nav span[data-anchor]').each(function () {
if ('#' + $(this).data('anchor') === document.location.hash) {
var $tabs = $(this).parents('.su-tabs'),
bar = ($('#wpadminbar').length > 0) ? 28 : 0;
// Activate tab
$(this).trigger('click');
// Scroll-in tabs container
window.setTimeout(function () {
$(window).scrollTop($tabs.offset().top - bar - 10);
}, 100);
}
});
// Go through spoilers
$('.su-spoiler[data-anchor]').each(function () {
if ('#' + $(this).data('anchor') === document.location.hash) {
var $spoiler = $(this),
bar = ($('#wpadminbar').length > 0) ? 28 : 0;
// Activate tab
if ($spoiler.hasClass('su-spoiler-closed')) $spoiler.find('.su-spoiler-title:first').trigger('click');
// Scroll-in tabs container
window.setTimeout(function () {
$(window).scrollTop($spoiler.offset().top - bar - 10);
}, 100);
}
});
}
if ('onhashchange' in window) $(window).on('hashchange', anchor_nav);
$('body').addClass('su-other-shortcodes-loaded');
});
вот вроде к этом файле срабатывает функция табов |
maximamus,
непонимаю ваш ход мыслей |
maximamus,
более на эту тему помочь не могу
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
width: 200px;
height: 100px;
position: absolute;
transition: all 0.8s ease-out;
}
.tab1 {
left : 0;
}
.tab2{
left: 200px;
}
.tab3 {
left: 400px;
}
.test{
width: 600px;
position: relative;
background-image: linear-gradient(to right, #FFCE0A 0%,#5252FF 33%,#FFFF66 33%, #FFFF66 66%,#5252FF 66%, #FFCE0A);
}
div.show{
width: 600px;
height: 0px;
top: 100px;
overflow: hidden;
transition: none;
text-align: center;
}
div.tab2:nth-child(1) ~ div:nth-child(4){ transition: all 0.8s ease-out;
height: 100px; background-color: #FFCE0A;
}
div.tab2:nth-child(2) ~ div:nth-child(5){ transition: all 0.8s ease-out;
height: 100px; background-color: #FFFF66;
}
div.tab2:nth-child(3) ~ div:nth-child(6){ transition: all 0.8s ease-out;
height: 100px; background-color: #5252FF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var div = $(".test div:not(.show)"), temp = div[1];
div.click(function() {
var cls = this.className;
this.className = temp.className;
temp.className = cls;
temp = this;
});
});
</script>
</head>
<body>
<div class='test'>
<div class='tab1'>1</div>
<div class='tab2'>2</div>
<div class='tab3'>3</div>
<div class='show'>товар 1</div>
<div class='show'>товар 2</div>
<div class='show'>товар 3</div>
</div>
</body>
</html>
|
рони,
и на этом спасибо) в который раз) |
maximamus,
строка 54 добавлено :not(.show) |
| Часовой пояс GMT +3, время: 22:34. |