Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 29.03.2012, 10:47
Профессор
Отправить личное сообщение для tadjik1 Посмотреть профиль Найти все сообщения от tadjik1
 
Регистрация: 07.06.2011
Сообщений: 315

я если честно, очень сильно затупил))

имел ввиду background:white;

спасибо вам еще раз!


----
не всё так просто. надо поиграться с z-index еще. в общем, выложу попозже, как закончу опыты)

Последний раз редактировалось tadjik1, 29.03.2012 в 11:00.
Ответить с цитированием
  #12 (permalink)  
Старый 29.03.2012, 19:28
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

Сообщение от tadjik1 Посмотреть сообщение
я если честно, очень сильно затупил))

имел ввиду background:white;

спасибо вам еще раз!


----
не всё так просто. надо поиграться с z-index еще. в общем, выложу попозже, как закончу опыты)
ну, естественно, нужно четко задать расположение слоёв по всем трём осям
__________________
С моих слов записано верно.
Ответить с цитированием
  #13 (permalink)  
Старый 30.03.2012, 10:02
Профессор
Отправить личное сообщение для tadjik1 Посмотреть профиль Найти все сообщения от tadjik1
 
Регистрация: 07.06.2011
Сообщений: 315

в общем, запутался я окончательно. еще раз задача, есть 4 дива, в них разное кол-во информации (они разные по высоте могут быть). нужно, чтобы они красиво разъезжались при клике.

html:
<div class="firstCat cat current" data-id="1">
</div>
<div class="secondCat cat" style="margin-left:700px;" data-id="2">	
</div>
<div class="thirdCat cat" style="margin-left:800px;" data-id="3">
</div>
<div class="fourthCat cat" style="margin-left:900px;" data-id="4">
</div>


css:
.cat {
	width:720px;
	position: absolute;
	background:white;
	color: gray;
	cursor:pointer;
}
.cat.current {
  color:black;
  cursor:auto;
}
body {
  overflow:auto; 
  overflow-x: hidden;
}


ну и на jquery у меня при клике на элемент меняются марджины других элементов, визуально они «разъезжаются». тольок возник целый ряд проблем, с моими слабыми знаниями вёрстки они просто нерешаемые)

1. слои уехали за страницу (появился горизонтальный скролл, overflow:hidden; не подходит, т.к. страница всё равно растягивается, только скролл пропадает).
2. если один блок больше другого по высоте, его текст видно под ним, см. скриншот.
3. выглядит отвратительно, не представляю что сделать, чтобы можно было нормально воспринимать информацию.
4. т.к. ширина задана абсолютно, проблемы на другом мониторе. как лучше задать ширину и отступ?

скриншот:


Последний раз редактировалось tadjik1, 30.03.2012 в 10:10.
Ответить с цитированием
  #14 (permalink)  
Старый 30.03.2012, 10:14
Профессор
Отправить личное сообщение для tadjik1 Посмотреть профиль Найти все сообщения от tadjik1
 
Регистрация: 07.06.2011
Сообщений: 315

чего-нибудь понятно из скриншота?)
Ответить с цитированием
  #15 (permalink)  
Старый 30.03.2012, 12:02
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

что-то ты намудрил

высота у слайдов должна быть одинаковая, это никак не обойти.

вот, накидал на скорую руку, возможны косяки, но принцип тот же

css:
<style type="text/css">
#acc{
display: block;
position: relative;
width: 960px;
height: 100%;
min-height: 800px !important;
margin: 0 auto;
overflow: hidden;
}
.slide{
display: block;
position: absolute;
width: 960px;
height: 800px; 
float: left;
}
.miniText{
position: relative;
height: auto;
width: 220px;
}
.maxiText{
position: relative;
height: auto;
width: 100%;
display: none;
}
</style>


jquery:
var thisIndex,
	thisMargin;
$(document).ready(function(){
	$("body").click(function(){
	
	});
	
	$(".slide").data("open", false);
	
	$(".slide").click(function(){
	thisIndex = $(this).index();
	if (!($(this).data("open"))){
		$(this).data("thisMargin", $(this).css("marginLeft"));
		$(this).find(".miniText").hide();
		$(this).find(".maxiText").show("slow");
		$(this).animate({"marginLeft": 0}, 1000);
		$(".slide").data("open", true);
		
		$(".slide").each(function(){
   			 var slide = $(this);
			 slide.data("defaultML", slide.css("marginLeft"));
			 if (slide.index() < thisIndex ){
			  slide.animate({"marginLeft": 0}, 1000);
			 }
			 if (slide.index() > thisIndex ){
			  slide.animate({"marginLeft": 960}, 1000);
			 }
		});
	
	}
	else {
		$(this).find(".miniText").show("slow");
		$(this).find(".maxiText").hide();
		$(this).animate({"marginLeft": $(this).data("thisMargin")}, 1000);
		$(".slide").data("open", false);
		
		$(".slide").each(function(){
   			 var slide = $(this);
			 if (slide.index() < thisIndex ){
			  slide.animate({"marginLeft":  slide.data("defaultML") }, 1000);
			 }
			 if (slide.index() > thisIndex ){
			  slide.animate({"marginLeft":  slide.data("defaultML") }, 1000);
			 }
		});
			
	}
	
	});
});


