Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как создать динамический список?

Как можно создать динамические поля при клике на элемент, к примеру, список? Посмотрите, пожалуйста, на код и скажите как лучше создавать поля. Задача заключается в том, что мы выбираем любую операцию и должны появиться поля для заполнения + описание. Естественно, если мы перешли на "Факториал", а были на "степени", то поля факториала удаляются. Для проверки нажмите на "Мат. Выч - Факториал". А также как исправить то, что при повторном нажатии на "факториал" появляются бесконечно поля?
Ответ:

Не по теме:

ненавижу jquery

Вопрос: Не могу сформулировать jQuery .live() для динамического DOM элемента

Есть селектбокс, дизайн которого генериться jQuery плагином при загрузке документа (при doсReady событии). Но он, естественно, не срабатывает для динамических элементов, созданных через append().

Я пробовал юзать и live() и delegate() но ничего не выходит, live() тут врядли как-то поможет а delegate() не знает такого события, которое здесь нужно использовать. Помогите плиз
Ответ: jQuery работает с элементами, которые были на странице на момент инициализации кода.

Если добавляются новые элементы - при помощи ajax'а или функций типа append() - то события не затрагивают их.

Как же работать с новыми созданными элементами DOM?

Оказывается для динамических элементов используется делегированная обработка событий.

Если кратко, то смысл делегирования в том, что обработчики "навешиваются" не на отсутствующие в dom элементы, а на существующий родительский объект.

Таким образом, при срабатывании соответствующего события , будет вызван данный обработчик для всех элементов, соответствующих селектору, даже если этих элементов не было во время объявлении обработчика (например при загрузке страницы).

Вопрос: Добавление класса к динамическому элементу

Ребят... Подгружаются элементы через ajax. Как добавить к ним класс без каких-либо кликов, просто при загрузки страницы?
Код:
Javascript
1
$(document).on('load', function () { ... });
не помогает.
Ответ: Balanaar, у меня видимо тогда что-то заглючило)) сейчас все работает! Всем большое спасибо!
Помогло только это:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
url: url,
type: 'POST',
data: data,
success: function(data){
//подгружаются элементы
},
complete:function(){
//присвоение классов
}
 
})
Вопрос: Создать таблицу → Считать в двумерный массив → Вывести в таблицу

Добрый день. Необходимо создать динамическую таблицу M x N, считать из нее данные и вывести результат в такую же таблицу.
Буду рад любому примеру. Заранее спасибо.
Ответ: illustrated man, непонятным осталось только одно -- тот самый двумерный массив обрабатывать будете как числовой или как строковый?


поясняю:
положим, в самую первую ячейку будут введены символы 123
если сохранить в массиве этот элемент Arr [0][0] как строку '123', то при обработке операция Arr [0][0] + 100 вернёт значение '123100'
если же сохранить в массиве этот элемент Arr [0][0] как число 123, то операция Arr [0][0] + 100 вернёт значение 223

выкладываю вариант со строковыми данными в массиве... разбирайтесь
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<meta charset="windows-1251">
<style>
input {margin: 0 12px}
table {margin: 12px auto}
table td {width: 321px; text-align: center}
</style>
<script>
//*******************************************************************************************
function YOURarrayProcessing (arr0) // ВАША функция обработки двумерного массива
    {
    // здесь ваша функция нужным вам образом обрабатывает переданный как аргумент двумерный массив arr0, преобразуя его
    //во вновь создаваемый двумерный массив arr1
    //  и в итоге возвращает новый массив  инструкцией return
    // для примера обработки я к каждому элементу массива пририсовал впереди звёздочку, а в конце -- знак доллара, убрав все переносы 
 
строк
    for (var arr1 = [], j = 0, jL = arr0.length, k, kL; j < jL; j++)
    for (arr1 [j] = [], k = 0, kL = arr0 [j].length; k < kL; k++)
        arr1 [j] [k] = '*' + arr0 [j] [k].replace (/\n/g, '') + '$';
    return arr1;
    }
 
//*******************************************************************************************
 
