Could someone please help me? What I want to is to bind the variable i to gotopreview(event,i) function, thus everytime the toplink [i].onmouseover, there is a preview web page shown, I modify the code to use listeners in the following fun, but firebug tells me getsid [i].value is not defined, how can i pass the i value to gotopreview? At the same time, it would not conflict other functions?
Event.observe(window,'load',function(){ var temp = document.getElementById('newtoplink'); var ntlink = temp.getElementsByTagName("a"); this.i = 0; var temp = this; for(var i =0;i<ntlink.length;i++){ Event.observe(ntlink[i],"mouseover",gotopreview.bindAsEventListener (this)); } }); function gotopreview(event,i){ var xPos, yPos; xPos = Event.pointerX(event); yPos = Event.pointerY(event); var getpostid=document.getElementsByName("postid"); var getsid = document.getElementsByName("stdid"); var url = "getOnePost.php"; var pars = "stdid="+getsid[i].value + "&postid=" + getpostid [i].value; new Ajax.Request(url,{ method:'get', parameters: pars, asynchronous: true, onSuccess: function(transport){ $('previewWin').update(transport.responseText); $('previewWin').style.top = parseInt(yPos) + 2 + "px"; $('previewWin').style.left = parseInt(xPos) + 2 + "px"; $('previewWin').style.visibility = "visible"; $('previewWin').onmouseout = hidePreview; } }); } function hidePreview(){ $('previewWin').style.visibility = "hidden"; } Any help would be appreciated. On Feb 28, 8:43 pm, SamuelXiao <foolsmart2...@gmail.com> wrote: > I am writing javascript code to show web page preview. There are > links in my website (e.g. 4 links), when user move mouse over each > <a></a> (a class called toplink is assigned to each <a> tag), a > preview content box is shown , it works well in the following way: > > window.onload = initAll; > var xPos, yPos; > var i; > function initAll(){ > > var elms = document.getElementsByClassName("toplink"); > > for (i=0;i<elms.length;i++) > { > elms[i].onmouseover=function(v){ > return > function(event){gotopreview(event,v);} > }(i) > } > > } > > function gotopreview(event,i){ > > xPos = Event.pointerX(event); > yPos = Event.pointerY(event); > var getpostid=document.getElementsByName("postid"); > var getsid = document.getElementsByName("stdid"); > var url = "getOnePost.php"; > var pars = "stdid="+getsid[i].value + "&postid=" + getpostid > [i].value; > > var myajax = new Ajax.Request(url,{ > method:'get', > parameters: pars, > asynchronous: true, > onSuccess: function(transport){ > $('previewWin').update(transport.responseText); > $('previewWin').style.top = parseInt(yPos) + 2 + "px"; > $('previewWin').style.left = parseInt(xPos) + 2 + > "px"; > $('previewWin').style.visibility = "visible"; > $('previewWin').onmouseout = hidePreview; > } > }); > > } > > function hidePreview() { > $('previewWin').style.visibility = "hidden"; > > } > > In my html page, is like: > <html> > <head> > </head> > <body> > <a class="toplink" value="XXX">XXX</a> > <a class="toplink" value="XXX">XXX</a> > <a class="toplink" value="XXX">XXX</a> > <a class="toplink" value="XXX">XXX</a> > </body> > </html> > > For Server side, I check the code and it is ok. > > /* Above code works well */ > > However, when it comes to make use of it with other Ajax code, it > doesn't work. The following code is not work: > > obj = new Object; > obj.f1= eventHandler; > var xPos,yPos; > var i; > > // I am required to do Javascript in a OO way. > window.onload =obj.f1; > > window.onunload = function(){}; > > function eventHandler(){ > callPreview(); > deleteelse(); // ohter function; > > } > > function callPreview(){ > > var elms = document.getElementsByClassName("toplink"); > for (i=0;i<elms.length;i++) > { > elms[i].onmouseover=function(v){ > return > function(event){gotopreview(event,v);} > }(i) > } > > } > > function gotopreview(event,i){ > > xPos = Event.pointerX(event); > yPos = Event.pointerY(event); > var getpostid=document.getElementsByName("postid"); > var getsid = document.getElementsByName("stdid"); > var url = "getOnePost.php"; > var pars = "stdid="+getsid[i].value + "&postid=" + getpostid > [i].value; > > var myajax = new Ajax.Request(url,{ > method:'get', > parameters: pars, > asynchronous: true, > onSuccess: function(transport){ > $('previewWin').update(transport.responseText); > $('previewWin').style.top = parseInt(yPos) + 2 + "px"; > $('previewWin').style.left = parseInt(xPos) + 2 + > "px"; > $('previewWin').style.visibility = "visible"; > $('previewWin').onmouseout = hidePreview; > } > }); > > } > > function hidePreview() { > $('previewWin').style.visibility = "hidden"; > > } > > // The above code is not work. > > it seems that the problem is relating the window.onload and the object > obj. But, I am required to keep it in OO way. Thus, are there any > method that I can do it? Any help would be appreciated! --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---