ErUnDAK

June 21, 2017

11 час назад, Switch74 сказал:

NaN - обычно появляется когда с строковыми переменными делают то, что нужно делать с числовыми (приводите к нужному типу)
Задайте начальные параметры стиля, и используйте изменение класса, а не запись в style

"Задайте начальные параметры стиля, и используйте изменение класса, а не запись в style" - я не совсем понял этот момент.

June 21, 2017

Дан код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="script's.js"></script>

	<style>

		input {
			position: relative;
			transition: all ease 1s;
		}

	</style>

</head>
<body>
	<input id="val1" type="text"><br><br>
	<input id="val2" type="text"><br><br>
	<button>Посчитать!</button>
	<button id="lol">Сместить!</button>
</body>
</html>

И его скрипт:

$('document').ready(function() {

	$('button').on('click', function(){
		
		var value1, value2;

		value1 = $('#val1').val();
		value2 = $('#val2').val();

		value1 = parseInt(value1);
		value2 = parseInt(value2);

		value3 = value1 + value2;

		alert(value3);

	});

	$('button#lol').on('click', function() {
		$('#val1, #val2').css(
			{
			border: '2px solid red',
			left: '50px'
			}
			 );
	})

});

И первая проблема: при нажатии на кнопку "Сместить!" у меня вылетает алёрт со значением "NaN", а потом работает сам скрипт.
И вторая: почему в коде не работает плавное смещение вправо? В html задал параметр стиля, но плавного перехода нет. Только плавная смена цвета.
Как исправить NaN и плавный переход?
Если возможно, объясните поподробнее.

June 20, 2017

Дан код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

		body {
			background: #e8ece7;
		}

		.menu {
			position: absolute;
			background: #b13224;
			border-radius: 5px;
			top: 90px;
			left: 450px;
		}

		.menu a {
			display: block;
			text-decoration: none;
			background: #b13224;
			color: white;
			padding: 7px;
			margin: 0;
		}

		.menu a:hover {
			background: #383838;
		}

		.menu ul {
			width: 958px;
			height: 33px;
			list-style: none;
			font-size: 0;
		}

		.menu ul li {
			display: inline-block;
			font-size: 16px;
		}

		h1 {
			position: absolute;
			top: -5px;
			left: 450px;
			display: inline-block;
		}

		h1:before {
			content: '';
			width: 48px;
			height: 56px;
			background: url(gold-logo.jpg) no-repeat center center;
			background-size: 48px 56px;
			display: inline-block;
		}

		#polosa {
			position: relative;
			background: red;
		}

		.slider {
			overflow: hidden;
			height: 38px;
			padding: 4px;
			border: 2px solid black;
			position: absolute;
			top: 506px;
			left: 900px;
			font-size: 36px;
		}

	</style>
	<script>
		document.getElementById('slider-top').onclick = slider;
			var top = 0;

			function slider(){
				var polosa = document.getElementById('polosa');
				top = top - 256;
				if (top < -768) {
					top = 0;
				}
				polosa.style.top = top +'px';
				}
	</script>
</head>
<body>
<h1>Xman<font color="red">Bank</font></h1>
	<div class="menu">
		<ul>
			<li><a href="">Home</a></li>
			<li><a href="">About us</a></li>
			<li><a href="">Our services</a></li>
			<li><a href="">Deposits</a></li>
			<li><a href="">FAQs</a></li>
		</ul>
	</div>

	<div class="slider">
		<div id="polosa">
			<li>Привет</li>
			<li>как</li>
			<li>у тебя</li>
			<li>дела?</li>
		</div>
	</div>
<button id="slider-top">TOP</button>
</body>
</html>

В скрипте в окне разработчика браузера ошибка: "cannot set property onclick of null". Как её решить?

April 25, 2017

Здравствуйте. Дан код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

		body {
			background: #e8ece7;
		}

		.menu {
			position: absolute;
			background: #b13224;
			border-radius: 5px;
			top: 90px;
			left: 450px;
		}

		.menu a {
			display: block;
			text-decoration: none;
			background: #b13224;
			color: white;
			padding: 12px;
			margin: 0;
		}

		.menu a:hover {
			background: #383838;
		}

		.menu ul {
			width: 958px;
			list-style: none;
			font-size: 0;
		}

		.menu ul li {
			display: inline-block;
			font-size: 16px;
		}

		h1 {
			display: inline-block;
		}

		h1:before {
			content: '';
			width: 100px;
			height: 100px;
			background: url(gold-logo.jpg) no-repeat center center;
			display: inline-block;
		}

	</style>
