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 gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Inconsistant Results - Static Code 1

Status
Not open for further replies.
acent

acent

Technical User
Feb 17, 2006
247
US
Hello All,

I'm hoping someone can help me out with this. My code, all statically written, displays calendaring information of appointments. I'm pretty sure this is not the leanest & meanest way to do this, but nevertheless, my experience level tells me that this code should have the same result every time. I'm testing under FireFox 2.0.0.2. Sometimes it does exactly what I want (attached image of correct results.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >

<head>

<title>Untitled Page</title>

</head>

<body bgcolor="#000000">

<style>

.hourTitle {

  float: left;

  width: 30px;

  height: 84px;

  text-align: center;

  font-weight: bold;

  background-color: #5f7279;

  color: #FFFFFF;

}

.aptBox {

  display: block;

  float: left;

  height: 0px;

  width: 99%;
  left: 0%;

  overflow: hidden;

  position: absolute;

  z-index: 2;

}

.quickFillBox {

  width: 255px;

  overflow: hidden;

  background-color: #FFFFFF;

  border: 1px solid #5f7279;

  padding: 5px;

  position: absolute;

  z-index: 99;

  left: 0px;

  top: 0px;

}

.labelBox {

  float: left;

  width: 75px;

  padding-top: 2px;

  padding-bottom: 2px;

  overflow: hidden;

}

.contentBox {

  width: 170px;

  padding-top: 2px;

  padding-bottom: 2px;

  overflow: hidden;

}

input, select, div {

  color: #000000;

}

.clearDiv {

  clear: both;

  font-weight: bold;

}

</style>



<div id="workingHours">

  <div style="width: 552px; background-color: #5f7279;">

    <div style="text-indent: 15px; color: white;">April 18</div>

    <div style="width: 200px; height: 5px; overflow: hidden;">&nbsp;</div>

  </div>

</div>



<div id="quickFill" class="quickFillBox">

  <div class="clearDiv">

    <div class="labelBox" style="float: left; width: 170px;">Quick Enter Appointment</div><div class="contentBox"style="width: 75px; text-align: right;"><a href="#" onclick="closeQuickFill();">Close</a></div>

  </div>

  <div class="labelBox">Date</div>

  <div class="contentBox" id="quickFillBox.date">&nbsp;</div>

  <div class="labelBox">Start Time</div>

  <div class="contentBox" id="quickFillBox.startTime">&nbsp;</div>

  <div class="labelBox">Duation</div>

  <div class="contentBox"><input type="text" id="duration" name="duration" maxlength="6" size="8" /> Hours</div>

  <div class="labelBox">Publicity</div>

  <div class="contentBox"><select name="publicity"><option>Public</option><option>Private</option></select></div>

  <div class="labelBox">Subject</div>

  <div class="contentBox"><input type="text" id="subject" name="subject" /></div>

  <div class="labelBox">Description</div>

  <div class="contentBox"><textarea id="description" name="description" rows="3"></textarea></div>

  <div class="labelBox">&nbsp;</div>

  <div class="contentBox"><input type="button" value="save" class="lifebutton" onclick="closeQuickFill();" /></div>

  <div class="clearDiv">&nbsp;</div>

</div>

<script>

var boxNo = 0;



var xpos = 0;

var ypos = 0;



var apts = new Array();



fillWorkingHours();

document.getElementById('quickFill').style.display = 'none';

document.onmousemove = trackMouse;



function trackMouse(evt) {

  if(navigator.appName == "Netscape") { //FireFox & Safari code

    xpos = evt.pageX;

    ypos = evt.pageY;

  } else if(navigator.appName == "Microsoft Internet Explorer" || navigator.appName == "Opera") { //IE & Opera code

    xpos = window.event.clientX;

    ypos = window.event.clientY;

  }

}



function fillWorkingHours() {

  var dte = new Date();

  var dandt;

  var startTime = 8;

  var numberOfHours = 9;

  

  document.getElementById('workingHours').innerHTML += "<div id='hourLabels' style='float: left; width: 30px;'></div>";

  document.getElementById('workingHours').innerHTML += "<div id='hourSlots' style='float: left; width: 550px; height: " + (numberOfHours+1)*84 + "px; background-image: url(calendarBG.gif); position: relative;'></div>";

  dte.setHours(startTime);

  dte.setMinutes(0);

  for(i=0; i<=numberOfHours; i++) {

    var hourNumber = dte.getHours()+i;

    if(dte.getHours() > 12) hourNumber = dte.getHours()-12; else hourNumber = dte.getHours();

    document.getElementById('hourLabels').innerHTML += "<div class='hourTitle'>" + hourNumber + "</div>";

    dte.setHours(dte.getHours()+1);

  }

}



