Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Autosize page

  • 07-06-2012 7:17pm
    #1
    Doylers
    Registered Users, Registered Users 2 Posts: 1,704 ✭✭✭


    Hey guys. trying to do a site at the moment. I want to find out if I can get it to change its size depending on the res of the screen its on. The images were created in PS and are fairly big resolution so the site being blown up onto a 42inch shouldnt make a difference. When I show the sit on my 192* 1080 the layout is fine, Banner on top centered, table in middle for text with image and footer image at the bottom. When I show it on my 1366 *768 laptop screen the main content area pushes down and it looks horrible.I tried 
    <script type="text/javascript">
      document.body.style.visibility='hidden';
      function autoscale()
      {
      var screenwidth=screen.width;
      var fontsize = screenwidth * 0.0117249;
      /* This number 0.0117249 just happens to work perfectly */
      var fonttext = fontsize + '';
        fontsize = fonttext + 'pt';
        document.body.style.fontSize = fontsize;
        document.body.style.visibility='visible';
        document.body.style.zoom = '100%';
        document.body.style.fontSize = "1em";
      }
   </script>
    This code but it doesnt seem to make a difference. I have no clue of CSS and the HTML I was show was basic and from an early 00's curriculum :rolleyes: Any Ideas would be great


Comments

  • #2
    smash
    Closed Accounts Posts: 34,809 ✭✭✭✭smash


    can you post your HTML code?


  • #3
    Doylers
    Registered Users, Registered Users 2 Posts: 1,704 ✭✭✭Doylers 


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
      document.body.style.visibility='hidden';
      function autoscale()
      {
      var screenwidth=screen.width;
      var fontsize = screenwidth * 0.0117249;
      /* This number 0.0117249 just happens to work perfectly */
      var fonttext = fontsize + '';
        fontsize = fonttext + 'pt';
        document.body.style.fontSize = fontsize;
        document.body.style.visibility='visible';
        document.body.style.zoom = '100%';
        document.body.style.fontSize = "1em";
      }
   </script>
</head>

<body background="Images/Tile.jpg"  onload="changeScreenSize(w,h)">

  

  
  <!--------------------------------------- MAIN BANNER ------------------------------------->
  
  <div align="center">
  <img src="Images/banner2.png" width="80%" height="30%" alt="banner" />
  </div>
  <!-------------------------------------END OF MAIN BANNER ----------------------------------->
  

<table width="78%" height="50%" border="0" cellspacing="0" cellpadding="15%" align="center" bgcolor="#FFFFFF" >
  <tr>
     <td>
         <table  width="100%" height="45%" border="0" cellspacing="0" cellpadding="70%" align="center">
           <tr>
              <td valign="middle" bgcolor="#74ccef"><img src="Images/iphoneimage.png" style="width:150; float: right;" "width="60%" height="60%" alt="iphone"/>
              <P> THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! THIS FONT MUST BE WEB 2.0 LOOKING ! </P>
             </td>
           </tr>
         </table>
     </td>
  </tr>
</table>




<div align="center"><img src="Images/footer.png" width="80%" height="30%" alt="footer" /></div>
</body>
</html>

    Theres the code, its pretty messy because this is the 6th attempt at just trying to get the page to size. I had tables wrapped around the main banner and the bottom one but they just caused more issues then it was worth, given the small amount of content I elected to leave them out completely.


  • #4
    Doylers
    Registered Users, Registered Users 2 Posts: 1,704 ✭✭✭Doylers


    Added more in, seems to be scaling better now still crap in IE so added a popup to tell IE people go get another browser:D I can put the site up online if needed just let me know when because I have an under construction page up at the moment

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="boilerplate.css" rel="stylesheet" type="text/css"/>
<link href="css/Untitled-1.css" rel="stylesheet" type="text/css"/>
<script src="respond.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--ADJUST SIZE OF PAGE -->
<script type="text/javascript">
      document.body.style.visibility='hidden';
      function autoscale()
      {
      var screenwidth=screen.width;
      var fontsize = screenwidth * 0.0117249;
      /* This number 0.0117249 just happens to work perfectly */
      var fonttext = fontsize + '';
        fontsize = fonttext + 'pt';
        document.body.style.fontSize = fontsize;
        document.body.style.visibility='visible';
        document.body.style.zoom = '100%';
        document.body.style.fontSize = "1em";
      }
   </script>
  <!--END OF ADJUST SIZE OF PAGE --> 
   <!--POP UP FOR IE USERS -->
   <SCRIPT LANGUAGE="JavaScript">

