Форум

barakuda · #1 (**permalink**) 14.11.2015, 16:19

My family to at big. Lorem ipsum dolor sit amet, con to at adipisicing elit. Quod similique est, autem to at voluptatem ipsam error eius rumquam non soluta aut impedit dolor magnam, exerci- tationem blanditiis voluptatibus praesentium id, recusandae. 

при клике на он должен подниматься вверх и вместо него в тексте должен появится input

barakuda · #2 (**permalink**) 14.11.2015, 16:19

Ребят, помогите, нужно срочно сделать

Mess4me · #3 (**permalink**) 14.11.2015, 16:40

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>

barakuda · #4 (**permalink**) 14.11.2015, 16:56

Немного не так, получается span должен подняться вверх немного, а в тексте вылазит input, на месте спана инпут, а спан будет стоять над ним

barakuda · #5 (**permalink**) 14.11.2015, 17:00

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

вот на картинке глянь как должно быть

Mess4me · #6 (**permalink**) 14.11.2015, 17:00

Ничего не понял )

barakuda · #7 (**permalink**) 14.11.2015, 17:05

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

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

так никаких инпутов нет, а когда кликаешь на спан должно быть так как в начале, спан вверху а на его месте инпут

Mess4me · #8 (**permalink**) 14.11.2015, 17:07

barakuda,
понял , сейчас попробую сделать

barakuda · #9 (**permalink**) 14.11.2015, 17:10

Давай, буду очень благодарен, ибо просидел уже часа 3 над этим моментом, повис окончательно!

Mess4me · #10 (**permalink**) 14.11.2015, 17:22

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>

Форум

Справочник

Discord чат

Курсы javascript