[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 841
  • Last Modified:

html full page no resize

Hi :) I am looking for code to add to an html page that will
1.) make the page itself be shown at 100% regardless of the size of the browser (so it would prob. need a detect)
2.) also not be resizeable

it can be a fixed height and width if theres no way to detect, I just have a site that was created at 1024x768 and I want the viewer to be able to see it without have to scroll and not be able to enlarge it beyond that size.

any help would be great! thanks!
0
trish1221
Asked:
trish1221
  • 4
  • 3
1 Solution
 
trish1221Author Commented:
CAN SOMEONE PLEASE ANSWER MY QUESTION?  THANKS! its pretty easy I am just not as saavy as most ppl on this! thanks!
0
 
sundaramkumarCommented:
        var scrWidth = screen.availWidth;
         var scrHeight = screen.availHeight;
this will give the actual width and height. using this you can resize the table/div in the page.

//Get Available screen width, screen height. space
//you can get the actual space available less the toolbars
function init(){
      var screenH = screen.height;
      var screenW = screen.width;
      alert("Your Screen Resolution:\n" + screenW + "px x " + screenH + "px");
      if(document.all){
            availW = document.body.clientWidth;
            availH = document.body.clientHeight;
      }else{
            availW = innerWidth;
            availH = innerHeight;
      }
      alert("Available Real Estate:\n" + availW + "px + x " + availH + "px");
}

0
 
trish1221Author Commented:
It was still resizeable, I still had to scroll... did I put it in the wrong place?  I put it right after the title and it looks like this
<script language="JavaScript">
            <!--function openCenter
        var scrWidth = screen.availWidth;
         var scrHeight = screen.availHeight;
this will give the actual width and height. using this you can resize the table/div in the page.

//Get Available screen width, screen height. space
//you can get the actual space available less the toolbars
function init(){
      var screenH = screen.height;
      var screenW = screen.width;
      alert("Your Screen Resolution:\n" + screenW + "px x " + screenH + "px");
      if(document.all){
            availW = document.body.clientWidth;
            availH = document.body.clientHeight;
      }else{
            availW = innerWidth;
            availH = innerHeight;
      }
      alert("Available Real Estate:\n" + availW + "px + x " + availH + "px");
}

       
        }
// -->
            </script>
 because here it is online and its still  not working...I need this page to show up centered, full screen depending on the browser and not resizeable.  The person should not be able to scroll... Thank you for your answer but I must have something wrong b/c, it did not work... heres the page  : http://drelizabethking.com/

I am using firefox.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Michel PlungjanIT ExpertCommented:
1. 50 points and urgent?

2. here is something you might want to use which will not alienate people
It opens itself in a new window and redirects to a page where you can say thanks for visiting.
That way people like me who do NOT want you to mess with my main browser can see your site without getting annoyed.
It may still annoy in IE7 since it may open the window in tabs.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to DrElizabethKing.com</title>
<script language="JavaScript"><!--
function initScreen() { // thanks to Devic
  if (!opener) {
    window.open(location.href,'newwin')
    location='thanksforvisiting.html'
    return;
  }
  var iWidth = (window.innerWidth)?window.innerWidth:document.body.clientWidth;
  var iHeight = (window.innerWidth)?window.innerHeight:document.body.clientHeight;
      iWidth = 1024 - iWidth+10;
      iHeight = 768 - iHeight+10;
  window.resizeBy(iWidth, iHeight);
  if (window.innerWidth){self.moveTo((self.screen.width - self.outerWidth) / 2, (self.screen.height - self.outerHeight) / 2);}
  else {self.moveTo((self.screen.width-document.body.clientWidth) / 2, (self.screen.height-document.body.clientHeight) / 2);}
}

function newImage(arg) {
      if (document.images) {
            rslt = new Image();
            rslt.src = arg;
            return rslt;
      }
}

function changeImages() {
      if (document.images && (preloadFlag == true)) {
            for (var i=0; i<changeImages.arguments.length; i+=2) {
                  document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
            }
      }
}

