Привязка нескольких объектов к ссылке
Здравствуйте!
Никогда такого не было и вот опять! Помогите пожалуйста средствами разметки сделать анимацию.. Есть три слоя (DIV). z-index: -1; z-index: -2; z-index: -3; Первый (-1) и третий (-3) слои связаны по одному краю, второй (-2) слой не подвижен и находится между ними. При этом третий (-3) частично спрятан за экраном.. Фактически нужно лишь "раскрыть" спрятанный слой на его ширину, но вместе с тем оставить его связанным с первым слоем, т.е. предвинуть эти оба слоя вместе.. ---- Честно сказать, сам уже и так и эдак, но.. Поиск? Приводит к разнообразию произвольных решений, каждое из которых работает, но как ни стараюсь их объединить и применить, это никак не приводит к желаемому результату.. |
Цитата:
Цитата:
Цитата:
ЗЫ Вставляй сюда свой спрятанный див и оба связанных как хтмл код. Тогда будет серьезно. |
Спасибо за ответ.
<html><head>
<style>
#x {z-index: -1; position: absolute; background-color: blue; bottom: 15; left:15; width: 200; height: 185;}
#xx {z-index: -2; position: absolute; background-color: red; bottom: 0; left:15; width: 200; height: 35;}
#xxx {z-index: -3; position: absolute; background-color: yellow; bottom: -600; left:15; width: 200; height: 800; border: 1px solid black;}
</style>
</head>
<body>
<div id="x">1</div>
<div id="xx">2</div>
<div id="xxx">3</div>
</body>
</html>
Дело в том, что z-index не работает, если привязать первый и третий слои друг к другу поместив один в другой и двигать их, средний не будет находится между ними, (когда они начнут перемещение равное высоте нижнего слоя, он должен оставаться на месте).. Все, что я нашел по скриптам, работает с отделаьными элементами, а вот с парой не связанных элементов.. Знаю, что делаю что-то не так, но вот что именно, не могу понять.. |
Ты зачем этой занимаешься? Ну если есть повод отпостить что-то на говнокод.ру, то твой говнокод вполне мотивирует. )))
Во-первых боттом - это бред. Дно есть когда оно есть, а когда ничего нет, скорее всего браузер топает от топа. Во-вторых единицы измерения указывай. И последнее, бери вот этот код как базисно вменяемый и учись дальше. Я сшил твои кувадратики, дальше разберешься почему они сшились.
<html><head>
<style>
#x {z-index: 1; position: absolute; background-color: blue;
top: 15;
left:15;
width: 200;
height: 185;
}
#xx {z-index: 2; position: absolute; background-color: red;
top: 200;
left:15;
width: 200;
height: 35;
}
#xxx {z-index: 3; position: absolute; background-color: yellow;
top: 235;
left:15;
width: 200;
height: 200;
}
</style>
</head>
<body>
<div style="position:relative;">
<div id="x">1</div>
<div id="xx">2</div>
<div id="xxx">3</div>
</div>
</body>
</html>
|
Да, про самую мякотку забыл. С какого одеколона у тебя z-index негативный? z-index - всегда относительный, то есть он не глобально херачит как думают некоторые оленеводы, а опирается на предка крепко стоящего на ногах. То есть div z-index=1, задаетъ всем отпрыскам такой же, а если какой-то хочет выше, то ставит себе z-index=1 и получается типа 2.
|
Благодарю вас, милейший, но у меня нет "дна" на странице и все элементы на ней закреплены, а прокрутка отсутствует. Засим, мне вовсе не ясно что вы подразумеваете под "сшил" мои элементы, если они мне нужны именно по отдельности и таки да, как сдвинуть два элемента, в данном случае слоя, так чтобы средний остался на месте?
UPD отметил там момент сдвига, в первом сообщении с html.. |
Я ж тебе и пишу, что нет у страницы "дна", вертикаль практически бесконечна, поскольку прокрутка присутствует, в том числе в твоем калечном хтмле.
Как и большинство оленеводов, ты понимаешь фразу position:absolute абсолютно, типа от левого верхнего пиксела монитора. На самом деле в хтмле нет ничего абсолютного, там вообще все относительное, в том числе и абсолютные элементы, просто они выпадают из потока и опираются на предка в потоке, если даже этот предок - туловище (body), или космос - html, поскольку html - это такой же элемент под названием htmlElement. Дошло? Конечно нет. Так вот, чтобы сделать все вообще абслютным, надо пофиксить хтмль намертво, то есть
html{width:100%;height:100%;position:fixed;overflow:hidden;}
Только так можно избавиться от всех прокруток несмотря на любое содержание. А потом уже корежить это содержание так, чтобы оно вообще оказалось внутри пофиксенного хтля. |
Вот смотри, позиции абсолютные, а поля туловища запросто смещают нули в топ и лефт на указанную ширину поля. Понял теперь, что нет там ничего абсолютного? Все остальное в комментах хтмля.
<html><head>
<style>
html{width:100%;height:100%;position:fixed;overflow:hidden;}
body{margin:20px;}
#x {
position: absolute; background-color: blue;
width: 100; /* меняй размеры */
height: 100;
top: 0; /* меняй координаты */
left: 0;
z-index: 10; /* меняй ось z */
}
/* во всех остальных квадратах и "сшивай" блеать как угодно */
#xx {
position: absolute; background-color: red;
width: 100;
height: 100;
top: 50;
left:50;
z-index: 2;
}
#xxx {
position: absolute; background-color: yellow;
width: 100;
height: 100;
top: 100;
left: 100;
z-index: 3;
}
</style>
</head>
<body>
<div style="position:relative;">
<div id="x">1</div>
<div id="xx">2</div>
<div id="xxx">3</div>
</div>
</body>
</html>
|
Простите меня, но каким, простите еще раз, образом это поможет мне показать спрятаную часть слоя №3, сдвинув его на всю его высоту, одновременно с этим сдвинуть слой №1, оставив его привязанным к краю слоя №3, оставив не подвижным слой №2.?
|
Тебе поможет скрипт, который будет привязывать квадраты как тебе надо и двигать куда хочешь. Напиши такой скрипт, поскольку сценарий кина есть только у тебя.
|
Благодарю вас! Собственно я и попросил помочь со скриптом, а не с позиционированием..
|
То есть никому не известно как оно должно шевелиться, сценарий пиши и все.
<html><head>
<style>
html{width:100%;height:100%;position:fixed;overflow:hidden;}
body{margin:20px;}
#x {
position: absolute; background-color: blue;
width: 100; /* меняй размеры */
height: 100;
top: 0; /* меняй координаты */
left: 0;
z-index: 10; /* меняй ось z */
}
/* во всех остальных квадратах и "сшивай" блеать как угодно */
#xx {
position: absolute; background-color: red;
width: 100;
height: 100;
top: 50;
left:50;
z-index: 2;
}
#xxx {
position: absolute; background-color: yellow;
width: 100;
height: 100;
top: 100;
left: 100;
z-index: 3;
}
</style>
</head>
<body>
<div style="position:relative;">
<div id="x">1</div>
<div id="xx">2</div>
<div id="xxx">3</div>
</div>
<script>
var obj={
x:null,
xx:null,
xxx:null,
};
for(var id in obj)
obj[id]=document.getElementById(id);
var cnt=0,inc=1,step=5,min=1,max=50,left;
t = setInterval(function(){
cnt+=inc;
left=cnt*step;
if(cnt>max || cnt<min) inc=-inc;
obj.x.style.left=left;
obj.xx.style.top=left;
obj.xxx.style.left=left;
obj.xxx.style.top=left;
},100);
</script>
</body>
</html>
|
Цитата:
|
Не очень понятно, что вы подразумеваете под словом сценарий, но я постараюсь объяснить..
У меня есть панель, назовем ее условно "меню" (x) в ней находится несколько привязанных (сшитых с ней, если вам так угодно) объектов. Этот объект, с кучей объектов внутри гипотетически находится над двумя или даже тремя слоями (xx), которые маскируют, скрывают, еще один слой, частично спрятанный за экраном (xxx).. Мне бы хотелось при нажатии на ссылку, которая находится совсем в другом месте страницы, сдвинуть мою панель "меню", одновременно с этим сдвинуть слой который спрятан под ним и за экраном на на его длину, но так, чтобы маскирующие слои.. оставались неподвижными.. И, чесно сказать, я не в ус ногой в скрипты.. Решения, которые я находил в интернете могут работать лишь с одним слоем, нескорые из них на чистом css, нескорые на скрипте, но как я ни старался понять как это работает, увы.. Если возможно написать хоть примерно, чтобы хоть-что-нибудь двигалось, тогда мне возможно будет легче понять.. Я стараюсь понять, поверьте.. |
Цитата:
|
warren buffet, нарисовал примерный сценарий:
<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<style>
#x {z-index: -1; position: absolute; background-color: blue; right: 15; top:15; width: 185; height: 185; text-align: center}
#xx {z-index: -2; position: absolute; background-color: red; right: 0; top:10; width: 50; height: 200;}
#xxx {z-index: -3; position: absolute; background-color: yellow; right: -300; top:15; width: 500; height: 185; border: 1px solid black; text-align: right}
</style>
</head>
<body>
<a href="#">onClick</a>
<div style="position: fixed; top: 25%; left: 25%; width: 400; Height:300; border: 1px solid #000000;">
[my screen]
<div id="x">That DIV must turn left wih (xxx)</div>
<div id="xx"></div>
<div id="xxx">That DIV must turn left onClick</div>
</div>
</body></html>
рони, при помощи transition и много решений со скриптами.. |
donkey,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
donkey,
Если я правильно понял, то (без анимации) должно получиться что-то вроде
<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<style>
#x {z-index: -1; position: absolute; background-color: blue; right: 15; top:15; width: 185; height: 185; text-align: center}
#xx {z-index: -2; position: absolute; background-color: red; right: 0; top:10; width: 50; height: 200;}
#xxx {z-index: -3; position: absolute; background-color: yellow; right: -300; top:15; width: 500; height: 185; border: 1px solid black; text-align: right}
</style>
</head>
<body>
<div style="position: fixed; top: 25%; left: 25%; width: 400; Height:300; border: 1px solid #000000;">
[my screen]
<div id="x">That DIV must turn left wih (xxx)</div>
<div id="xx"></div>
<div id="xxx">That DIV must turn left onClick</div>
</div>
<a href="#">onClick</a>
<script>
var a = document.querySelector("a"),
x = document.getElementById("x"),
xxx = document.getElementById("xxx");
a.onclick = function() {
x.style.left = '0px';
xxx.style.left = getComputedStyle(x, "").getPropertyValue('width');
}
</script>
</body>
</html>
|
<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<style>
#x {z-index: -1; position: absolute; background-color: blue; right: 15; top:15; width: 185; height: 185; text-align: center}
#xx {z-index: -2; position: absolute; background-color: red; right: 0; top:10; width: 50; height: 200;}
#xxx {z-index: -3; position: absolute; background-color: yellow; right: -400; top:15; width: 500; height: 185; border: 1px solid black; text-align: center}
</style>
</head>
<body>
<div style="position: fixed; top: 25%; left: 25%; width: 400; Height:300; border: 1px solid #000000;">
[my screen]
<div id="x">That DIV must turn left wih (xxx)</div>
<div id="xx"></div>
<div id="xxx">That DIV must turn left onClick</div>
</div>
<a href="#">onClick</a>
<script>
var a = document.querySelector("a"),
x = document.getElementById("x"),
xxx = document.getElementById("xxx");
a.onclick = function() {
var left = parseInt(getComputedStyle(x, "").getPropertyValue('left'));
if (left > 0) {
t = setInterval(function() {
--left;
x.style.left = left + "px";
if (left == 0) {
clearInterval(t);
var leftXXX = parseInt(getComputedStyle(xxx, "").getPropertyValue('left')),
leftmin = parseInt(getComputedStyle(x, "").getPropertyValue('width'));
tt = setInterval(function() {
--leftXXX;
xxx.style.left = leftXXX + "px";
if (leftXXX == leftmin) clearInterval(tt);
}, 10);
}
}, 10);
}
}
</script>
</body>
</html>
|
Dilettante_Pro, круто! Гранд мерси! Вы почти..
Понимаете, я "ваяю" хомяка, не совсем обычного конечно.. И, если с логикой у меня вроде ничего так, то с функциями и алгоритмами на данный момент полный алес, увы. Но.. Я разгадал некоторые функции вашего скрипта и, в целом, он вполне подходит для моих целей. Еще раз большое спасибо вам! Единственное, если возможно сделать, чтобы эти два слоя двигались одновременно? Или.. Придумаю что-нибудь.. Спасибо вам! Огромное! (: П.С. Ссылку на ваш профиль, если вы не против конечно, вставлю в мои "титры", которые, собственно, и находятся в этом слое.. |
donkey,
двигаются одновременно (по крайней мере, начинают)
<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<style>
#x {z-index: -1; position: absolute; background-color: blue; right: 15; top:15; width: 185; height: 185; text-align: center}
#xx {z-index: -2; position: absolute; background-color: red; right: 0; top:10; width: 50; height: 200;}
#xxx {z-index: -3; position: absolute; background-color: yellow; right: -400; top:15; width: 500; height: 185; border: 1px solid black; text-align: center}
</style>
</head>
<body>
<div style="position: fixed; top: 25%; left: 25%; width: 400; Height:300; border: 1px solid #000000;">
[my screen]
<div id="x">That DIV must turn left wih (xxx)</div>
<div id="xx"></div>
<div id="xxx">That DIV must turn left onClick</div>
</div>
<a href="#">onClick</a>
<script>
var a = document.querySelector("a"),
x = document.getElementById("x"),
xxx = document.getElementById("xxx");
a.onclick = function() {
var left = parseInt(getComputedStyle(x, "").getPropertyValue('left'));
if (left > 0) {
t = setInterval(function() {
--left;
x.style.left = left + "px";
if (left == 0) clearInterval(t);
}, 10);
var leftXXX = parseInt(getComputedStyle(xxx, "").getPropertyValue('left')),
leftmin = parseInt(getComputedStyle(x, "").getPropertyValue('width'));
tt = setInterval(function() {
--leftXXX;
xxx.style.left = leftXXX + "px";
if (leftXXX == leftmin) clearInterval(tt);
}, 10);
}
}
</script>
</body>
</html>
|
donkey,
Первый тянет за собой второго
<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<style>
#x {z-index: -1; position: absolute; background-color: blue; right: 15; top:15; width: 185; height: 185; text-align: center}
#xx {z-index: -2; position: absolute; background-color: red; right: 0; top:10; width: 50; height: 200;}
#xxx {z-index: -3; position: absolute; background-color: yellow; right: -400; top:15; width: 500; height: 185; border: 1px solid black; text-align: center}
</style>
</head>
<body>
<div style="position: fixed; top: 25%; left: 25%; width: 400; Height:300; border: 1px solid #000000;">
[my screen]
<div id="x">That DIV must turn left wih (xxx)</div>
<div id="xx"></div>
<div id="xxx">That DIV must turn left onClick</div>
</div>
<a href="#">onClick</a>
<script>
var a = document.querySelector("a"),
x = document.getElementById("x"),
xxx = document.getElementById("xxx");
a.onclick = function () {
var left = parseInt(getComputedStyle(x, "").getPropertyValue('left')),
widthX = parseInt(getComputedStyle(x, "").getPropertyValue('width')),
leftXXX = parseInt(getComputedStyle(xxx, "").getPropertyValue('left'))
if (left > 0) {
t = setInterval(function () {
--left;
x.style.left = left + "px";
leftmin = left + widthX;
if (leftXXX > leftmin) {
xxx.style.left = leftmin + "px";
};
if (left == 0) clearInterval(t);
}, 10);
}
}
</script>
</body>
</html>
|
donkey, сценарий - это screenplay, то есть то, что должно играть на экране. Сценарий это: техническое задание и технические условия, это чертеэ строительства дома, это технология выпечки хлеба и рецепт приготовления котлет, это алгоритм и тактировка, это что угодно, что рассказывает что надо взять, когда и сколько, куда положить, прибить поставить, пришить и что должно получиться.
У тебя свое заводское понимание устройства веб-сайтов, из которого ты вылезать не хочешь. Как ты придумал - так не делают. |
Нет никаких "слоев" на веб-странице, это дебильные кодеры 90-х так назвали arbitrary division - который div, когда им их показали вместо table. Веб - это не фотошоп и не люстра.
Твой сценарий пишется так: как сдвинуть два дива одновременно с сохранением относительного положения их друг к другу. Вот так, коротко и ясно. Третий див вообще не колебет, его двигать не надо, значит его нету в сценарии, статист. method = div1.left = div2.left+div2.width; |
Dilettante_Pro, очень интересно.. По крайней мере теперь, после этих нескольких примеров, становится куда как более ясно как работает скрипт. Вы очень выручили. Спасибо вам!
warren buffet, вы прямо как генерал Кастер из фильма "Маленький Большой Человек", - совершенно точно определили мою профессию по внешнему виду! Крайне рекомендую вам пересмотреть эту шикарную киноленту.. Дабы.. Случайно не повторить весьма печальную участь.. Генерала.. Джорджа Армстронга Кастера! (: |
Иди сшивай слои умнег. Белыми нитками.
|
Здравствуйте!
Еще раз большое спасибо, но мне снова нужна помощь с этим скриптом. Вот с чем я столкнулся: Лиса слишком медленно открывает скрытый слой, даже несмотря на интервал времени установленный в скрипте.. Возможно, что просто скрытый слой слишком "перегружен", но в Хроме все нормально, даже слишком хорошо, только вот при повторном нажатии на ссылку в обеих браузерах снова запускается функция и оба слоя "уходят" с экрана. Почитал по поводу запрета повторного нажатия и, по ходу, этот вопрос не решается без подключения внешних библиотек.. Возможно ли избежать этого и просто привязать эти два слоя к мыши, без ссылки, и просто "вытягивать" их оба, но не более чем на заранее заданную ширину, как штору? Буду очень признателен за вашу помощь! |
Цитата:
|
рони, поверьте, менял интервал времени, но увы.. Более того, опытным путем установил, что при замене оnClick на onFocus становится ненамного легче в Хроме, но все равно слой рано или поздно "уезжает" со страницы..
|
donkey,
если еще актуально, посмотрите такой вариант:
<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#x {z-index: -1; position: absolute; background-color: blue; right: 15; top:15; width: 185; height: 185; text-align: center}
#xx {z-index: -2; position: absolute; background-color: red; right: 0; top:10; width: 50; height: 200;}
#xxx {z-index: -3; position: absolute; background-color: yellow; right: -400; top:15; width: 500; height: 185; border: 1px solid black; text-align: center}
</style>
</head>
<body>
<div id="screen" style="position: fixed; top: 25%; left: 25%; width: 400; Height:300; border: 1px solid #000000;">
[my screen]
<div id="x">That DIV must turn left wih (xxx)</div>
<div id="xx"></div>
<div id="xxx">That DIV must turn left onClick</div>
</div>
<a href="#">onClick</a>
<script>
var a = document.querySelector("a"),
x = document.getElementById("x"),
xxx = document.getElementById("xxx");
var screen = document.getElementById("screen");
a.onclick = function () {
var leftX = parseInt(getComputedStyle(x, "").getPropertyValue('left')),
widthX = parseInt(getComputedStyle(x, "").getPropertyValue('width')),
leftXXX = parseInt(getComputedStyle(xxx, "").getPropertyValue('left')),
widthXXX = parseInt(getComputedStyle(xxx, "").getPropertyValue('width'));
if (isNaN(leftX)){
leftX = parseInt(getComputedStyle(screen, "").getPropertyValue('width'))-
parseInt(getComputedStyle(x, "").getPropertyValue('right'))-widthX;
}
if (isNaN(leftXXX)){
leftXXX = parseInt(getComputedStyle(screen, "").getPropertyValue('width'))-
parseInt(getComputedStyle(xxx, "").getPropertyValue('right'))-widthXXX;
}
$("#x").css("left", leftX).animate({left: "0px"}, 1500);
$("#xxx").css("left", leftXXX).animate({left: widthX+"px"}, 1500);
}
</script>
</body>
</html>
|
Manyasha, гран мерси!
Тут, в примере, все в полном порядке, но.. У меня на странице не работает.. Проверил несколько раз все значения, не забыл про "screen" и все равно не работает.. Все равно, огромное спасибо вам! |
| Часовой пояс GMT +3, время: 03:31. |