laimas,
Нет) К айди ничего не привязывала, а вот после скрытия меню, сообщения остаются на месте, не центрируясь по центу, это легко исправить?(( |
Ну это надо смотреть полностью верстку как у вас организованы колонки, стили. Но код у вас такой, что... А у меня нет столько времени свободного, чтобы влазить в такие дебри по уши ) Если есть возможность, то это лучше сделать средствами CSS. Если нет, то конечно можно управлять и посредством JS во время смены размера панели.
Вот зачем эти вставки JS которые у вас на странице? Их ведь можно и нужно вынести в подключаемый файл. И вообще, лучше собрать кучу мелких JS-файлов один, таким образом сократив количество запросов к серверу. Такие вставки, это соль на рану и для поисковых роботов, уж если есть необходимость вставить такие скрипты, то располагать их надо по возможности после контента. То же самое и подключение JS-файлов. А у вас такого "мусора" много. Я уже говорил, что не понятно по каким соображениям у вас прописано в тегах "backface-visibility: hidden; transition: -moz-transform 0.5s ease 0s, opacity 0.5s ease 0s;". Почему не в CSS файле и почему только для Mozilla? Много у вас чего скажем так непонятного и лишнего. |
Добавьте эту строку кода:
$('#main').stop().animate({marginLeft : 420 - pH * pD}, 400)
после строки:
.animate({marginLeft : -pW * pD}, 200); //смещение элементов панели
Будет центрироваться контент при изменении панели. |
laimas,
Спасибо, спасибо, спасибо))) Вы прям выручили меня, спасли:)) |
Вы не правильно сделали, не корректно работает.
У вашей модели есть странности, что-то в относительных единицах, что-то в абсолютных, для кого-то наследование от родителя, в то же время кому-то жестко прописывается свое индивидуально. Сомнительно чтобы эта модель откликалась на изменения разрешений экрана. А коли такое, и вы что-то там меняете постоянно, то эти величины в коде должны быть не прописаны жестко, а получаться как параметры объектов. Иначе придется и там, и там править. То есть, величина 100, должна получаться именно так как я писал ранее, а не быть прописанной как 100 в JS-сценарии. Но как говорилось выше, у вас путаница с единицами, а по идее у блока logo , должно быть вместо: margin: 1.25em 1.25em 1.25em 1.25em; (кстати, это нужно записывать так - margin: 1.25em так как все четыре величины равны) должно быть: margin: 30px; Иначе при расчетах с относительными единицами возникают погрешности. Код блока logo сделать таким:
<div class="logo">
<div id="btn-swap"></div>
</div>
удалив из стилей:
.logo .image {
position: absolute;
left: 0;
top: 0;
cursor: pointer
}
и добавить:
#btn-swap {
width: 40px;
height: 76px;
background: url(images/avatar.png);
cursor: pointer;
}
#swap {
width: inherit;
}
В JS коде добавляем еще одно значение, которое будет использоваться в анимации, и теперь будет так:
var pW, //ширина панели меню
pH, //ширина свернутой панели
pD, //режим панели меню
mW; //ширина блока main
А код управления панелью и блоком main таким:
//управление панелью меню
var pO = $('#btn-swap').click(function() {
pD ^= 1; //изменить направление
if(!pW) { //получить параметры
pW = pO.width();
pH = pW - ($(this).width() + $(this.parentNode).offset().left * 2);
mW = $('#main').offset().left
}
pO.stop()
.animate({width : pW - pH * pD}, 400) //сворачиваем/разварачиваем панель
.find('#swap')
.stop()
.animate({marginLeft : -pW * pD}, 300); //смещение элементов панели
//центрирование блока main
$('#main').stop().animate({marginLeft : mW - pH * pD}, 400)
}).closest("#header"); //получаем панель меню
Теперь изменяя параметры блоков через их стили, данный код можно будет не править. Теперь в коде непосредственно прописаны только скорости анимации объектов, причем скорости анимации панели и блока main равны. Ширина блока swap задается в css и наследуется от родителя, поэтому ее определение теперь удалено из JS сценария. Но как это работает? Расчетное значение ширины панели (pW) получается 375рх. Ширина свернутой панели ($(this).width() + $(this.parentNode).offset().left * 2) будет равна 100px, а значит величина (pH) на которую изменяется ее ширина равна 375рх - 100рх = 275рх. Отступ слева блока main прописан в CSS и равен 420рх, эту величину мы получили и сохранили в переменной mW. При изменении ширины панели на 275рх, на эту же величину должен изменяться и отступ блока main, то есть 420 - 275 = 145рх. Управление панелью и блоком main производится за счет изменения их свойств посредством переменной pD, определяющей режим работы. При каждом щелчке по логотипу у этой переменной устанавливается/сбрасывается ее младший бит операцией XOR, и начиная от первого щелчка будет - 1, 0, 1, 0, 1 и т.д. Следовательно анимируются свойства объектов (от текущего значения до нового): ширина панели а) свернуть: 375 - 275 * 1 = 100 б) развернуть: 375 - 275 * 0 = 375 смещение элементов панели а) за пределы экрана: -375 * 1 = -375 б) вернуть на место: -375 * 0 = 0 смещение блока main а) при свернутой панели: 420 - 275 * 1 = 145 б) при развернутой панели: 420 - 275 * 0 = 420 А теперь посчитайте что будет при значении 255, которое вы указали и не понятно откуда взятое, вместо мной прописанного 420 и реально существующем. Вот отсюда так и работает теперь у вас. PS. Комментарии в коде я пишу для вас, клиенту они не нужны, да и отлаженные сценарии лучше сжимать, удаляя из них лишнее. Тоже самое нужно делать и с файлами стилей. Не определяйте идентификаторы элементам, если в этом нет необходимости, и используя затем идентификатор как селектор в файле CSS. Необходимо помнить, что поиск элементов по селектору имени класса означает, что JS вынужден обойти все объекты на странице в поиске таковых. А если нужно получить, например, только элементы DIV с определенным классом, то перетряхивание остальных элементов, это лишняя трата времени и ресурсов. В этом случае правильнее писать не $('.class_name'), а $('div.class_name'). |
laimas,
Поняла, написала, только все скроллы и попапы отключились( Да и кнопка перестала работать, в чем беда?(( |
Значит что-то не так сделали. Если раскрыть ваш код и начать его анализировать, то встречается много ошибок случайных. Вот с самого начала:
1) <body class=""><div id="skel-layers-wrapper" style="position: relative; left: 0px; right: 0px; top: 0px; backface-visibility: hidden; transition: -moz-transform 0.5s ease 0s, opacity 0.5s ease 0s;"> e <title>ФИЛИН</title> Что это за е такое и что оно там делает. 2) Что у вас в стилях:
#btn-swap {
background: url("images/avatar.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
cursor: pointer;
height: 76px;
width: 40px;
}
#swap {
width: inherit;
}
#logo h1 {
color: #fff;
font-size: 1em;
font-weight: 600;
line-height: 1em;
position: relative;
}
#logo p {
color: rgba(255, 255, 255, 0.5);
display: block;
font-size: 0.6em;
line-height: 1.25em;
margin: 0.5em 0 0;
position: relative;
}
#logo .image {
left: 0;
position: absolute;
top: 0;
}
А код логотипа при этом:
<div class="logo">
<div id="btn-swap"></div>
</div>
То есть блок имеет класс logo, а в стилях он у вас по селектору ID прописывается. А должно быть так:
/* logo */
.logo {
position: relative;
margin: 30px;
min-height: 76px;
cursor: default;
}
/*ниже следующих элементов в блоке logo нет, и если их не будет, то это удалить*/
.logo h1 {
position: relative;
color: #fff;
font-weight: 600;
font-size: 1em;
line-height: 1em;
}
.logo p {
position: relative;
display: block;
font-size: 0.6em;
color: rgba(255,255,255,0.5);
line-height: 1.25em;
margin: 0.5em 0 0 0;
}
/*конец описания несуществующих элементов в блоке logo*/
#btn-swap {
width: 40px;
height: 76px;
background: url(images/avatar.png);
cursor: pointer;
}
#swap {
width: inherit;
}
/*далее описание #nav*/
Нижеследующие, это элементы H1 и P, которых нет в блоке, как и нет теперь IMG, оно теперь фоном у DIV выполняющей роль кнопки 3) Скрипт имеет ошибку - не закрыта конструкция. После стоки кода }).closest("#header"); //получаем панель меню должно быть прописано }) Изменяя что-то, проверяйте себя. |
laimas,
Я все изменила, все проверила, но сломался походу скрипт(( |
Вот как должно быть записано объявление переменных:
var pW, //ширина панели меню
pH, //ширина свернутой панели
pD, //режим панели меню
mW; //ширина блока main
У вас после pD не запятая, а точка с запятой. |
laimas,
Я знаю, что вам уже надоела, но сделала все как вы написали, еще сама все перепроверила, покопалась в скриптах, почитала в интернете... Все посмотрела...( Теперь текст не исчезает, беда какая-то с этим меню(( |
Наверное у вас куча версий, и вы в зависимости от настроения берете какую либо из них, угадал? :)
Куда исчез из кода панели div id=swap, в который должны помещаться все элементы панели скрывающиеся при ее размере? |
laimas,
Не угадали, я просто сама стили меняю, но скрипт ваш( |
Мой, но ведь он написан под управление элементом с ID равным wrap, в который должен быть помещен именем div "link_group" содержащим элементы меню.
И этот DIV у вас был, затем вы исправили ошибку, и заодно удалили DIV wrap по непонятной причине. Вот ваши элементы меню и остаются на месте при сворачивании панели. Я вам подробно описал как работает скрипт, вникайте, сложно в нем ничего нет. И что-то удаляя из html-кода меняйте тогда и JS-скрипт. Можно обойтись и без DIV wrap, но сдвигать нужно в этом случае div "link_group", вот как показано ниже. Поймете какую строку в коде нужно заменить этой?
pO.stop()
.animate({width : pW - pH * pD}, 400) //сворачиваем/разварачиваем панель
.find('.top > div')
.slice(1)
.stop()
.animate({marginLeft : -pW * pD}, 300); //смещение элементов панели
При этом из файла стилей нужно удалить:
#swap {
width: inherit;
}
и вместо этого добавить:
.top > div + div {
width: inherit;
}
Это будет работать под следующей html-структурой:
<div class="top">
<div class="logo">
кнопка доготип
</div>
<div class="link_group">
элементы мею
</div>
<div>
может еще что-то
</div>
</div>
Можно и так, только теперь управление будет не одним блоком, а несколькими. Но вы уж определитесь окончательно с html-структурой панели меню и стилями ее, иначе конца и края не будет. ;) |
laimas,
Цитата:
|
Так вроде бы и "договорились" давно, ан нет :)
|
| Часовой пояс GMT +3, время: 22:39. |