Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.11.2015, 16:19
Интересующийся
Отправить личное сообщение для barakuda Посмотреть профиль Найти все сообщения от barakuda
 
Регистрация: 14.11.2015
Сообщений: 17

При клике на элемент он поднимается вверх, а на его месте появляется другой!
<p>My family <span>to at</span> big. Lorem ipsum dolor sit amet, con <span>to at</span> adipisicing elit. Quod similique est, autem <span>to at</span> voluptatem ipsam error eius rumquam non soluta aut impedit dolor magnam, exerci- tationem blanditiis voluptatibus praesentium id, recusandae. </p>

при клике на <span> он должен подниматься вверх и вместо него в тексте должен появится input
Ответить с цитированием
  #2 (permalink)  
Старый 14.11.2015, 16:19
Интересующийся
Отправить личное сообщение для barakuda Посмотреть профиль Найти все сообщения от barakuda
 
Регистрация: 14.11.2015
Сообщений: 17

Ребят, помогите, нужно срочно сделать
Ответить с цитированием
  #3 (permalink)  
Старый 14.11.2015, 16:40
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

barakuda,
Нормально ?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <style>
    span {
        background-color: dimgrey;
        color: white;
        border-radius: 3px;
        cursor: pointer;
    }
    </style>
</head>
<body>
<p>My family <span>to at</span> big. Lorem ipsum dolor sit amet, con <span>to at</span> adipisicing elit. Quod similique
    est, autem
    <span>to at</span> voluptatem ipsam error eius rumquam non soluta aut impedit dolor magnam, exerci- tationem
    blanditiis voluptatibus praesentium id, recusandae. </p>


<script>
    $('span').click(function (event) {

        var target = event.target;
        if(target.tagName != 'SPAN') return;
        var input = document.createElement('input');
        input.value = 'Hello';
        target.parentNode.insertBefore(input,target);
        $(target).hide();
    })

</script>

</body>

</html>
Ответить с цитированием
  #4 (permalink)  
Старый 14.11.2015, 16:56
Интересующийся
Отправить личное сообщение для barakuda Посмотреть профиль Найти все сообщения от barakuda
 
Регистрация: 14.11.2015
Сообщений: 17

Немного не так, получается span должен подняться вверх немного, а в тексте вылазит input, на месте спана инпут, а спан будет стоять над ним
Ответить с цитированием
  #5 (permalink)  
Старый 14.11.2015, 17:00
Интересующийся
Отправить личное сообщение для barakuda Посмотреть профиль Найти все сообщения от barakuda
 
Регистрация: 14.11.2015
Сообщений: 17

http://vk.com/html_css_php_help?w=wall-42967112_8102

вот на картинке глянь как должно быть
Ответить с цитированием
  #6 (permalink)  
Старый 14.11.2015, 17:00
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

Ничего не понял )
Ответить с цитированием
  #7 (permalink)  
Старый 14.11.2015, 17:05
Интересующийся
Отправить личное сообщение для barakuda Посмотреть профиль Найти все сообщения от barakuda
 
Регистрация: 14.11.2015
Сообщений: 17

Вот перейди по ссылке и открой картинку!

вот при клике на зеленый спан, должен вылазить инпут

так никаких инпутов нет, а когда кликаешь на спан должно быть так как в начале, спан вверху а на его месте инпут
Ответить с цитированием
  #8 (permalink)  
Старый 14.11.2015, 17:07
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

barakuda,
понял , сейчас попробую сделать
Ответить с цитированием
  #9 (permalink)  
Старый 14.11.2015, 17:10
Интересующийся
Отправить личное сообщение для barakuda Посмотреть профиль Найти все сообщения от barakuda
 
Регистрация: 14.11.2015
Сообщений: 17

Давай, буду очень благодарен, ибо просидел уже часа 3 над этим моментом, повис окончательно!
Ответить с цитированием
  #10 (permalink)  
Старый 14.11.2015, 17:22
Профессор
Отправить личное сообщение для Mess4me Посмотреть профиль Найти все сообщения от Mess4me
 
Регистрация: 03.11.2014
Сообщений: 263

barakuda,
пока так , если успею доделаю - просто могу сейчас убежать.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <style>
        span {
            background-color: dimgrey;
            color: white;
            border-radius: 3px;
            cursor: pointer;
        }

        .tooltip {
            position: fixed;
            padding: 10px 20px;
            /* красивости... */

            border: 1px solid #b3c9ce;
            border-radius: 4px;
            text-align: center;
            font: italic 14px/1.3 arial, sans-serif;
            color: #333;
            background: #fff;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
<p>1</p>
 
<p>My family <span>to at</span> big. Lorem ipsum dolor sit amet, con <span>to at</span> adipisicing elit. Quod similique
    est, autem
    <span>to at</span> voluptatem ipsam error eius rumquam non soluta aut impedit dolor magnam, exerci- tationem
    blanditiis voluptatibus praesentium id, recusandae. </p>


<script>


    $('span').click(function (event) {

        var target = event.target;
        if(target.tagName != 'SPAN') return;
        if(target.className == 'tooltip') return;
        var input = document.createElement('input');
        input.value = 'Hello';
        target.parentNode.insertBefore(input,target);
        target.className = 'tooltip';
        document.body.appendChild(target);
        var coords = input.getBoundingClientRect();

        var left = coords.left + (input.offsetWidth - target.offsetWidth) / 2;
        var top = coords.top - target.offsetHeight - 5;
        target.style.left = left + 'px';
        target.style.top = top + 'px';
    })

</script>

</body>

</html>

Последний раз редактировалось Mess4me, 14.11.2015 в 17:25.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Появление/исчезновение дива при клике на ссылку nickostyle jQuery 5 18.01.2016 03:03
Как при прокрутке страницы оставлять элемент на месте? FRIE jQuery 1 02.08.2012 20:54
закрыти diva при клике вне его Hugo_O Элементы интерфейса 14 21.05.2010 14:39
Закрыть элемент при клике вне его masterm Общие вопросы Javascript 3 31.07.2009 11:27