onload = function () // подключение функционала клику по стартовой кнопке
    {
    document.querySelector ('input[type="button"]').onclick = сreateEmptyTable;
    }
 
 
function сreateEmptyTable () // функция прорисовки пустой редактируемой таблицы
    {
    var tb = document.createElement ('table');
    tb.border = 1;
    tb.cellSpacing = 0;
    tb.id = 'myTbl';
 
    for (var j = 0; j < +document.getElementById ('myRows').value; j++)
    for (var ro = tb.insertRow (-1), k = 0; k < +document.getElementById ('myCols').value; k++)
        {
        var ce = ro.insertCell (-1);
        ce.contentEditable = true;
        }
 
    document.body.appendChild (tb);
    document.getElementById ('myTbl').rows [0].cells [0].focus ();
    var bt = document.querySelector ('input[type="button"]');
    bt.value = "обработать данные и вывести новую таблицу";
    bt.style.color='red'
    bt.onclick = function () // создание двумерного массива, запуск ВАШЕЙ функции обработки, прорисовка итоговой таблицы 
        {
        for (var d2arr = [], j = 0, jL = document.getElementById ('myTbl').rows.length, k, kL; j < jL; j++)
        for (d2arr [j] = [], k = 0, kL = document.getElementById ('myTbl').rows [0].cells.length; k < kL; k++)
            d2arr [j] [k] = document.getElementById ('myTbl').rows [j].cells[k].innerText;
 
       сreateFinalTable (YOURarrayProcessing (d2arr));
       }
   }
 
function сreateFinalTable (arr) // функция прорисовки итоговой таблицы
    {alert ('|'+ arr [0][0] +'|')
    var tb = document.createElement ('table');
    tb.border = 1;
    tb.cellSpacing = 0;
        
    for (var j = 0, jL = arr.length; j < jL; j++)
    for (var ro = tb.insertRow (-1), k = 0, kL = arr [j].length; k < kL; k++)
       {
       var ce = ro.insertCell (-1);
       ce.innerHTML = arr [j] [k];
       }
    document.body.appendChild (tb);
    }
</script>
 
<body>
<p>строк =<input id="myRows" type="number" min="1" value="3">
 столбцов =
<input id="myCols" type="number" min="1" value="3">
<input type="button" value="создать таблицу">
<hr noshade>
</body>
Вопрос: динамический элемент

Как отловить динамически созданный элемент. К примеру: У меня динамически создаётся блок infoBox со стилями , хочу получить параметры атрибута style. после подгрузки элемента вывожу
var inf = document.getElementsByClassName("infoBox");
            console.log(inf);


и в консоли получаю вот такой непонятный объект . как мне правильно получить параметры style?
Ответ:
Сообщение от freelancerphpcss
А вы может знаете как в google maps получить параметры infobox?

я просто понял в чём была причина, у меня блок ещё не появлялся, срабатывало событие google.maps.event.addListener(marker, 'click') и вот уже после этого события у меня появлился полностью блок и я к нему смог обратиться. Только вот смысл в том что мне в событии этом надо как-то получить нужные параметры блока
Как я понял, вам нужно отловить событие появления infobox - и тогда получить параметры стиля
Попробуйте посмотреть , раздел Mutation
Вопрос: Создание собственных тэгов/элементов на странице

В современных HTML5/CSS можно создать собственные элементы на странице, определив "свои" тэги, прописать для них стили. И всё будет работать. Вот только вопрос: насколько это правильно с точки зрения валидности страницы?

Поясняю. Вот была такая страница, на которой класс для ДИВа используется только для задания стилей:

<style>
.main_description {
width: 70%;
background-color: #ccc;
}
</style>

<div
class="main_description">
...
</div>


По-современному можно переписать так (естественно, для IE8 и более ранних версий ослика надо будет прописать document.createElement('main_description'), но вопрос не в этом):
<style>
main_description {
width: 70%;
background-color: #ccc;
}
</style>

<main_description>

...
</main_description>


