Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

offsetLeft, offsetTop problem in IE

Status
Not open for further replies.
acent

acent

Technical User
Feb 17, 2006
247
0
0
US
Hello,

I have been searching the posts & web, but haven't found a solution to this. I'm almost loony tunes, so I figured I'd start a post. The following:
Code: 
function createAptBoxes() {
  var curTop=0,curLeft=0;
  document.write("<div id='apt1' class='aptBox'>Start: " + apt1start + "<br>Subject: " + apt1subject + "<br>");
  document.getElementById('apt1').style.height = ((40/60)*apt1duration + ((apt1duration/60)*3)) + "px";
  obj = document.getElementById(apt1start);
  if(obj.offsetParent) {
    do {
      curLeft += obj.offsetLeft;
      curTop += obj.offsetTop;
    } while(obj = obj.offsetParent)
    document.getElementById('apt1').style.left = curLeft - 4 + "px";
    document.getElementById('apt1').style.top = curTop + 1 + "px";
  }
}
works fine in FireFox to correctly position the div. However, in IE offsetleft and offsettop always return 0. The do while loop walks up the "food chain" of divs and table cells.

Any ideas?

Thnaks in advance,

Andrew

"If it's stupid but works, it isn't stupid."
-Murphy's Military Laws
 
Sort by date Sort by votes
Thanks for the reply.

apt1start is mysql date and time value
apt1duration is a number of minutes
Doctype is 4.01 Transitional

What do you mean by element structure? They are relatively placed in a table cell if that's what you mean. The table is centered on the page.

Andrew

"If it's stupid but works, it isn't stupid."
-Murphy's Military Laws
 
Upvote 0 Downvote
I commented out the document.write statement and it seemed to work fine in IE. Not sure if that is what's causing the issue.
 
Upvote 0 Downvote
Thanks for the reply,

yngjzy12: might I inquire what version of IE you're using? I tried it and curTop always returns 0. curLeft returns 0 until the last loop. Every loop should return a value > 0.

Thanks,

Andrew

"If it's stupid but works, it isn't stupid."
-Murphy's Military Laws
 
Upvote 0 Downvote
IE7
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>


<script language="javascript" type="text/javascript">
function createAptBoxes() {
  var curTop=0,curLeft=0;
  var apt1start = "someTable";
  //document.write("<div id='apt1' class='aptBox'>Start: " + apt1start + "<br>Subject: " + apt1subject + "<br>");
  //document.getElementById('apt1').style.height = ((40/60)*20 + ((20/60)*3)) + "px";

  obj = document.getElementById(apt1start);

  if(obj.offsetParent) {
    do {
      curLeft += obj.offsetLeft;
      curTop += obj.offsetTop;
    } while(obj = obj.offsetParent)
    alert(curLeft);
    alert(curTop);
    //document.getElementById('apt1').style.left = curLeft - 4 + "px";
    //document.getElementById('apt1').style.top = curTop + 1 + "px";
  }
}
</script>

</head>

<body onload="createAptBoxes();">

   <table id="someTable" border="1" style="position:relative;">
      <tr>
         <td>Some text in this column</td>
      </tr>
      <tr>
         <td>Some text in this column</td>
      </tr>
      <tr>
         <td>Some text in this column</td>
      </tr>
      <tr>
         <td>Some text in this column</td>
      </tr>
      <tr>
         <td>Some text in this column</td>
      </tr>
      <tr>
         <td>Some text in this column</td>
      </tr>
</body>
</html>
Also, if I changed your document.write to document.body.innerHTML += it also worked. Are you trying to append to the end of the document when your using document.write? I'm haven't used that often so I'm not what your trying to do with it.
 
Upvote 0 Downvote
apt1start is mysql date and time value
apt1duration is a number of minutes
Click to expand...

When I asked what values those variables held, I was hoping you'd tell me the actual values they held for the example you gave us, not the generic term for what is stored in them (which is no good at all to aid debugging).

Also, by "element structure", I really wanted to see the real actual code, not a description which could easily be completely mis-interpreted (again, real details aid debugging).

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
BillyRayPreachersSon:

I s'pose in the strictest terms, they are strings that are formated like Mysql date and time and integers.

Element Structure, see below.

yngjzy12:
I'm using IE7 on Vista.
When you comment out the bottom two getElementByIds how are you now positioning the element?

The plan is to have javascript create an object, then position that object in relation to a hourbox div. This page is inside the main page that has the header and navigation.

