Special character editor

tomjerry · March 28, 2013

<!DOCTYPE html>
<html>
<head>
    <style>
        .popup {
            position: absolute;
            left: 100px;
            top: 100px;
            border: 1px solid #000;
            background-color: #f0f0f0;
        }

        .popup .symbol {
            display: inline-block;
            padding: 5px;
            margin: 10px;
            border: 1px solid #000;
        }
    </style>
    <script>
        var symbolPopup = null;
        function CreateSymbolPopup () {
            if (symbolPopup) {
                return;
            }

            symbolPopup = document.createElement ('div');
            symbolPopup.className = "popup";

            var symbols = [8719, 8721, 8730];
            for (var i = 0; i < symbols.length; i++) {
                var symbolButton = document.createElement ('span');
                symbolButton.innerHTML = '' + symbols[i] + ';';
                symbolButton.onclick = AddSymbol;
                symbolButton.className = "symbol";
                symbolPopup.appendChild (symbolButton);
            }
            document.body.appendChild (symbolPopup);
        }

        function ShowSymbols () {
            CreateSymbolPopup ();
            symbolPopup.style.display = "";
        }
        function HideSymbols () {
            if (symbolPopup) {
                symbolPopup.style.display = "none";
            }
        }

        function AddSymbol () {
            var editor = document.getElementById ('editor');
            editor.value += this.innerHTML;
            HideSymbols ();
        }
    </script>
</head>
<body>
    <button onclick="ShowSymbols ()">Symbols</button>
    <textarea id="editor"></textarea>
</body>
</html>

The above is my code. By clicking the symbol button,the editor is opening. It is fine. But i also want to do like again by clicking the same button the editor should hide. Please tell me how to do that. No the editor is hiding by selecting the symbol from that editor.

MarPlo · March 28, 2013

Hi,

Try this verion of ShowSymbols() function in your code:

function ShowSymbols() {
  CreateSymbolPopup ();
  if(symbolPopup.style.display == 'block') symbolPopup.style.display = 'none';
  else symbolPopup.style.display = 'block';
}

tomjerry · April 1, 2013

Thanks MarPlo. The above code you have given is that, exactly what i want. Now everything is working fine. Thanks again for the great help.

Sign In

Special character editor

Recommended Posts

tomjerry

Link to comment

Share on other sites

MarPlo

Link to comment

Share on other sites

tomjerry

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information