[RESOLVED] Dynamic Page Width and Wide Screen Resolutions...

[RobDog888]

When developing a site you take into consideration the resolution of most users but what if you have a page thats 100% wide and the viewer has a wide screen? That will screw up your page for the most part.

So the question is can you have a page dynamically resize its width within a particular range? Like 800x600 res to 1280x1024 res and if they are wider it stays at 1024 width?

Thanks

[Lord_Rat]

This requires javascripting to test the client window and then dynamically set the width on the table. Basically, you check to see if the width is greater than 1280 and if so, make the width value = 1280, otherwise, just 100%.

[-TPM-]

You could use JavaScript to post back the screen res. and use that to define your widths maybe...

[RobDog888]

Well I have the table width properties set to 100% for an outter table that is the screen size with a nested table in it, centered. So not sure how to pass the size. Maybe do it all in javascript but then if a browser doesnt use js it wont work. Can it be done in the code behind or ?

[-TPM-]

You'd set an absolute width useing the post back screen size that'd come from your JS. If the browser doesn't support JS You've got more than screen size to worry about, asp.net uses JS as a default client side script. No it can't be done all in the code behind, as that's server side and has no idea about client properties.

[RobDog888]

So basically no way to do it without JS. I thought asp.net was more powerfull

[-TPM-]

The 'limit' is at the browser, not asp.net

[RobDog888]

But we should be able to work around the js limitations or if its disabled.
Usually there is more then one way to skin a cat. Meow!

[-TPM-]

You could use a different client side script, but JS is the default. What you've got to realize is that no .net code executes at the client side. If you open an aspx page and view the source you'll notice it's all HTML & JS. The power is the dynamic creation of that HTML and JS at runtime.

[RobDog888]

Ok, so if its in the html is there anything that can be done without using js?

[-TPM-]

Not with straight HTML (at least not that I know of). I wouldn't worry about it, like I said before if you get a client that doesn't allow JS you've/they've got bigger problems...

[RobDog888]

But the rest of the page is not relying on js so I dont have to worry about it, just the resizing.

Guess I just have to suffer and keep it sized for 800x600 unless there is nay other suggestions?

[-TPM-]

I guess you could have a bunch of different sized pages and have the user select the size...

[RobDog888]

No, that wouldnt look too professional.

I mean what do the pages look like when your running a wide screen laptop or something? They are probably all jacked up if the pages are dynamiclly sized. Ths is what I want to avoid.

[-TPM-]

Well a non JS site isn't going to look all that professional either IMO
Remember you can mix and match as it where with sizing. I.E. you don't have to do everything 100% or 800px. You can resize the things that look good like framing bars etc and have buttons and such fixed.

[RobDog888]

How about using a Panel control and thn nest the table in it? The panel control can be coded in the code behond but is there anything for the screen then still?

[-TPM-]

The simple answer... ....no.

The server won't have any size info without a postback, which won't happen without client side script.

[RobDog888]

I dont like that answer, can I give you a -ve?

Ok, I will suffer and take a fixed size.

[-TPM-]

Only if you +rep me twice first...

Are you seriously not goign to have any buttons or datagrids etc?

[RobDog888]

Yes, but does that mean they use JS too? I thought it was all server side with the asp.net controls?

[Lord_Rat]

So basically no way to do it without JS. I thought asp.net was more powerfull

So, there is no way to drive my car without an axle? I thought these Jaguars were better cars?

[RobDog888]

I'm still a noob when it comes to asp.net so are you saying that it uses JS anyways?

[-TPM-]

Yes, but does that mean they use JS too? I thought it was all server side with the asp.net controls?

Yes it does to handle the postback information.

[RobDog888]

Arrg! Then why does everybody make such a fuss about not using JS?

Since it does use it in asp.net then what happens if the browser doesnt support it?

[-TPM-]

Arrg! Then why does everybody make such a fuss about not using JS?

Since it does use it in asp.net then what happens if the browser doesnt support it?

A long time ago some browsers didn't support JS as well, but nowadays you'd have a job to find a site that doesn't use at least some. Take this page for example, if you look at the source and scroll down past all the css you'll notice 2 referenced js files...

[RobDog888]

So then how would I do this postback stuff to pass the size to the html table? Isnt that the same as just using js and the screen.width property?

[-TPM-]

So then how would I do this postback stuff to pass the size to the html table? Isnt that the same as just using js and the screen.width property?

screen.width would be at the client side, to resize everything you'd need to post that back so asp.net can then render all your controls at the right size.

[RobDog888]

O, so if I wanted to resize the datagrid according to the cell size then I will need a post back?

[visualAd]

About Javascript: 90% of browsers support Javascript now days. In fact, many common applications such as gMail and googleMaps simply will not work without Javascript. It is a common consensus that using Javascript is a bad idea. This is not the case.

If you code your web application entirely in Javascript, this is bad, because although it may work for the majority. Those who have it disabled, use text readers (e.g are blind) or use an ancient browser without Javascript cannot use your application. However, using Javascript to enhance the users experience of an already working application, is perfectly fine and in some situations is a must, those with JavaScript can reap the benefits it brings while those without can still do what they want to do, but, it will take a little longer and the usability won't be as rich.

Your problem is solved simply with a bit of client-side Javascript, if Javascript isn't working you cannot do it (some browsers send the screen res in the UA string but IE and Firefox do not). Below is some code I use on one of my sites, which resize certain elements based on screen size, the initial size of the window, is set to something generic, so if the browser doesn't support JS, the interface can still be used.

       <script type="text/javascript">
<!--

    var top = document.getElementById('top');
    var order_top = document.getElementById('order_top');
    var left = document.getElementById('order_left');
    var right = document.getElementById('order_right');
    var clear = document.getElementById('order_clear');

    top.style.height = '80px';
    order_top.style.height = '130px';

    if (clear) {	
	var remain = (screen.availHeight - 510) + 'px';

        left.style.height = remain;
        right.style.height = remain;
	right.style.visibility = '';
        clear.style.height = remain; 

        right.style.cssFloat = 'right';
        left.style.cssFloat = 'left';  
        right.style.styleFloat = 'right';
        left.style.styleFloat = 'left'; 
    }

//-->
</script>

[visualAd]

O, so if I wanted to resize the datagrid according to the cell size then I will need a post back?

No, you can give the element an ID and access and resize it via JS.

[RobDog888]

Ah, I think I'm starting to see the light.

I'll test it out and will post back.

[mendhak]

Just like 90% of browsers support javascript, a large percentage of resolutions are also 800*600 and above.

Users of the minority browsers are aware of the fact that certain sites will not work in their browser. It's somewhat cliched to go by word-of-mouth standards with web development, you can safely go for the largest percentage of your target audience rather than what analysts and self appointed gurus will tell you.

In summary, what I'm saying is you can go ahead and use Javascript on your page and if you really really need the page to stay at a certain resolution, set it to that resolution (as long as it's not too large)

[RobDog888]

Ok, sounds logical. I would set it to the larger resolution but a couple of users are using widescreen laptops to it would look really ugly on those systems. I will probably just use 800x600 page design and maybe center that in the screen so it wont look pushed all to one side on the widescreen laptops.

[mendhak]

Keep in mind that the amount of space the table has to the left can be controlled as a percentage too, so that it appears to be more or less proportional. Know what I mean?

[RobDog888]

Yup, got it. Thanks.