</head>
<body>
<h1>XmanBank</h1>
	<div class="menu">
		<ul>
			<li><a href="">Home</a></li>
			<li><a href="">About us</a></li>
			<li><a href="">Our services</a></li>
			<li><a href="">Deposits</a></li>
			<li><a href="">FAQs</a></li>
		</ul>
	</div>
</body>
</html>

В нём я воспользовался тегом h1 и псевдоклассом before, чтобы вставить перед ним картинку (лого), но размер задаётся некорректно. Он не уменьшает картинку, делает подобие border'а. Как исправить?

April 9, 2017

2 часа назад, andrey7287 сказал:

id может быть только 1 на странице

Через класс тоже не работает....

April 9, 2017

Дан код:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>пара</title>
		<script>
		for(i=0; i<elem.length; i++) {
      			alert(elem[i]);
      		}     		
		function lol(nan) {
			var i;
      		var elem = document.getElementById("sas");
      		elem.style.color = nan;
    	}		
    </script>
</head>
<body>
<p id="sas">Привет!</p>
<p id="sas">Привет!</p>
<p id="sas">Привет!</p>
<p id="sas">Привет!</p>
<p id="sas">Привет!</p>
<button onclick="lol('red')">Красный</button>
</body>
</html>

При нажатии на кнопку, должен запуститься скрипт, при котором все объекты становятся красного цвета. Но проблема в том, что красным становится только 1 элемент, а не все. Как исправить проблему?

April 6, 2017

Объясните поподробнее, почему в 24 строчке i пишется в квадратных скобках? Как это работает?

April 5, 2017

21 час назад, npofopr сказал:

Да, будет.
Быстрее было бы уже проверить, чем создавать тему)

Я параноик. Боюсь рисковать)

April 4, 2017

У меня есть сайт на hostinger. Он в html-формате. Если я сменю формат на php, и добавлю туда некоторые строки php-кода, он будет работать на php? Возможно, вопрос будет не понятен или даже глупым, но только так пока сформулировал вопрос.

March 27, 2017

Задать ширину и высоту + ввести атрибут в CSS:

Break: break-all;

March 12, 2017

7 hours ago, radioactive said:
Для начала правильно бы вопрос оформили, высота height. ширина width, текст по центру - text-align:center

а вон какой текст..
p.text{
  position: absolute;
  width: 977px;
  left: 50%;
  margin-left: -488.5px;
}

Прошу прощения за мою формулировку вопросов. Бывает, чтот тороплюсь. Я имел ввиду текст внутри подменю, если навести на кнопку. Я делал через text-align, height и width - это даже не менялось. Вот и обратился за помощью.

March 11, 2017

Здравствуйте. Возникла проблема, в которой я не могу выставить у подменю ширину и высоту, а так же центрирование текста. Не "li", не "a" и "ul" не влияют на эти атрибуты. Как правильно написать?

https://jsfiddle.net/ErUnDAK/3461nhqd/#fork

March 9, 2017

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>How you use your text?</title>
  <style>

    a {
      text-decoration: none;
    }

  	.lol {
  		background: green;
  		width: 50%;
  		height: 145px;
  		text-align: center;
  	}

  	.lol p {
      color: #109be6;
  		margin: 0;
  		padding: 0;
  		text-align: center;
  		font-size: 50px;
  		border-top: 10px solid #78d3fa;
  		border-bottom: 10px solid #78d3fa;
  		text-shadow: 0 2px 4px #a0a0a0;
  	}

    .menu ul {
      list-style: none;
      float: right;
      font-size: 0;
      padding-right: 12px;
    }

    .menu ul li {
      display: inline-block;
      font-size: 25px;
      }

    .menu ul li a {
      height: 100%;
      display: block;
      padding: 19px;
      background: #5faaea;
      color: #fff;
      box-shadow: inset -0px -12px 30px -10px black;
      border-left: 1px solid white;
    }

    .menu ul li a:hover {
      box-shadow: inset -0 1px 10px 0 black;
    }
	
  </style>
 </head>
 <body>
 <center>
 	<div class="lol">
 		<p>How you use your text?</p>
    <div class="menu">
        <ul>
          <li><a href="">Главная</a></li>
          <li><a href="">Купля/продажа</a></li>
          <li><a href="">Аренда</a></li>
          <li><a href="">Оставить заявку</a></li>
          <li><a href="">КОНТАКТЫ</a></li>
        </ul>
    </div>
 	</div>
 </center>
 </body>
