SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 30 of 30
  1. #26
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i have a div element with some other elements in it

    the div elements needs to resize itself and fit in one page on any resolution or any browser heightwise and widthwise with scroll bar

    even if the browser window is maxmized or minimised the div element shld resize itself as per the height widt of the window but shlld not reposition itself


    hope i am clear

  2. #27
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Use CSS for that job.

    Set the div to be absolutely positioned. The closest parent of the div that is relatively positioned determines the the normal extents of the div. The body is a good element that that.

    With the absolutely positioned div, set the left, top, right and bottom properties to 0. Now the div will always stay in place no matter how the window is resized.

    Sometimes javscript is the best solution, sometimes css is, and at times there'ss both. In this case, css is the winner. While it "can" be done with javascript, it's a hell of a lot more complex to even approximate the far simpler and more robust css solution.

    Sleep on it if you have to. I know I will, as it's 1:40am at the moment.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #28
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i cant position the div in absolute position
    as i have some other elements above it

    if its absolutely positioned this div appears on other elements

    i even tries uisng top , but no chnag ein div position

  4. #29
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Then why don't you reposition the div? You can append it to the body element which will place it at the end of the body, and thus, above everything else.

    Why don't you show us a test version of the page so that we can more quickly help you out.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #30
    SitePoint Guru
    Join Date
    Dec 2008
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    given below is the css, html, script of my page
    want to adjust div as per page resize and need to have scroll bars for the div

    <table style="width: 96%; height: 40px;" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td align="left">
    <img alt="" src="images/silver/btn-login.gif" /><a href="stockregister.aspx"><img
    alt="" src="images/silver/btn-reorder.gif" /></a>
    </td>
    <td>
    </td>
    <td style="color: #FFFFFF" align="left">
    </td>
    <td align="right">
    image image</td>
    </tr>
    <tr style="height: 4px; background-color: Black;">
    <td colspan="4">
    </td>
    </tr>
    <tr>
    <td align="left" colspan="4">
    <table border="0" cellpadding="0" cellspacing="1">
    <tr>
    <td id="help" class="tdmain" align="center">

    help></td>
    <td id="email" class="tdmain">
    email</td>
    <td class="tdmain">
    to excel</td>
    <td class="tdmain">
    reset</td>
    <td class="tdmain">
    search</td>
    <td class="tdmain">
    advance search</td>
    <td class="tdmain">

    Back
    </td>
    <td class="tdmain">
    first</td>
    <td class="tdmain">
    prev</td>
    <td class="tdmain">
    </td>
    <td class="tdmain">
    next</td>
    <td class="tdmain">
    last</td>
    <td class="tdmain">
    .......................
    </td>
    <td valign="bottom">
    <img alt="" src="images/silver/btn-login.gif" /></td>
    <td valign="bottom">
    <img alt="" src="images/silver/btn-login.gif" /></td>
    <td valign="bottom">
    <img alt="" src="images/silver/btn-login.gif" /></td>
    <td valign="bottom">
    <img alt="" src="images/silver/btn-login.gif" runat="server" /></td>
    </tr>
    </table>
    </td>
    </tr>
    <tr style="height: 4px; background-color: Black;">
    <td colspan="3">
    </td>
    </tr>
    </table>
    <div id="div1" >
    <asp:gridview id="gridview1" runat="server">


    </asp:gridview>
    </div>



    css for div

    background-color:Gray;
    text-align:center;
    position: static;
    overflow: auto;
    left: 0; top:0;


    script for getting the width /height of browser

    <script type="text/javascript">
    <!--
    var viewportwidth; var viewportheight;

    if (typeof window.innerWidth != 'undefined')
    {
    viewportwidth = window.innerWidth;
    viewportheight = window.innerHeight }

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
    {

    viewportwidth = document.documentElement.clientWidth;
    viewportheight = document.documentElement.clientHeight }
    // older versions of IE
    else { viewportwidth = document.getElementsByTagName('body')[0].clientWidth;
    viewportheight = document.getElementsByTagName('body')[0].clientHeight;

    }


    var width= viewportwidth;
    var height=viewportheight;
    document.getElementById("griddiv").style.width =width + "px";
    document.getElementById("griddiv").style.height = height + "px";
    </script>


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
  •