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 <[email protected]> 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 [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