</html>

Здравствуйте! У меня возникла проблема, что при уменьшении окна браузера всё смещается и становится кривым. Как отменить это смещение, чтобы всё оставалось как при полном экране?

March 7, 2017

5 hours ago, radioactive said:

я так понял белый фон при наведении вы хотите сделать только основным элементам меню:
https://jsfiddle.net/x7uw1a3w/
а лучше так
https://jsfiddle.net/x7uw1a3w/1/

У вас теги div, ul, li, имеют одинаковый класс, так не правильно - именуйте разным классом

Благодаря вам осознал, что не со всем разбираюсь с классами. Ваш код помог, спасибо!

March 7, 2017

Как правильно сделать, чтобы в классе "lol" был текст зелёного цвета, в классе "loli" красного? И всё через псевдокласс :not.

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег input, атрибут type</title>
  <style>
	
  </style>
 </head>
 <body>
	<div class="lol">
		<p>Один</p>
		<p>Два</p>
		<p>Три</p>
		<div class="loli">
			<p>Четыре</p>
			<p>Пять</p>
			<p>Шесть</p>
		</div>
	</div>
 </body>
</html>

March 6, 2017

2 hours ago, Switch74 said:
.loli :not(.menu) li

А как будет выглядеть данный код, если я хочу убрать повёрнутую фигуру при наведении на то, что внутри класса "меню"?

Прочитал как работает not, перепробывал многие варианты (возможно, что даже вероятные-правильные) - не работает как нужно.

March 6, 2017

Дан код:

		<style>
		a {
			display: inline-block;
			margin-left: 5px;
		}
		
		
		.loli {
			height: 75px;
			width: 100%;
			display: inline-block;
			background-color: #0099cc;
			left: 600px;
		}
		
		
		.loli ul {
			padding: 0;
			margin: 0;
			font-size: 0;
			overflow: hidden;
			text-align: center;
		}
		
		
		.loli ul li {
			display: inline-block;
			list-style: none;
			font-size: 36px;
		}
		
		
		.loli ul li a {
			color: #fff;
			text-decoration: none;
			height: 75px;
			line-height: 75px;
			padding: 0 15px;
			position: relative;
			z-index: 10;
		}
		
		
		.loli ul li a:hover {
			color: black;
		}
		
		
		.loli ul li a::before {
			content: " ";
			position: absolute;
			left: 0;
			top: -25px;
			width: 100%;
			height: 150px;
			transform: rotate(14deg);
			background-color: rgba(255, 255, 255, 0.3);
			opacity: 0;
			z-index: -1;
		}
		
		
		.loli ul li a:hover::before {
			opacity: 1;
			background-color: #fff;
		}

		.menu li ul li {
			padding-right: 15px;
			background: #0099cc;
		}

		.menu li ul {
     		 position: absolute;
     		 display: none;
     		 z-index: 10;
     		 margin-left: -18px;
    	}

    	.menu li:hover ul {
      		display: block;
    	}

    	.menu li ul li {
    		display: block;
    	}
        </style>

<div class="loli">
				<div class="menu">
			<ul>
				<li><a href="">Главная</a></li>
				<li><a href="">Новости</a>
					<ul class="menu">
						<li class="menu"><a href="">Расписание</a></li>
					</ul>
				</li>
				<li><a href="">О группе</a>
					<ul class="menu">
						<li class="menu"><a href="">Профессия</a></li>
						<li><a href="">Успеваемость</a></li>
					</ul>	
				</li>
				<li><a href="">Здание</a>
					<ul class="menu">
						<li class="menu"><a href="">Расписание</a></li>
					</ul>
				</li>
				<li><a href="">Контакты</a>
					<ul class="menu">
						<li class="menu"><a href="">Расписание</a></li>
					</ul>
				</li>
			</ul>
				</div>
		</div>

Как мне сделать, чтобы класс "меню" не затрагивал класс "лоли"?

February 28, 2017

16 минут назад, palindrom сказал:

Доброго времени.

Думаю, что такой вариант подойдёт:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       legend{
           text-align: center;
       }
   </style>
</head>
<body>

<fieldset>
<legend>Personal Info</legend>
<label>First Name: <input type="text" name="fname" size="30"></label><br>
<label>Last Name: <input type="text" name="lname" size="30"></label>
</fieldset>

</body>
</html>

Было бы круто, если бы был вариант в CSS

February 28, 2017

Сложно объяснить, поэтому нарисовал просто рисунок и хочу поинтересоваться: как такое можно реализовать? И можно ли туда какой-нибудь внутрь текст запихать будет?

