ansaurus

Question

Answer 1

+1 A:

I guess the issue is actually at all places you are using <div> but it should be just div

like below -

var $editor = $('div').addClass('editor')
      .insertBefore(this.$element)
      .append(this.$element);

Alpesh 2010-10-02 19:01:59

Unfortunately that wasn't the solution, the entire site broke when I tried that. Here's the full code: http://tageno.com/random/editor.js

Tape 2010-10-02 19:18:40

Answer 2

A:

I've rewritten your code a little bit, just to figure out what you're doing. This seems to work for me, unless I didn't understand what the problem is that you're describing. The buttons react to hover as well as click events. Aside from writing the things you're doing differently, there's no substantial change in the code.

I suppose there's a chance that Val was right in that there may be other elements overlaying your buttons. You haven't shown us your CSS, so it's hard to tell what's going on on your side.

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
        <style>
            .bold, .italic, .underline{ width: 50px; height: 20px; background: green; margin: 10px; }
        </style>
    </head>
    <body>
    <textarea class="demo">
    </textarea>
    <script type="text/javascript">
            jQuery(
                function($)
                {
                    (function($){
                        //Constructor to make a new editor.
                        function TEditor(element, opts)
                        {
                            //Load in the element.
                            this.$element = $(element);
                            this.opts = opts;
                            //Let the browser know the object is ready.
                            this.enabled = true;
                        }

                        //The actual editor class.
                        TEditor.prototype = {
                            display: function()
                            {
                                var
                                    $editor = this.$element.wrap('<div class="editor" />').parent(),
                                    $b = $('<div class="button-wrapper" />').appendTo($editor);

                                this.$element.css({height:this.opts.height,width:this.opts.width});
                                //Load up each button.
                                $.each(this.opts.buttons.split(' '), function(i, button)
                                {
                                    //If its an empty string keep going.
                                    if(button == '') return true;

                                    //Generate a button.
                                    $('<div class="' + button.toLowerCase() + '" />')
                                        .data('buttonName', button)
                                        .appendTo($b)
                                        .click(clicked)
                                        .hover(hover, hover);
                                });
                            },
                            enable: function()
                            {
                                this.enabled = true;
                            },
                            disable: function()
                            {
                                this.enabled = false;
                            },
                            validate: function()
                            {
                                if(!this.$element[0].parentNode)
                                {
                                    this.destroy();
                                    this.$element = null;
                                    this.options = null;
                                }
                            }
                        }

                        //JQuery function extension.
                        $.fn.teditor = function(options)
                        {
                            options = $.extend({}, $.fn.teditor.defaults, options);

                            //On load create a new editor.
                            function get(ele)
                            {
                                var editor = $.data(ele, 'editor');
                                if(!editor)
                                {
                                    editor = new TEditor(ele, options);
                                    editor.display();

                                    $.data(ele, 'editor', editor);
                                }
                                return editor;
                            }

                            //Initialize.
                            this.each(function(){get(this);})
                            return this;
                        };

                        $.fn.teditor.defaults = {
                            buttons: 'Bold Italic Underline',
                            height: '150px',
                            width: '500px'
                        };

                        function clicked(e)
                        {
                            alert(e);
                        }
                        function hover(e)
                        {
                            console.log('hover');
                        }
                    })(jQuery);

                    $('.demo').teditor();
                }
            );
        </script>
    </body>
</html>

Thomas 2010-10-02 20:01:58

Interesting enough this worked in plain text, however it still failed to work on the actual page I was applying to. HOWEVER, when I moved the initialization to window.load it worked perfectly fine. Interesting how it worked out like that. Thanks for taking the time to look at it though, much appreciated.

Tape 2010-10-02 20:27:51

ansaurus

tags:

views:

answers:

jQuery events not firing

related questions