Question

I’ve been working on a little project and been trying to make my own debug console kinda thing, something that i can customize to what i need instead of using firebug.. so far i’ve got the two parts i need working but not togehter. I have a script that is going to report what the mouse enters and clicks on, it workded printing directly to the window DIV i have set up,, then yesterday ran across a JQuery console which i really liked, i cut out everything i didn’t need and it works fine within its self, but not sure how to pass the data from my other method to that one,, i compiled the basic stuff to try to get it working… its probably something simple as ussual with me LOL and i could be confusing myself and making it harder then it needs to be

if anyone could help out that would be great

JsFiddle

Answer 1

after having a day off from work to sit down and actually mess with it for a while, reading Trip’s comment LOL i decided to just go through the thing and clean it up as if it was working and took out a couple dozen un-needed functions and wrapped the main guts i was needing into one function that contained everything and made sure i wasn’t using multiple variables to avoid conflict and some tweaking i got it to work.. so my conclusion from it there was to many functions leftover after i was deleting the stuff i didn’t need. so heres the working code,, just incase someone is searching for something like this

JsFiddle

big thanks to Trip for point out all the Methods being used

    function clock(){
    var dayarray        = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
    var montharray        = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
    var suffix             = "AM";    

    var currentTime    = new Date();
    var hours         = currentTime.getHours();
    var minutes     = currentTime.getMinutes();
    var mydate        = new Date();
    var year        = mydate.getFullYear();
    var day            = mydate.getDay();
    var month        = mydate.getMonth();
    var daym        = mydate.getDate();

    if(hours >= 12){
        suffix = "PM";
        hours = hours - 12;
    }
    if(hours == 0){
        hours = 12;
    }
    if(minutes < 10){
        minutes = "0" + minutes
    }
    if(daym<10){
        daym="0"+daym
    }

    //alert(hours);
    return [hours, minutes, suffix, month, day, year, dayarray, montharray];
}
$('#consolex').click(function() { loadConsole(); });
var xD;

function loadConsole(){
if (document.forms[0].console.checked) {
        // if CHECKED than LOAD Console
            if (window.twd_console) {
                window.twd_console.toggle();
            } else {
                function init($) {
                    function HistoryManager() {
                        this.curr = -1;
                        this.entries = [];
                    };
                    HistoryManager.prototype = {
                        push: function(item) {
                            if (this.entries.length && this.entries[0] == item) return;
                            if (item.match(/^\s*$/)) return;
                            this.entries.unshift(item);
                            this.curr = -1;
                        },
                        scroll: function(direction) {
                            var moveTo = this.curr + (direction == 'prev' ? 1 : -1);
                            if (moveTo >= 0 && moveTo < this.entries.length) {
                                this.curr = moveTo;
                                return this.entries[this.curr];
                            } else if (moveTo == -1) {
                                this.curr = moveTo;
                                return '';
                            } else {
                                return null;
                            }
                        }
                    };
                    var toolbar = 'hello';
                    var context = {},
                        history = new HistoryManager(),
                        $drag = $('<div/>').css({
                            backgroundColor: '#e0e0e0',
                            border: '1px solid #a0a0a0',
                            fontSize: '11px',
                            fontFamily: 'sans-serif',
                            lineHeight: 1,
                            padding: '5px',
                            marginBottom: '7px',
                            cursor: 'pointer',
                            textAlign: 'right'
                        }).html(toolbar),
                        $log = $('<div/>').css({
                            fontSize: '11px',
                            fontFamily: 'monospace',
                            color: 'white',
                            marginBottom: '7px',
                            height: '155px',
                            overflow: 'auto',
                            border: '1px solid #a0a0a0',
                            padding: '5px',
                            textAlign: 'left'
                        }),
                        $dummy = $('<div/>');

                    xD = function append(text, act, tag, id, color) {
                        var aX = ' »    ', // Bullet
                        bX = '['+ clock()[0]+':'+clock()[1]+':'+clock()[2]+']  ', // Timestamp
                        cX = '  ERROR  ', //ERROR
                        dX = '  Location  ', //Location of ERROR
                        eX = '  ID Location  ', //ID Location
                        fX = '  Cause  '; //Cause of ERROR
                        $log.append($('<div/>').css({
                            'color': color || 'black',
                            margin: 0,
                            padding: 0
                        }).text(aX).append(bX).append(text).append(act).append(tag).append(id));
                        $log[0].scrollTop = $log[0].scrollHeight;
                    };

                    $(document).mousemove(function(evt) {
                        if (dragging) $container.css({
                            left: evt.pageX - dragging[0],
                            top: evt.pageY - dragging[1]
                        });
                    });

                    var pos = ($.browser.msie && $.browser.version < 7) ? 'absolute' : 'fixed';

                    var $container = $('<div/>').css({
                        backgroundColor: 'white',
                        padding: '7px',
                        position: pos,
                        opacity: 0.9,
                        top: '10px',
                        right: '10px',
                        width: '550px',
                        height: '200px',
                        border: '1px solid #000',
                        zIndex: 99999
                    }).appendTo(document.body);

                    $container.append($drag).append($log);

                    //xD('jQuery initialised!', 'green');
                    //xD('(using jQuery version ' + $.fn.jquery + ')');
                    //xD('jQuery initialised!', 'green');
                    //xD('(using jQuery version ' + $.fn.jquery + ')');
                    //xD('jQuery initialised!', 'green');
                    //xD('(using jQuery version ' + $.fn.jquery + ')');
                    //xD('jQuery initialised!', 'green');
                    //xD('(using jQuery version ' + $.fn.jquery + ')');

                    window.twd_console = $container;

                };

                if (typeof jQuery == 'undefined' || !jQuery.fn.jquery.match(/^1\.7/)) {
                    var e = document.createElement('script'),
                        jq = null;
                    e.onload = function() {
                        jq = jQuery;
                        jQuery.noConflict(true);
                        init(jq);
                    };
                    e.setAttribute('type', 'text/javascript');
                    e.setAttribute('src', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');
                    document.body.appendChild(e);
                } else {
                    init(jQuery);
                }
            }
    } else if (!document.forms[0].console.checked) {
        window.twd_console.hide();
    }    
    mouse(true);
}
        function mouse(bol){
            var d = $("*", document.body);

            if(bol){              
                // Cancel mousedown.
                d.mousedown(function(event) {
                    var x = $(this).get(0),
                    y = x.tagName,
                    z = x.id;
                    switch (event.which) {
                        case 1:
                            //alert('Left mouse button click: ' + x.tagName);

                            xD(x.tagName, '  Left mouse button  ','  '+ x.tagName+'  ','  '+ x.id+'  ', 'purple');
                            //xD(x.id, 'red');
                            break;
                        case 2:
                            //alert('Middle mouse button click: ' + x.tagName);
                            xD(x.tagName, '  Centermouse button  ', x.tagName, x.id, 'purple');
                            break;
                        case 3:
                            //alert('Right mouse button click: ' + x.tagName);
                            xD(x.tagName, '  Right mouse button  ', x.tagName, x.id, 'purple');
                            return null;
                            break;
                        default:
                            xD(x.tagName, '  mouse UNKNOWN  ', x.tagName, x.id, 'purple');
                    }
                });
                // Transfer focus, if already open.
                d.mouseenter(function(event) {
                    var x = $(this).get(0),
                    y = x.tagName,
                    z = x.id;
                   // $('#window').append('mouse entered' + x.tagName + '<br />');
                    try{
                        xD(y, '  Mouse Entered  ', y, z, 'blue');
                    //xD(y, 'blue');
                    }catch(err){
                        alert(err);
                }
                });            
            }
        };