"Also, I can kill you with my brain." ([info]toastedcheese) wrote in [info]webdesign,
@ 2008-05-09 21:11:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
screen resolution question
Last time I posted here, people were quite helpful, so I thought I'd ask you guys again to help me with a design problem.

I'm designing a site that works well with 800 x 600 monitors except for one graphic in the right bottom corner of the screen. I've written an alternate stylesheet in which the graphic disappear with judicious use of the overflow property.

So now what I'd really like is to find a javascript code that will detect the resolution and use this style sheet instead of the default when appropriate. My javascript skills are pretty much limited to stealing other people's code, so if someone could find something that requires a minimum of tinkering, that would be awesome.

Thanks so much in advance!

(Post a new comment)


[info]tobyspit
2008-05-10 01:53 am UTC (link)
http://www.pageresource.com/jscript/jscreen.htm


there you go!

(Reply to this)(Thread)

[info]toastedcheese
2008-05-10 05:11 am UTC (link)
That looks like a good place to begin, but I really don't want to create two versions of the entire website, because that will make it twice as difficult to update. I'd really just like to switch out .css pages instead.

(Reply to this)(Parent)(Thread)

[info]tobyspit
2008-05-10 02:03 pm UTC (link)
you don't have to

in the if statment, put a css switch out code.


http://www.webmasterworld.com/forum91/4554.htm

(Reply to this)(Parent)(Thread)

[info]toastedcheese
2008-05-10 03:33 pm UTC (link)
I'd tried doing something like that, I just couldn't figure out how to make the syntax work. That links looks useful. Thanks!

(Reply to this)(Parent)

[info]asterix_pop
2008-05-10 08:17 am UTC (link)
Just have your script check the resolution and alter the css of that element if it is below a certain threshold, e.g.

<SCRIPT language="JavaScript">
<!--
if ((screen.width<=800) && (screen.height<=600))
{
    var elementtostyle=document.getElementById(”ID_of_element”);
    elementtostyle.style.display = none;
}
//-->
</SCRIPT>

You get the idea, I don't know what you did to make the graphic disappear (what's wrong with setting "display: none;"?

Alternatively you may want to have this graphic turned OFF by default (in CSS), and have the javascript turn it back on. This would mean that only people who have javascript turned on would see the graphic (and also mean that anyone using 800x600 or lower without javascript wouldn't see a potentially messed up or unusable page).

(Reply to this)(Thread)

[info]toastedcheese
2008-05-10 03:32 pm UTC (link)
I'll try that, thanks!

(Reply to this)(Parent)

Create an Account
Forgot your login?
Login w/ OpenID
English • Español • Deutsch • Русский…