1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Scroll doesn't work

Discussion in 'CSS' started by PedroG, May 6, 2013.

  1. #1
    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!
    Last edited: May 6, 2013
    PedroG, May 6, 2013 IP
  2. ntmedia

    ntmedia Active Member

    Messages:
    118
    Likes Received:
    11
    Best Answers:
    7
    Trophy Points:
    55
    #2
    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)
    ntmedia, May 6, 2013 IP
  3. PedroG

    PedroG Greenhorn

    Messages:
    59
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #3
    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?
    PedroG, May 6, 2013 IP
  4. ntmedia

    ntmedia Active Member

    Messages:
    118
    Likes Received:
    11
    Best Answers:
    7
    Trophy Points:
    55
    #4
    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.
    ntmedia, May 6, 2013 IP
  5. PedroG

    PedroG Greenhorn

    Messages:
    59
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #5
    Allow me to share the code because I'm completely aimless here
    This is the js function called on html:

    Code (Text):
    1. function quick(id,val){
    2.            
    3.                     var xmlhttp;
    4.                     if (window.XMLHttpRequest)
    5.                   {
    6.                       xmlhttp=new XMLHttpRequest();
    7.                     }
    8.                 else
    9.                   {
    10.                     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    11.                     }
    12.                     xmlhttp.onreadystatechange=function()
    13.                   {
    14.                     if (xmlhttp.readyState==4 && xmlhttp.status==200)
    15.                       {
    16.                      
    17.                         document.getElementById("modal"+val).innerHTML=xmlhttp.responseText;
    18.                       }
    19.                     }
    20.                   xmlhttp.open("GET","working url, no concern here"+id,true);
    21.                     xmlhttp.send();
    22.                 }
    23.  
    24. function disp(id,val){
    25.     var ele = document.getElementById("div"+val);
    26.         var top = 0;
    27.         var left = 0;
    28.         while(ele.tagName != "BODY") {
    29.             top += ele.offsetTop;
    30.             left += ele.offsetLeft;
    31.             ele = ele.offsetParent;
    32.   }
    33.  
    34.     var browserName=navigator.appName;
    35.     var top_align=200;
    36.     /*if(val%4==0)
    37.     {
    38.    
    39.             var left_align =358;
    40.               var top_align = 390;
    41.    
    42.     }
    43.     else if(val%4==1)
    44.     {
    45.         var left_align =470;
    46.               var top_align = 390;
    47.     }
    48.     else if(val%4==2)
    49.     {
    50.         var left_align =600;
    51.               var top_align = 390;
    52.     }
    53.     else
    54.     {
    55.         var left_align =720;
    56.               var top_align =390;
    57.     }*/
    58.         // Set the top position to center the greybox
    59.   if(browserName == "Netscape"){
    60.       var stop = document.documentElement.scrollTop;
    61.       document.getElementById('ebox1'+val).style.height="500px";
    62.       document.getElementById('s'+val).style.position = "absolute";
    63.     }else{
    64.       var stop = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
    65.       window.onscroll=mveditbox;
    66.   }
    67.   var ele = document.getElementsByTagName("div");
    68.     for(i=0;i<ele.length;i++){
    69.         var divelement = ele[i];
    70.   //document.getElementById("modal"+val).innerHTML='<a href="javascript:void(0);"  class="quickview" onClick="quick('+id+','+val+');">Quick View</a>';
    71.         if(divelement.getAttribute("class") == "valinfo"){
    72.             divelement.style.display = 'none';
    73.         }
    74.  
    75.     }
    76.   //document.getElementByClass('valinfo').style.display='none';
    77.   document.getElementById('s'+val).style.display = 'block';
    78.   document.getElementById('ebox1'+val).style.display='none';
    79.  
    80.  
    81.  
    82.   document.getElementById('ebox1'+val).style.zIndex=100;
    83.   document.getElementById('s'+val).style.zIndex=1000;
    84.   document.getElementById('ebox1'+val).style.top=stop+"px";
    85.  
    86.   var top_pos = stop+top_align;
    87.   document.getElementById('s'+val).style.top=top+"px";
    88.  
    89.   var sleft = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
    90.   //var left_pos = sleft+left_align;
    91.   document.getElementById('s'+val).style.left= left+"px";
    92. }
    93.  
    94. function hide(id,val){
    95.   document.getElementById('s'+val).style.display='none';
    96.   document.getElementById('ebox1'+val).style.display='none';
    97.   //document.getElementById("modal"+val).innerHTML='<a href="javascript:void(0);"  class="quickview" onClick="quick('+id+','+val+');">Quick View</a>';
    98. }
    part of the html where the functions are called,
    (the remaining contains the content and closing tags)

    HTML:
    1. <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;">
    2.     <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>
    3.  
    4. <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">
    5. <div id="modal1" onmouseout="hide(1188,1);return false;">
    The preview box was based on a script available online, I didn't implement it. Could the iframe give problems?
    PedroG, May 6, 2013 IP
  6. ntmedia

    ntmedia Active Member

    Messages:
    118
    Likes Received:
    11
    Best Answers:
    7
    Trophy Points:
    55
    #6
    Hmm I can't find what's causing it either...
    ntmedia, May 6, 2013 IP