Code: 
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="5"><img src="/images/profile_28.gif" width="5" height="28" alt=""></td>
    <td width="99%" height="28" background="/images/profile_30.gif">
      <table width="100%" border="0" cellspacing="0" cellpadding="2">
        <tr>
          <td width="13">&nbsp;</td>
          <td nowrap><strong>Calendar :: Today</strong></td>
          <td width="715">&nbsp;</td>
          <td width="308" align="right">&nbsp;</td>
        </tr>
      </table>
    </td>
    <td width="5"><img src="/images/profile_32.gif" width="5" height="28" alt=""></td>
  </tr>
  <tr>
    <td valign="top" background="/images/profile_34.gif"><img src="/images/profile_34.gif" width="5" height="19" alt=""></td>
    <td>
      <div id="workingHours">
        <div class="clearDiv">Your appointments for today are listed below. To add an appointment, click on the hour of your appointment fill out pertinent details.</div>
        <div class="hourBox">
          <div class="hourTitle" style="height: 20px; background-color: #FFFFFF;">&nbsp;</div><div class="tslabel">00</div><div class="tslabel">15</div><div class="tslabel">30</div><div class="tslabel">45</div><div class="clearDiv"></div>
        </div>


      </div>
    </td>
    <td valign="top" background="/images/profile_36.gif"><img src="/images/profile_36.gif" width="5" height="42" alt=""></td>
  </tr>
  <tr>
    <td><img src="/images/profile_44.gif" width="5" height="6" alt=""></td>
    <td background="/images/profile_47.gif"><img src="/images/profile_47.gif" width="152" height="6" alt=""></td>
    <td><img src="/images/profile_48.gif" width="5" height="6" alt=""></td>
  </tr>
</table>

<script>
fillWorkingHours();
function fillWorkingHours() {
  var dte = new Date();
  var dandt;
  var startTime = 8;
  var numberOfHours = 9;

  dte.setHours(startTime);
  for (i=0; i<=numberOfHours; i++) {
    var hourNumber = eval(dte.getHours()+i);
    dandt = dte.getFullYear() + "-" +
      dte.getDate() + "-" +
      dte.getMonth() + " " +
      dte.getHours() + ":00:00";
    dte.setMinutes(0);
    if(dte.getHours() > 12) hourNumber = dte.getHours()-12; else hourNumber = dte.getHours();
    document.getElementById('workingHours').innerHTML += "<div class='hourbox'><div class='hourTitle'>" + hourNumber + "</div><div class='hourContent' id='"+dandt+"' onclick='openQuickFill(" + dte.getTime() + ");'>&nbsp;<br>&nbsp;</div></div>";
    dte.setHours(dte.getHours() + 1);
  }
}

var apt1id = 1;
var apt1start = "2008-27-2 10:15:00";
var apt1duration = 30;
var apt1publicity = "Public";
var apt1subject = "Test Appointment";
var apt1description = "This is a test of the appointment display system.";


createAptBoxes();
function createAptBoxes() {
  var curTop=curLeft=0;
  var indent = 0;
  document.write("<div id='apt1' class='aptBox'>Start: " + apt1start + "<br>Subject: " + apt1subject + "<br>");
document.getElementById('apt1').style.height = 40 + "px";
  document.getElementById('apt1').style.width = 150 + "px";
  if(apt1duration > 15 && apt1duration < 61) {
    document.getElementById('apt1').style.width = (apt1duration/15)*150 + "px";
    alert((apt1duration/15)*150);
    alert(document.getElementById('apt1').style.width);
  }
  obj = document.getElementById(apt1start.substring(0,apt1start.indexOf(":")) + ":00:00");
  if(obj.offsetParent) {
    do {
      curLeft += obj.offsetLeft;
      curTop += obj.offsetTop;
    } while(obj = obj.offsetParent)
    apt1start = apt1start.substring(apt1start.indexOf(":")+1,apt1start.length);
    apt1start = apt1start.substring(0,apt1start.indexOf(":"));
    indent = (apt1start/15) * 150;
    document.getElementById('apt1').style.left = curLeft - 4 + indent + "px";
    document.getElementById('apt1').style.top = curTop + 1 + "px";
  }
}
</script>

Thanks again for the help!

Andrew

"If it's stupid but works, it isn't stupid."
-Murphy's Military Laws
 
Upvote 0 Downvote
Here's something rather interesting:
The output from curLeft and curTop are as follows:
Code: 
FF        IE
30,147    0,0
35,175    0,0
45,175    0,0
178,175   0,0
489,251   0,0
489,251   0,0
          102,0

"If it's stupid but works, it isn't stupid."
-Murphy's Military Laws
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
275
xwb
xwb
amrmnabil
  • Locked
  • Question
React Problem
Replies
0
Views
122
amrmnabil
amrmnabil
bs6600
  • Locked
  • Question
Nested accordion problem
Replies
1
Views
83
bs6600
bs6600
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
560
ggriffit
ggriffit
bs6600
  • Locked
  • Question
Accordion - Anchors in panels causing problems 1
Replies
6
Views
124
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top