var preloadFlag = false;
function preloadImages() {
      if (document.images) {
            index_03_over = newImage("images/index_03-over.jpg");
            index_04_over = newImage("images/index_04-over.jpg");
            index_05_over = newImage("images/index_05-over.jpg");
            index_06_over = newImage("images/index_06-over.jpg");
            index_07_over = newImage("images/index_07-over.jpg");
            index_08_over = newImage("images/index_08-over.jpg");
            index_09_over = newImage("images/index_09-over.jpg");
            index_18_over = newImage("images/index_18-over.jpg");
            preloadFlag = true;
      }
}
function initPage() {
  initScreen();
  preloadImages();
}
// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="initPage()" scroll="no">
<!-- ImageReady Slices (index.psd) -->
<div align="center">
<table id="Table_01" width="1024" height="769" border="0" cellpadding="0" cellspacing="0">

      <tr>
            <td rowspan="2">
                  <img src="images/index_01.jpg" width="263" height="115" alt=""></td>
            <td colspan="10">
                  <img src="images/index_02.jpg" width="761" height="66" alt=""></td>
      </tr>
      <tr>
            <td>
                  <a href="index.html"
                        onmouseover="changeImages('index_03', 'images/index_03-over.jpg'); return true;"
                        onmouseout="changeImages('index_03', 'images/index_03.jpg'); return true;"
                        onmousedown="changeImages('index_03', 'images/index_03-over.jpg'); return true;"
                        onmouseup="changeImages('index_03', 'images/index_03-over.jpg'); return true;">

                        <img name="index_03" src="images/index_03.jpg" width="112" height="49" border="0" alt=""></a></td>
            <td rowspan="2">
                  <a href="bio.html"
                        onmouseover="changeImages('index_04', 'images/index_04-over.jpg'); return true;"
                        onmouseout="changeImages('index_04', 'images/index_04.jpg'); return true;"
                        onmousedown="changeImages('index_04', 'images/index_04-over.jpg'); return true;"
                        onmouseup="changeImages('index_04', 'images/index_04-over.jpg'); return true;">
                        <img name="index_04" src="images/index_04.jpg" width="83" height="50" border="0" alt=""></a></td>
            <td>
                  <a href="services.html"
                        onmouseover="changeImages('index_05', 'images/index_05-over.jpg'); return true;"
                        onmouseout="changeImages('index_05', 'images/index_05.jpg'); return true;"
                        onmousedown="changeImages('index_05', 'images/index_05-over.jpg'); return true;"
                        onmouseup="changeImages('index_05', 'images/index_05-over.jpg'); return true;">
                        <img name="index_05" src="images/index_05.jpg" width="90" height="49" border="0" alt=""></a></td>
            <td colspan="2" rowspan="2">
                  <a href="workshops.html"
                        onmouseover="changeImages('index_06', 'images/index_06-over.jpg'); return true;"
                        onmouseout="changeImages('index_06', 'images/index_06.jpg'); return true;"
                        onmousedown="changeImages('index_06', 'images/index_06-over.jpg'); return true;"
                        onmouseup="changeImages('index_06', 'images/index_06-over.jpg'); return true;">

                        <img name="index_06" src="images/index_06.jpg" width="130" height="50" border="0" alt=""></a></td>
            <td>
                  <a href="contact.html"
                        onmouseover="changeImages('index_07', 'images/index_07-over.jpg'); return true;"
                        onmouseout="changeImages('index_07', 'images/index_07.jpg'); return true;"
                        onmousedown="changeImages('index_07', 'images/index_07-over.jpg'); return true;"
                        onmouseup="changeImages('index_07', 'images/index_07-over.jpg'); return true;">
                        <img name="index_07" src="images/index_07.jpg" width="107" height="49" border="0" alt=""></a></td>
            <td rowspan="2">
                  <a href="store.html"
                        onmouseover="changeImages('index_08', 'images/index_08-over.jpg'); return true;"
                        onmouseout="changeImages('index_08', 'images/index_08.jpg'); return true;"
                        onmousedown="changeImages('index_08', 'images/index_08-over.jpg'); return true;"
                        onmouseup="changeImages('index_08', 'images/index_08-over.jpg'); return true;">
                        <img name="index_08" src="images/index_08.jpg" width="91" height="50" border="0" alt=""></a></td>
            <td colspan="2">
                  <a href="links.html"
                        onmouseover="changeImages('index_09', 'images/index_09-over.jpg'); return true;"
                        onmouseout="changeImages('index_09', 'images/index_09.jpg'); return true;"
                        onmousedown="changeImages('index_09', 'images/index_09-over.jpg'); return true;"
                        onmouseup="changeImages('index_09', 'images/index_09-over.jpg'); return true;">

                        <img name="index_09" src="images/index_09.jpg" width="128" height="49" border="0" alt=""></a></td>
            <td rowspan="5">
                  <img src="images/index_10.jpg" width="20" height="639" alt=""></td>
      </tr>
      <tr>
            <td colspan="2" rowspan="4">
                  <img src="images/index_11.jpg" width="375" height="590" alt=""></td>
            <td rowspan="4">
                  <img src="images/index_12.jpg" width="90" height="590" alt=""></td>

            <td>
                  <img src="images/index_13.jpg" width="107" height="1" alt=""></td>
            <td colspan="2">
                  <img src="images/index_14.jpg" width="128" height="1" alt=""></td>
      </tr>
      <tr>
            <td rowspan="3">
                  <img src="images/index_15.jpg" width="83" height="589" alt=""></td>
            <td colspan="6">

                  <img src="images/index_16.jpg" width="456" height="543" alt=""></td>
      </tr>
      <tr>
            <td rowspan="2">
                  <img src="images/index_17.jpg" width="38" height="46" alt=""></td>
            <td colspan="4">
                  <a href="mailto:drking@drelizabethking.com" target="_blank"
                        onmouseover="changeImages('index_18', 'images/index_18-over.jpg'); return true;"
                        onmouseout="changeImages('index_18', 'images/index_18.jpg'); return true;"
                        onmousedown="changeImages('index_18', 'images/index_18-over.jpg'); return true;"
                        onmouseup="changeImages('index_18', 'images/index_18-over.jpg'); return true;">
                        <img name="index_18" src="images/index_18.jpg" width="317" height="42" border="0" alt=""></a></td>
            <td rowspan="2">

                  <img src="images/index_19.jpg" width="101" height="46" alt=""></td>
      </tr>
      <tr>
            <td colspan="4">
                  <img src="images/index_20.jpg" width="317" height="4" alt=""></td>
      </tr>
      <tr>
            <td colspan="11">
                  <a href="http://www.dvusdesigns.com">

                        <img src="images/index_21.jpg" width="1024" height="63" border="0" alt=""></a></td>
      </tr>
      <tr>
            <td>
                  <img src="images/spacer.gif" width="263" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="112" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="83" height="1" alt=""></td>

            <td>
                  <img src="images/spacer.gif" width="90" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="38" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="92" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="107" height="1" alt=""></td>
            <td>

                  <img src="images/spacer.gif" width="91" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="27" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="101" height="1" alt=""></td>
            <td>
                  <img src="images/spacer.gif" width="20" height="1" alt=""></td>
      </tr>
