-
Posts
10 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by lavrentyev
-
-
Всем большое спасибо за помощь. Я решение нашел путем подключения другого скрипта.
Вот,что мне помогло:JQUERY
$(document).ready(function() { // вся мaгия пoсле зaгрузки стрaницы $('a#go').click( function(event){ // лoвим клик пo ссылки с id="go" event.preventDefault(); // выключaем стaндaртную рoль элементa $('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку function(){ // пoсле выпoлнения предъидущей aнимaции $('#modal_form') .css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none; .animate({opacity: 1, top: '50%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз }); }); /* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */ $('#modal_close, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке $('#modal_form') .animate({opacity: 0, top: '45%'}, 200, // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх function(){ // пoсле aнимaции $(this).css('display', 'none'); // делaем ему display: none; $('#overlay').fadeOut(400); // скрывaем пoдлoжку } ); }); });
Структура HTML:
<a href="#" id="go">Обратная связь</a> <div id="modal_form"> <span id="modal_close">X</span> <form> <h3 class="form">Обратная связь</h3> <h5>Ваше имя*</h5> <input type="text" name="name" required> <h5>Телефон*</h5> <input type="tel" name="tel" required> <h5>Email*</h5> <input type="email" name="email" required> <h5>Сообщение</h5> <textarea name="text"></textarea> <input type="submit" class="send_form" value="Отправить"> </form> </div> <div id="overlay"></div>
Стили CSS:
#modal_form { width: 468px; height: 577px; /* Рaзмеры дoлжны быть фиксирoвaны */ background: #fff; position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */ top: 25% !important; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */ left: 44%; /* пoлoвинa экрaнa слевa */ margin-top: -150px; margin-left: -150px; /* тут вся мaгия центрoвки css, oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo =) */ display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */ opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */ z-index: 5; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */ padding: 20px 10px; text-align: center; } /* Кнoпкa зaкрыть для тех ктo в тaнке) */ #modal_form #modal_close { width: 21px; height: 21px; position: absolute; top: -21px; right: -21px; cursor: pointer; display: block; color: #fff; font-size: 17px; background-color: rgba(127,127,127,0.8); } /* Пoдлoжкa */ #overlay { z-index:3; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */ position:fixed; /* всегдa перекрывaет весь сaйт */ background-color:#000; /* чернaя */ opacity:0.8; /* нo немнoгo прoзрaчнa */ -moz-opacity:0.8; /* фикс прозрачности для старых браузеров */ filter:alpha(opacity=80); width:100%; height:100%; /* рaзмерoм вo весь экрaн */ top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */ left:0; cursor:pointer; display:none; /* в oбычнoм сoстoянии её нет) */ }
Цитата -
Спасибо, что уделили время. Но я только что заметил, что в jsfiddle окно работает (к моему удивлению). А у меня в браузере нет. Что-то я совсем завис!!!
-
Доброго времени суток!
Проблема: не работает модальное окно. Т.е при нажатии на ссылку ничего не происходит.
Кнопка есть, подключенный файл со скриптом есть. Jquery подключен. Ссылка связана с блоком, который должен всплывать. сделал все по инструкции. Я не профи но вроде немного разбираюсь. Я уже все глаза высмотрел!!! В чем дело не пойму.
Делал по этой инструкции: http://dbmast.ru/modalnoe-okno-s-pomoshhyu-css-i-jquery
Выложил код в Jsfiddle. Прошу подскажите в чем может дело!
-
Доброго времени суток. Очень надеюсь на вашу помощь!
Сразу даю ссылку на код https://jsfiddle.net/Lavrentyev/f5ygLoxp/5/#&togetherjs=L9Tx3aRbGa
Проблема в том, что мне нужна резиновая шапка. Чтобы блок с выбором языка и кнопка входа при уменьшении экрана ехали влево, но при этом сама шапка не обрезалась. Когда я ставлю шапке min-width: 1280px то шапка не обрезается но и блок с выбором языка и кнопка входа остаются на месте (http://joxi.ru/52ayglEIdaYQ20), а если ставлю шапке width: 100% блоки едут как надо, но шапка понятно обрезается по ширине экрана. (http://joxi.ru/5mdogq5HZOd5r1)
Не могу разобраться с этим. Помогите, пожалуйста.
Немного разобрался, но не до конца. Получается если ставлю шапке width: 100% то при уменьшении экрана его размер остается 1280px но шапка уменьшается вместе с экраном. Я применил к body overflow-x: hidden и это сработало, убралась горизонтальная полоса прокрутки. Но при сильном уменьшении экрана должна появляться. Я это сделал с помощью медиа запроса. Полоса появляется, но опять же горизонтально прокручивается до 1280px, а шапка обрезана.
Все еще нуждаюсь в помощи!
-
Очень нужна помощь! !!
Верстка почти закончена за исключением одной детали, которая портит всю "малину". Не знаю как сделать чтобы при нажатии на пункт меню выделялся также и основной блок с контентом относящийся к пункту меню. Прилагаю ссылку на скриншот.
-
Я начинающий верстальщик. Довольно не плохо знаю HTML и CSS. В данный момент изучаю JS и Jquery. Но, конечно, мне нужна практика. Поэтому готов выполнять работу бесплатно или за символическую плату. Может кому нужен помощник, то я готов.
-
36 минуты назад, lavrentyev сказал:17 минуту назад, npofopr сказал:
Воспользуйтесь песочницей, например, jsfiddle
Доброго времени суток!
Я новичок в деле верстки, так что не судите строго. У меня проблема с отображением background с ссылкой на PNG в браузере IE 11 (может и в ранних версиях тоже, я не проверял.) В других браузерах, естественно, все нормально. А в IE просто белый фон. Это не коммерческий заказ, а просто я набиваю руку. Може подскажете как решить проблему. Буду очень благодарен!
https://jsfiddle.net/2aw8h9xd/2/
-
Доброго времени суток!
Я новичок в деле верстки, так что не судите строго. У меня проблема с отображением background с ссылкой на PNG в браузере IE 11 (может и в ранних версиях тоже, я не проверял.) В других браузерах, естественно, все нормально. А в IE просто белый фон. Это не коммерческий заказ, а просто я набиваю руку. Може подскажете как решить проблему. Буду очень благодарен!
Вот код HTML:
<!DOCTYPE html>
<!-- html lang="ru" class="lt-ie9 lt-ie8 lt-ie7">
<html lang="ru" class="lt-ie9 lt-ie8">
<html lang="ru" class="lt-ie9">
<html lang="en"> -->
<head>
<meta charset="UTF-8">
<title>MobileNews</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/main.css" tipe="text/css">
<link rel="stylesheet" href="css/media.css" tipe="text/css">
<link rel="shortcut icon" href="images/CloneMobile.png">
</head>
<body>
<img class="arrow2" src="images/Arrow2.png" alt="Arrow2"/>
<header>
<div class="head">
<img src="images/CloneMobile.png" alt="CloneMobile"/>
<p class="logo">CloneMobile</p>
<img class="arrow" src="images/Arrow1.png" alt="Arrow"/>
</div>
</header>
<div class="line"></div>
<nav>
<ul class="main">
<li><a href="#">Главная</a></li>
<li><a href="#">Мобильные новинки</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">FM-радио</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</nav>
<div class="maincont">
<div class="sidebar">
<aside class="first">
<h1>Навигация</h1>
<ul>
<li><a href="#">Игры</a></li>
<li><a href="#">Программы</a></li>
<li><a href="#">Темы и обои</a></li>
<li><a href="#">Смартфоны</a></li>
<li><a href="#">GPS навигаторы</a></li>
<li><a href="#">MP3 плееры</a></li>
<li><a href="#">Bluetooth гарнитуры</a></li>
<li><a href="#">Разное</a></li>
</ul>
</aside>
<aside class="second">
<a href="#"><img src="images/Register.png" alt="Register"/></a>
</aside>
<aside></aside>
</div>
<main>
</main>
</div>
<footer>
sdfsadfwfweeagf
</footer>
<script src="libs/html5shiv/es5-shim.min.js"></script>
<script src="libs/html5shiv/html5shiv.min.js"></script>
<script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>
<script src="libs/respond/respond.min.js"></script>
</body>
</html>Вот CSS:
body {
position: absolute;
background-image: url(../images/Design.png);
margin: 0;
padding: 0;
width: 80vw;
}
header, footer, nav, article {
display: block;
}
header {
width: 100%;
position: relative;
display: block;
height: 90px;
background-color: #fff;
padding-right: 240px;
}
.head img {
position: relative;
height: 60px;
top: 15px;
left: 170px;
}
p.logo {
position: relative;
margin: 0;
left: 240px;
bottom: 35px;
font-size: 26px;
font-family: Arial, Helvetica, sans-serif;
}
img.arrow {
height: 117px;
left: 900px;
position: absolute;
top: 0;
}
img.arrow2 {
height: 117px;
left: 860px;
position: absolute;
top: 0;
}
.line {
height: 3px;
min-width: 100%;
width: 100%;
background-color: #9F9FA1;
padding-right: 240px;
}
nav {
height: 72px;
width: 1000px;
transform: translateX(145px);
margin: 0 5px 5px;}
.main li {
display: inline;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
.main li a {
padding: 15px 25px;
text-decoration: none;
color: #070707;
transition: border-radius 0.5s, background-color 0.5s, color 0.5s;
}
.main li a:hover {
color: #070DFD;
background-color: #AECCE5;
border-radius: 3px;
}
ul.main {
margin: 0;
padding-top: 28.5px;
padding-bottom: 28.5px;
padding-left: 30px;}
.maincont {
height: 100%;
width: 1000px;
background-image: linear-gradient(to bottom, #F3F6F8, #D4E5F3) ;
box-shadow: 3px 3px 3px #7F7C7C;
transform: translateX(150px);
padding-top: 9px;
border-radius: 5px;
}
.sidebar {
width: 250px;
margin: 0;
height: 100%
border-right: 1px solid #8C8B8B;
}
aside.first {
width: 100%;
height: 470px;
}
.first h1 {
margin: 21px 0 20px 20px;
text-transform: uppercase;
font-size: 21px;
color: #1A62F6;
font-family: Arial, Helvetica, sans-serif;
}
.first li {
list-style-type: circle;
font-family: Arial, Helvetica, sans-serif;
}
.first li a {
display: block;
font-size: 18px;
line-height: 18px;
padding: 15px 15px;
text-decoration: none;
color: #070707;
transition: border-radius 0.5s, background-color 0.5s, color 0.5s;
}
.first li a:hover {
color: #070DFD;
border-radius: 3px;
background-color: #AECCE5;
}
.second img {
padding-left: 25px;
}
.header {
width: 100%;
}
footer {
height: 80px;
width: 100%;
background-color: #666464;
padding-right: 240px;
margin: 15px 0 5px 0;
} -
Добрый день уважаемые!
Подскажите, пожалуйста, как заставить свойство transition выполняться одновременно на нескольких элементах (div)
Вот код:
<div class="anim">
<div class="mbez" style="transition: width 3s ease;"></div><div class="mbez" style="transition: width 3s linear;">;</div><div class="mbez" style="transition: width 3s ease-in;"></div><div class="mbez" style="transition: width 3s ease-out;"></div><div class="mbez" style="transition: width 3s ease-in-out;">;</div><div class="mbez" style="transition: width 3s step-start;"></div><div class="mbez" style="transition: width 3s step-end;"></div></div>И стили:div.mbez {width: 250px; height: 50px; background: #F97B16; border: 1px solid #A13F0A;
padding: 5px 10px; font-size: 14px; font-style: italic; cursor: pointer;}
div.mbez:hover {width: 550px;}
div.anim {cursor: pointer;}Нужно чтобы при наведении на область общего блока <div class="anim"></div> выполнялось свойство transition на всех блоках <div class="mbez"></div> одновременно.
Буду благодарен за помощь!
Как стилизовать тег input:invalid?
in HTML Coding
Posted
Всем доброго времени суток!
Буду благодарен за помощь в одном вопросе! Есть форма с <input required>. В CSS я прописал стили для тех input которые не заполнил пользователь (использовал input:invalid). Но проблема в том, что при загрузке получается то, что вы можете видеть в jsfiddle: все input с required подсвечиваются. И это понятно ведь они не заполнены. Но как сделать так как на фото? Чтобы подсвечивался незаполненный input только после нажатия на кнопку, а не при загрузке формы?
Понимаю, что это можно сделать на JS. Но как я не знаю. Может что-то подскажете?
https://jsfiddle.net/Lavrentyev/1nLnjrb4/2/#&togetherjs=LSIgkgrqlh