SitePoint Sponsor

User Tag List

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

    layout disturbed when page load

    hey folks,
    i have just added jquery calender in my pages. but there is a problem. when the page loads. it doesn't sit like it should. but when i click the calender button and when calender open. the page settles down like it should. what could be the reason? here is my code
    Code HTML4Strict:
    <table>
    <tr>
                  <td>Installation Date</td>
     
                  <td>
                    <input type="text" name="txtInstallation" id="txtInstallation" class="txtfield" />
                    <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>
                          <div id="txtInstallation"></div>
    			</td>
                </tr>
    </table>
    All those who wander aren't lost.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Does this happen in all browsers or just one particular browser?

    If the table is a set width try using table{table-layout:fixed}.

    Does the div that holds the calendar have a fixed height and width and if so can it be specified in the css in case the js is populating too slowly for it to be recognised on page load.

  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 tried both my table is of 100&#37; and div too but not working, it happens only in IE and FF, chorme is fine
    All those who wander aren't lost.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Did you try table{table-layout:fixed}?

    If the calendar is a set width and height you would need pixels and not percent.

    Otherwise I'd need to see the page to check.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    There are two elements with the id "txtInstallation".

    You might need to post table CSS and the generated HTML from the calendar (what does the page look like when the JS runs).

  6. #6
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    stomme, example pls u know i m not ninja :P,
    paul i send u email for the link. as its pvt
    All those who wander aren't lost.

  7. #7
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Did you try table{table-layout:fixed}?

    If the calendar is a set width and height you would need pixels and not percent.

    Otherwise I'd need to see the page to check.
    The table is of 100% which is wrapped around a div class with width of 500px; and float:left, the table as i said is in 100%, i see some folks r not getting my question. what happen is when page loads, the footer doesn't touch base (whereas it should) but when u open calender (click on) the layout fall into place (the footer sits at base)
    All those who wander aren't lost.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The code you posted doesn't have a footer : )

    You can still post more code and CSS,

    Your input has an id:
    <input type="text" name="txtInstallation" id="txtInstallation"...
    and the div has the same id:
    <div id="txtInstallation"></div>
    And if your Javascript is looking for ElementById I can imagine it may get choose the wrong one.

    Unless you told your coworkers that you are some JS SuperNinja, it's not bad to be seen asking for help with work stuff. Relax a bit, or you'll lose hair. : )

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    The datepicker is sticking html at the end of the page which causes a gap in the page if that's what you are talking about.

    Try the following code which hopefully will not interfere with its working.

    Code:
    #ui-datepicker-div{top:-999em}

  10. #10
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ah! thanks paul. ur a life saver! thanks a million, btw sorry to ask but what happened and why did it fixed it?
    All those who wander aren't lost.

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Emaar: you have Firefox with the Web Dev ToolBar?

    If you have that, you can right click on a page, choose Web Developer and somewhere in there is the option "View Generated Source". This will show you HTML that the browser "sees" on the page, but isn't in source (meaning you can see HTML built by Javascript).

  12. #12
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    that is my corner stone for knowing layout
    All those who wander aren't lost.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by emaarkhan View Post
    btw sorry to ask but what happened and why did it fixed it?
    As I said the JS placed code at the end of the page which caused a gap in the page. Even though the element was already absolutely positioned the browser was still making room for it. I just moved it upwards and out of the way so it would not interfere with the footer.


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
  •