Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Неявное поведение FF Dev. edition и Dnd



Откройте пожалуйста консоль. Попытайтесь перетянуть синий элемент на зеленый. Событие dragenter сработает первый раз при наведении на дроп элемент и второй раз при наведении на его текстовый узел(символ +).

Наблюдаю только у FF(developer edition).
Ответ: как попросить любимую лису так не делать?
Вопрос: Почему такое поведение у float-элемента, и как исправить?

Здравствуйте, коллеги.

Наткнулся на странное поведение у float-элемента, после диагностики рабочий код сократился до вот такого фиддла:
Код HTML5
1
2
3
4
<div id="div">
    <span id="one">One</span>
    <span id="two">Two</span>
</div>
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#one, #two {
    display:inline-block;
    background: green;
}
#two {
    float:left;
}
 
@media screen and (max-width: 320px) {
    #one, #two {
        display: block;
        background: red;
        float: none;
    }
}


У меня проблема проявляется в chrome 45.0.2454.101 m
Суть проблемы. Если при загрузке страницы (или нажатии Run, само собой) ширина рабочей области > 320px (зелёный bg), то элементы становятся так, как ожидается — two уплывает влево, получаем twoone. Но если отресайзить экран до < 320px (красного bg), а потом вернуть обратно, two почему-то не поднимается в первую строку, а остаётся во второй.

Вопрос, который гложет меня последние полдня — какого чёрта? Как от этого избавиться, не меняя функциональности?
Ответ: Да нет же! Они должны "скакать", в этом и идея.

Например, при ширине окна < 320px блоки выстраиваются вертикально, мобильное меню. При ширине 320px и больше становятся в ряд, при этом один из пунктов становится кнопкой и должен занять крайнее левое положение.

В этом мой кейс. Из примера я убрал всё это, потому что оно не играет роли. Осталось только то, что влияет на непонятное поведение, + цвет фона, для наглядности.
Вопрос: php и MySQL community edition ?

Доброго дня,
 
у меня вопрос существуют ли php и MySQL сервера community edition ?
 
если да то можно ли их бесплатно коммерчески использовать ?
Ответ: vs6262

Цитата:
если да то можно ли их бесплатно коммерчески использовать ?

яснее выражайтесь. куча сайтов - магазинов, думаете они платят за использование php и mysql ?)  
а насчет mysql - вы даже не удосужились посмотреть, что скачиваете для установки
Вопрос: Напишите функцию, поведение которой аналогично поведению Promise.race(promises)

Напишите функцию promiseRace(promises), поведение
которой аналогично поведению Promise.race(promises).
@param {Promise[]} promises массив с исходными промисами
@return {Promise}
Ответ: Решение от Evgen1337 с использованием async/await:
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="num"></div>
    <script>
        (async function () {
            // document.getElementById("num").innerText = await Promise.race([work1(), work2(), work3(), work4()]);
            document.getElementById("num").innerText = await promiseRace([work1(), work2(), work3(), work4()]);
        })();
 
        function delay(ms) {
            return new Promise((resolve) => { setTimeout(resolve, ms); });
        }
 
        function promiseRace(promises) {
            return new Promise((resolve, reject) => promises.forEach(promise => promise.then(resolve).catch(reject)));
        }
 
        async function work1() {
            await delay(1000);
            return 5;
        }
 
        async function work2() {
            await delay(2000);
            return 10;
        }
 
        async function work3() {
            await delay(500);
            return 15;
        }
 
        async function work4() {
            await delay(5000);
            return 20;
        }
    </script>
</body>
</html>
Вопрос: Странное поведение дебаггера

Всем привет,

Столкнулся со странным поведением дебаггера когда разбирался
с замыканиями в javascript. Сам скрипт отрабатывает как заявлено
автором статьи. Но мне надо убедиться и проверить по шагам, как
он будет работать в дебаггере.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function makeCounter() {
  var currentCount = 1;
  console.log('* - var currentCount = 1');
  return function () {
    return currentCount++;
  };
}
var counter = makeCounter(); // ***
var ptxt1 = "";                       // увеличивается счетчик counter()
var ptxt3 = "";                       //  увеличивается счетчикcounter()
var ptxt2 = "";                      //  увеличивается счетчикcounter()
// даже тут  увеличивается счетчик counter()
ptxt1 = counter(); // тут он вызывается ясно и увеличивается
console.log(ptxt1);//  тут опять увеличивается счетчик counter()
ptxt2 = counter();
console.log(ptxt2);
ptxt3 = counter();
console.log(ptxt3);
 
var pout = document.getElementById("p_out");
pout.innerHTML = ptxt1+"<br>"+ptxt2+"<br>"+ptxt3;
после создания объекта counter (***) его счетчик равен сразу 3 а не 1.
после каждого шага counter() отрабатывает и в результате на странице не 1, 2, 3
а 6, 11, 16 (см. скриншот). Такое же поведение в разных дебаггерах и в лисе и в опере и в виндовозовском бр.
Это на моем домашнем ноуте так отрабатывает, а на рабочем ноуте работает
как и положено 1, 2, 3 с отладкой и без отладки. (в архиве файлы примера)