</table>
<!-- End ImageReady Slices -->
</div>
</body>
</html>
0
 
Michel PlungjanIT ExpertCommented:
PS:
<!--function openCenter
        {self.resizeTo(1024,768);self.moveTo(100,0);
((screen.width-1024)/2,(screen.height-768)/2);
       
        }
// -->
should be

<!--
function openCenter() {
  self.resizeTo(1024,768);
  self.moveTo((screen.width-1024)/2,(screen.height-768)/2);
}
// -->

but as I mentioned - please do not do that
0
 
trish1221Author Commented:
Im sorry Im new to this thing.. heres more points since it is for a client and urgent... so basically your suggestion is to create a page and before launching the site... like this? http://www.gianfrancoferre.com 

 basically the client said they wanted to be able to view the entire site without scrolling at all when they went to it... secondly when they maximized or expanded the browser window it should not be able to extend past the site size of the site... I copied and pasted your script into the page and uploaded it... what happens on your end cuz maybe its firefox? http://drelizabethking.com/ thanks for all your help so far !
0
 
Michel PlungjanIT ExpertCommented:
when I click on the link, it opens a new window and that window expands to hold the complete site, more or less in the middle of my 1600x1200 screen
Looks like what you wanted, and yes it is in FF 2.0.0.4

In IE it does the same, but additionally gives me a 404 in the originating window on the thanksforvisiting.html you need to create.
0
 
Michel PlungjanIT ExpertCommented:
PS: Change
window.open(location.href,'newwin')
to
window.open(location.href,'newwin','resizable=no')

to make it not resizable.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now