CODEWITHSUNDEEP
javascripthtmlcss
Kupto
Kupto

Reputation: 2992

HTML presentation slide, elements resize to keep the ratio

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.

Upvotes: 3

Views: 695

Answers (1)

btevfik
btevfik

Reputation: 3431

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

Upvotes: 1

Related Questions