Javascrip popup script not working on Opera

and it also appears above the fold on webkit.

[nigelt74]

Hi all

Javascript is not my Forte, I will state right now before we begin

The problem is with Imagehandler on Zencart, it uses some javascript to give a popup when you hover over a thumbnail image, however it doesn't work at all in Opera
or correctly in Webkit based browsers, in webkit based browsers the popup appears above the page fold which is fine provided you are still there however if you have scrolled down a long page, the popup only appears above the original pagefold, ie right at the top of the page off the viewable screen.

I am not a javascript person but my attempts at figuring out why this happens have only broken things worse
Image on page

 <img src="bmz_cache/2/2b67181620273ca79f8eca1aaaf506b9.image.80x80.jpg" alt="image title" title="image title" width="80" height="80" class="listingProductImage" style="position:relative" onmouseover="showtrail('bmz_cache/4/48302eddf5c38bd8f7ecab114543d76f.image.120x120.jpg','Image Title',80,80,120,120,this,0,0,80,80);" onmouseout="hidetrail();" />

Javascript

/*

MODIFIED by <snipped email> ie 6 fix attempt see zencart forum IH2 thread

Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact

Modified by Tim Kroeger (<snipped email>) for use with
image handler 2 and better cross browser functionality
*/

var offsetfrommouse=[10,10]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400;// maximum image size.
var padding=10; // padding must by larger than specified div padding in stylessheet

// Global variables for sizes of hoverimg
// Defined in "showtrail()", used in "followmouse()"
var zoomimg_w=0;
var zoomimg_h=0;


if (document.getElementById || document.all){
 document.write('<div id="trailimageid">');
 document.write('</div>');
}

function getObj(name) {
 if (document.getElementById) {
 this.obj = document.getElementById(name);
 this.style = document.getElementById(name).style;
 } else if (document.all) {
 this.obj = document.all[name];
 this.style = document.all[name].style;
 } else if (document.layers) {
 this.obj = document.layers[name];
 this.style = document.layers[name];
 }
}

function gettrail(){
 return new getObj("trailimageid");
}

function truebody(){
 return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){
zoomimg_w=zoomimgwidth;
zoomimg_h=zoomimgheight;
 //if (oriwidth > 0){ offsetfrommouse[0] = oriwidth; }
 //if (oriheight > 0){ offsetfrommouse[1] = -1 *(zoomimgheight-oriheight)/2 - 40; }
 // alert (offsetfrommouse[0] + "," + offsetfrommouse[1]);
 if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
 trailobj = gettrail().obj;
 trailobj.style.width=(zoomimgwidth+(2*padding))+"px";
 trailobj.style.height=(zoomimgheight+(2*padding))+"px";
 trailobj.setAttribute("startx", startx);
 trailobj.setAttribute("starty", starty);
 trailobj.setAttribute("startw", startw);
 trailobj.setAttribute("starth", starth);
 trailobj.setAttribute("imagename", imagename);
 trailobj.setAttribute("imgtitle", title);
 document.onmousemove=followmouse;
}

function hidetrail(){
 trailstyle = gettrail().style;
 trailstyle.visibility = "hidden";
 document.onmousemove = "";
 trailstyle.left = "-2000px";
 trailstyle.top = "-2000px";
}

function followmouse(e){

 var xcoord=offsetfrommouse[0];
 var ycoord=offsetfrommouse[1];

 var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
 var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);
 var relativeX = null;
 var relativeY = null;
 if (typeof e != "undefined"){
 if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
  relativeX = e.layerX;
  relativeY = e.layerY;
 } else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
  relativeX = e.x;
  relativeY = e.y;
 }

 if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
  xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
 } else {
  xcoord += e.pageX;
 }
 if (docheight - e.pageY < zoomimg_h + (2 * padding)){
  ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
 } else {
  ycoord += e.pageY;
 }
 } else if (typeof window.event != "undefined"){
 if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
  relativeX = event.x;
  relativeY = event.y;
 } else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
  relativeX = event.offsetX;
  relativeY = event.offsetY;
 }

 if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
  xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
 } else {
  xcoord += truebody().scrollLeft+event.clientX;
 }
