JavaScript - How To Get A Reference To A Defined Setter?
Hey, I was having some trouble with this, and couldn't seem to find anything similar anywhere. (I'm not sure it's possible).
(I know- for a normal variable there are no pointers in JS.) Normally, you can get an object reference: Code: obj.a = {...}; var pointer = obj.a; //now, changes to pointer cause changes to obj.a However, I would really like to be able to get a reference to a "variable" defined with a setter: Code: obj.__defineSetter__("a",function(input){...}); var pointer = obj.a; //but now: pointer = "..."; //does absolutely nothing! (as expected) Anyone know a way to do this? (without using __defineSetter__ to create pointer). If you are wondering, this is what I would like to be able to do: Code: obj = { a:function(value) { obj.other=value; this.__defineSetter__("a",function(input){ //do something with input, depending on obj.other //reset obj.other //reset obj.a to its original definition }); return ? //return pointer to obj.a } } obj.a("...") = OtherFunctionOutput(); obj.a("...2") = OtherFunctionOutput2(); //etc... (This would be extremely useful in the context I'm working with. Basically, obj.a would be oscillating between a function that modifies some obj properties and a variable that can be set using cleaner syntax than is otherwise possible.) (The simple alternative would look like: ) Code: obj.a("...",OtherFunctionOutput()); (But, I'd really like to get the syntax described above working, if possible) Thanks for any help anyone! Similar TutorialsOk, I have an event handler for a click - ala: using prototype and here is a snippet. Code: spotL = some_length_of_an_array; $R(1,spotL).each(function(n) { $('spot_btn_' + n).style.display = 'block'; $('spot_btn_' + n).observe("click", function(){countdwn_clear();} ); }); Now, that code above fires off AFTER I call an init function that just runs thru some things... But not only that, that function "countdwn_clear()" loads before I call the code above... so its there. Now, the "element" I am trying to attach that event handler in an anchor tag in a UL element ala. Code: <ul id="buttons" style="display: none;"> <li id="spot_btn_1" class="selected"><a href="javascript://" id="btn1">1</a></li> <li id="spot_btn_2"><a href="javascript://" id="btn2">2</a></li> </ul> so, I originally thought it that I was trying to attach an event handler to an element in another that had a display of none -- so I switched it to block and I'd still get this error: countdwn_clear is not defined NOW -- if put this right below the function call, ala: Code: function countdwn_clear(){d_some_code_here} $$("#buttons li")[0].observe("click", function(){countdwn_clear();} ); $$("#buttons li")[1].observe("click", function(){countdwn_clear();} ); ^^^^ that works! why? In one case, i am calling it right below the function and I am using a different reference: $$("#buttons li")[1] in the code where I "build" it, I have: $('spot_btn_' + n).observe("click", function(){countdwn_clear();} ); ???? could it be the event is on the "li" instead of the "a" or ? I don't get it. Any ideas? JavaScript: Code: function test() { alert('dsd'); } HTML: Code: <a href="#" onClick="test()">Test Link</a> JS Error: Code: Error ``ReferenceError: test is not defined'' [x-] in file ``file:///C:/Users/Martyn%20Ball/Desktop/test.php#'', line 1, character 0. Okay wtf. Code: $(document).ready(function(){ var theText=["Text one","Text two","Text three", "Text four"]; // Build the array of text var arrayRows = theText.length; //Get the length of the array (Note: This starts at 1 not 0 like the array) var i=0; //Set a counter document.getElementById('textHere').innerHTML =theText[i]; //Fill in the space with the first piece of text time = setTimeout("next()", 2000); function next() { if (i == (arrayRows-1)) { i = 0; }else { i++; } $("#textHere").fadeOut("slow", function(){ document.getElementById('textHere').innerHTML =theText[i]; $("#textHere").fadeIn("slow"); }); } function prev() { if (i <= 0) { // If its below 0 go to the max i = arrayRows-1; }else { i--; } $("#textHere").fadeOut("slow", function(){ //Fade out the area document.getElementById('textHere').innerHTML =theText[i]; //Change the text to the next piece of text $("#textHere").fadeIn("slow"); // Fade in the area }); } $("#prevText").click(function(e) { e.preventDefault(); // Stop the link being a link prev(); }); $("#nextText").click(function(e) { e.preventDefault(); next(); }); }); When i click the links the functions work, however the setTimeout doesnt, can anyone help me figure this out? I am writing a greasemonkey userscript that simply just takes the underlying width of a td tag, and prints the text in white font over the table so it is viewable to everyone. I wrote the following code Code: function main() { var page = document.getElementById("container"); var td = page.getElementsByTagName("td"); for(i=0; i<td.length; i++) { if(td[i].background-color != "") { td[i].style.color = "#ffffff"; td[i].innerHTML = td[i].width; } } } however, When i installed the script.. firefox tells me that "color" is not defined. Is there another way of doing this? Just wanting the width is white font. Whole thread based on my mistake.
Hi guys my site is not working fireug says that the function 'changevalu()' ia not defined but it is heres my site Code: <!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html" > <title> portl - beta 0.1 </title> <meta name="description" content="portl Is a file transfer system. "> <meta name="author" content="Techyonomics"> <meta name="viewport" content="width=device-width"> <meta name="keywords" content="portl,techyonomics,school,free,privet,trans,files,ui,cool" > <link rel="stylesheet" href="style.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="javascript/text"> function changevalu() { var valueofpress = $(this).text(); var passval = $(#password).val(); $(#password).val(passval + valueofpress); alert(passval + valueofpress); } </script> </head> <body> <header> </header> <div role="main"> <div id="keypad"> <div id="keys"> <div class="key" onmouseup="javascript:changevalu()">1</div> <div class="key">2</div> <div class="key">3</div> </br> </br> </br> <div class="key">4</div> <div class="key">5</div> <div class="key">6</div> </br> </br> </br> <div class="key">7</div> <div class="key">8</div> <div class="key">9</div> </br> </br> </br> <div class="key">C</div> <div class="key">0</div> <div class="key">E</div> </div> <form id="hiddenform" action="login.php" method="post"> <input id="password" type="text" value="" name="pass"></form> </div> </div> <footer> </footer> </body> </html> Here is my function: Code: function mod_selection(val1,val2) { if( -1 != navigator.userAgent.indexOf ("MSIE") ) { var range = document.selection.createRange(); var stored_range = range.duplicate(); if(stored_range.length > 0) { stored_range.moveToElementText(textArea); stored_range.setEndPoint('EndToEnd', range); textArea.selectionStart = stored_range.text.length - range.text.length; textArea.selectionEnd = textArea.selectionStart + range.text.length; } alert('hi'); // Get the text area var textArea = $("#text_edit"); textArea.hover(function() {alert('hi');}) // Do we even have a selection? if (typeof(textArea.selectionStart) != "undefined") { // Split the text in three pieces - the selection, and what comes before and after. var begin = textArea.value.substr(0, textArea.selectionStart); var selection = textArea.value.substr(textArea.selectionStart, textArea.selectionEnd - textArea.selectionStart); var end = textArea.value.substr(textArea.selectionEnd); // Insert the tags between the three pieces of text. textArea.value = begin + val1 + selection + val2 + end; } } } Basically what it does is insert BBCode tags for whatever text you have highlighted. Here is my HTML for it: Code: <div class="two-row"> <label>Content: </label> <a href="#" onclick="mod_selection('','');return false;">B</a> <input type="button" value="I" onclick="mod_selection('','')" /> <input type="button" value="U" onclick="mod_selection('','')" /><br /> <textarea id="text_edit" name="body" rows="25" cols="51"><?php if(isset($_POST['submit']) || isset($_POST['preview'])) { echo $_POST['body']; }else { echo $news_body; } ?></textarea> </div> It says the mod_selection is not defined. I'm doing alert('hi'); for testing purposes and it won't print hi.. sooooo I feel like I need a second pair of eyes. I want it to at least recognize the function before I debug it any further. I'm working on making a searchable javascript and DOM reference...A chm like what php has. I mainly need it for myself because I don't always have access to the net. I was wondering if anyone would like to contribute? hey I want to get the href via attributes of this a tag & then this href to be set to a variable Hi Experimenting. Trying to add a simple onclick event via onload, but I can't get it right? This works: Code: function checkStatus(box){ if(box.checked != box.defaultChecked){ alert("box status has changed"); } } HTML <input type="checkbox" name="mycheckbox" id="mycheckbox" value="&cost=free" onclick="checkStatus(this)" /> This does not: Code: <input type="checkbox" name="mycheckbox" id="mycheckbox" value="&cost=free" /> window.onload = function (){ var mybox = document.getElementById('mycheckbox'); mybox.onclick = checkStatus ; //how to get this to work?? //none of the following work //mybox.onclick = checkStatus; //this calls the function but I don't have a box ref //mybox.onclick = checkStatus(); //mybox.onclick = checkStatus(this); //mybox.onclick = checkStatus(mybox); } LT Hello, I want to read tag values of an xml using xpath in firefox extension (basically javascript). The example from w3schools works perfectly fine as long as the XML does not have XMLNS attribute to the root element. The same example code does not work with xmlns attribute specified. Similarly, the xml I receive from my SOAP service has xmlns as below: <DescribeInstancesResponse xmlns="http://ec2.amazonaws.com/doc/2009-07-15/"> However, I am unable to read values from my xml, inspite of specifying a 'name space resolver'. I have tried with simple namespace resolver which just returns the above URI as a string and also tried creating NSResolver following the instructions given here. Could anyone help me how to solve this? Regards, vcage Hello again, CodingForums. I have a .php page that generates the following javascript which is intended to hide/show a form somewhere on the page. (It only shows right now because it's not done yet.) However, after the page is rendered and given to the client, the function calls do not work, and the error console reports that "[function name] is not defined." Code: <script type="text/javascript"> function showEdit(num) { var elem = document.getElementById("form-wrap"+num); var str = "<form action=\"./blog.php\" method=\"POST\" class=\"blogform\">"; str = str + "<input type=\"hidden\" name=\"u\" value=\"Webmaster\"/>"; str = str + "<input type=\"hidden\" name=\"q\" value=\"edit\"/>"; str = str + "<input type=\"hidden\" name=\"n\" value=\""+num+"\"/> str = str + "<label for=\"title\">Title</label>"; str = str + "<input type=\"text\" name=\"title\" value=\""+document.getElementById("title"+num).innerHTML+"\"/>"; str = str + "<label for=\"picture\">Picture</label>"; str = str + "<input type=\"file\" name=\"picture\"/>"; str = str + "<label for=\"caption\">Picture Caption</label>"; str = str + "<input type=\"text\" name=\"caption\" value=\""+document.getElementById("post-image"+num).getAttribute("title")+"\"/>"; str = str + "<label for=\"content\">Entry Text</label>"; str = str + "<textarea name=\"content\" cols=\"100\" rows=\"20\" class=\"blogtextarea\">"+document.getElementById("content"+num).innerHTML+"</textarea>"; str = str + "<input type=\"submit\" value=\"Edit Post\"/>"; str = str + "</form>"; elem.innerHTML = str; } function showDelete(num) { var elem = document.getElementById("form-wrap"+num); var str = "<form action=\"./blog.php\" method=\"POST\" class=\"blogform\">"; str = str + "<input type=\"hidden\" name=\"u\" value=\"Webmaster\"/>"; str = str + "<input type=\"hidden\" name=\"q\" value=\"delete\"/>"; str = str + "<input type=\"hidden\" name=\"n\" value=\""+num+"\"/> str = str + "<label for=\"really\">Delete this post?</label>"; str = str + "<input type=\"radio\" name=\"really\" value=\"Yes\">Yes</input><br/>"; str = str + "<input type=\"radio\" name=\"really\" value=\"No\" checked=\"checked\">No</input><br/>"; str = str + "<input type=\"submit\" value=\"Confirm\"/>"; str = str + "</form>"; elem.innerHTML = str; } function showNew(num) { var elem = document.getElementById("new-form-wrap"); var str = "<form action=\"./blog.php\" method=\"POST\" class=\"blogform\">"; str = str + "<input type=\"hidden\" name=\"u\" value=\"Webmaster\"/>"; str = str + "<input type=\"hidden\" name=\"q\" value=\"new\"/>"; str = str + "<input type=\"hidden\" name=\"n\" value=\""+num+"\"/>"; str = str + "<label for=\"title\">Title</label>"; str = str + "<input type=\"text\" name=\"title\"/>"; str = str + "<label for=\"picture\">Picture</label>"; str = str + "<input type=\"file\" name=\"picture\"/>"; str = str + "<label for=\"caption\">Picture Caption</label>"; str = str + "<input type=\"text\" name=\"caption\" />"; str = str + "<label for=\"content\">Entry Text</label>"; str = str + "<textarea name=\"content\" cols=\"100\" rows=\"20\" class=\"blogtextarea\"></textarea>"; str = str + "<input type=\"submit\" value=\"Create Post\"/>"; str = str + "</form>"; elem.innerHTML = str; } </script> These are all the elements that call the javascript functions. Code: <a onclick="showNew('2');" class="edit-delete">Create New Entry</a> <a onclick="showDelete('1');" class="edit-delete">Delete</a> <a onclick="showEdit('1');" class="edit-delete">Edit</a> <a onclick="showDelete('0');" class="edit-delete">Delete</a> <a onclick="showEdit('0');" class="edit-delete">Edit</a> I have no idea why my functions aren't being recognized by the interpreter as such, but it's probably something simple. Thanks in advance for the help, and I'll be happy to post more code if it might be relevant. Hi all, Trying to use a small bit of script to slide open and closed a div. Copied it from another page where I have it working just fine. Coding in coldfusion. When clicked, nothing happens, and firebug pulls an error of DC_ShowDeptStaff is undefined. Script is: Code: <script type="text/javascript"> function DC_ShowDeptStaff(){ if( document.getElementById("testdiv").style.display=="none" ) { Effect.BlindDown("testdiv"); return false; } else { Effect.SlideUp("testdiv"); return false; } } </script> Call is: Code: <a href="javascript:;" onclick="DC_ShowDeptStaff()" return false;>See All Staff in this Department</a> Full code is: Code: <script type="text/javascript"> function DC_ShowDeptStaff(){ if( document.getElementById("testdiv").style.display=="none" ) { Effect.BlindDown("testdiv"); return false; } else { Effect.SlideUp("testdiv"); return false; } } </script> <cfquery name="getStaffProfileDepartments" datasource="#ATTRIBUTES.datasource#" username="#ATTRIBUTES.username#" password="#ATTRIBUTES.password#"> SELECT spd.staffProfileDepartmentName, spd.staffProfileDepartmentId FROM dccom_twstaffprofilesdepartments spd WHERE spd.instanceId = <cfqueryparam value = "#REQUEST.instanceId#"> AND spd.staffProfileDepartmentIsPublished = 'YES' ORDER BY spd.staffProfileDepartmentDisplayOrder, spd.staffProfileDepartmentName </cfquery> <cfif getStaffProfileDepartments.RecordCount NEQ 0> <cfloop query="getStaffProfileDepartments"> <!---INSIDE LOOP ONE---> <cfoutput> <h3>#staffProfileDepartmentName#</h3> <h4><a href="javascript:;" onclick="DC_ShowDeptStaff()" return false;>See All Staff in this Department</a></h4><br> <div class="testdiv" style="display: none"><h3>Test Success!</h3></div> <cfquery name="getStaffProfiles" datasource="#ATTRIBUTES.datasource#" username="#ATTRIBUTES.username#" password="#ATTRIBUTES.password#"> SELECT sp.staffProfileId, sp.staffProfileName, sp.staffProfilePosition, sp.staffProfilePhone, sp.staffProfileMobile, sp.staffProfileEmail, sp.staffProfileDescription, sp.staffProfileImage, sp.staffProfileDisplayOrder, spd.staffProfileDepartmentName, sp.staffProfileIsDepartmentHead, sp.staffProfileIsPublished FROM dccom_twstaffprofiles sp LEFT OUTER JOIN dccom_twstaffprofilesdepartments spd ON sp.staffProfileDepartmentId = spd.staffProfileDepartmentId AND sp.instanceId = spd.instanceId WHERE sp.instanceId = <cfqueryparam value = "#REQUEST.instanceId#"> AND sp.staffProfileIsPublished = 'YES' AND spd.staffProfileDepartmentId = <cfqueryparam value="#staffProfileDepartmentId#"> ORDER BY sp.staffProfileIsDepartmentHead DESC, sp.staffProfileDisplayOrder, sp.staffProfilePosition </cfquery> <cfif getStaffProfiles.RecordCount NEQ 0> <cfloop query="getStaffProfiles"> <cfoutput> <ul> <cfset cStaffProfileDescription = staffProfileDescription> <cfset cStaffProfileDescription = replace(replace(cStaffProfileDescription,chr(13) & chr(10),"<br>","ALL"),chr(10),"<br>","ALL")> <li> <cfif staffProfileIsDepartmentHead EQ 'YES'> <div class="staffInfo"> <h3>#staffProfileName#</h3> <h3>DEPT HEAD</h3> <cfif LEN(#staffProfilePosition#)><h4>#staffProfilePosition#</h4></cfif> <cfif LEN(#staffProfilePosition#)><p>#cStaffProfileDescription#</p></cfif> <cfif LEN(#staffProfilePhone#)><p>Phone: #staffProfilePhone#</p></cfif> <cfif LEN(#staffProfileMobile#)><p>Mobile: #staffProfileMobile#</p></cfif> <cfif LEN(#staffProfileEmail#)><p><a href="mailto:#staffProfileEmail#">#staffProfileEmail#</a></p></cfif> </div> <cfif LEN(#staffProfileImage#)> <div class="staffImage"> <cfif LEN(staffProfileImage) AND fileExists(APPLICATION.siteFilePath & "contentFiles\components\twStaffProfiles\" & REQUEST.instanceId & "\" & staffProfileImage)><img src="contentFiles/components/twStaffProfiles/#REQUEST.instanceId#/#staffProfileImage#" width="100" height="120" alt="#staffProfilePosition#"> </cfif> </div> </cfif> <cfelse> <h3>HIDDEN STAFF PROFILE</h3> <div class="staffInfo2" style="display:none" > <h3>#staffProfileName#</h3> <cfif LEN(#staffProfilePosition#)><h4>#staffProfilePosition#</h4></cfif> <cfif LEN(#staffProfilePosition#)><p>#cStaffProfileDescription#</p></cfif> <cfif LEN(#staffProfilePhone#)><p>Phone: #staffProfilePhone#</p></cfif> <cfif LEN(#staffProfileMobile#)><p>Mobile: #staffProfileMobile#</p></cfif> <cfif LEN(#staffProfileEmail#)><p><a href="mailto:#staffProfileEmail#">#staffProfileEmail#</a></p></cfif> </div> <cfif LEN(#staffProfileImage#)> <div class="staffImage"> <cfif LEN(staffProfileImage) AND fileExists(APPLICATION.siteFilePath & "contentFiles\components\twStaffProfiles\" & REQUEST.instanceId & "\" & staffProfileImage)><img src="contentFiles/components/twStaffProfiles/#REQUEST.instanceId#/#staffProfileImage#" width="100" height="120" alt="#staffProfilePosition#"> </cfif> </div> </cfif> </cfif> </li> </ul> </cfoutput> </cfloop> <cfelse> <cfoutput> <p>There are Currently No Staff Listed in this Department</p> <br> </cfoutput> </cfif> </cfoutput> <!---end loop one---> </cfloop> </cfif> any input would be appreciated Hi all, I am relatively new to java; hence I know the basics, but have been thrown into trouble because I am currently working with a cms system that doesnt keep within the correct name conventions (pre defined). Within a form, I simply want to set a date to todays date: <script type="text/javascript"> function initdt(mf) { var t = new Date; mf.01-date.value = t.getDate(); mf.02-month.value = t.getMonth() + 1; mf.03-year.value = t.getFullYear(); } onload="initdt(document.WBForm);" </script> This works perfect on a form I create, but sadly I must use a form within a pre defined system that uses "01-date" Is there a way around this? A simple way of setting 01-date to t.getDate(); Your help will be very much appreciated Regards Damon Simpson Greetings all. Please let me apologize in advance if this is a tremendously stupid question, but I'm new to Jquery and ASP... and I'm suddenly building an entire site made of both. *sigh* I keep getting an error message in Firebug in relation to the accordion menu I created. "$ not defined $(function() {" If the navigation is isolated on its own page, the error does not exist. It only occurs once it is brought into the Store Master page. Working Version: http://www.stephenjosephinc.com/testing/ Non-Working Version: http://74.124.26.78/ The following code is cut from the head in the non-functional page: Code: <head id="ctl00_Head1"> <title>Shop Online</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="icon" href="App_Master/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="App_Master/favicon.ico" type="image/x-icon" /> <link type="text/css" href="App_Master/css/custom-theme/jquery-ui-1.8.4.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script> <link type="text/css" href="App_Master/theme/ui.all.css" media="screen" rel="stylesheet" /> <script type="text/javascript"> $(function() { $("#accordion").accordion({ collapsible: true, autoHeight: false, header: "h3"} ); }); </script> <link href="App_Themes/DefaultTheme/master.css" type="text/css" rel="stylesheet" /> <link href="App_Themes/DefaultTheme/menu.css" type="text/css" rel="stylesheet" /> </head> If it helps at all, you may view the entire code he http://74.124.26.78/full_code.txt Please note: I DID NOT create the code on the aforementioned page. It's an ugly, nightmarish mess (at least to my non-ASP-loving eyes), so please don't hate me for bad form in the body code. The only code that I wrote for this page is the bit you see above and the hrefs for the side nav. Any help would be massively appreciated! Thank you in advance! Hi, I have the following script which should work in theory, however I get the error message that file is not defined. I have tried playing around with using variables and I can not work out how to correct this. My code is: Code: <head> <script type="text/javascript"> function loadXMLDoc(File,ID){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; } } xmlhttp.open("POST",FILE,true); xmlhttp.send(); } </script> </head> <body> <input type="button" value="Test" onclick="loadXMLDoc($File='getToday.php','txtHint');" > <input type="button" value="Test2" onclick="loadXMLDoc($File='getTomorrow.php','txtHintTom');" > Hi, I am trying to get this function to work, it looks great in theory but I keep getting the error message file is not defined. What have I done wrong? The code is: Code: <head> <script type="text/javascript"> function loadXMLDoc(File,ID){ if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open("POST",FILE,true); xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(ID).innerHTML=xmlhttp.responseText; } } xmlhttp.send(); } </script> </head> <body> <input type="button" value="Test" onclick="loadXMLDoc('getToday.php','txtHint');" > <input type="button" value="Test2" onclick="loadXMLDoc('getYesterday.php','txtHintYest');" > </body> Hi! I'm working on a JSP based project. On myJsp1.jsp, I open a new window using window.open and store reference in a variable myWin like myWin = window.open(.........); from here i submit the form to myJsp2.jsp. In this file, I want the reference myWin to close the opened window. What I'm doing while submitting form is: myWin = window.open(.............); document.onlinePayStatusSummary.action ="myJsp2.jsp?action=forwardOnlinePayRequest&childWindow=" +myWin; document.onlinePayStatusSummary.submit(); I've read that this way JavaScript references can be passed in url. Now when I do getParameter in myJsp2.jsp as var winRef = "<%=request.getParameter("childWindow").toString()%>"; winRef.close(); I get JavaScript error that this winRef do not support the close() property. Any help? Hello, I'm working on a drag and drop HTML editor, in which blocks can be positioned. I need to build a controller which listens to mouse events and takes appropriate action (a state machine). The system is built using prototypes and objects. The Controller class looks like this (I removed some methods for simplification): Code: /** * Creates a controller for a document */ function Controller() { /** * Document which is controlled by this controller * @var Editor * @access private */ this.document = null; /** * Overlay over the complete document, starting at the same position as the document * @var HtmlElement * @access private */ this.overlay = null; /** * References to event handlers * @access private */ this.moveEventHandler = null; /** * Processes a mouse move in the viewport * @param Controller reference Substitution for 'this' * @param MouseEvent event */ this.handleMove = function(reference, event) { //@do stuff //Update selection region reference.document.getSelection().setRange(..); reference.document.getSelection().update(); return false; } /** * Replaces the current document with the specified document * @param Doc document * @post Event handlers are ready to go */ this.setDocument = function(document) { //Set document and overlay this.document = document; this.overlay = document.getOverlayContainer(); //Add event listeners to viewport this.moveEventHandler = new EventHandler(this, this.handleMove); if (this.overlay.addEventListener) { //W3C browsers this.overlay.addEventListener("mousemove", this.moveEventHandler, false); } else if (this.overlay.attachEvent) { //IE browsers this.overlay.attachEvent("onmousemove", this.moveEventHandler); } //Disable right mouse menu and browser text selection this.overlay.oncontextmenu = function() {return false;} this.overlay.onselectstart = function() {return false;} this.overlay.onmousedown = function() {return false;} } } //Event handler wrapper function EventHandler(reference, handler) { this.reference = reference; this.handler = handler; this.handleEvent = function(e) { this.handler(reference, e); } } The method 'handleMove' is entitled to handle a mouse move on the overlay. Because the 'this' keyword would not point to the Controller object I've written a wrapper according to the W3C EventListener interface (http://www.w3.org/TR/DOM-Level-2-Eve...-EventListener). This wrapper holds a reference to the object in which the method resides that's handling the event, so that the important 'document' attribute can be reached. This document holds the document that is being edited (it's of a custom type, and not to be confused with the document as in document.body) The problem I now have is as follows. IE doesn't seem to be able to work with event handlers following the EventListener interface, but just functions. I need to get the object's reference there as well though, but this can't be done using an anonymous function, as at the moment it will be run it will be in a different scope, and not be able to reach the controller any more. Just using a global holding that reference variable, a method I used before, is not sufficient, as there may be multiple instances of the editor running on the same page. I have no problems in FFox, Opera, and Safari. Just IE because it uses an alternative event listener model. Has anyone got an idea how to get around this problem? |