Помогите сделать макет

[Q4Dizzy]

вот вам галерея готовая  просто создайте index.html и вставьте туда этот http://codepen.io/an...Gpv?editors=110

 

 

А теперь откройте это на экране HD. Картинка тянется по ширине, что это уже не картинка, а краски пьяного Пикассо.

[Igor Schnaider]

Там не работает вертикальное центрирование широкой картинки.

 

Да, я посмотрел ;-)

 

Вообще, есть и другие способы центрировать: flexbox, top: 50% и translateY(-50%).

 

В том примере можно контейнеру добавить white-space: nowrap, чтобы полноширинная картинка не съезжала.

Или обнулить размер шрифта (тоже на контейнере).

Правда, если внутри у вас там есть  текст, то для внутренней обертки нужно будет вернуть значения как было.

Edited December 5, 2015 by Igor Schnaider

[atlanta]

 

вот вам галерея готовая  просто создайте index.html и вставьте туда этот http://codepen.io/an...Gpv?editors=110

 

 

А теперь откройте это на экране HD. Картинка тянется по ширине, что это уже не картинка, а краски пьяного Пикассо.

 

 

у меня 1280 px - и всё тип топ - полистайте - если есть косяк - я его исправлю

[Q4Dizzy]

маштабируйте, тестируйте..

[igmar]

Сделано круто, но в этой галерее картинки режет по высоте.

Пусть у меня будет попроще, но чтобы картинки не обрезало.

[atlanta]

маштабируйте, тестируйте..

http://codepen.io/anon/pen/MKWGpv  так вроде - но я поработаю и уберу основную массу с html

[igmar]

У меня тоже картинки растянуты по ширине. Иногда они нормальные - не знаю с чем связано.

 

Вот посмотрите, она же растянута.

 

http://igmar.hop.ru/screen1.jpg

Edited December 5, 2015 by igmar

[igmar]

Картинки допиливать я решил потом, т.к. уже и с этим можно и нужно двигаться к следующим этапам.

 

Подскажите пожалуйста что-нибудь, чтобы подступиться к новой задаче на этом каркасе:

 

http://codepen.io/anon/pen/Bjaqpw

 

Если щелкать по стрелкам вправо-влево, то они принимают клики. Как по клику автоматически сделать изменения в index.html, чтобы изменить стиль div class="contpic" и сделать ему бэкграундом другой url. Например заменить картинку bigheight.jpg на bigwidth.jpg - чтобы было понятно как это работает. На самом деле непринципиально, что именно там изменить. Как вообще что-то изменить там по клику? Мне сказали на другом сайте, что есть технология Ajax, которая умеет менять часть сайта.

Кто-нибудь может объяснить как ее сюда привинтить? Или каким-то иным путем изменить index.html?

Я могу вставить в html код на php. Он будет при загрузке страницы формировать какие-то строки, например, задавать тот же бэкграунд. Но как сделать, чтобы он по клику запустился, сформировал новые строки и перезагрузил эту часть страницы?

[igmar]

Пусть будет кирпичик

 

http://codepen.io/anon/pen/jWOdNY- изменить фон

[igmar]

Изменение фона картинки по стрелкам сделал.

 

Теперь нужно научиться получать извне список картинок (url)  и сделать, чтобы они сменяли друг друга при щелкании по стрелкам в соответствии со списком.

 

Кто знает и может подсказать как это сделать?

[andrey7287]

http://codepen.io/Andrey7287/pen/jWOJYN

[igmar]

andrey7287,

спасибо. Позже разберусь. Сначала придется читать js чтобы понять.

 

Недолепленный кирпич

http://codepen.io/anon/pen/ZQYYjr- вертикальное меню

 

http://codepen.io/anon/pen/QywdoW

 

Заступорился. Хочу сделать, чтобы при щелчке по закрытой папке она раскрылась, а если по раскрытой - то закрылась. Понятно, что низлежащим подменю надо сделать display: none или наоборот display:block. Но как их определить, эти низлежащие подменю?

Edited December 7, 2015 by igmar

[andrey7287]

<ul>

<li></li>

<li></li>

<li></li>

<li>

<ul>

<li></li>

<li></li>

</ul>

</li>

</ul>

[igmar]

Запарившись в доску пились свое меню,

скажите кто-нибудь, пожалуйста:

 

насколько javascript умеет читать стили прописанные в css?

 

http://codepen.io/anon/pen/RrPNPe

 очередной недолепленный кирпич

 

Если я в блоке css задаю ul {display: block;}

а потом читаю его из функции (конкретно, по id, чтобы без вопросов)

 

alert(document.getElementById("6").style.display);

то результата нет (неопределен), хотя в css он задан

 

Но если в функции сначала присвоить его 

 

document.getElementById("6").style.display="block";

