Can I make different pages for different resolutions? So if someone has a 1440x900 res, it will redirect to the 1440x900 html page. And if someone has a 1600x1050 res, it will redirect to the 1600x1050 html page.
As mentioned above don't create pages based on resolution. Use a fluid layout to cover what you can. For example I develop liquid layouts with a min and max width on the container. That way they resize nicely without looking out of proportion on different screens.
What I'm doing is putting a SWF movie player on a background of a drive up cinema. With a 1440x900 resolution, the SWF movie player fits in the spot I want it to go on the background, but any other resolution looks bad.
It can definitely be done, in fact it used to be the standard about fifteen years ago, taking the browser being used and the resolution being used and displaying a page to accommodate accordingly. But as been mentioned that is over kill and causes you to have to work 3 or 4 times harder when you can do the same thing without the need of programming and excess overhead by using CSS and a liquid layout. Unless there is a direct need it is usually not a good idea to have to do the same thing more than once, i.e. multiple pages for multiple resolutions. To answer your question specifically though you may find your answer here http://www.javascriptkit.com/howto/newtech3.shtml Hope this helps
Perfect! But, I tried putting in the below code and it was unsuccessful. <script type="text/javascript"> if (screen.width<=1440) //if screen is 8 bit or less document.body.style.background:#000000 url(images/splash-bg-test.jpg) no-repeat fixed center; //simple lime background for 8 bit screens else document.body.style.background="#E7F8ED" //fancy green background for modern screens. </script> Code (markup):
there should be ways to redirect people based on their browsers and res. but as some mentioned above, its pointless, just create a page based on 800x res or simply base your site cells on % and not a set value W x H
check out activeden.net or codecanyon.net they have a lot of scripts that will make your swf run full size in the background might cost you about $2 or $3 - that way you wont have to worry about the persons screen size hth
It is fully possible, though it is better to just use a fluid layout as was stated already. If you make a specific layout for each possible resolution then you will be in trouble with loading as there will be far too much information to process. Just use a dynamic/fluid layout and you will be good.
The layout we made is meant to be a full size background of a drive in cinema, and have a swf player on the screen that's in the background.
take a look at this script its at activeden.net one of the sites i mentioned earlier... you would use this then put your main content in a div layer with a higher z index... and if i am right in thinking you would also have to make your swf wmode transparent... its been a while since i did anything with flash... hth http://activeden.net/item/full-screen-resize-align-pattern-swf-picture/10399
For full-size background: http://www.w3.org/TR/css3-mediaqueries/#device-width But tbh, I would only add maximum 3 resolution types. For full-size flash video player... a JS solution (also max. 3 res types).
I put the below code in my HTML file, and it's not working on the 1280 screen I'm on atm. <style> @media screen and (device-width: 1024px) { background:#000000 url(images/splash-bg-test-1024.jpg) no-repeat fixed center; } @media screen and (device-width: 1280px) { background:#000000 url(images/splash-bg-test-1280.jpg) no-repeat fixed center; } @media screen and (device-width: 1440px) { background:#000000 url(images/splash-bg-test-1440.jpg) no-repeat fixed center; } @media screen and (device-width: 1680px) { background:#000000 url(images/splash-bg-test-1680.jpg) no-repeat fixed center; } @media screen and (device-width: 1920px) { background:#000000 url(images/splash-bg-test-1920.jpg) no-repeat fixed center; } </style> Code (markup):
Dave, does this come out green background all the time? <script type="text/javascript"> if (screen.width<=1440) //if screen is 8 bit or less document.body.style.background:#000000 url(images/splash-bg-test.jpg) no-repeat fixed center; //simple lime background for 8 bit screens else document.body.style.background="#E7F8ED" //fancy green background for modern screens. </script> Code (markup): The first item can't have a : it needs = document.body.style.background="background-image: url('image/arrow_sel.gif') no-repeat"; Code (markup):