Jump to content


Photo

Special character editor


  • Please log in to reply
2 replies to this topic

#1 tomjerry

tomjerry

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 28 March 2013 - 01:05 AM

<!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.



#2 MarPlo

MarPlo

    Advanced Member

  • Members
  • PipPipPip
  • 80 posts

Posted 28 March 2013 - 01:26 PM

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';
}

Free Web Courses HTML, CSS, Flash-AS3
Web Programming: AJAX Course and PHP-MySQL Course video Tutorials
Good Javascript and jQuery course for beginners


#3 tomjerry

tomjerry

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 31 March 2013 - 10:06 PM

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.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com