то все отлично, значение потом читается. И значение реально меняется - в окошке все отображается.

 

В чем проблема? Что не так и почему значение не читается без его предварительного задания в функции?

Edited December 9, 2015 by igmar

[Great Rash]

В чем проблема? Что не так и почему значение не читается без его предварительного задания в функции?

1) Потому что таким образом вы меняете не CSS-файл, а атрибут style. Вполне логично, что изначально он у вас пустой (вы ж туда ничего не вписали).

2) id не может начинаться с цифры, странно, что у вас скрипт вообще работает

[igmar]

Ладно, из этого я делаю вывод, что так и было задумано.

Хотя я этого не понимаю. Страница (html) отображается уже со стилями css - значит все атрибуты уже присвоены всем элементам. Почему же javascript не может прочитать их? Ведь они уже на странице, т.е. в памяти. Скрипт же читает не файл css, а обращается к значениям свойств элементов которые уже загружены в память?

[Great Rash]

document.getElementById(id).style; // получить/установить содержимое атрибута style

getComputedStyle(document.getElementById(id)); // получить значение стилей, присвоенных через CSS (только получить, сам файл понятно изменить нельзя)

[igmar]

Я правильно понимаю, что из скрипта нельзя прочитать css, поэтому нельзя присвоить элементу класс определенный в css.

 

т.е. в css есть .class1{margin:0;} раньше он не использовался нигде.

 

значит нельзя для какого-то элемента присвоить из скрипта element.className="class1"   ?

[Great Rash]

Я правильно понимаю, что из скрипта нельзя прочитать css

Можно.

поэтому нельзя присвоить элементу класс определенный в css

Можно, но класс и стили никак между собой не связаны.

значит нельзя для какого-то элемента присвоить из скрипта element.className="class1"

Можно.

[igmar]

Добрый день.

 

Кирпич вертикального меню я сделал.

http://codepen.io/anon/pen/RrPNPe

 

Теперь мне надо вернуться доделать картинки.

Мне нужно определить размеры картинки и в зависимости от них задать background-size:  contain ; или  background-size:  auto ;

 

Вопрос. Чтобы узнать размер картинки, нужно ее сначала загрузить? А потом, прочитав ее размер, возможно, поменять свойство?

Или можно прочитать ее размер сначала по url и это тоже будет быстро? А потом уже загрузить. Как быстрее?

[Great Rash]

Чтобы узнать размер картинки, нужно ее сначала загрузить?

Да. Есть событие onload.

А потом, прочитав ее размер, возможно, поменять свойство?

Снова да.

[igmar]

Подскажите как дождаться загрузки картинки.

Нужно получить ее размеры.

Сделал так. По окончании загрузки пишу их в глобальные переменные, которые потом прочитаю.

var imgwidth=0; imgheight=0;var imgtmp = new Image(); imgtmp.onload = function(){imgwidth=imgtmp.width; imgheight=imgtmp.height;//alert(imgwidth + "-" + imgheight);}

Потом читаю

surl=prefix + arrsel1[0].substr(1) + ".gif";imgtmp.src = surl;  alert(imgwidth + " " + imgheight);

Проблема в том, что загрузка идет асинхронно. Т.е. если раскомментировать alert в onload, то все хорошо, все присваивается быстро. Но если тормоза нет, то в вызывающей функции момент загрузки проскакивается и imgwidth + imgheight не успевают заполниться.

Как дождаться окончания загрузки?

 

Я вставил цикл ожидания так:

surl=prefix + arrsel1[0].substr(1) + ".gif";imgtmp.src = surl; while (!imgtmp.onload()) {}alert(imgwidth + " ! " +imgheight);

Работает, но почему-то долго.

Как нормально решить эту задачу?

Edited December 11, 2015 by igmar

[Great Rash]

Размеры нужно устанавливать внутри события, а не снаружи.

[igmar]

Да, я уже догадался. Внутрь функции вставил установку картинки. Работает.

imgtmp.onload = function(){imgwidth=imgtmp.width; imgheight=imgtmp.height;var surl="url(" + this.src + ")";document.getElementById('box1').style.backgroundImage = surl;                           alert(imgwidth + " ! " +imgheight);}

[igmar]

А как узнать размер резинового Div в максимизированном окне?

 

Мне нужно узнать его размер только 1 раз и запомнить, чтобы потом сравнивать с размером картинок.

Текущий размер я могу узнать

var t=document.getElementById('box1');alert("Размер элемента:" + t.offsetWidth + "-" + t.offsetHeight);

Но в этот момент окно может быть не макс размера, соответственно, размеры блока тоже не его максимальные. А мне нужны его макс размеры. Нужно максимизировать окно и прочитать размеры блока? Или есть другой способ узнать его исходные размеры?