function GetCookie(name) {
  var arg=name+"=";
  var alen=arg.length;
  var clen=document.cookie.length;
  var i=0;
  while (i<clen) {
    var j=i+alen;
    if (document.cookie.substring(i,j)==arg)
      return "here";
    i=document.cookie.indexOf(" ",i)+1;
    if (i==0) break;
  }
  return null;
}
var visit=GetCookie("COOKIE1");
if (visit==null){
   var expire=new Date();
    var p=window.createPopup();
var pbody=p.document.body;
pbody.style.backgroundColor="red";
pbody.style.border="solid black 4px";
pbody.innerHTML= "Hi, I see your using internet exporer, please be adivsed the site will not display correctly in this broswer. We advise to use any other browser. Click outside the pop-up to close.";
p.show(480,300,400,80,document.body)
}

</SCRIPT>
<!--END OF POPUP FOR IE USERS -->
</head>

<body background="Images/Tile.jpg"  onload="changeScreenSize(w,h)">
  

<!--------------------------------------- MAIN BANNER ------------------------------------->
  
  <div align="center">
    
      <p><img src="Images/banner2.png" alt="banner" width="80%" height="30%" border="0" />
        
    </p>
    
  </div>
  <!-------------------------------------END OF MAIN BANNER ----------------------------------->
  

<table width="78%" height="50%" border="0" cellspacing="0" cellpadding="15%" align="center" bgcolor="#FFFFFF" >
  <tr>
     <td>
         <table  width="100%" height="45%" border="0" cellspacing="0" cellpadding="70%" align="center">
           <tr>
              <td valign="middle" bgcolor="#74ccef"><img src="Images/iphoneimage.png" style="width:150; float: right;" "width="60%" height="60%" alt="iphone"/>
             
             </td>
           </tr>
         </table>
     </td>
  </tr>
</table>




<div align="center"><img src="Images/footer.png" width="80%" height="28%" alt="footer" /></div>
</body>
</html>


  • #5
    Mister Man
    Registered Users, Registered Users 2 Posts: 955 ✭✭✭Mister Man


    Doylers wrote: »
    <!--POP UP FOR IE USERS -->
    <SCRIPT LANGUAGE="JavaScript">

    function GetCookie(name) {
    var arg=name+"=";
    var alen=arg.length;
    var clen=document.cookie.length;
    var i=0;
    while (i<clen) {
    var j=i+alen;
    if (document.cookie.substring(i,j)==arg)
    return "here";
    i=document.cookie.indexOf(" ",i)+1;
    if (i==0) break;
    }
    return null;
    }
    var visit=GetCookie("COOKIE1");
    if (visit==null){
    var expire=new Date();
    var p=window.createPopup();
    var pbody=p.document.body;
    pbody.style.backgroundColor="red";
    pbody.style.border="solid black 4px";
    pbody.innerHTML= "Hi, I see your using internet exporer, please be adivsed the site will not display correctly in this broswer. We advise to use any other browser. Click outside the pop-up to close.";
    p.show(480,300,400,80,document.body)
    }

    </SCRIPT>
    <!--END OF POPUP FOR IE USERS -->

    I don't know why I've never gone this...! I'll be using this in the future anyway!


  • #6
    S.M.B.
    Registered Users, Registered Users 2 Posts: 9,383 ✭✭✭S.M.B.


    That script that you've posted in the OP seems to just adjust the font-size based on the screen width.


  • Advertisement
  • #7
    Doylers
    Registered Users, Registered Users 2 Posts: 1,704 ✭✭✭Doylers


    S.M.B. wrote: »
    That script that you've posted in the OP seems to just adjust the font-size based on the screen width.

    right so im not sizing the page at all, i used 
    <link href="boilerplate.css" rel="stylesheet" type="text/css"/>
<link href="css/Untitled-1.css" rel="stylesheet" type="text/css"/>
    from adobe with two scripts and it seems to be helping. I have the page up so you can see how it scales for yourself, there is a small amount of vertical scroll under chrome and alot in IE. I think safari is ok not sure.

    http://www.irishappdesign.com/actualSite.html


Advertisement