/* event.clientY is not valid in firefox netscape or opera, but ie has to use it */
var ie_offset = -20;
 if ( docheight - event.clientY < zoomimg_h + (2 * padding) ){
  /*
ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) - (docheight + truebody().scrollTop -event.clientY) ) );
*/
ycoord += ie_offset + truebody().scrollTop + event.clientY - Math.max(0,(0 + zoomimg_h + (2 * padding) - (docheight - event.clientY) ) );
 } else {
  ycoord += ie_offset + truebody().scrollTop + event.clientY;
 }
 }

 trail = gettrail();
 startx = trail.obj.getAttribute("startx");
 starty = trail.obj.getAttribute("starty");
 startw = trail.obj.getAttribute("startw");
 starth = trail.obj.getAttribute("starth");
 imagename = trail.obj.getAttribute("imagename");
 title  = trail.obj.getAttribute("imgtitle");

 // calculate and set position BEFORE switching to visible
 var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
 var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
 if(ycoord < 0) { ycoord = ycoord*-1; }
 if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
 if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
 trail.style.left=xcoord+"px";
 trail.style.top=ycoord+"px";

 if (trail.style.visibility != "visible") {
 if (((relativeX == null) || (relativeY == null)) ||
  ((relativeX >= startx) && (relativeX <= (startx + startw))
  && (relativeY >= starty) && (relativeY <= (starty + starth)))){
  newHTML = '<div><h1>' + title + '</h1>';
  newHTML = newHTML + '<img src="' + imagename + '"></div>';
  trail.obj.innerHTML = newHTML;
  trail.style.visibility="visible";
 }
 }
}

Basically all the code does is show a pop-up with the image and the title of it when you hover over an image and when you move off the image the pop-up disappears, I have had a look at some jquery stuff to replace it, but it seems so slow and large codewise, whereas this is small and snappy, plus most of the jquery ones seem to want you o click escape everytime you have a pop-up spring up.

Any help or suggestions will be greatfully accepted

[edited by: whoisgregg at 4:05 pm (utc) on Jun 22, 2010]
[edit reason] Removed email addresses [/edit]

[subexpression]

It seems that WebKit browsers aren't accounting for vertical scrolling.
I've encountered a similar problem before with lightboxes displaying "above the fold" if the user has scrolled down.

Here's a workaround to calculate vertical scrolling using the "onscroll" event:

<script type="text/javascript"> 
var test = new function(){ 
 self = this; 
 self.events = { 
 'addevent': function(eventtype,obj,method){ 
  try { 
  if(obj.addEventListener){obj.addEventListener(eventtype,method,true);} 
  else if(obj.attachEvent){obj.attachEvent('on' + eventtype,method);} 
  else {return false;} 
  }catch(err){} 
  return true; 
 } 
 }; 
 self.viewport = { 
 'load': function(){ 
  self.events.addevent('scroll',window,this.scroll); 
 }, 
 'scroll': function(){ 
  vpos = window.pageYOffset; 
 } 
 }; 
} 
window.onload = function(){ 
 test.viewport.load(); 
} 
</script> 

vpos is the value in pixels "above the fold".
First, I would detect if it's a webkit-based browser, and then you can add that to the image's "top" property.

[nigelt74]

Thanks for the answer, my apologies for taking so long to reply, I forgot to subscribe to the thread and didn't realise there had been a response.

I spent most of yesterday trying to get it to work, but all I seem to do is break the javascript

This is what i have been doing...

To pass the variable, I need to make it global so I do that.

Adding it to the top (trail.style.top=ycoord+"px"; )
and thats where it gets tricky, for some reason it ceases working, I have tried passing the variable to htlm to see if it is working but it comes up as undefined, and I cannot figure out why.

[nigelt74]

I take that back, it appears to be working now

[nigelt74]

Ok now I have done a bit more testing, and it seems to be working in the webkit browsers.

However opera still doesn't work, as in the popup doesn't appear at all, and i can't figure out why.

