требуется человек знающий JavaScript
1. spletni (20.07.2012 / 18:23)Извините, но кто может подсказать скрипт, функции которого: при наборе текста на изображение, текст набирался онлайн, а не по клацанью кнопки?
2. ZipeR (20.07.2012 / 18:26)
Типа аси когда тебе пишут,а там показывается в виде карандашом ?
3. spletni (20.07.2012 / 18:28)
2, нет, когда ввожу в поле textarea чтобы этот же текст рядом писался онлайн
4. Артур (20.07.2012 / 18:29)
onkeydown
5. spletni (20.07.2012 / 18:31)
4, мне это о многом говорит
сейчас прогуглю)
Добавлено через 09:12 сек.
4, функция не много не та
6. Петр (20.07.2012 / 18:44)
5. spletni, можно реализовать с помощью этого свойства.
7. spletni (20.07.2012 / 18:48)
6, честно говоря в js мне понадобятся две функции: онлайн трансляция текста и онлайн перетаскивание текста вдоль и поперёк по картинке
если кто-то решиться взяться за "не дорого" готов сотрудничать
8. Артур (20.07.2012 / 19:17)
Скачай библиотеку YUI с сайта http://yuilibrary.com/ там в меню Quick start есть подменю Download.
Перемести библиотеку к себе на хост и подключи в нужном месте вот так:
<script charset="utf-8" src="адрес до библиотеки/yui/yui-min.js" type="text/javascript"></script>
Потом используй вот такой код:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script charset="utf-8" src="../tools/YUI/yui/yui-min.js" type="text/javascript"></script>
<style type="text/css">
#container{
width: 400px;
height: 400px;
border: 1px solid black;
}
#text{
height: 200px;
width: 400px;
}
#label{
position: absolute;
width: auto;
}
.label{
border: 1px dotted black;
}
</style>
</head>
<body>
<div id="container">
<div id="label"></div>
</div>
<textarea id="text"></textarea>
<script type="text/javascript">
// <![CDATA[
// Открываем песочницу
YUI().use('node', 'dd-constrain', function(Y){
// Устанавливаем обработчик на ввод с клавиатуры
Y.one('#text').on('keyup', function(e){
var label = Y.one('#label');
// Записываем содержимое текстового поля в label
label.setHTML(this.get('value'));
// Если label не пуст, добавляем ему стиль с рамкой
if(label.getHTML() != ''){
label.addClass('label');
}
// Иначе убираем стиль
else{
label.removeClass('label');
}
});
// Добавляем плагины для перемещения label в пределах container
new Y.DD.Drag({node: '#label'}).plug(Y.Plugin.DDConstrained, {
constrain2node: '#container'
});
});
// ]]>
</script>
</body>
</html>
Добавлено через 09:49 сек.
Вот рабочий пример
http://example.wen.ru/index.html
9. Артур (20.07.2012 / 19:28)
Кстати, как можешь заметить из примера, можно не качать библиотеку, а использовать ее удаленно по ссылке
http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js
Подключаешь как и локальную и ничего качать не нужно
10. spletni (21.07.2012 / 00:31)
9, вот знаешь кто ты? знаешь кто? СПАСИТЕЛЬ ЦИВИЛИЗАЦИИ!!!
спасибище огромное тебе! хороший форум, хорошие тут люди(большинство
)
11. Артур (21.07.2012 / 00:38)
Незачто
12. Дмитрий (21.07.2012 / 01:03)
8. Башка, не сочти за грубость, но это смотрится слишком коряво и массивно. Да и немного неправильно оно работает. Можно заменить тремя строчками кода.
Ради интереса введи "><script>alert()</script>
13. Артур (21.07.2012 / 01:29)
Целью был рабочий скрипт, а не хороший рабочий скрипт
Добавлено через 00:29 сек.
Давай три строчки свои )
Добавлено через 02:51 сек.
Оу, ты наверно примера автора не видел просто ) Там именно такая реализация была, только кривенькая
Добавлено через 08:22 сек.
Кстати, я не сторонник этих jQuery цепочек. Если их использование очевидно, то да, но чаще их сложнее читать мне, чем старый добрый код без них, потому стараюсь не засовывать всю логику сайта в одну цепочку. Чтоб разобрать такую цепочку, приходится читать ее от начала, а обычный код можно с середины начать
14. ramzes (21.07.2012 / 03:05)
dima.london (21 Июля 2012 / 01:03)
Ради интереса введи "><script>alert()</script>
<div onclick="alert('js is complite');">script</div>
15. Дмитрий (21.07.2012 / 04:25)
Башка (21 Июля 2012 / 00:29)Вот сварганил demo страничку на скорую руку. ТЫК
Давай три строчки свои )
Описание внизу.
16. ramzes (21.07.2012 / 06:11)
15. dima.london, с телефона не реагирует на русские символы
17. Дмитрий (21.07.2012 / 07:45)
16. ramzes, попробуй сейчас. Переписал фильтрацию через юникод. По идее должно работать везде.
18. Артур (21.07.2012 / 11:22)
Лондон, ты не понял идеи. Пол дела чтоб это появлялось внизу, у меня то что появляется еще drag-and-drop. Автор в теме выложил кривой пример работы, ему нужно было что то написать, а потом перетаскивать это по картинке, а не просто написать )
Добавлено через 02:44 сек.
И это у меня еще он массивный ? )))
Кстати, если уж создаешь объекты, то лучше пользуйся нотацией Дугласа Крокфорда (Douglas Crockford), она уже стала неким стандартом создания объектов
Добавлено через 04:30 сек.
А чтоб код появлялся внизу, то вот:
$('#text').on('keyup', function(e){$('#label').setHTML($(this).attr('value'))})
В одну строчку
19. Дмитрий (21.07.2012 / 12:41)
18. Башка, ок, ща сбацаю.
Все равно считаю, что для этой цели не обязательно подгружать 78 килобайт ненужного кода.
20. Артур (21.07.2012 / 12:43)
Согласен, есть и более легковесные решения. И там не 78, там больше ;) )))
21. Дмитрий (22.07.2012 / 15:37)
20. Башка, сори, что протормозил. Работы привалило. Все же поздно, но сделал. Пример ТЫК.
Описание внизу страницы. Там подключается 3 скрипта:
jQuery 1.4.2.min.js, Memgenerator.js и jQuery.drag.js
Memgenerator.js выполняет ф-ю автоматического ввода текста на картинку и отправку данных.
jQuery.drag.js выполняет ф-ю перемещения текста по картинке (нашел когда-то где-то, и допилил для себя).
jQuery 1.4.2.min.js необходим для работы скрипта jQuery.drag.js
По сути, перемещение можно сделать и на нативном JS, тогда не нужно будет подключать 78 кб jQuery
Сначала хотел это сделать, но потом плюнул. Работы привалило
22. Артур (22.07.2012 / 15:44)
Вот и я говорю - быстро и эффективно ) Почему бы не на YUI?
23. spletni (22.07.2012 / 15:47)
я тоже воспользовался jquery ... но yui неизведанна ещё. а jquery библиотека популярна)
24. Артур (22.07.2012 / 15:48)
Она профессиональнее. Мы на работе ею заменяем swing в клиент-серверном java приложении ) Скоро переведу книгу по YUI и выложу
25. Дмитрий (22.07.2012 / 15:52)
Башка (22 Июля 2012 / 14:44)Потому что YUI весит очень много. И для нее все равно надо jQuery вроде бы, насколько я помню. Я же сделал это двумя скриптами по 2 кб каждый. Вот почему )) Да и к тому же можно вообще без jQuery сделать. Делов-то
Почему бы не на YUI?
Я просто являюсь фреймворко-фобом. Каждый фреймворк или библиотека несет в себе тонны кода, который ты не будешь никогда использовать, но этот код будет тормозить работу твоего сайта. Проще написать самому, но только то, что тебе нужно.
Вот живой пример. Зачем подключать и таскать за собой сотню килобайт YUI, если можно подумать и вложиться всего в 2 кб
Собсна, на тему фреймворков надо будет как-то статью написать
26. Артур (22.07.2012 / 15:58)
25. dima.london, ты очень плохо знаком с YUI ;)
27. ramzes (22.07.2012 / 17:15)
dima.london (21 Июля 2012 / 07:45)Все так же, не реагирует пока не кириллический символ не введешь
16. ramzes, попробуй сейчас. Переписал фильтрацию через юникод. По идее должно работать везде.
28. spletni (22.07.2012 / 17:38)
+ вопрос, когда у тебя перетаскиваешь текст, он не выделяется, что способствовало этому?
так как, когда я у себя перетаскиваю и дохожу до границы изображения то текст начинает отчасти выделяться...
29. Артур (22.07.2012 / 17:53)
Там несколько ухищрений есть, если пользуешься фреймворком, можно об этом не думать, а вообще там что то связано со стилем для хрома и ff, и функцией cancelSelect для ie вроде. Уже не помню, писал когда то давно от нечего делать drag-and-drop, уже частично подзабыл
30. spletni (22.07.2012 / 17:57)
29, данный скрипт нашёл, но там ведь для всего текста на странице, а мне это излишне)
31. Дмитрий (22.07.2012 / 18:02)
30. monofoto, посмотри на пост 21.
32. spletni (22.07.2012 / 18:06)
31. dima.london, смотрел, но в моём случае (без знания ajax) я не смогу соединить js и php
33. Дмитрий (22.07.2012 / 20:24)
monofoto (22 Июля 2012 / 17:06)зачем? Я все уже сделал за тебя. JS передает в форму количество пикселей, на сколько смещен текст. Просто отправляй эти данные на сервер и средствами PHP обрабатывай их.
31. dima.london, смотрел, но в моём случае (без знания ajax) я не смогу соединить js и php
34. Петр (23.07.2012 / 10:23)
Ради интереса решил написать это на js. Сжатая и почти не оптимизированная версия весит около 1 кб. http://wapsait.pp.ru/imieee.js Для выполнения нужно в странице Димы Лондона убрать все скрипты и перед </body> вставить мой.
35. Артур (23.07.2012 / 10:38)
Она же не кроссбраузерное. Нам такого не надо )
36. Петр (23.07.2012 / 11:01)
35. Башка, в каком браузере не работает?
37. Артур (23.07.2012 / 12:10)
IE 8 под XP, один из самых распространенных
38. Петр (23.07.2012 / 12:55)
37. Башка, ты проверял? У меня в XP стоит Utilu IE Collection и в IE 8 оттуда все прекрасно работает.
39. Петр (23.07.2012 / 13:25)
Установил на хрюшу отдельную версию, все также ок. IE 8.0.6001.18702
40. Артур (23.07.2012 / 13:39)
Странно, мой не хочет, выделяет текст на странице при перетаскивании и немного глючит, бывает слетает drag и приходится подцеплять занаво
41. spletni (07.08.2012 / 16:44)
какую функцию можно заделать, чтобы при нажатии на Ентер(перенос строки на новую), на картинке тоже соответственно предложение переносилось на новую?
в ява скрипте понятно, а как это в пыхе прописать?
через wordwrape ?
42. Артур (07.08.2012 / 17:02)
А пых с клавиатурой не работает (его серверный вариант)
43. Кевин Митник (07.08.2012 / 17:06)
#42 а есть клиентская версия?)
Артем, имеешь ввиду как нанести форматированный текст на картинку? только GD2 и ImageMagick
44. spletni (07.08.2012 / 17:09)
43, да, как нанести на картинку уже форматированный текст, то есть вдруг пользователь нажмёт энтер, после определённого символа и чтобы этот энтер перенесся в wordwrape ?
или же лучше задействовать imagemagick/GD2 ?
через ajax прийдётся ?
45. Артур (07.08.2012 / 17:09)
43. Кевин Митник_HHTeam, представляешь?
46. Дмитрий (07.08.2012 / 17:17)
monofoto (7 Августа 2012 / 15:44)Чувак, за тебя уже все сделали. 4 разных варианта.
какую функцию можно заделать, чтобы при нажатии на Ентер(перенос строки на новую), на картинке тоже соответственно предложение переносилось на новую?
в ява скрипте понятно, а как это в пыхе прописать?
через wordwrape ?
Пересмотри каждый. Где и как сделано. Что тебе еще надо??? Скрипт написать и на сервер выложить? Да ради бога.
47. spletni (07.08.2012 / 17:18)
ахаха, всем спасибо, решил задачу)
Добавлено через 00:44 сек.
46, тебе огромное спасибо за скрипт, который я так и не заюзал)
но всё равно спасибо)
48. Кевин Митник (07.08.2012 / 17:59)
#45 к сожалению нет такого)
49. Артур (07.08.2012 / 19:55)
48. Кевин Митник_HHTeam, к счастью мало кто этим интересуется, не дай бог вся эта куча "вап-программистов" польется в зону ПО
50. spletni (07.08.2012 / 23:08)
и вновь вопрос, извините за наглость, форумчане:
когда я нажимаю "enter"(перенос строки) в js он отображается как пробел, как решить эту проблему?
51. Дмитрий (08.08.2012 / 02:03)
50. monofoto, http://www.dimavip.ru/memgenerator/js/memgenerator.js
Седьмая строка.
52. Алексей (08.08.2012 / 10:02)
dima.london (8 Августа 2012 / 02:03)
50. monofoto, http://www.dimavip.ru/memgenerator/js/memgenerator.js
Седьмая строка.
case 0x0D: result += ""; break; default: result += ((code>0x80&&code<0xC0)||code>0x500)?"&#"+code+";":val.charAt(i);break;1 cтрока бессмысленна.
2ую строку можно записать так
case code > 0x80 && code < 0xC0: case code > 0x500: result+="&#"+code+";"; break; default: result+=val.charAt(i); break;так логичнее будет
53. spletni (21.08.2012 / 18:52)
а как совместить твой(dima.london) код js с моим? читаю литературу, пытаюсь, ничего не нашёл дельного, решил отписать сюда...
[quote] index.html
<textarea onkeyup="Print.Event(this.value, 'test');" id="text"></textarea>
<div class="box">
<span id="test" style="position: relative; cursor:move;font-family: arial
sans-serif; color:#000" class="ui-draggable">
</span></div>
54. Андрей (21.08.2012 / 19:07)
51: dima.london, извини за оффтоп, но можешь допилить свой скрипт так, чтобы он картинку с надписью сохранял *_*
URL: https://visavi.net/topics/33363