SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    my page get disturbed by adding jQuery

    hey folks,
    i am having issue with page layout. i have added this datepicker[HIGHLIGHT="JavaScript"]
    Code HTML4Strict:
    <table>
    <tr>
    <td>Date</td>
     <td><input type="text" id="txtInstallation" /></td?
    </tr>
    </table>


    Code JavaScript:
    				$(function(){
    					$("#txtInstallation").datepicker({
    					showOn: 'button',
    					buttonImage: '../images/calendar.png',
    					buttonImageOnly: true,
    					monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    					changeMonth: false,
    					changeYear: true,
    					dateFormat:'M-dd-yy'
     
    					})
    				});
    and i call it in div which is next to it
    Code HTML4Strict:
    <div id="txtInstallation"></div>
    now when page is loaded, out of order but when i click the calender button and when calender open, the page is fine, it feel like that when i open the page the very last div which is footer and rest outside wrapper for bottom footer, works in perfect manner
    All those who wander aren't lost.

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Location
    Kingdom of Saudi Arabia
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Both your ID, "txtInstallation" points to 2 element!

    ID should be unique...e.g.
    <input type="text" id="txtInstallation000" />
    <div id="txtInstallation"></div>

    Code:
    $(function(){
                        $("#txtInstallation000").datepicker({
                        showOn: 'button',
                        buttonImage: '../images/calendar.png',
                        buttonImageOnly: true,
                        monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                        changeMonth: false,
                        changeYear: true,
                        dateFormat:'M-dd-yy'
     
                        })
                    });

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i changed the div id to demo as in example
    Code HTML4Strict:
    <table>
                            <tr>
                                                                          <td>Installation Date</td>
                                                                          <td><script language="JavaScript" type="text/javascript">
      																	$(function() {
    																		$("#txtInstallation").datepicker({
    																			showOn: 'button',
    																			buttonImage: '../images/calendar.png',
    																			buttonImageOnly: true,
    																			monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    																			changeMonth: false,
    			  																changeYear: true,
    																			dateFormat:'M-dd-yy'
     
    																		});
    																	});
                                                                        </script>
                                                                        <input type="text" name="txtInstallation" id="txtInstallation" class="txtfield"  />
                                                                        <div id="demo"></div>
                                                                        </td>
                                                                        </tr>
    </table>
    All those who wander aren't lost.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Location
    Kingdom of Saudi Arabia
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you intend to use datepicker on both element, use class not ID...but if only on 1 element ID is fine....

    Code:
    $(function(){
    	//text field
    	$("#txtInstallation").datepicker({
    		showOn: 'focus',
    		buttonImage: '../images/calendar.png',
    		buttonImageOnly: true,
    		monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    		changeMonth: false,
    		changeYear: true,
    		dateFormat:'M-dd-yy'
    	});
    	
    	//button
    	$("#myButton").datepicker({
    		showOn: 'button',
    		buttonImage: '../images/calendar.png',
    		buttonImageOnly: true,
    		monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    		changeMonth: false,
    		changeYear: true,
    		dateFormat:'M-dd-yy'
    	});
    	
    	//element
    	$(".demo").datepicker({
    		showOn: 'focus',
    		buttonImage: '../images/calendar.png',
    		buttonImageOnly: true,
    		monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    		changeMonth: false,
    		changeYear: true,
    		dateFormat:'M-dd-yy'
    	});
    });
    
    <input type="text" id="txtInstallation" />
    <button id="" value="myButton" />
    <div class="demo">test me1</div>
    <div class="demo">test me2</div>

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Angry

    its still have same problem
    Code JavaScript:
    <input type="text" name="txtInstallation"  readonly="readonly" id="txtInstallation" value="<?php echo $results['INSTALLATION_DATE'][$i]; ?>" class="txtfield" />
    <script type="text/javascript">
          $(function() {
              $("#txtInstallation").datepicker({
                  showOn: 'button',
                  buttonImage: '../images/calendar.png',
                  buttonImageOnly: true,
                  monthNamesShort: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                  changeMonth: false,
                  changeYear: true,
                  dateFormat:'M-dd,yy'
     
              });
          });
    </script>
    All those who wander aren't lost.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Location
    Kingdom of Saudi Arabia
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you be more specific on what error or what problem you've encountered? on the first few post you've put a raw HTML now I'm seeing some PHP codes already...which probably a different use case.

    Also, refrain from using a status smiley that you're angry because it doesn't work..hoping not on the people who replied to your post.

  7. #7
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    well basically, my layout is to have footer at base of the screen, no matter how short of small the screen is. now when i load any page, which has calender in it. the footer is held in space. (not touching, the base of screen) but when i click on calender to open the footer touches the base.
    ps. the angry emo was to show my feeling i was getting angry on why it is happening
    All those who wander aren't lost.


Bookmarks

Posting Permissions

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