function openQuickFill(dandt) {

  var dte = new Date();

  var qf = document.getElementById('quickFill');

  dte.setTime(dandt);

  document.getElementById('quickFillBox.date').innerHTML = dte.getMonth() + "/" + dte.getDay() + "/" + dte.getFullYear() + " <a href='#'>&gt;</a>";

  document.getElementById('quickFillBox.startTime').innerHTML = dte.getHours();

  if(dte.getMinutes() < 10) { document.getElementById('quickFillBox.startTime').innerHTML += ":0" + dte.getMinutes();

  } else { document.getElementById('quickFillBox.startTime').innerHTML += ":" + dte.getMinutes(); }

  qf.style.left = xpos+1 + "px";

  qf.style.top = ypos+1 + "px";

  qf.style.display = '';

}



function closeQuickFill() {

  document.getElementById('quickFill').style.display='none';

}



var apt0=[0,"2008-17-3 9:10:00",60,"Public","Test Appointment","This is a test of the appointment display system.",""];

apts.push(apt0);

var apt1=[1,"2008-17-3 9:15:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];

apts.push(apt1);

var apt2=[2,"2008-17-3 10:0:0",45,"Public","Test Appointment","This is a test of the appointment display system.",""];

apts.push(apt2);

var apt3=[3,"2008-17-3 10:0:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];

apts.push(apt3);

/*

var apt4=[4,"2008-16-3 10:0:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];

apts.push(apt4);

var apt5=[5,"2008-16-3 10:15:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];

apts.push(apt5);

var apt6=[6,"2008-16-3 10:15:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];

apts.push(apt6);

var apt7=[7,"2008-16-3 10:30:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];

apts.push(apt7);

var apt8=[8,"2008-16-3 10:30:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];

apts.push(apt8);

var apt9=[9,"2008-16-3 10:0:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];

apts.push(apt9);

var apt10=[10,"2008-16-3 10:0:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];

apts.push(apt10);

var apt11=[11,"2008-16-3 10:0:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];

apts.push(apt11);

var apt12=[12,"2008-16-3 10:0:0",15,"Public","Test Appointment","This is a test of the appointment display system.",""];

apts.push(apt12);

*/



for(i=0; i<apts.length; i++) {

  fillApts(i);

}



function fillApts(x) {

  var dte = createDate(apts[x][1]);

  var startTime = 8;

  

  boxNo = apts[x][0];

  aptMarker = "apt" + boxNo;

  document.getElementById("hourSlots").innerHTML += "<div id='" + aptMarker + "' class='aptBox'><div id='"+aptMarker+"child' style='margin-left: 4px; background-color: #FF0000; color: #FFFFFF;'>"+aptMarker+"</div></div>";

  if(apts[x][2]>15) {

    document.getElementById(aptMarker).style.height = ((apts[x][2]/15)*20) + ((apts[x][2]/15)*1) + "px";

    document.getElementById(aptMarker+"child").style.height = ((apts[x][2]/15)*20) + ((apts[x][2]/15)*.5) + "px";

  } else {

    document.getElementById(aptMarker).style.height = 20 + "px"; 

    document.getElementById(aptMarker+"child").style.height = 20 + "px";

  }

  document.getElementById(aptMarker).style.top = (((dte.getHours()-startTime)+(dte.getMinutes()/60))*84) + "px";

  dte = null;
  startTime = null;

}


setWidths();

function setWidths() {
  var counter = 1;
  var tmp = new Array();
  for(i=0; i<apts.length; i++) {
    for(j=0; j<apts.length; j++) {
      if(apts[i][0] != apts[j][0]) {
        var iDate = createDate(apts[i][1]);
        var jDate = createDate(apts[j][1]);
        if(iDate.getTime() >= jDate.getTime()) {
          jDate.setMinutes(jDate.getMinutes()+apts[j][2]);
          if(iDate.getTime() <= jDate.getTime()) {
            counter++;
            tmp.push(apts[j][0]);
          }
        }
      }
    }
    iDate = jDate = null;
    for(k=0; k<tmp.length; k++) {
      document.getElementById('apt'+tmp[k]).style.width = 99/counter + "%";
    }
    if(counter > 1) document.getElementById('apt'+i).style.width = 99/counter + "%";
    counter = 1;
  }
  tmp = null;
  counter = null;
}

setIndent();
function setIndent() {
  var tmp = apts.slice();
  var iDate, jDate;

  for(i=1; i<tmp.length; i++) {
    iDate = createDate(tmp[i][1]);
    jDate = createDate(tmp[i-1][1]);
    jDate.setMinutes(jDate.getMinutes()+tmp[i-1][2]);
    if(iDate.getTime() <= jDate.getTime()) {
      document.getElementById('apt'+i).style.left = parseInt(document.getElementById('apt'+(i-1)).style.width) + "%";
      if(document.getElementById('apt'+i).style.left) document.getElementById('apt'+i).style.left = parseInt(document.getElementById('apt'+(i-1)).style.width) + parseInt(document.getElementById('apt'+(i-1)).style.left) + "%";
    } else {
      var k = i-1;
      while(k >=0) {
        jDate = createDate(tmp[k][1]);
        jDate.setMinutes(jDate.getMinutes()+tmp[k][2]);
        if(iDate.getTime() <= jDate.getTime()) {
          document.getElementById('apt'+i).style.left = parseInt(document.getElementById('apt'+k).style.width) + "%";
        }
        k--;
      }
    }
  }
  tmp = null;
  iDate = jDate = null;
}




function createDate(dandt) {

  var dte = new Date();

  var d, dy, dd, dm, h, m;

  

  d = dandt.substring(0,dandt.indexOf(" "));

  dy = parseInt(d.substring(0,d.indexOf("-")));

  dd = parseInt(d.substring(d.indexOf("-")+1,d.lastIndexOf("-")));

  dm = parseInt(d.substring(d.lastIndexOf("-")+1,d.length));

  h = dandt.substring(dandt.indexOf(" ")+1,dandt.length);

  h = h.substring(0,h.indexOf(":"));

  m = dandt.substring(dandt.indexOf(":")+1,dandt.length);

  m = m.substring(0,m.indexOf(":"));

  

  dte.setFullYear(parseInt(dy));

  dte.setDate(parseInt(dd));

  dte.setMonth(parseInt(dm));

  dte.setHours(parseInt(h));

  dte.setMinutes(parseInt(m));

  dte.setSeconds(0);



  d = dy = dd = dm = h = m = null;

  return dte;

}

</script>

</body>

</html>

When I press F5 a few times, the result changes. The elements are always positioned correctly relative to the width, but the widths change.

Thanks,
Andrew

"If it's stupid but works, it isn't stupid."
-Murphy's Military Laws
 
Sort by date Sort by votes
I see the same thing in Fx 2.0.0.13 under Windows XP. My gut feeling without looking too hard is that the % widths are being calculated before everything has had a chance to render (occasionally).

My advice would be to perform all your rendering only after the page has loaded, e.g:

Code: 
window.onload = setup;

function setup() {
   // do all your init code here
}

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thank you soooo much! that was what I needed!

Can I bother you for another question? Why doesn't this work in Internet Exploder?

Thanks,
Andrew

"If it's stupid but works, it isn't stupid."
-Murphy's Military Laws
 
Upvote 0 Downvote
Nevermind. Figured it out. It was the setIndent method was pulling the left property of the style without explicitly stating the left property. Even though the class had the property explicitly stated, IE couldn't pull that property.

Andrew

"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

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
558
rogerte
rogerte
tyutghf
  • Locked
  • Question
Konami code help 3
Replies
10
Views
345
tyutghf
tyutghf
deepumay15
  • Locked
  • Question
array input value how to replace decode value as Output using JavaScript code
Replies
1
Views
145
feherke
feherke
waubain
  • Locked
  • Question
Save table contents results in empty array
Replies
7
Views
237
vacunita
vacunita
jason.lex
  • Locked
  • Question
How do I edit this code to also count the checkboxes checked and total values
Replies
3
Views
196
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top