Using javascript to fill browser?

wightsto · Nov 15, 2009

Hi, really new to all this really so please be patient

I have designed a website for my workplace that is a very rough guide basically to start with.

There are a few mages and most info still needs to be filled in.

I created the site with photoshop, and although very basic, it does what it needs to do.

The problem i have is that i would really like it to scale with the browser window.

I have searched high and low and finally found this,

-------------------------------------------------------------------

No, its not possible in html, however you are right, it does work in JavaScript, if you require the script then:

CODE

var jswidth = screen.width;
if (jswidth==800) document.write("<div class='main' style='width:63%;'>");
else if (jswidth==1024) document.write("<div class='main' style='width:72%;'>");
else if (jswidth==1152) document.write("<div class='main' style='width:75%;'>");
else if (jswidth==1280) document.write("<div class='main' style='width:77%;'>");
else document.write("<div class='main' style='width:63%;'>");

Name that file homepage.js for your convienience. Link to this file by using

CODE

<script type="text/javascript"src="/index/homepage.js"></script>

right before your main content in the homepage. Then make this file:

CODE

document.write("</div>");

Name it divclose.js. Place the following code after your content:

CODE

<script type="text/javascript"src="/index/divclose.js"></script>

This is untested, but I am almost positive it would work.

--------------------------

Sorry for messy copy and paste, but atleast hopefully i can get my question across!

Now i got this to work for me on a simple page, then tried to add this to my photoshop site through editing index.html and nothing happens?

Can anyone please help, im stumped :nuts:

Thanks in advance for any replies that can help!

Dave

xav0989 · Nov 16, 2009

A few guidelines concerning posting about help in the programming section:
Use the [NOPARSE]

Code:

,

HTML:

,

PHP:

[/NOPARSE] around your code blocks, for clarity and to maintain code formatting.
Try to provide a link to an example on your website or post the content of your files (without any personal information) so that we have something we can work with.

gomarc · Nov 16, 2009

Is it possible you placed your *.html page and the homepage.js and divclose.js code in the same directory?

If this is the case, the “/index/*.js” points to the wrong place. Try using:

HTML:

<script type="text/javascript" src="homepage.js"></script>

and

HTML:

<script type="text/javascript" src="divclose.js"></script>

misson · Nov 16, 2009

That's just... ugh. For one, document.write is sorely outdated. Second, what if JS is unsupported or disabled? Third, the screen size is not the viewport size.

I suspect the page design is flawed; the code you posted has what's called a smell. A better design would be to give whatever is to the left or right of the content a rigid width, using (e.g.) ems. For example:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <style type="text/css">
    .menu, .menu li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .nav {
        padding: 1em;
        width: 10em;
        float: left;
        background: #CCC;
    }
    #Content {
        background: #CCF;
        padding: 1em 1em 1em 13em;
    }
    </style>
  </head>
  <body>
    <ul class="nav menu">
     <li>foo</li>
      <li>bar</li>
      <li>baz</li>
      <li>bam</li>
      <li>bug-AWWK!</li>
      <li>qux</li>
      <li>quux</li>
    </ul>
   <div id="Content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec fermentum orci nec felis. Sed 
sollicitudin diam id sapien. Ut libero. Vestibulum quam libero, malesuada et, ornare id, aliquet id, tellus. 
Nullam dapibus viverra quam. Vestibulum sit amet nunc vel justo dictum pharetra. Proin eleifend mi eget 
massa. Pellentesque feugiat sapien a ante. Duis imperdiet venenatis purus. Praesent auctor erat eu tortor. 
Nulla facilisi. Nunc felis sem, ornare quis, blandit sed, elementum at, lorem. Integer hendrerit, dolor nec 
mollis scelerisque, nisi libero posuere odio, et vulputate magna sem in eros.</p>

<p>Sed quam neque, hendrerit vel, faucibus nec, egestas vitae, diam. Proin vel dui non mauris dapibus 
malesuada. Cras tempus urna nec enim. Maecenas neque sapien, mollis elementum, accumsan eu, 
fringilla in, velit. Sed lorem. Integer sed est. Suspendisse ac odio vitae libero vulputate aliquet. Donec 
pulvinar vestibulum felis. Vestibulum viverra posuere risus. Curabitur nisl magna, pellentesque in, 
malesuada vitae, sodales eget, lacus.</p>
    </div>
  </body>
</html>

The effect is similar to what you post, but is much more fluid and works in broader circumstances.

wightsto · Nov 17, 2009

Thanks for all replys, after having a look and thinking about it i think i will have to redesign site.

Think the problem i have is that i want site to expand with browser window, and contract to smaller resolutions (not too bothered if stretches / squeezes images slightly) but keep all in proportion, and what i have done, with help of photoshop is make it all pixel widths and not percentages?

Not quite sure if i make sense to you guys, but heres code i have;

Code:

<html>
<head>
<title>Wight Stonemasonry</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="homepage.js"></script>
</head> 
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script type="text/javascript" src="homepage.js"></script> 
<div style="width:   100%;  margin:  0;  padding:  0">
<table id="Table_01" width="1201" height="1501" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="2" rowspan="3">
            <img src="images/index_01.gif" width="243" height="237" alt=""></td>
        <td colspan="4">
            <img src="images/index_02.gif" width="957" height="147" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="147" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/index_03.gif" width="2" height="90" alt=""></td>
        <td colspan="3">
            <img src="images/index_04.gif" width="955" height="62" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="62" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/index_05.gif" width="54" height="28" alt=""></td>
        <td rowspan="5">
            <img src="images/index_06.gif" width="867" height="1222" alt=""></td>
        <td rowspan="6">
            <img src="images/index_07.gif" width="34" height="1291" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="28" alt=""></td>
    </tr>
    <tr>
        <td rowspan="5">
            <img src="images/index_08.gif" width="104" height="1263" alt=""></td>
        <td colspan="3">
            <a href="index.html">
                <img src="images/Wight-Stonemasonry-Index_09.gif" width="195" height="68" border="0" alt=""></a></td>
        <td>
            <img src="images/spacer.gif" width="1" height="68" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <a href="monumental.html">
                <img src="images/Wight-Stonemasonry-Index_10.gif" width="195" height="53" border="0" alt=""></a></td>
        <td>
            <img src="images/spacer.gif" width="1" height="53" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <a href="architectural.html">
                <img src="images/Wight-Stonemasonry-Index_11.gif" width="195" height="66" border="0" alt=""></a></td>
        <td>
            <img src="images/spacer.gif" width="1" height="66" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="2">
            <img src="images/index_12.gif" width="195" height="1076" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1007" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/index_13.gif" width="867" height="69" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="69" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="104" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="139" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="2" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="54" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="867" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="34" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

As i say, really new to this, and haven't quite figured out the 'logic' behind it all, to apply it to what i have done.

Any help is appreciated again

Dave

misson · Nov 18, 2009

wightsto said:
Think the problem i have is that i want site to expand with browser window, and contract to smaller resolutions (not too bothered if stretches / squeezes images slightly) but keep all in proportion, and what i have done, with help of photoshop is make it all pixel widths and not percentages?

You'll want to use a fixed or fluid layout. When you read one of the articles from that link, pay attention to what browser version they write of. IE, for instance, changes quite a bit between versions and many of the articles aren't updated to cover newer versions.

Using tables for layout is terribly outdated. Read "Why tables for layout is stupid" and "Why avoiding tables (for layout) is important".

Since you're just starting out, check out these sites for an introduction to HTML:

Keep an eye out for anything that covers semantic HTML. For CSS, check out "20 Websites To Help You Learn and Master CSS" and the yellow links on "CSS, Accessibility and Standards". Some people like W3Schools, but it's a mixed bag of good and outdated information.

connerty · Nov 20, 2009

As spoken of before what you are aiming for is a fluid design in order for you to create a fluid design you need to create images that can be repeated horizontally.

You can play about with Firefox by holding CTRL and +/- this will zoom out and in to your page if done correctly using CSS your page should move and resize when you hit these keys.

Using javascript to fill browser?

wightsto

New Member

xav0989

Community Public Relation

gomarc

Member

misson

Community Paragon

wightsto

New Member

misson

Community Paragon

connerty

New Member

Free Web Hosting

Our Community

Legal