Using the total client width with CSS and JavaScript

Question

I have a page with dashboard similar to iGoogle. I need to have the page work on the available client width. I wrote a JavaScript to get the width and distribute it evenly amongst the divs. This script sets the element.style{width: 540px;} for the divs and it works very well when the page loads. Its something like:

window.onload = function SetWidth(){ document.getElementById(dashCell.id).style.width = (Math.round(window.innerWidth / 2)) + 'px';};

Now comes the pain point. The page has an UpdatePanel with an Timer which does a PostBack every 5000 milliseconds. This spoils the design as the page is loaded again and the element.style is lost.

I have read about fluid CSS and also considered using min-width and max-width CSS attributes. But the need of the hour is to get it working this way. I need a working solution for now, but better and right ways to achieve this are definitely welcome.

Why not use percentages for widths? jsfiddle.net/saluce/hPK5b — saluce
– saluce, Commented Jun 11, 2012 at 13:28
@saluce: The controls which load inside the containing divs have no size limitation. So, I use overflow: visible; for these divs with a fixed width or percentage width for container divs. But at least the outermost div should have a fixed width or else the page just keeps growing. I will still give this a try (its a lot of change) and get back to you asap. Thanks for the suggestion. — Horizon
– Horizon, Commented Jun 12, 2012 at 5:37
@saluce: The percentage width method did not work as expected. Possibly because of some tables being used in some places on the page. Nevertheless, I take your suggestion as a valid answer and a point in doing it the right way. Thanks! — Horizon
– Horizon, Commented Jun 13, 2012 at 7:31

Aristos · Accepted Answer · 2012-06-11 13:30:52Z

1

You must re-run your script and re-fix your css style on every UpdatePanel as

    <script type="text/javascript">     
   function SetWidth(){ 
      document.getElementById(dashCell.id).style.width = (Math.round(window.innerWidth / 2)) + 'px';
    }
    // set the onload call
    window.onload = SetWidth;

    // capture the UpdatePanel javascript events
    var prm = Sys.WebForms.PageRequestManager.getInstance();    
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);

    function InitializeRequest(sender, args) {      
    }

     // after the updatepanel complet refix the css
    function EndRequest(sender, args) {
         SetWidth();
    }
    </script>

Or save the initialize value somewhere and just apply them after the updatepanel refress.

answered Jun 11, 2012 at 13:30

Aristos

66.7k16 gold badges117 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Horizon Over a year ago

This works just the way I needed it to. Thanks a lot! I have a question though. The user has options to choose between 7 different layouts for the dashboard. These are UserControls and there is no UpdatePanel here. But my width setting script (SetWidth();) resides here. Now, the aspx page which contains these layouts has the UpdatePanel. Ideally, where should the script suggested by you go? apsx or ascx

Aristos Over a year ago

@Horizon as you describe it better to go global, on aspx.

Collectives™ on Stack Overflow

Using the total client width with CSS and JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related