Solved

Page Size Detection

Posted on 2001-07-06
10
517 Views
Last Modified: 2008-03-06
I have created a web site with about 5 pages.  What I want it to do seems simple because you see it all the time.  If someone comes to my site and lets say that there screen is set to 1024 X 768 pixels, well I want my web site to display that size automatically.  Ok, fine now lets say someone comes along and they are set to 800 X 600.  Well, I want my page to adjust to that automatically on the width.  I don't think the lenght matters much since everyone scrolls down to the bottom of pages anyway.  Its the width that I want to be automatic.  

I used Publisher 2000 to build the web site.  It seems to think you have to setup your page to some dimensional size (example 7.5 w X 14 d) and if you do then depending on what screen size you computer is set when you view the pages if the page don?t fit your screen then you get scroll bars to view the pages.  I don?t want that, I want my pages to conform to what ever settings the visitor has.  I also have Internet Design Gold, but I?m sure if it has that built in properties for web design.

I hope my question is clear enough.
0
Comment
Question by:argmyster
10 Comments
 
LVL 1

Expert Comment

by:sweatje
Comment Utility
The information you are asking for is not sent to the server by default from the browser so you can use a server side scripting language (PHP) to get this information.

This link http://javascript.internet.com/user-details/browser-info.html will take you to a sample javascript that reveals details of the browser and screen resolution.  To get this to your server, you would have to write an index page that was basically all javascript and all it does is retrieve the screen resolution information and redirect to a url passing that info (i.e. script.php?w=1024&h=768)

That being said, even knowing the screen resolution is not the end of your troubles, because the user may not have the browser maximized.  In this case the window width and height could be significantly less than the resolution.  I believe there are javascript properties for this as well, but may be browser dependant (document.body.clientWidth works for IE5.5)
0
 
LVL 19

Expert Comment

by:webwoman
Comment Utility
First of all, don't use Publisher. It's a print program, not a web one, and it locks you into a 'page size' -- a setting that doesn't exist in a web editor, because there's no such thing. The 'page size' is whatever the USER decides it's going to be. You can size your CONTENT to fit a certain dimension, but it's certainly not REQUIRED.

You don't need javascript, don't need anything fancy, don't even need to spend any real money -- you just need to get rid of Publisher. Try using a web editor and learning some basic HTML. That will allow you to set your content to no particular dimensions at all -- it will just fill up the screen.

However, this does nothing for GRAPHICS -- if you want your graphics to resize, the best way to do that is to make different size graphics, and then you WILL need to use javascript to determine which graphics to load. But frankly, I think that's WAY beyond what you need.

If you have mostly text on your pages, and some graphics, you just need to start working in a web program and not a print one. Netscape Composer will probably be enough to get you started -- Netscape is free, and Composer is part of it. Or, you can get started with a real solid HTML editor, but you won't be able to directly see what you're doing. A good free code editor is FirstPage (www.evrsoft.com).

Lots of web tutorials are at www.webmonkey.com
There are tons more online... you can easily learn HTML and even most of the javascript you might ever want to use without spending anything on software or books. ;-)
0
 
LVL 22

Expert Comment

by:CJ_S
Comment Utility
Agrees with webwoman about not using Publisher. Best thing would be to use a texteditor for best performance (IMHO). If you want to scale in the width of the window you should use percentages instead of fixed width's. Whether a scrollbar appears or not depends then on the data. For example a table set to a width of 100% on a 800x600 screen and an image inside that table with a width of 100 won't show a horizontal scrollbar, but an image of 1000 will.

Vertical scrollbars depend on how much data is being truncated to the next line. If the total amount of data exceeds the height of the html page a vertical scrollbar will appear. To overcome that problem you can use a scrolling layer script. Once you use such a thing you can turn scrolling OFF for the whole page and use the layer to scroll to the next bit of data. If that is what you want I can show you a script. If not I suggest you take a look at plain HTML tags and their attributes.

<table width=100% border=1 cellspacing=0 cellpadding=0>
 <tr>
  <td width=100%>
   Hiyall
  </td>
 </tr>
</table>

regards,
CJ
0
 