Not a huge issue as that now covers about 98% os site visitors, but getting Opera to work would be cool

[nigelt74]

I am back again

Just had a thought

document.all is only supported by IE and Opera

so a statement like this

var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;

which seems to me to be a sort of browser sniffing (am i right?, my grasp of js is tenuous to say the least) might be catching Opera along with IE when in fact Opera should be getting the pageXOffset+window.innerWidth-15; setting

if (isIE) {
truebody().scrollLeft+truebody().clientWidth
}else{
pageXOffset+window.innerWidth-15;
}

or am I so far off understanding js, I should give up and become a gogo dancer

[nigelt74]

Okey doke I'm back again

I have tracked part of the problem to this function it returns 0 in opera and webkit, but works in firefox

function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

I have found that
opera and firefox use document.documentElement and webkit uses document.body
however the if statement doesn't seem to work that way

[nigelt74]

Ok update, code is now fixed and works in Opera

here is the completed code for those interested

/*
Image Handler Jscript
Version 4.1
This version brings in Opera support, and fixes the webkit (Safari and Chrome) Bugs
Modified by Nigel Thomson (<snipped email>) 12 June 2010

MODIFIED by <snipped email> ie 6 fix attempt see zencart forum IH2 thread

Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact

Modified by Tim Kroeger (<snipped email>) for use with
image handler 2 and better cross browser functionality

Modified by Nigel Thomson (<snipped email>) for use with
image handler 2 and better cross browser functionality specifically Webkit based browsers
9 June 2010
*/
var offsetfrommouse=[10,10]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 400;// maximum image size.
var padding=10; // padding must by larger than specified div padding in stylessheet

// Global variables for sizes of hoverimg
// Defined in "showtrail()", used in "followmouse()"
var zoomimg_w=0;
var zoomimg_h=0;
var vpos;
//Detect IE
var stIsIE = /*@cc_on!@*/false;
//detect opera
var isOpera =
window.opera?1:0;
// Detect Webkit browsers
var isWebKit =
 navigator.userAgent.indexOf("AppleWebKit") > -1;

if (document.getElementById || document.all){
 document.write('<div id="trailimageid">');
 document.write('</div>');
}

function getObj(name) {
 if (document.getElementById) {
 this.obj = document.getElementById(name);
 this.style = document.getElementById(name).style;
 } else if (document.all) {
 this.obj = document.all[name];
 this.style = document.all[name].style;
 } else if (document.layers) {
 this.obj = document.layers[name];
 this.style = document.layers[name];
 }
}

function gettrail(){
 return new getObj("trailimageid");
}

function truebody(){
if (isWebKit){
 return document.body;
 }else if (isOpera) {
 return document.documentElement;
 }else{
 return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
 }
}

function showtrail(imagename,title,oriwidth,oriheight,zoomimgwidth,zoomimgheight, image, startx, starty, startw, starth){
zoomimg_w=zoomimgwidth;
zoomimg_h=zoomimgheight;
 if (zoomimgheight > 0){ currentimageheight = zoomimgheight; }
 trailobj = gettrail().obj;
 trailobj.style.width=(zoomimgwidth+(2*padding))+"px";
 trailobj.style.height=(zoomimgheight+(2*padding))+"px";
 trailobj.setAttribute("startx", startx);
 trailobj.setAttribute("starty", starty);
 trailobj.setAttribute("startw", startw);
 trailobj.setAttribute("starth", starth);
 trailobj.setAttribute("imagename", imagename);
 trailobj.setAttribute("imgtitle", title);
 document.onmousemove=followmouse;
}

function hidetrail(){
 trailstyle = gettrail().style;
 trailstyle.visibility = "hidden";
 document.onmousemove = "";
 trailstyle.left = "2000px";
 trailstyle.top = "2000px";
}

