Geek Answers Handbook

Problem placing jQuery cursor in IE

I have a problem with IE (what a surprise). I make a problem reporting function (Report bad image ...) on my page. I want to show a simple "Report this image" form with a few questions (reason for posting ...). It should appear after clicking on the image of the report. It works fine in FF as well as in Chrome, but there is a problem in IE. The div should be displayed at the click of the mouse. The first time it is displayed in the right place, but when I close it and click on another report image without reloading the page (there are more report images on the site), it appears again in the same place where it is displayed for the first time (only in IE ) Here is my code:

$(document).ready(function(){
  $(".proofreporter").click(function(e){
    $('.popup').remove();  //used to remove previously shown elements

    $.ajaxSetup ({
    // Disable caching of AJAX responses
      cache: false
    });


    // setTimeout(function(){$('.popup').remove()},2000);

    var name = $(this).attr('id');
    function showData(data) {
        $("body").append(data);
    }
    //x = e.pageX;   first I tried this to get position but same result
    //y = e.pageY;

    var pos = $(this).offset(); 
    x=pos.left;
    y=pos.top;

    alert(x + 'x' + y);
    $.get('includes/reporter.php?reportimgdiv=' + name + '&x=' + x + '&y=' + y, showData);
  });
});

And here is the reporter.php code

if(isset($_GET['reportimgdiv']))


{       //report IMAGE
  ?>
  <style type="text/css">                                                                                                                            
  .popup {          //SOLVED; change to this: #<?echo report$_GET['reportimgdiv']?>
    position: absolute;
    left: <?echo $_GET['x'];?>;
    top: <?echo $_GET['y'];?>;
    z-index: 100;
    width: 280px; 
  }
  .subtle {
    margin: 0px;
    padding: 5px;
    border: 2px solid gray;
    font-size: small;
    text-align: left;
    background-color: #EEE;
    color: #444;
  }
  </style>
  <?
  $imgid=$_GET['reportimgdiv'];
  ?>
  <div id="reportForm001" class="popup" style="margin-top: 0em; ">   //solved: change id="report<?echo $imgid?>"
  <!--
  <form name="form1" method="post" target="reportframe" action="update/pagereportframe.php" class="subtle" style="position: relative; left: 1em; top: 2px;">
  -->
  <form name="form1" method="post" target="reportframe" action="includes/reporter.php" class="subtle" style="position: relative; left: 1em; top: 2px; background-color: white" >    
    <input name="id" type="hidden" value="<?echo $imgid; ?>">
    <div style="position: absolute; right: 1em; font-size: x-small"><a href="#" onClick="jQuery('.popup').remove();">CLOSE [X]</a></div>
    <h3>What is wrong with this image? <?echo $_GET['x'];?> X <?echo $_GET['y'];?> </h3> 
    <input type="radio" name="reason" value="1"> BLAH BLAH/b>. <br>  
    <input type="radio" name="reason" value="2"> BLAH BLAH/b>. <br>  
    <br>Comment (optional):<br>
    <textarea name="comment" rows="3" style="width: 100%"></textarea><br>
    <input value="Submit" type="submit">
  </form>
  </div>
 <?
  }
+5
1

ID ( ) div POPUP. . reporter.php

0

More articles:


All Articles