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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 43
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why javascript calendar not pop-up at right location?

    Dear All,
    Can you visit http://183.78.169.54/v3/addTab.php. Then click on the Driver License tab and click the License Expiry Date pick button and the calendar appear at the bottom of the page rather than at the input box. How to solve this location problem?

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    The calender table has an element style with "top: 430px" ... if you set it to say 120px everything seems to be fine.

  • #3
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Why javascript calendar not pop-up at right location?

    Dear Devnull,
    Can you tell me which part is this 430px in the html or .js script I could not find? Thank you.

    Quote Originally Posted by devnull69 View Post
    The calender table has an element style with "top: 430px" ... if you set it to say 120px everything seems to be fine.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    I don't know if it's fixed HTML or dynamically inserted ... but you have this table (which is hidden by default):
    Code:
    <table id="epoch_popup_calendar" class="calendar" classname="calendar" style="position: absolute; top: 430px; left: 187px; display: none;">
    You see the "top: 430px;" there.

    This table will only become visible when you push the "Pick" button.

    Btw: You use the same id "epoch_popup_calendar" for two tables. This is not correct and can lead to unforeseen results. id attributes are supposed to be unique among all elements of a document.

  • #5
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear Devnull,
    I think is a dynamic table not part of my codes. Even the ID is not part of my codes. I check the class calendar exist in the .css file.Below is the .css. The funny part this calendar works well when I dont use the tab method but when I implement the Div to make separate tabs that is where I have this funny location of the calendar.

    Code:
    table.calendar {
    	font-family: Helvetica, Arial, sans-serif;
    	font-size: 0.8em;
    	border-collapse: collapse;
    	background-color: white;
    	border: solid #999999 1px;
    	background-color: white;
    	width: 200px;
    	text-align: center;
    	/*prevent user from selecting text in Mozilla & Safari - check calendar constructor for IE code)*/
    	-moz-user-select: none;
        /*-khtml-user-select: none;*/
    }
    table.calendar input, table.calendar select {
    	font-size: 10px;
    }
    table.calendar td {
    	border: 0;
    	font-size: 10px;
    	text-align: center;
    }
    div.mainheading {
    	margin: 2px;
    }
    table.caldayheading {
    	border-collapse: collapse;
    	cursor: pointer;
    	empty-cells: show;
    	margin: 0 6px 0 6px;
    }
    table.caldayheading td {
    	border: solid #CCCCCC 1px;
    	text-align: left;
    	color: #0054E3;
    	font-weight: bold;
    	width: 22px; /*should match calendar cell's width*/
    }
    table.caldayheading td.wkhead {
    	border-right: double #CCCCCC 3px;
    }
    table.calcells {
    	border-collapse: collapse;
    	cursor: pointer;
    	margin: 0 6px 0 6px;
    }
    table.calcells td {
    	border: solid #CCCCCC 1px;
    	vertical-align: top;
    	text-align: left;
    	font-weight: bold;
    	width: 22px;
    	height: 20px; /*IE doesn't like ems*/
    }
    table.calcells td div {
    	padding: 1px;
    	margin: 0;
    }
    table.calcells td.wkhead {
    	background-color: white;
    	text-align: center;
    	border-right: double #CCCCCC 3px;
    	color: #0054E3;
    }
    table.calcells td.wkday {
    	background-color: #DDDDDD;
    }
    table.calcells td.wkend {
    	background-color: #DDDDDD;
    }
    table.calcells td.curdate {
    
    }
    table.calcells td.cell_selected {
    	background-color: #99CCFF;
    	color: black;
    }
    table.calcells td.notmnth {
    	background-color: #FFFFFF;
    	color: #CCCCCC;
    }
    table.calcells td.notallowed {
    	background-color: white;
    	color: #EEEEEE;
    	font-style: italic;
    }
    table.calcells td.hover {
    	background-color: #999999;
    }
    Quote Originally Posted by devnull69 View Post
    I don't know if it's fixed HTML or dynamically inserted ... but you have this table (which is hidden by default):
    Code:
    <table id="epoch_popup_calendar" class="calendar" classname="calendar" style="position: absolute; top: 430px; left: 187px; display: none;">
    You see the "top: 430px;" there.

    This table will only become visible when you push the "Pick" button.

    Btw: You use the same id "epoch_popup_calendar" for two tables. This is not correct and can lead to unforeseen results. id attributes are supposed to be unique among all elements of a document.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I suspect the problem comes because your code is first calculating the position for the calendar boxes, and then subsequent code is setting up the tabs - so the calendar position is no longer correct. That's why it's OK without the tabs.

    If you set the tabs up first then it should be OK.

  • #7
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear SB65,
    I dont do any calculation for the calendar position. Is a third part java script which is called Epoch. I can also post my full codes there is no place I do any calculation for the positioning. What else could be the problem.


    Quote Originally Posted by SB65 View Post
    I suspect the problem comes because your code is first calculating the position for the calendar boxes, and then subsequent code is setting up the tabs - so the calendar position is no longer correct. That's why it's OK without the tabs.

    If you set the tabs up first then it should be OK.

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Your epoch code is positioned before your tab code - that's what I'm saying - and the epoch code is probably calculating the required position of the calendar, before the tab code fires. Try swapping these around.

    EDIT: Actually I don't think it's as simple as this. Your tabs code is not working well with the calendar popup, and hence the top calculation is incorrect.
    Last edited by SB65; 05-02-2011 at 10:57 AM.

  • #9
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear SB65,
    I have done the changes yet the same. Any other solution please? Thank you.

    Quote Originally Posted by SB65 View Post
    Your epoch code is positioned before your tab code - that's what I'm saying - and the epoch code is probably calculating the required position of the calendar, before the tab code fires. Try swapping these around.

    EDIT: Actually I don't think it's as simple as this. Your tabs code is not working well with the calendar popup, and hence the top calculation is incorrect.

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Well, since you're loading jQuery anyway, a radical solution is to lose your current plugins, use jQuery UI instead, and use the Tabs and Datepicker functionality.

  • #11
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear SB65,
    I have gone to this link ready. http://jqueryui.com/demos/datepicker/ . I dont know how to implement the datepicker first into my form. Can you give me some guidance? Actually what is the difference between jquery and jquery gui.
    Quote Originally Posted by SB65 View Post
    Well, since you're loading jQuery anyway, a radical solution is to lose your current plugins, use jQuery UI instead, and use the Tabs and Datepicker functionality.

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    jQuery UI provides some higher level functions which in turn use the jQuery framework. Using the datepicker is straightforward - there are multiple examples on the page you link to. At the basic level you just apply:

    Code:
    $( ".pickdate" ).datepicker();
    which will add a datepicker to any (input) field to which you have assigned a class of pickdate.

  • #13
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear SB65,
    I have added can you see why still the old one is coming out. http://183.78.169.54/v3/addTab.php. I have done this <input class="pickdate" id="driverLicenseExpiryDate" name="driverLicenseExpiryDate" value="<?php echo $driverLicenseExpiryDate?> and add this line in the

    Code:
    <script> 
            
            $(document).ready(function() {
            	  $( ".pickdate" ).datepicker();
    Quote Originally Posted by SB65 View Post
    jQuery UI provides some higher level functions which in turn use the jQuery framework. Using the datepicker is straightforward - there are multiple examples on the page you link to. At the basic level you just apply:

    Code:
    $( ".pickdate" ).datepicker();
    which will add a datepicker to any (input) field to which you have assigned a class of pickdate.

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You've added the code to call datepicker but you haven't included jQuery UI, and you still have all your previous code in there.

  • #15
    New Coder
    Join Date
    May 2011
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Dear SB65,
    I have added now the calendar appear but the there is no color and theme. I downloaded a whole folder jquery-ui-1.8.12.custom and put in my web server. I am trying to achieve like this one http://jqueryui.com/demos/datepicker/icon-trigger.html. Thank you.

    Quote Originally Posted by SB65 View Post
    You've added the code to call datepicker but you haven't included jQuery UI, and you still have all your previous code in there.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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