2

I am messing a around with impress.js a little. I wanted 4 slides and wanted to make it to look like there is a square in the middle.

My code looks like this:

<!doctype html>
<html>
    <head>
        <title>my first presentation using impress.js</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
        <link href="css/impress-demo.css" rel="stylesheet" />
    </head>
    <body>

        <div id="impress">
            <div id="1von4" class="step slide" data-x="0" data-y="0" data-rotate="0">
                <p>This is my first slide.</p>
            </div>
            <div id="2von4" class="step slide" data-x="950" data-y="950" data-rotate="90">
                <p>This is my second slide.</p>
            </div>
            <div id="3von4" class="step slide" data-x="0" data-y="1800" data rotate="180">
                <p>This is my third slide.</p>
            </div>
            <div id="4von4" class="step slide" data-x="-950" data-y="950" data rotate="270">
                <p>This is my fourth slide.</p>
            </div>
        </div>
        <script type="text/javascript" src="js/impress.js"></script>
        <script>impress().init();</script>
    </body>
</html>

It has to look like this in the end. enter image description here

I do not know why it is not working. Help is appreciated.

Dennis Meng
  • 5,109
  • 14
  • 33
  • 36
  • Call me stupid, but you are not referencing the `impress.js` file in your code. How does it work at all? – Marco Sep 30 '13 at 07:10

1 Answers1

3

If you follow the index.html on Bartaz GitHub site, you would see, that you missed a line in configuring your presentation.

<script src="js/impress.js"></script> //add this line and edit the path accordingly
<script>impress().init();</script>

The code for rotating itself looks fine from my point of view. You just need to tinker with the positioning and the x and y axis.

Kind regards

//edit: Check your data-rotate in your third and fourth step. the - is missing, and therefor it does not work, like it should.

<div id="impress">
        <div id="1von4" class="step slide" data-x="0" data-y="0" data-rotate="0">
            <p style="font-size:36px;">This is my first slide.</p>
        </div>
        <div id="2von4" class="step slide" data-x="950" data-y="950" data-rotate="90">
            <p style="font-size:36px;">This is my second slide.</p>
        </div>
        <div id="3von4" class="step slide" data-x="0" data-y="1800" data-rotate="180">
            <p style="font-size:36px;">This is my third slide.</p>
        </div>
        <div id="4von4" class="step slide" data-x="-950" data-y="950" data-rotate="270">
            <p style="font-size:36px;">This is my fourth slide.</p>
        </div>
    </div>
Marco
  • 22,856
  • 9
  • 75
  • 124
  • uhm didn't I use this line in my code yet Ôo ? between and

    edit: well yeah I already read the tutorial and followed yodas advices ;) the funny thing is that the first slide is working and the other 2 are not xP

     –  Sep 30 '13 at 07:17
  • Wow, I swear this line wasn't there the last time I looked. – Marco Sep 30 '13 at 07:18
  • 1
    Ah, I see - it is only your rotation, that do not work at this point. I have updated my answer with the first error I found in your code. – Marco Sep 30 '13 at 07:24