Это нормально или нет?
Куда копать, что бы исправить данный глюк?

Так по мне, результат должен быть одинаков - с отладчиком и без него, иначе как искать ошибки
в более сложном коде.
П.С. Настройки дебаггеров выставлены по умолчанию,
и дома и на работе стоит винда 10. Браузеры все с последними обновлениями.
Ответ: сори...,
оказывается если объект counter() добавить в Watch, то он будет там отрабатывать при каждом шаге. для меня это оказалось неожиданностью ...
Тогда, где бы почитать об особенностях движка V8 при отладке?

недавно я разбирался с одним примером, на страничке вводились данные в поля и по кнопе
записывались данные в SQLite. пример был не рабочий, но и ошибки не выдавал, пока я не прошелся
отладчиком по jquery-1.12.0.js из скрипта примера, и сразу же скрипт начал работать, создал базу и начал записывать в базу данные.
Вопрос: Разумное поведение при изменении размера

Добрый вечер!
У меня вопрос к опытным программистам, делаю диалоговое окно с возможностью изменения размера, ну как бы ничего сложного, процедуру корректировки высоты вложенных элементов "накидал" за 30 минут, вроде работает.
Но не пойму как определить поведение если элементы не влазят в контейнер, вариант с overflow = 'hidden'/'scroll'/'auto' не подходит. т.к. некоторые дочерние элементы вложенных могут выходить за пределы контейнера.

Что посоветуете?

вот тестовая страница:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.container{
	width:100px;
	float:left;
	margin:5px;
	border: 2px solid gray;
}
</style>

<script>

function heightTo( n ){

	var containers = document.querySelectorAll('.container');
	for( var i = 0, l = containers.length; i<l; i++ ){
		var 
			container = containers[i],
			children = container.children,
			height = +n;
				
		var percent = 0, // общее количество процентов
			elements=[], // массив элементов с % высотой
			percents=[], // высота в % по индексу
			other = 0; // высота остальных элементов
		
		container.style.height = n+'px';
		
		// ищем элементы с % и остальные подсчеты
		for( var j = 0, m = children.length; j<m; j++ ){
			var element = children[j];
			if( element.hasAttribute('p-height') ){
				p = +element.getAttribute('p-height');
				percent += p;
				elements.push( element );
				percents.push( p )
			}else{
				other += element.offsetHeight;
			}
		}
				
		if( other < height ){ // если элементы будут иметь положительную высоту
			var k = ( height - other )/percent;
			for( var j = 0, m = elements.length; j<m; j++ ){
				var element = elements[j];
				element.style.height = Math.round( percents[j]*k )+'px';
			}
		}else{ // а вот тут не влазит, что делать?
			alert(' ne vlazit !')
		}
	}	
}
</script>
</head>
<body>

	<button onclick="heightTo( 100 )">100</button>
	<button onclick="heightTo( 150 )">150</button>
	<button onclick="heightTo( 200 )">200</button>
	<button onclick="heightTo( 300 )">300</button>
	<button onclick="heightTo( 500 )">500</button>
	
	<br/>
	
	<div class="container">
		<div p-height="30" style="height:auto; background-color:red">block 30%</div>
		<div style="height:30px; background-color:green">block 30px</div>
		<div p-height="50" style="height:auto; background-color: yellow">block 50%</div>	
		<div style="height:40px; background-color: blue">block 40px</div>
	</div>
	
	<div class="container">
		<div p-height="50" style="height:auto; background-color:red">block 50%</div>
		<div style="height:100px; background-color:green">block1 100px</div>
		<div p-height="10" style="height:auto; background-color: yellow">block 10%</div>	
		<div p-height="20" style="height:auto; background-color: blue">block 20%</div>
	</div>	

	<div class="container">
		<div p-height="50" style="height:auto; background-color:red">block 50%</div>
		<div  style="height:100px; background-color:green">block 100px</div>
		<div p-height="50" style="height:auto; background-color: yellow">block 50%</div>	
		<div style="height:40px; background-color: blue">block 40px</div>
	</div>	
	
</body>
</html>
Ответ: _0_,
а что хотите то ?
Сообщение от _0_
// а вот тут не влазит, что делать?
Вопрос: Псевдоклассы: пробел влияет на поведение

Тестирую в Firefox 41.0.2.

В документацию смотрю сюда:

1. Есть и подсказка, и буквица:
Код CSS
1
2
3
4
5
6
7
body :first-letter {
    color:#FF0000; 
}
 
p.tip:before{
     content: "ПОДСКАЗКА!"
}
2. Есть только буквица:
Код CSS
1
2
3
4
5
6
7
body :first-letter {
    color:#FF0000; 
}
 
p.tip :before{
     content: "ПОДСКАЗКА!"
}
3. Нет буквицы:
Код CSS
1
2
3
body:first-letter {
    color:#FF0000; 
}
Не могу разобраться. Отличие в примере - в пробелах перед двоеточием. Но в документации, насколько я могу судить:
E::first-letter
E::before

