Скрыть div при нажатии на картинку
При нажатии на картинку, открывается блок со смайлами.
<img src="tmpl/img/smile/smile.png" id="smilesBtn" alt="Смайлы" title="Добавить смайл">
<div id="smiles">
<span>
<img class="smile" src="tmpl/img/smile/1.gif" alt=":)">
</span>
#smiles {
display: none;
position: absolute;
width: 550px;
border: 1px solid #eee;
}
Что бы хотелось: 1. При нажатии на картинку (smile.png) открывается div smiles 2. Если div smiles открыт, то при нажатии на картинку (smile.png) скрывается div smiles 3. При нажатии на картинку в div - smiles, скрывается 4. Если кликнуть в другом месте экрана, div smiles скрывается Сейчас работает, но куча лишнего кода (много вырезал из другого проекта) и не работает пункт №4. Помогите с данным вопросом
<script type="text/javascript" src="jquery.js"></script>
$(document).ready(function () {
var smiles = $("#smiles");
var inputEl = $("#chatInp");
var smilesBtn = $("#smilesBtn");
$("#smiles span").click(function () {
var shortCode = $.emotions.shortcode($(this).attr("title"));
inputEl.val(inputEl.val() + " " + shortCode + " ");
smiles.toggle();
inputEl.focus();
});
$("#smilesBtn").click(function () {
smiles.toggle();
});
});
(function ($) {
$.emotions = function (text) {
return $.emotions.parse(text);
};
var $t = $.emotions;
$.extend($.emotions, {
settings: {
replacement: '<span title="{eId}" class="emotions emo-{eId}"></span>',
},
shortcode: function(eId){
var $s = $t.settings;
for (var pattern in $s.map) {
if($s.map[pattern] == eId)
return pattern;
}
return "";
},
});
$.fn.emotions = function (action, options) {
this.each(function () {
var el = $(this);
el.html($.emotions(el.html()));
});
};
})(jQuery);
|
SLameN,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#smiles {
display: none;
position: absolute;
width: 550px;
border: 1px solid #eee;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function () {
$("#smilesBtn").on("click", function (event) {
event.stopPropagation()
$("#smiles").slideToggle(800);
});
$(document).on("click", function (event) {
if ($("#smiles").has(event.target).length) {
$("#chatInp").val(event.target.alt); //тут ваш код обработки клика по смайлу
}
$("#smiles").slideUp(500);
});
})
</script>
</head>
<body>
<input id="chatInp" name="" size="50"><br>
<img src="http://javascript.ru/forum/images/smilies/victory.gif" id="smilesBtn" alt="Смайлы" title="Добавить смайл">
<div id="smiles">
<span>
<img class="smile" src="http://javascript.ru/forum/images/smilies/dance3.gif" alt=":)">
</span>
</div>
</body>
</html>
|
Большое спасибо! Скажите, пожалуйста еще такой момент:
Может объединить все в 1 функцию? Вот, что еще есть:
<script type="text/javascript">
$(document).ready(function(){
$(".smile").click(function(){
var smile = $(this).attr('alt');
var text_comment = $.trim($("#text_comment").val());
$("#text_comment").focus().val(text_comment + ' ' + smile + ' ');
});
});
</script>
Я пробовал вставлять в код, который вы написали - //тут ваш код обработки клика по смайлу, но в textarea будет - undefined. Или не нужно заморачиваться и оставить все как есть? P.S. Не заметил, что у вас тоже работает клик по смайлу, только мне нужно получить не url, a alt, это возможно? P.S.S. Поменял сам, большое вам спасибо, отдельно за юмор со смайлами ;) |
SLameN,замените 27 строку на этот код -- посмотрите там как можно получить alt
var smile = $(event.target).attr('alt');
var text_comment = $.trim($("#text_comment").val());
$("#text_comment").focus().val(text_comment + ' ' + smile + ' ');
|
Блин, простите за наглость, но есть нюанс, например я хочу поставить 2 смайла подряд, а он затирает предыдущую запись. Или например: поставить смайл, потом текст, смайл и текст :) И пробелы сделать, как в примере:
$("#text_comment").focus().val(text_comment + ' ' + smile + ' ');
Все пинаю себя начать изучать JS... Простите еще раз за наглость |
SLameN,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#smiles {
display: none;
position: absolute;
width: 550px;
border: 1px solid #eee;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function () {
$("#smilesBtn").on("click", function (event) {
event.stopPropagation()
$("#smiles").slideToggle(800);
});
$(document).on("click", function (event) {
if ($("#smiles").has(event.target).length) {
var smile = event.target.alt;
var text_comment = $.trim($("#text_comment").val());
$("#text_comment").focus().val(text_comment + ' ' + smile + ' ');
}
$("#smiles").slideUp(500);
});
})
</script>
</head>
<body> <textarea id="text_comment"></textarea>
<br>
<img src="http://javascript.ru/forum/images/smilies/victory.gif" id="smilesBtn" alt="Смайлы" title="Добавить смайл">
<div id="smiles">
<span>
<img class="smile" src="http://javascript.ru/forum/images/smilies/dance3.gif" alt=":)">
</span>
</div>
</body>
</html>
|
Огромное спасибо! :смайлик с пивом:
|
| Часовой пояс GMT +3, время: 23:38. |