При клике на элемент он поднимается вверх, а на его месте появляется другой!
<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 |
Ребят, помогите, нужно срочно сделать
|
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> |
Немного не так, получается span должен подняться вверх немного, а в тексте вылазит input, на месте спана инпут, а спан будет стоять над ним
|
|
Ничего не понял )
|
Вот перейди по ссылке и открой картинку!
вот при клике на зеленый спан, должен вылазить инпут так никаких инпутов нет, а когда кликаешь на спан должно быть так как в начале, спан вверху а на его месте инпут |
barakuda,
понял , сейчас попробую сделать |
Давай, буду очень благодарен, ибо просидел уже часа 3 над этим моментом, повис окончательно!
|
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> |
Часовой пояс GMT +3, время: 13:52. |