SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2006
    Posts
    151
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Funny stuff in IE/Early versions of Firefox

    I'm in the middle of creating a script that converts a table into a editable spreadsheet. What happens is if you are currently editing a cell, you can move around between the cells by using the arrow keys, or the mouse wheel. This seems to work mostly fine.

    You can also click a cell to edit it, and the cell contents are supposed to be replaced with a text input with the value of the text inside the table cell, and then this process is reversed when the user either clicks submit (which I haven't bothered working into the spreadsheet yet) or navigates away from the current text input (using the arrow keys, mouse wheel or clicking on another table cell).

    However this process of clicking to edit doesn't seem to be working particularly well. What I was hoping to do was to hold the id of the current cell in a global variable, and then update this id every time a new cell was clicked.

    This is producing very unexpected results in IE and Firefox in various different OS. For instance I tried to show this script off to my parents over Christmas, and even in Firefox 2.0.1 in Windows 98, the onclick stuff completely failed.

    Here's the relevant code. I've removed the parsing code (as I am attempting to recreate some of the more common functions of a spreadsheet by parsing the user input) as it is not necessary to look through.

    Btw, I'm not looking for comments like, 'That's a really stupid way of doing that', I'd rather hear things like 'Oh, that's not the best way of doing that, try this way instead', because I learn nothing from the first comment.

    Link to example

    Code:
    /*
     * Copyright December 2006, David Wees
     * You may use this script, but please do not claim it as your own.
     *
     */
    var curId;
    function addHandler() {
    	var td = document.getElementsByTagName("td");
    	for (var i = 0; i < td.length; i++) {
    		td[i].id = "td" + i;
    		td[i].onclick = function () { this.onclick = ""; curId = this.id; var curText = this.innerHTML; this.innerHTML = '<input id="cell" type="text" size="12" onblur="save(curId);" value="' + curText + '"/>'; var cell = $e('cell'); cell.focus();}
    	}
    	return;
    }
    
    function save(el) {
    	var currentCell = $e(el);
    	var cell = $e('cell');
    	var text = cell.value;
    	currentCell.removeChild(cell);
    	text = parseT(text);
    	currentCell.innerHTML = text;
    	currentCell.onclick = function () { this.onclick = ""; curId = this.id; var curText = this.innerHTML; this.innerHTML = '<input id="cell" type="text" size="12" onblur="save(curId);" value="' + curText + '"/>'; var cell = $e('cell'); cell.focus();}
    	currentCell.style.border = "1px solid #666666";	
    	return;
    }
    
    /* From http://adomas.org/javascript-mouse-wheel/index.html
     * modified to allow jumping between cells in the spreadsheet.
     */
    function handle(delta) {
    	if (!curId) {
    		return;
    	}
    	var id = curId.replace("td", "");
    	if (delta == "d") {
    		if (id > 132) {
    			return;
    		}
    		save(curId);
    		id = Math.floor(id/7)*7 + 7 + id&#37;7;
    		handleDelta(id);
    		return;
    	}
    	if (delta == "u") {
    		if (id < 7) {
    			return;
    		}
    		save(curId);
    		id = Math.floor(id/7)*7 - 7 + id%7;
    		handleDelta(id);
    		return;
    	}	
    	if (delta == "l") {
    		if (id%7 < 1) {
    			return;
    		}
    		save(curId);
    		id--;
    		handleDelta(id);
    		return;
    	} 
    	if (delta == "r" ) {
    		if (id%7 > 5) {
    			return;
    		}
    		save(curId);
    		id++;
    		handleDelta(id);
    		return;		
    	}
    	return;
    }
    
    function handleDelta(id) {
    	curId = "td" + id;
    	var cell = $e(curId);
    	var text = cell.innerHTML;
    	cell.innerHTML = '<input id="cell" type="text" size="12" onblur="save(curId);" value="' + text + '"/>';
    	cell = $e('cell');
    	cell.focus();
    	return;
    }
    
    /* 
     *  Also from http://adomas.org/javascript-mouse-wheel/index.html
     */
    function wheel(event){
    	var delta = 0;
    	if (!event) event = window.event;
    	if (event.wheelDelta) {
    		delta = event.wheelDelta/120; 
    		if (window.opera) delta = -delta;
    	} else if (event.detail) {
    		delta = -event.detail/3;
    	}
    	if (delta)
    		if (delta > 0) {
    			delta = "u";
    		} else {
    			delta = "d";
    		}
    		handle(delta);
            if (event.preventDefault)
                    event.preventDefault();
            event.returnValue = false;
    }
    Last edited by dwees; Feb 9, 2007 at 06:34. Reason: Hello typo!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •