Forum Moderators: not2easy
Here's the thing, I originally created a website for 1024x768 users. Right, I'm an idiot (ore wa baka yarou!). I hadn't been in the design game for awhile with anything serious, and I assumed that with everyone buying new 'dells' lately and things, winXP computers would come at 1024 standard. Either not enough people bought new computers, or they don't. Whichever the case, I obviously have a problem, because my page is completely unintelligable in 800x600.
I need to make a choice. The one good thing is that ONLY the main index page is really out of the loop. Although not beautiful, the content pages are completely readable and travelable in 800x600, so that's a very good thing.
About the main page however, it's really the heart of the site, and to me, it's what's going to keep people wanting to stay on the site and check things out. Here's where it gets to the part I need advice.
I have a few choices:
1.) Make a splash page and ask people their resolution. I see 100 problems with this (the first one being people who don't even know what a resolution is!), and I think I'd lose a lot of visitors
2.) write a bit of javascript to detect the users resolution and send them to the right version of the homepage. A few problems here, one with the search engines HATING things like this :(
3.) Simply let the scroll bars do their thing, reactivate them (i have them locked and gone right now) and let the page scroll, in 800x600 you'll see the left and the middle, and you'll have to scroll to get to the right side bar, which are links and advertising). This is possible and doable, but then again, don't people hate scrolling horizontally?
4.) and finally, the idea that I just came up with, and the whole purpose of this thread. There are a few "boxes" lets say, that are making this page non800x600-friendly. If I could simple make a script to detect resolution and then REMOVE these, it would be perfect. I just don't know how to do it. What I was thinking, was give the div's I want to get rid of a class name, and then use a little javascript to detect the resolution and get rid of all the div's in that class if it's under 1024x768. Is this possible?
And just 1 more thing. If I do make that script, how does it detect resolution?
In other words, does it actually look at your computers resolution, or does it look at your windows resolution? Because if it doesn't, this wouldn't work for people surfing around in 1600x1200 with 2 800x600 browsers open side by side :(
HELP! Thank you!
Well, as for the detection of screen resolution, it is fairly easy using javascript. Of course there are those 15% or so of users that have javascript disabled...
But let's assume for a moment that the users do have js enabled.
This script uses a very simple-minded browser sniff. I have used much more complex ones than this, but in the interest of brevity, this will do.
The function hideBoxes() is fired by the body's onload() event. If the width of the screen is 900px or smaller when the document loads, the extraBox1 div will be hidden.
<script type="text/javascript">
<!--
function hideBoxes(){
if(navigator.appName=='Microsoft Internet Explorer'){
availW = document.body.clientWidth;
}else{
availW = innerWidth;
}
if(availW<=900){
document.getElementById('extraBox1').style.display="none"
}
}
//-->
</script>
<style type="text/css">
body{
font-family: arial, helvetica, sans-serif;
font-size: 1em;
}
#mainBox{
float: left;
border: 1px solid black;
padding: .5em 1em .5em 1em;
width: 500px;
}
#mainBox h2{
border-bottom: 2px solid black;
}
#extraBox1 {
float: left;
display: block;
background-color: #B0C4DE;
font-size: 81%;
width: 450px;
}
</style>
</head>
<body onload="hideBoxes()">
<div id="mainBox">
<h2>Main Box</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et neque.
Quisque nec metus. Nunc porta. Suspendisse vehicula. Nunc vitae nibh sit
amet ante pulvinar fermentum. Curabitur pede nisl, pretium a, ullamcorper
consequat, ultrices at, dolor. Cras a lacus. Duis sit amet eros. Proin
sit amet magna. Aenean eu dui. Quisque nulla.
</div>
<div id="extraBox1">
Donec rutrum interdum leo. Curabitur ac arcu vitae mi interdum aliquet.
Ut imperdiet. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Quisque in nisl nec leo sollicitudin dictum. Praesent libero quam, porta
a, egestas vitae, viverra id, diam. Vestibulum dapibus ultrices wisi. Morbi
et dolor sed felis iaculis laoreet. Sed blandit urna ornare mauris. Nulla
facilisi. Maecenas faucibus nunc sit amet metus. Fusce convallis. Vivamus
posuere massa vel dui.
</div>
</body>
Now I suppose that you could hide extraBox1 by default, that way if the users do not have js enabled and have a small screen, they will still be able to use the page.
ajkimoto
ajkimoto