<div id="acc">
	<div class="slide" style="background-color: red; ">
		<p class="miniText"> Текст закрытого блока 1</p>
		<p class="maxiText"> Текст открытого блока 1<br>Текст открытого блока 1<br>Текст открытого блока 1<br>Текст открытого блока 1</p>
	</div>
	<div class="slide" style="background-color: green; margin-left: 220px;">
		<p class="miniText"> Текст закрытого блока 2 </p>
		<p class="maxiText"> Текст открытого блока 2<br>Текст открытого блока 2<br>Текст открытого блока 2<br>Текст открытого блока 2</p>
	</div>
	<div class="slide" style="background-color: blue; margin-left: 440px;">
		<p class="miniText"> Текст закрытого блока 3 </p>
		<p class="maxiText"> Текст открытого блока 3<br>Текст открытого блока 3<br>Текст открытого блока 3<br>Текст открытого блока 3</p>
	</div>
	<div class="slide" style="background-color: orange; margin-left: 680px;">
		<p class="miniText"> Текст закрытого блока 4 </p>
		<p class="maxiText"> Текст открытого блока 4<br>Текст открытого блока 4<br>Текст открытого блока 4<br>Текст открытого блока 4</p>
	</div>
</div>
__________________
С моих слов записано верно.
Ответить с цитированием
  #16 (permalink)  
Старый 30.03.2012, 15:03
Профессор
Отправить личное сообщение для tadjik1 Посмотреть профиль Найти все сообщения от tadjik1
 
Регистрация: 07.06.2011
Сообщений: 315

сделал чуть по-другому, но также))

теперь другой вопрос, самый проблемный для меня: как сделать ширину и отступ динамическими?
Ответить с цитированием
  #17 (permalink)  
Старый 30.03.2012, 15:13
Профессор
Отправить личное сообщение для tadjik1 Посмотреть профиль Найти все сообщения от tadjik1
 
Регистрация: 07.06.2011
Сообщений: 315

нашел вот такую статью, но таким способ в моём случае крайне неудобно делать, задавать абсолютные значения отступов через left и right.
Ответить с цитированием
  #18 (permalink)  
Старый 30.03.2012, 15:22
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

Сообщение от tadjik1 Посмотреть сообщение
сделал чуть по-другому, но также))

теперь другой вопрос, самый проблемный для меня: как сделать ширину и отступ динамическими?
а зачем изменять ширину? пусть ширина слайдов всегда 100%, это ведь не мешает, а отступы можно сделать так:

var a = $(this).index()-2; // получаем порядковый номер предыдущего слайда (индексы начинаются с 1, а eq —с нуля, поэтому минус 2) 
var preSlide = $('.slide').eq(a);
var b = preSlide.css("marginLeft")+preSlide.find('.miniText').width(); // получаем отступ текущего слайда, складывая отступ предыдущего + ширину блока с текстом 

$(this).css("marginLeft", b)
__________________
С моих слов записано верно.

Последний раз редактировалось T-sh, 30.03.2012 в 15:25.
Ответить с цитированием
  #19 (permalink)  
Старый 30.03.2012, 15:26
Аватар для T-sh
Профессор
Отправить личное сообщение для T-sh Посмотреть профиль Найти все сообщения от T-sh
 
Регистрация: 04.12.2009
Сообщений: 579

только проверку надо ещё добавить:

если b < 0, то b = 0;
__________________
С моих слов записано верно.

Последний раз редактировалось T-sh, 30.03.2012 в 15:39.
Ответить с цитированием
  #20 (permalink)  
Старый 02.04.2012, 16:36
Профессор
Отправить личное сообщение для tadjik1 Посмотреть профиль Найти все сообщения от tadjik1
 
Регистрация: 07.06.2011
Сообщений: 315

T-sh, а как сделать отступы одинаковокрасивыми и на большом экране, и на ноутбуке?
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
родитель выдвижной панели cyklop77 Элементы интерфейса 0 22.01.2012 07:11
Программно скрыть панели firefox Anatoly Firefox/Mozilla 2 16.08.2011 12:05
Уже существующий грид отобразить в уже существующей панели WalterScott ExtJS 7 07.07.2010 10:17
Сокрытие панели адреса Arkatic Элементы интерфейса 6 16.07.2009 17:38
проблема со слайд шоу, помогите пожалуйста. Ketch_Ozzy Общие вопросы Javascript 5 15.05.2009 23:34