function followmouse(e){

 var xcoord=offsetfrommouse[0];
 var ycoord=offsetfrommouse[1];
if (stIsIE){
 var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
 var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(window.innerHeight);
}
else
{
 var docwidth=pageXOffset+window.innerWidth-15;
 var docheight=Math.min(window.innerHeight);

}
 var relativeX = null;
 var relativeY = null;
 if (typeof e != "undefined"){
 if ((typeof e.layerX != "undefined") && (typeof e.layerY != "undefined")) {
  relativeX = e.layerX;
  relativeY = e.layerY;
 } else if ((typeof e.x != "undefined") && (typeof e.y != "undefined")) {
//  relativeX = e.x; // original code replaced to work with Opera
//  relativeY = e.y; // original code replaced to work with Opera
  relativeX = event.offsetX;
  relativeY = event.offsetX;
 }
 if (docwidth - e.pageX < zoomimg_w + (3 * padding)) {
  xcoord = e.pageX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
 } else {
  xcoord += e.pageX;
 }
 if (docheight - e.pageY < zoomimg_h + (2 * padding)){
  ycoord += e.pageY - Math.max(0,(0 + zoomimg_h + (5 * padding) + e.pageY - docheight - truebody().scrollTop));
 // returning different values for ff and (opera and webkit) - fixed 12th june 2010
 } else {
  ycoord += e.pageY;
 }

 } else if (typeof window.event != "undefined"){ // Seems to be IE
 if ((typeof event.x != "undefined") && (typeof event.y != "undefined")) {
  relativeX = event.x;
  relativeY = event.y;
 } else if ((typeof event.offsetX != "undefined") && (event.offsetY != "undefined")) {
  relativeX = event.offsetX;
  relativeY = event.offsetY;
 }

 if (docwidth - event.clientX < zoomimg_w + (3 * padding)) {
  xcoord = event.clientX - xcoord - zoomimg_w - (2 * offsetfrommouse[0]);
 } else {
  xcoord += truebody().scrollLeft+event.clientX;
 }
/* event.clientY is not valid in firefox netscape or opera, but ie has to use it */
var ie_offset = -20;
 if ( docheight - event.clientY < zoomimg_h + (2 * padding) ){
  /*
ycoord += event.clientY - Math.max(0,(0 + zoomimg_h + (5 * padding) - (docheight + truebody().scrollTop -event.clientY) ) );
*/
ycoord += ie_offset + truebody().scrollTop + event.clientY - Math.max(0,(0 + zoomimg_h + (2 * padding) - (docheight - event.clientY) ) );
 } else {
  ycoord += ie_offset + truebody().scrollTop + event.clientY;
 }
 }

 trail = gettrail();
 startx = trail.obj.getAttribute("startx");
 starty = trail.obj.getAttribute("starty");
 startw = trail.obj.getAttribute("startw");
 starth = trail.obj.getAttribute("starth");
 imagename = trail.obj.getAttribute("imagename");
 title  = trail.obj.getAttribute("imgtitle");

 // calculate and set position BEFORE switching to visible
if (stIsIE){
 var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15;
 var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);
}else{
 var docwidth=pageXOffset+window.innerWidth-15;
 var docheight=Math.max(document.body.offsetHeight, window.innerHeight);
}

 if(ycoord < 0) { ycoord = ycoord*-1; }
 if ((trail.style.left == "-2000px") || (trail.style.left == "")) { trail.style.left=xcoord+"px"; }
 if ((trail.style.top == "-2000px") || (trail.style.top == "")) { trail.style.top=ycoord+"px"; }
 trail.style.left=xcoord+"px";
 trail.style.top=ycoord+"px";

 if (trail.style.visibility != "visible") {
 if (((relativeX == null) || (relativeY == null)) ||
  ((relativeX >= startx) && (relativeX <= (startx + startw))
  && (relativeY >= starty) && (relativeY <= (starty + starth)))){
  newHTML = '<div><h1>' + title + '</h1>';
  newHTML = newHTML + '<img src="' + imagename + '"></div>';
  trail.obj.innerHTML = newHTML;
  trail.style.visibility="visible";
 }
 }
}

Its also available in the zencart image handler support thread

[edited by: whoisgregg at 4:05 pm (utc) on Jun 22, 2010]
[edit reason] Removed email addresses [/edit]

[nigelt74]

ooops could a mod remove the email addresses please