Код абсолютно одинаковый как в примере, но не работает

@And82 · Регистрация: 15.01.2016

Студворк — интернет-сервис помощи студентам

пример контактной формы (плавающий placeholder)

https://bootsnipp.com/snippets/qlDqg

HTML, CSS, jQuery одинаковые как в источнике, но у меня не работает.

вот мой вариант :
https://jsfiddle.net/vwqwkp8q/6/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
 
 
<h2 id="popup" class="page-header" href="#" rel="popover" data-content="This is a fake Contact Form" data-placement="bottom">Contact</h2>
  <form>   
    <div id="contact" class="form-group float-label">
      <label for="yourName">Your Name</label>
      <input id="yourName" type="name" class="form-control" placeholder="Your Name">
    </div>
                    
    <div class="form-group float-label">
      <label for="eMail">Email</label>
      <input id="eMail" type="email" class="form-control" placeholder="Email">
    </div>
            
    <div class="form-group float-label">
      <label for="message">Message</label>
      <textarea id="message" class="form-control" placeholder="Message" rows="1"></textarea>
    </div>
            
    <button class="btn-style" type="submit">Send</button>
</form>

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
.float-label .header-label{
    position: absolute;
    pointer-events: none;
    top: -8px;
    left: 10px;
    background-color: #FFF;
    padding: 0px 5px;
    font-size: 11px;
    visibility: visible;
    opacity: 1;
}
.float-label label {
    -webkit-transition: top 0.5s, left 0.5s, font 0.5s;
    -moz-transition: top 0.5s, left 0.5s, font 0.5s;
    -o-transition: top 0.5s, left 0.5s, font 0.5s;
    -ms-transition: top 0.5s, left 0.5s, font 0.5s;
    position: absolute;
    left: 8px;
    font-size: 13.2px;
    top: 8px;
    visibility: hidden;
    opacity: 0;
}
.form-group .float-label{
    margin-bottom: 20px;
}
.form-group{
    position: relative;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
 $('#popup').popover({ trigger: "hover" });
 
$("form .float-label input").each(function () {
    var placeholder = $(this).attr('placeholder');
    
    var label = $(this).parent().find("label").text();
    if (placeholder === undefined || placeholder === "") {
      $(this).attr("placeholder", label);
    }
  });
 
  //class header-label
  $("form .float-label input").bind("input propertychange", function (e) {
    if ($(e.target).val() !== "") {
      $(e.target).parent().find("label").addClass("header-label");
    } else {
      $(e.target).parent().find("label").removeClass("header-label");
    }
  });
});

+ popup эффект на hover не работает, хотя должен по сути, но это не главное.

Никто не любит баги, но для опытных это мелочи. Надеюсь на ваши светлые головы))

З.Ы. не знал, куда оформить тему, потому что не знаю, где баг. )

@AlexZaw · 02.03.2018, 22:00

уберите лишнее подключение jQuery у вас в самом jsfiddle подключен jq3.3.1 и еще в html подключается 1.11.1

@Fedor92 · 02.03.2018, 22:08

And82, порядок подключения файлов такой:

1. Стили
2. JQuery
3. Скрипты бутсрап
4. Собственные скрипты

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

@AlexZaw · 02.03.2018, 22:13

Черт, а слона то я и не приметил

) Fedor92, прав

@And82 · 02.03.2018, 23:23 **[ТС]**

можно ли подключать разные версии одной и той же библиотеки? Например бутстрап 3.7 и сразу бутстрап 4.0 ?

@SiarheiSiarhei · 04.03.2018, 10:29

Сообщение от And82

можно ли подключать разные версии одной и той же библиотеки? Например бутстрап 3.7 и сразу бутстрап 4.0 ?

поплывет...

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	02.03.2018, 22:00
	Сообщение было отмечено And82 как решение Решение уберите лишнее подключение jQuery у вас в самом jsfiddle подключен jq3.3.1 и еще в html подключается 1.11.1 1

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	02.03.2018, 22:08
	And82, порядок подключения файлов такой: 1. Стили 2. JQuery 3. Скрипты бутсрап 4. Собственные скрипты Всегда помните, что подключение файлов только в таком порядке... 1

@AlexZaw Модератор 2379 / 1739 / 677 Регистрация: 07.08.2016 Сообщений: 4,093
	02.03.2018, 22:13
	Черт, а слона то я и не приметил ) Fedor92, прав 0

@And82 6 / 6 / 5 Регистрация: 15.01.2016 Сообщений: 220
	02.03.2018, 23:23 [ТС]
	можно ли подключать разные версии одной и той же библиотеки? Например бутстрап 3.7 и сразу бутстрап 4.0 ? 0

Код абсолютно одинаковый как в примере, но не работает

Решение