Javascript.RU

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

Скрыть 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);
Ответить с цитированием
  #2 (permalink)  
Старый 14.04.2014, 20:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>

Последний раз редактировалось рони, 14.04.2014 в 21:18.
Ответить с цитированием
  #3 (permalink)  
Старый 14.04.2014, 21:10
Аспирант
Отправить личное сообщение для SLameN Посмотреть профиль Найти все сообщения от SLameN
 
Регистрация: 13.08.2012
Сообщений: 70

Большое спасибо! Скажите, пожалуйста еще такой момент:
Может объединить все в 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, 14.04.2014 в 21:19. Причина: Не заметил, что у вас тоже работает клик по смайлу :). Поменял сам на alt
Ответить с цитированием
  #4 (permalink)  
Старый 14.04.2014, 21:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

SLameN,замените 27 строку на этот код -- посмотрите там как можно получить alt
var smile = $(event.target).attr('alt');
            var text_comment = $.trim($("#text_comment").val());
            $("#text_comment").focus().val(text_comment + ' ' + smile + ' ');
Ответить с цитированием
  #5 (permalink)  
Старый 14.04.2014, 21:23
Аспирант
Отправить личное сообщение для SLameN Посмотреть профиль Найти все сообщения от SLameN
 
Регистрация: 13.08.2012
Сообщений: 70

Блин, простите за наглость, но есть нюанс, например я хочу поставить 2 смайла подряд, а он затирает предыдущую запись. Или например: поставить смайл, потом текст, смайл и текст И пробелы сделать, как в примере:
$("#text_comment").focus().val(text_comment + ' ' + smile + ' ');

Все пинаю себя начать изучать JS... Простите еще раз за наглость
Ответить с цитированием
  #6 (permalink)  
Старый 14.04.2014, 21:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>
Ответить с цитированием
  #7 (permalink)  
Старый 14.04.2014, 21:27
Аспирант
Отправить личное сообщение для SLameN Посмотреть профиль Найти все сообщения от SLameN
 
Регистрация: 13.08.2012
Сообщений: 70

Огромное спасибо! :смайлик с пивом:
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поменять картинку у одной из img, а потом при нажатии на другой img, вернуть обратно. megasan84 Events/DOM/Window 16 26.10.2014 13:22
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 17:08
Помогите со скриптом скользящего div при нажатии Michael.Tretyakov Элементы интерфейса 2 01.09.2012 21:01
При нажатии на маленькую картинку она появлялась в большом окне frost18 Элементы интерфейса 3 20.07.2011 14:32
Отображение ссылок при нажатии на картинку deNSe_01 Events/DOM/Window 5 27.06.2011 10:39