LVL 19

Expert Comment

by:webwoman
Comment Utility
Publisher locks you into a page size that controls both width AND height -- and height doesn't exist on a web page. You don't break things into arbitrary 'pages', the 'page' is as much data as logically goes together. Could be 20 printed pages, could be 1/2 of one. Both are a web 'page'.

I would suggest you not even look at the code that Publisher generated -- not only is it not going to make any sense at this point, it's unbelievably bloated. Full of nested tables, made up graphics names, spacer graphics, empty cells, etc.

Either get a good web editor and use that, or get a good book/online tutorial, use Notepad and learn HTML. It will take a little longer when you start, but you'll be much better off in the long run.

And you won't be locked in to anything... ;-)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
>>>What I want it to do seems simple because you see it all the time.

Yes. It is simple if you understand HTML and a little scripting.  If
you do not then you are not going have a lot of luck.  The simple aproach
is to use tables with percentage sizing and let them re-size by themselves;
a possible solution that was already suggested.

That will work for simple layouts.  If you get into a page with absolute
positioning on some elements then it takes scripting.

And it can get real complicated if you need relative resizing of elements
based on resolution.  Then you can get into stuff like this, that no
editor can generate:

<script>
<!--
// this will size an element to the width of a 16% cell in an 80% table at any resolution

var IE = (document.all) ? 1 : 0;
var NS = (document.layers) ? 1 : 0;
var CurrentWidth = 0;
var cellwidth=0;
function SetNewSize(divid)
{
CurrentWidth= (IE)? document.body.clientWidth : window.innerWidth;
cellwidth=Math.round(CurrentWidth * .8 * .16);
if (IE)
{
document.all[divid].style.width=cellwidth;
}
if (NS)
{
document.layers[divid].width=cellwidth;
}
}
}
//-->
</script>

That's just to re-size one element which is assumed to already
be correctly position.

So whether or not it is simple depends on your skill level, and how
much time and effort you are willing spend learning.

Cd&
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 22

Expert Comment

by:CJ_S
Comment Utility
;-)

ww,
like I said, it's not tested
0
 
LVL 2

Accepted Solution

by:
TenTonJim earned 200 total points
Comment Utility
Plug in the appropriate pages below...this means you nead to make multiple sites for different size resolutions...you can see I got lazy and cheated and only sent to 2 sizes...

The "please stand by" part goes by so fast you do not even see it...you just suddenly are where you belong according to your screen resoulution.
Good Luck,
Jim S.
aka TenTonJim

<html>

<head>
<title>Ton Ton Web</title>
<script language="JavaScript1.2">
<!--
var width1=800
var height1=600
if (screen.width==width1||screen.height==height1)
window.location.replace("800600/index.htm")

var width2=640
var height2=480
if (screen.width==width2||screen.height==height2)
window.location.replace("640480/index.htm")

var width3=1024
var height3=768
if (screen.width==width3||screen.height==height3)
window.location.replace("800600/index.htm")

var width4=1280
var height4=1024
if (screen.width==width4||screen.height==height4)
window.location.replace("800600/index.htm")


//-->
</script>
</head>
<body>

<p align="center">Ten Ton Web<br>
Screen Size Detection<br>
Please Stand By</p>
</body>

</html>
0
 
LVL 19

Expert Comment

by:webwoman
Comment Utility
So, argmyster, are you completely confused now? ;-)

First step -- get rid of Publisher for web pages.
Second step -- learn a minimum of HTML, and get a real web editor.

Then you can decide how fancy you want to get with making things 'fit' the window...
0
 
LVL 1

Expert Comment

by:Technical_champ
Comment Utility
id say that ure using the wrong software , try using simpler ones like eversoft 2000 etc ehich are easy to use and there's no resolution problems , just design the page , upload it and forget it.
0
 
LVL 3

Author Comment

by:argmyster
Comment Utility
I'll go with this.  I am no longer using Publisher, it was just to get my site up and running as quickly as possible.

Thanks and I wish I could have given everyone some points, but this comments works best for me at this time.  Don't worry, I will be asking more questions and they will be worth the points.

Argmyster...
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now