Т.е. вообще в документации отличий не могу найти. Не могли бы вы помочь мне разобраться с поведением этих псевдоклассов. Почему разница?
Ответ: Kifsif, :first-letter - это псевдоэлемент, а не псевдокласс... Псевдоэлементы можно использовать, как в паре с селектором(пример 3, тогда, как Вы говорите "Буквица" будет применяться исключительно к тексту, расположенному в тэге <body>... Кстати, в примере 3 псевдоэлемент таки работает!), а сам стиль будет выглядеть как: селектор:псевдоэлемент или использовать без селектора, как в примере 1 и 2 и тогда стиль будет выглядеть как: *::псевдоэлемент(конкретно в Вашем случае)... Таким образом в примерах 1 и 2, как Вы понимаете body можно просто удалить перед псевдоэлементом и "буквица" всё равно будет применяться, но только ко всем текстовым блокам на странице...
Вопрос: Поведение футера в зависимости от высоты блока основного контента

Здравствуйте. Обращаюсь опять, в надежде получить помощь. Возникла очередная проблема связаная с версткой . В чем суть проблемы. Есть футер сайта, он вообще никак не закреплен, то есть он просто идет после блока основного контента и если в блоке контента много (больше чем высота окна браузера) то футер отображается если только прокрутить страницу. И это нормально, такое поведение устраивает, а вот если контента мало то футер висит посредине страници. И вот это уже не подходит. Поставленая задача состоит в том что бы если контента много (больше высоты окна браузера) футер отображался по старому, после всего контента, а вот если контента мало, то футер как бы прилипал к низу страници. Вариантов реализации, когда футер всегда прилипает внизу страници я нашел много, но вот что бы футер отображался по разному в зависимости от высоты контента я не нашел совсем. Возможно ли реализовать это все на css или для этого уже надо подключать javascript?
Ответ: Вот древний способ прикрепить футер к низу Но высоту футера знать нужно.
HTML5
1
2
3
4
5
6
7
8
9
10
 <div id="main">
 <div id="header">
 </div>
 <div id="all">
 
 text<br>text<br>
 </div>
 </div>
 <div id="footer">
 </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
*{margin:0;padding:0;}
 
html{
          height:100%;
}
body{
          height:100%;
          margin:0;
}
 
#main {
      width:800px;
      margin:0 auto -50px;
      background:#cfc;
      min-height:100%
}
#header{
    height:100px;
     background:purple;
}
#footer {
        height:50px;
        background:#ccf; 
        width:800px;
         margin:auto;
}
#all{
     padding:0 0 50px 0; /* компенсирует отрицательный маргин у меина, чтобы текст не заползал на футтер*/
}
Вопрос: Странное поведение jQuery.html()

Господа, прошу вашего внимания! Решил вынести это в отдельную тему, как нестандартное поведение то ли браузера, то ли JQuery, то ли javascript...
Предлагаю вам провести маленький эксперимент.
Выполните вот этот код с jQuery
CODE (html):

  1.  
  2. <div onClick="alert($(this).html())"><p><p>Мы работаем, вы отдыхаете!</p></p></div>
  3.  

У меня результат во всех тестируемых браузерах:
CODE (html):

  1. <p></p><p>Мы работаем, вы отдыхаете!</p><p></p>


Почему так? Кто это делает и как избавиться от этих преобразований?
(Добавление)
Хм... на чисто js результат тот же

CODE (html):

  1. <div onClick="alert(this.innerHTML)"><p><p>Мы работаем, вы отдыхаете!</p></p></div>


Что же это за преобразования такие?... И как все таки взять именно тот html, который есть в элементе без таких преобразований?
Ответ:
Anguis пишет:
фактический html, а не интерпретированный

Пэ внутри пэ нельзя, иначе он думает что это не пэ внутри пэ, а то что тебе показали выше.
Anguis пишет:
Что же это за преобразования такие?
Типа рога растут оттудова:
Спойлер ()


-----
Вопрос: Непонятное поведение азначения border-box в атрибуте box-sizing

Итак согласно определению здесь

значение border-box- Свойства width и height включают в себя значения полей и границ, но не отступов (margin)

а я вижу иное поведение -значение padding:10px(в моем примере) при border-box не учитываеться
,рамка наоборот уменьшается на 10px.

Вот код и рисунок результата(результат в втором контейнере):

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
      <html>
<head>
<title>Режим задания размеров для контейнеров и таблиц</title>
<meta charset="utf-8">
<style>
 
.f {
border:yellow solid;
width: 300px; 
padding: 10px; 
 
}
.s{
border:yellow solid;
width: 300px; 
padding: 10px; 
box-sizing:border-box;
position: absolute;
top:100px;
 
}
</style>
</head>
 
<body>
 
<div class="f">Первый контейнер</div>
<div class="s">Второй контейнер</div>
 
 
</body>
 
</html>
Ответ: спасибо за подробное обьяснение.