Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Location
    Tulsa, Oklahoma... just this side of hell
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Calendar: X/Y Coords NOT Working

    I have an HTML form...
    It looks similar to:

    Code:
    <form>
        <table id="section_001" style="display:none">
            <tr><td>blahblahblah</td></tr>
        </table>
        <table id="section_002" style="display:none">
            <tr><td>blahblahblah</td></tr>
        </table>
    </form>
    I have roughly 8 sections...
    I use the tables to break up the different parts of my form, and NO I do not want to split this form up into multiple pages. There is a button above each section that makes it visible... Basically it sets the [ style.display == "none or inline" ] for the table, this makes it visible or invisible...

    My problem is this...
    In some of the table cells, I have input fields that are for entering dates.
    Date Fields.
    What I want to do is when I click inside a date field, I want a calendar to pop up and the user can select a date from the calendar.
    Well, so far I have the calendar working.

    Code:
    <input id="some_id" value="0000-00-00" name="some_name" type="text" size="12" maxlength="12" onfocus="showCalendar(event)" />
    Everything is fine UNTIL...

    If I press a VIEW button to make one of the INVISIBLE sections appear... And I click inside a date field of THAT section... The calendar won't appear if that date-field WOULD HAVE BEEN under the bottom of the screen...

    I hope I am making sense.

    If the form sections were NOT invisible... it does the same thing... Basically, It cannot find a field that is lower than the bottom of the screen at LOAD TIME. All fields that are above the bottom of the screen at LOAD TIME run fine... The calendar pops right up... But for those lower? Nothing... No calendar...

    The code I use to make the calendar appear is:
    Code:
    // get X coords of obj
    function findPosX(obj)
    {
    	var curleft = 0;
    	if (obj.offsetParent)
    	{
    		while (obj.offsetParent)
    		{
    			curleft += obj.offsetLeft
    			obj = obj.offsetParent;
    		}
    	}
    	else if (obj.x)
    		curleft += obj.x;
    	return curleft;
    }
    
    // get Y coords of obj
    function findPosY(obj)
    {
    	var curtop = 0;
    	if (obj.offsetParent)
    	{
    		while (obj.offsetParent)
    		{
    			curtop += obj.offsetTop
    			obj = obj.offsetParent;
    		}
    	}
    	else if (obj.y)
    		curtop += obj.y;
    	return curtop;
    }
    
    function getElementPosition(elemID) 
    {
    	var offsetTrail = document.getElementById(elemID);
    	var offsetLeft = findPosX( document.getElementById( elemID ) );
    	var offsetTop = findPosY( document.getElementById( elemID ) );
    	var WinHeight = getInsideWindowHeight();
    
    	if ( offsetTop > WinHeight )
    	{
    		var offsetTop = WinHeight - offsetTop;
    		return {left:offsetLeft, top:offsetTop};
    	}
    
    // COMMENTED OUT TO TEST findPosX and findPosY
    //	while ( offsetTrail ) 
    //	{
    //		offsetLeft += offsetTrail.offsetLeft;
    //		offsetTop += offsetTrail.offsetTop;
    //		offsetTrail = offsetTrail.offsetParent;
    //	}
    
    	if (navigator.userAgent.indexOf("Mac") != -1 && typeof document.body.leftMargin != "undefined") 
    	{
    		offsetLeft += document.body.leftMargin;
    		offsetTop += document.body.topMargin;
    	}
    
    	return {left:offsetLeft, top:offsetTop};
    }
    
    // position and show calendar
    function showCalendar(evt) 
    {
    	evt = (evt) ? evt : event;
    	if (evt) 
    	{
    		if (document.getElementById("calendar").style.visibility != "visible") 
    		{
    			var elem = (evt.target) ? evt.target : evt.srcElement;
    			document.getElementById("fieldSelector").value = elem.id;
    			var position = getElementPosition(elem.id);
    			shiftTo("calendar", position.left + elem.offsetWidth, position.top );
    			show("calendar");
    		} 
    		else 
    		{
    			hide("calendar");
    		}
    	}
    }
    Can anyone help me?

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    It will help if you have this online so that we can actually see it instead of visualing it. If not possible, maybe you can provide a simple demo page that shows the behavior.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •