hi there, http://devsite.doskosport.com/cell-phones/nokia.html If you check that page, having your mouse over the Quick View button below the product pictures there is a problem on the mouse, I can't select nor scroll inside the preview box. Any suggestion? Thanks in advance!
Well first off, console reports some errors regarding javascript you've got in there: Failed to load resource: the server responded with a status of 404 (Not Found)
that's from something else..... the javascript used there only retrieves the product description from database, as you can see works fine.... Despite, if there were to be problems, could be javascript interference of some kind no? is there any reason to suspect from a missing file?
I'm pretty confident that bogus javascript code is causing this. Can't find exactly what is causing it. Scroll works fine if you scroll fast (using Chrome) but then just for no reason it scrolls back to top. Another thing that I would suspect is that details are refreshed for some reason and cause that scroll to reset back to top.
Allow me to share the code because I'm completely aimless here This is the js function called on html: function quick(id,val){ var xmlhttp; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("modal"+val).innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","working url, no concern here"+id,true); xmlhttp.send(); } function disp(id,val){ var ele = document.getElementById("div"+val); var top = 0; var left = 0; while(ele.tagName != "BODY") { top += ele.offsetTop; left += ele.offsetLeft; ele = ele.offsetParent; } var browserName=navigator.appName; var top_align=200; /*if(val%4==0) { var left_align =358; var top_align = 390; } else if(val%4==1) { var left_align =470; var top_align = 390; } else if(val%4==2) { var left_align =600; var top_align = 390; } else { var left_align =720; var top_align =390; }*/ // Set the top position to center the greybox if(browserName == "Netscape"){ var stop = document.documentElement.scrollTop; document.getElementById('ebox1'+val).style.height="500px"; document.getElementById('s'+val).style.position = "absolute"; }else{ var stop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop; window.onscroll=mveditbox; } var ele = document.getElementsByTagName("div"); for(i=0;i<ele.length;i++){ var divelement = ele[i]; //document.getElementById("modal"+val).innerHTML='<a href="javascript:void(0);" class="quickview" onClick="quick('+id+','+val+');">Quick View</a>'; if(divelement.getAttribute("class") == "valinfo"){ divelement.style.display = 'none'; } } //document.getElementByClass('valinfo').style.display='none'; document.getElementById('s'+val).style.display = 'block'; document.getElementById('ebox1'+val).style.display='none'; document.getElementById('ebox1'+val).style.zIndex=100; document.getElementById('s'+val).style.zIndex=1000; document.getElementById('ebox1'+val).style.top=stop+"px"; var top_pos = stop+top_align; document.getElementById('s'+val).style.top=top+"px"; var sleft = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft; //var left_pos = sleft+left_align; document.getElementById('s'+val).style.left= left+"px"; } function hide(id,val){ document.getElementById('s'+val).style.display='none'; document.getElementById('ebox1'+val).style.display='none'; //document.getElementById("modal"+val).innerHTML='<a href="javascript:void(0);" class="quickview" onClick="quick('+id+','+val+');">Quick View</a>'; } Code (markup): part of the html where the functions are called, (the remaining contains the content and closing tags) <div class="float-left product-item-image center" id="div1" onmouseover="quick(1188,1);disp(1188,1);return false;" onmouseout="hide(1188,1);return false;"> <iframe frameborder="1" id="ebox11" width="1%" height="1%" bgcolor="#808080" style="display: none; position: absolute; top: 0px; left: 150px; opacity: 0.5; background-color: rgb(128, 128, 128); height: 500px; z-index: 100;"></iframe> <div style="display: block; border: 1px solid gray; background-color: rgb(235, 235, 235); border-top-left-radius: 9px; border-top-right-radius: 9px; border-bottom-right-radius: 9px; border-bottom-left-radius: 9px; padding: 7px; max-width: 760px; max-height: 550px; position: absolute; z-index: 1000; top: 455px; left: 381px;" class="valinfo" id="s1"> <div id="modal1" onmouseout="hide(1188,1);return false;"> HTML: The preview box was based on a script available online, I didn't implement it. Could the iframe give problems?