Вроде бы, "семантически" это более верно, т.к. на странице у нас будет не куча ДИВов, а набор элементов с более осмысленными названиями. Особенно сложно разбираться, когда есть куча закрывающих ДИВов. Очень хочется, чтобы часть из них была не ДИВами :) Как минимум, читабельнее текст будет.

Еще раз вопрос: насколько это валидно?

Вопрос задан в тематическом разделе, но флуд в разумном количестве не возбраняется.

Это сообщение отредактировал sergeiss - 24.02.2015 - 03:13
Ответ:
Чем глубже я вникаю в данный вопрос, тем больше понимаю, что ни чертА не понимаю :) У меня пока нет окончательного решения, я сейчас знаю больше, а понимаю меньше, чем когда создал эту тему.
Изучаю всякую литературу, в т.ч. ссылки, данные в этой статье. Самое хреновое, что тут нет полной однозначности.
Вопрос: Скорость создания DOM элементов выше, чем работа с ним?

Добрый день!
Проводил эксперимент: из HTML с другого сайта нужно получить несколько элементов с определённым классом, эти элементы содержат какие-либо атрибуты. Нужно выдернуть значения этих атрибутов и на моей странице создать некоторые элементы, тоже с вложенными в них другими элементами и присвоить им атрибуты, тоже уже другие, но с выдернутыми из чужого HTML значениями.
И если я задавал атрибуты в уже существующие у меня на странице элементы, то скорость была ниже, чем если бы я создавал эти элементы с помощью JS, потом присваивал бы им классы, атрибуты и вкладывал бы их один в другой и в итоге нужный элемент вставлял бы на страницу.

Результат меня немного удивил. Это правда так? Есть какие-то объяснения, почему создавать элементы и вкладывать один в другой и назначать им атрибуты, быстрее, чем работать с уже готовыми элементами DOM?

P.S: писал на чистом JS, без JQuery и прочего...
Ответ: winston3d,
как вариант перенести элементы в document.createDocumentFragment() и произвести все манипуляции а потом вернуть на страницу DocumentFragment(быстро) или если если элементы в разных местах то то циклом по элементам. (медленнее но с готовыми атрибутами)
Вопрос: Создать изображение элемента сайта

