3

I am quite new to HTML and am not very fluent in HMTL terminology (English as well :). I am trying to create presentation slide (something like Powerpoint in MS Office). The functionality should be:

  1. Everything (text, pictures, etc.) inside the slide must stay in position, size and ratio relative to the slide while the slide resizes.
  2. The slide has 4:3 resolution.
  3. The slide should be realized by <div> element.
  4. The slide stays in the middle of the screen.
  5. No inline styles should have to be used inside the slide.
  6. Plain Javascript, css and HTML must be used.

So far I have managed to devise this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>
Image Resize Test
</title>
<style type="text/css">
*
{
   margin: 0;
}
body
{
   background-color: black;
   width: 100%;
   height: 100%;
}
#wrapper
{
   font-size:100%;
   background-color: white;
   display: block;
   position: absolute;
   left: 50%;
}
#content
{
   font-family:"Times New Roman";
   font-size:80%;
}

h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
<script>
   window.onload = function()
   {
      window.onresize();
   }

   window.onresize = function()
   {
        var width = window.innerWidth;
        var height = window.innerHeight;

        if (width / 4 > height / 3)
        {
           width = height / 3 * 4;
        }
        else
        {
           height = width / 4 * 3;
        }
        var wrapper = document.getElementById("wrapper");
        wrapper.style.height = height + "px";
        wrapper.style.width = width + "px";
        wrapper.style.marginLeft = (-width/2) + "px";
        wrapper.style.fontSize = (height) + "%";
   }
</script>
</head>
<body>
<div id="wrapper">
  <div id="content">
  <H1>
  aaaa
  </H1>
  <H2>
  bbbb
  </H2>
  <p>cccc</p>
    text
  </div>
</body>
</html>

Is this a good solution to my problem or are there simpler/more efficient/more robust or more "pro" ways to do this?

Could it be solved without the Javascript? Atleast partially.

Is there a way to easily specify x/y offset relative to the side for any element within the slide (perhaps as attribute)?

How to apply styles for elements that would be variably deep within the slide element tree?

Help on any of the things I ask would be appreciated.

Kupto
  • 2,802
  • 2
  • 13
  • 16
  • you are new to html and trying to build something like powerpoint? – btevfik Apr 03 '13 at 05:53
  • This looks good to me – apaul Apr 03 '13 at 05:56
  • it is a school thingy – Kupto Apr 03 '13 at 05:57
  • also... how do I get around to apply these styles to any element that would be deeper within the tree? – Kupto Apr 03 '13 at 05:59
  • if you are just trying to resize the content of div on window resize, it looks ok. except that this will not resize images – btevfik Apr 03 '13 at 06:00
  • i dont know if you are allowed to use any outside plugins. but this is a really good one to resize fonts http://fittextjs.com/ alternatively i guess you need to loop through child of elements and resize their fonts. – btevfik Apr 03 '13 at 06:03
  • @btevfik unfortunately =( no plugins are allowed... can't be the Javascript I have there reduced at all? I hoped that the centering thing could have been done differently. Also how would I go through the looping and changing? – Kupto Apr 03 '13 at 06:06
  • Yes I have read about this plugin it was already referenced here in the forums. – Kupto Apr 03 '13 at 06:09
  • centering for the div? you can use `margin:0 auto` and set a width lets say 50% – btevfik Apr 03 '13 at 06:20
  • @btevfik I am not sure how would work what you propose. Would the requirements still apply? Could you please post an answer with some code so I know how is it meant? – Kupto Apr 03 '13 at 06:29

1 Answers1

1

this is basically same as yours but without explicitly setting margin in javascript. so remove that part and make margin: 0 auto; at wrapper.

http://jsfiddle.net/btevfik/VuqJX/

it seems like you can keep the aspect ratio with only css and html but as far as i can tell this only works when you resize width of the window. when you change height it wont work.

Maintain the aspect ratio of a div with CSS

Community
  • 1
  • 1
btevfik
  • 3,391
  • 3
  • 27
  • 39