DHTMLX

Start Building Professional
Web Apps Today

dhtmlxSuite 4.2
dhtmlxScheduler 4.3
dhtmlxVault 2.4
dhtmlxGantt 3.2
dhtmlxSuite 4.2

Categories

Question details Back To List

Question posted by gvdb on Aug 05, 2008 14:40

open dhtmlx forum

wrong position

I can't find out what I'm doing wrong. but the calendar position is always ont the bottom of the page.
And of course in ie: operation aborted

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>

<script>
window.dhx_globalImgPath="dt/imgs/";
</script>
<script language="JavaScript" src="dt/dhtmlxcommon.js" type="text/javascript" ></script>
<script language="JavaScript" src="dt/dhtmlxcalendar.js" type="text/javascript" ></script>
<script language="JavaScript" src="dt/dhtmlxcombo.js" type="text/javascript" ></script>
<link rel="STYLESHEET" type="text/css" href="dt/dhtmlxcalendar.css">
<link rel="STYLESHEET" type="text/css" href="dt/dhtmlxcombo.css">

</head>
<body>
<div id="wrapper">

<div id="contentwrapper">
<div id="content">
<input type="text" id="calInput1" class="css1" readonly="true"><script>cal1 = new dhtmlxCalendarObject('calInput1');cal1.setPosition('calInput1',0,0)</script>
<br><br>
<div id="combo_zone2" style="width:200px; height:30px;"></div>
<script>
var z=new dhtmlXCombo("combo_zone2","alfa2",200);
z.addOption([[1,1111],[2,2222],[3,3333],[4,4444],[5,5555]]);
</script>

</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test


</div>

</body>
</html>

Answer posted by Support on Aug 06, 2008 03:14

>>And of course in ie: operation aborted

http://dhtmlx.com/docs/products/kb/index.shtml?cat=search&page=1&q=4363
You need to move calendar initialization code to onload event

Answer posted by Support on Aug 06, 2008 03:54

Example of onload event for your case :
......
<body onLoad="doOnLoad();">
<div id="wrapper">

<div id="contentwrapper">
<div id="content">
<input type="text" id="calInput1" class="css1" readonly="true">
<script>
function doOnLoad () {
cal1 = new dhtmlxCalendarObject('calInput1');cal1.setPosition('calInput1',0,0)
}
</script>
<br><br>
<div id="combo_zone2" style="width:200px; height:30px;"></div>
<script>
var z=new dhtmlXCombo("combo_zone2","alfa2",200);
z.addOption([[1,1111],[2,2222],[3,3333],[4,4444],[5,5555]]);
</script>

</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>test


</div>

</body>

Please check the attached dhtmlxcalendar.zip archive to obtain fixed version of dhtmlxcalendar.js

Attachments (1)

dhtmlxcalendar.zip

12.34 Kb

Answer posted by gvdb on Aug 07, 2008 12:35

thanks for the solution.

I had some error's in the recent posted dhtmlcalendar.zip

1) wrong arguments?

dhtmlxCalendarObject.prototype.setPosition = function(argA,argB,argC){
    if(typeof(argA)=='object'){
        var posAr = this.getPosition(argA)
        var left = posAr[0]+argA.offsetWidth+(argC||0);
        var top = posAr[1]+(argB||0);
    }
    this.entObj.style.position = "absolute";
    this.entObj.style.top = (top||argA)+"px"; ---> argB instead of argA
    this.entObj.style.left = (left||argB)+"px"; ----> argC instead of argB
}

2) put remarks in front of <<<<<<.mine, =========,>>>>>>>

dhtmlxCalendarObject.prototype.show = function(){
    this.parent.style.display = '';

    if (this.con.nodeName == 'INPUT') {
        var aleft = getAbsoluteLeft(this.con);
        var atop = getAbsoluteTop(this.con);
        this.parent.style.left = getAbsoluteLeft(this.con) + 'px';
        this.parent.style.top = getAbsoluteTop(this.con) + 'px';
    }
//<<<<<<< .mine

    if(_isIE){//add iframe under calendard in IE (IE 6 issue with select box fix)
        this.parent.style.width = "0px";
        this.parent.style.height = "0px";
        if(this.parent.style.zIndex==0){
            this.parent.style.zIndex = 10;
        }
        if(this.parent.style.position == "absolute" && this.ifr==undefined){
            this.ifr = document.createElement("IFRAME");
            this.ifr.style.position = "absolute";
            this.ifr.style.zIndex = "0";
            this.ifr.frameBorder = "no";

            this.ifr.src = window.dhx_globalImgPath+"/blank.html"
            this.ifr.style.top = this.parent.offsetTop + 'px';
            this.ifr.style.left = this.parent.offsetLeft + 'px';
            this.ifr.className = this.style + "_ifr";
            this.ifr.style.className = this.style;
            this.parent.parentNode.appendChild(this.ifr)
        } else {
        this.ifr.style.top = this.parent.offsetTop + 'px';
            this.ifr.style.left = this.parent.offsetLeft + 'px';
        }
    }
//=======
//>>>>>>> .r1612

    if (this.ifr != undefined)
    {
    this.ifr.style.top = this.parent.offsetTop + 'px';
        this.ifr.style.left = this.parent.offsetLeft + 'px';
        this.ifr.style.display = 'block';
    }
//    this.draw();
}

Answer posted by Support on Aug 08, 2008 02:43

1) Arguments are correct
If "argA" is object, then :
calendar.top = object.top + argB
celendar.left = object.left + object.widht + argC
else if "argA" is not object :
calendar.top = argA
calendar.left = argB

If you need to set absolute coordinates just use cal.setPosition (y, x);

2) ou have to replace your dhtmlxcalendar.js with dhtmlxcalendar.js from attachment in the previous post

---
setPosition exmaple in attachment.

Attachments (1)

cal_setPosition.html

1.72 Kb