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
-~----------~----~----~----~------~----~------~--~---