Здравствуйте друзья, страница сайта, в ней есть блок например
<div id="ololo">Контент</div>.
Такой вопрос, можно ли как то средствами JavaScript создать изображение этого блока, ну как бы его сфотографировать. Ну если не полностью создать то хоть переменной присвоить значение цыфровых данных картинки, а там я уже отправлю их в пхп и создам картинку.
Ответ: или лучше
html2canvas($('#map'),
{
useCORS: true,
onrendered: function(canvas)
{
Вопрос: Как динамически создать уникальный элемент, можно ли вообще

Суть в том, что сейчас элементы имеют одно имя "vod", ну или что-то вроде, как сделать так, чтобы новые элементы были как-бы "vod++". Надеюсь подсобите.
Ответ: Значит в java все таки так можно, ну спасиб
Вопрос: Как создать такой элемент ?

Доброй ночи уважаемые. Подскажите, пожалуйста, как проще всего сделать такой элемент
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="block_welcome">
  <div class="block_welcome__images">
    <img class="block_welcome__img" src="https://github.com/BlackStar1991/Off-Site/blob/master/app/img/photos/picture_min%20(1).png?raw=true" alt="img">
    <img class="block_welcome__img" src="https://github.com/BlackStar1991/Off-Site/blob/master/app/img/photos/picture_min%20(3).png?raw=true" alt="img">
    <img class="block_welcome__img" src="https://github.com/BlackStar1991/Off-Site/blob/master/app/img/photos/picture_min%20(2).png?raw=true" alt="img">
    <img class="block_welcome__img" src="https://github.com/BlackStar1991/Off-Site/blob/master/app/img/photos/picture_min%20(4).png?raw=true" alt="img">
  </div>
 
  <div class="block_welcome__mainText">
    <h2 class="block_welcome__title">Welcome to the site</h2>
    <p class="block_welcome__text">Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer Duis autem vel Lorem ipsum Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor.
      ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer Duis autem vel Lorem ipsum Lorem ipsum dolor sit amet, uer uer Duis autem vel eum
      iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, sectetuer.</p>
 
    <a href="#" class="block_welcome__link">more...</a>
  </div>
 
 
</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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
.block_welcome {
  width: 100%;
  min-height: 187px;
  margin-top: 15px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.75);
  background-color: #fff;
}
 
.block_welcome__images {
  float: left;
  width: calc(100% *3 / 12);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
 
.block_welcome__img {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-basis: 102px;
  -ms-flex-preferred-size: 102px;
  flex-basis: 102px;
}
 
.block_welcome__mainText {
  width: calc(100% * 9 / 12);
  margin-right: 0;
  padding-right: 0;
  padding-left: 14px;
  display: inline-block;
  border: 1px solid red;
}
 
.block_welcome__title {
  margin-top: 10px;
  height: 14px;
  color: #000;
  font-size: 18px;
  letter-spacing: 1px;
}
 
.block_welcome__text {
  position: relative;
  margin-top: 18px;
  padding-right: 14px;
  text-indent: 40px;
  min-height: 83px;
  font-size: 12px;
  color: #1f1f1f;
}
 
.block_welcome__link {
  float: right;
  margin-top: 6px;
  margin-right: 12px;
  width: 40px;
  height: 8px;
  color: #000;
  font-size: 12px;
  text-decoration: underline;
}
Не могу понять как эти "плиточки" сделать. Что б оно нормально перестраивалось при уменьшении экрана
Ответ: песочница:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="wrapper">
  <div class="block_1">
    <div class="picture"><img src="https://placehold.it/100x100"/></div>
    <div class="picture"><img src="https://placehold.it/100x100"/></div>
    <div class="picture"><img src="https://placehold.it/100x100"/></div>
    <div class="picture"><img src="https://placehold.it/100x100"/></div>
  </div>
  <div class="block_2">
    <h2>Header</h2>
    <div class="text">
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, excepturi aliquam vero laboriosam, eos fugiat quae saepe aperiam praesentium velit neque laborum incidunt. Sint porro, quam! Esse blanditiis recusandae optio ut expedita tenetur labore eos voluptatum laborum, vero culpa ex. Aspernatur culpa aperiam iusto consectetur ex neque fugiat similique, veritatis, ducimus, eos ipsam natus hic accusamus, cumque praesentium suscipit. Enim in ipsam suscipit porro assumenda distinctio neque nobis perspiciatis optio recusandae quam ex numquam, eos nulla molestias laborum est hic quaerat quidem, consectetur itaque excepturi laudantium voluptate eaque! Rem explicabo dolorum similique doloremque, recusandae, voluptatem non harum id, sit iure cumque est magnam et deleniti ipsa magni. In maxime magni vel laborum, officiis expedita quisquam et esse commodi ea quaerat totam, vero reiciendis nobis consequuntur perspiciatis. Consequuntur atque nihil sed adipisci aliquid sit, sequi corrupti aspernatur et officia maiores neque eos id cumque. Adipisci hic dicta doloribus tempora quis, placeat minus porro, nihil blanditiis deleniti rem magni cum quae! Omnis itaque officiis harum, ex officia porro dignissimos unde iusto perspiciatis, magni ut adipisci totam enim id tempora vel nam, eaque voluptatum accusamus nobis minus hic. Temporibus quidem omnis quo maiores ut debitis, quod odit ducimus, autem voluptates nulla voluptate eligendi!</p>
    </div>
  </div>
</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
* {box-sizing: border-box;}
 
.wrapper {
    max-width: 1200px;
    display: flex;
    margin: 30px auto 0;
    padding: 10px;
    border: 1px solid #ccc;
}
 
.block_1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    flex: 1 0 40%;
    margin: 0 10px 0 -10px;
}
 
.picture {
    padding: 0 0 0 10px;
}
 
h2 {
    padding: 0 0 25px;
    font-size: 24px;
    font-weight: bold;
}