February 27, 2017

19 минут назад, radioactive сказал:
в my.js находятся параметры слайдера, читайте внимательнее
$(document).ready(function(){
  $('.slider').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
  });
});
живой пример

http://codepen.io/Radioactive/pen/JWdNmK

http://codepen.io/Radioactive/pen/KWpmYY

У меня в этом коде картинки друг на друга почему-то ложаться. И повторюсь: у меня нет my.js. Мне его самому создавать что ли?

February 27, 2017

18 часов назад, npofopr сказал:

Вы сперва свой код приложите. Чтобы мы указали вам на ошибку.

Все примеры и инструкции на сайте слайдера есть.

Вот мой код сайта. Уже несколько сайтов со сборкой пересмотрел:

<html>
  <head>
  <title>My New Amazing Webpage</title>
  
  <link rel="stylesheet" type="text/css" href="путь от корня вашего сайта/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="путь от корня вашего сайта/slick/slick-theme.css"/>
  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="путь от корня вашего сайта/slick/slick.min.js"></script>
 
  <style type="text/css">

  </style>
  </head>
  <body>

    <script type="text/javascript">
  $(document).ready(function(){
  $('.slider').slick({
  dots: true,
  infinite: true,
  speed: 500,
  fade: true,
  cssEase: 'linear'
  });
  });
  </script>

  <div class="single-slide">
    <div><img src="0AYa_cFFzy4.jpg" alt=""></div>
    <div><img src="1920x1110_814894_[www.ArtFile.ru].jpg" alt=""></div>
    <div><img src="4fbf812509b602260b00001b.jpg" alt=""></div>
  </div>
  </body>
</html>

February 27, 2017

17 часов назад, palindrom сказал:

Доброго времени.

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

Так как сам разбирался с ним, то выкладываю небольшой код:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>
</head>
<body>

<div class="slider">
<div class="item"><img src="img1.jpg" alt=""></div>
<div class="item"><img src="img2.jpg" alt=""></div>
<div class="item"><img src="img3.jpg" alt=""></div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script src="my.js"></script>
</body>
</html>

В "my.js" задаёте параметры работы слайдера:

$(document).ready(function(){
$('.slider').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear'
});
});

У меня нет "my.js". У меня времени нет на расмотр JQuery, поэтому всё и стало ля меня сложным.

February 26, 2017

Мне нужно помощь по установке данного слайдера: http://kenwheeler.github.io/slick/
Я сделал всё как в инструкции по установке, но он всё-равно не работает. Можете показать код со всеми картинками в слайдере, чтоб я мог распознать свою ошибку?

February 15, 2017

7 минут назад, npofopr сказал:

Т.е. инструкция на странице плагина вас не устраивает https://github.com/sergeche/emmet-sublime#readme ?

Показать содержимое

How to install

Warning: this plugin may not work at all in some OSes since it written in JavaScript and uses PyV8 and Google V8 binaries to run. If you experience problems or editor crashes please fill an issue.

With Package Control:

Run “Package Control: Install Package” command, find and install Emmet plugin.

Restart ST editor (if required)

Manually:

Clone or download git repo into your packages folder (in ST, find Browse Packages... menu item to open this folder)

Restart ST editor (if required)

Второе, что то для меня не понятное.

Я думал, что вставки файлов с плагином недостаточно. Нужно ещё и подключить, а нет... Спасибо.

February 15, 2017

6 часов назад, npofopr сказал:

Там и ручная установка описана.
Что за плагин то такой?

Emmet, auto files Witcher - нужны срочно, по ссылкам не нашёл.

Sign In

ErUnDAK

Posts

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Store

Posts posted by ErUnDAK

Две проблемы в JavaScipt (jQuery)

Две проблемы в JavaScipt (jQuery)

Проблемы в JavaScript

Неправильное изображение в before

Установка цвета через JavaScript

Установка цвета через JavaScript

Квадратные скобки в JavaScript

Сайт на php

Сайт на php

Возможность писать в div как в textarea

Ширина и высота подменю

Ширина и высота подменю

Позиционирование и смещение объектов

Работа с несколькими классами

Работа с псевдоклассом :not

Работа с несколькими классами

Работа с несколькими классами

Как сделать border как на рисунке

Как сделать border как на рисунке

Слайдер Slick

Слайдер Slick

Слайдер Slick

Слайдер Slick

Редактор для вёрстки Sublime Text 3

Редактор для вёрстки Sublime Text 3

Forums

Important Information