Previous 1 2 Next 20 Replies Latest reply: Dec 1, 2014 8:12 AM by dmodjeska
Gerrit Velthuis Level 1 (75 points)

After a tip I found on a blog, I converted my iWeb-portfolio-site to an interactive Keynote presentation.

I exported the file to html, but on opening the site in Safari, some strange things happen (at least things I do not want to happen).



I get a controller on the bottom of the screen which appears every time I move the mouse; I can't find a way to avoid that.



I want to start with a start-up screen with just my name and some image; after clicking I let the name (with a Keynote action) move to the upper left corner of the screen and let the rest of the navigation come in (with a Keynote fade-action).

This all works fine in Keynote, but somehow there is a problem in Safari; the actions only work when set to automatic, not when set on "after mouseclick".

But I would like the visitor to be in control.

Putting an identical page in front of it all which (after a mouseclick) fades to the page where actions start automaticaly doesn't work either. After fading to the second page, the actions simply don't start.



Is there a way to make the background of the browser-window (that is the area outside the 1280x720 px area of the webpage itself) white instead of black ?



Does someone know of a tutorial that deals with this subject

iMac 27, Mac OS X (10.6.8), 8 Gb RAM - 1,5 Tb harddisk
  • Roddy Level 6 (17,265 points)

    Keynote export to HTML is just a slideshow (all be it a fairly complicated one) so that the user can click through them. The control bar appears to give the clueless a clue in case they don't realise they can click the images.


    The background color needs to be changed in both of these files...




    This latter file is found in the assets/player folder. Open them in an app like TextEdit and change this line...


    <body bgcolor="black" onload="detectBrowser()">


    to this...


    <body bgcolor="#fff" onload="detectBrowser()">


    ... or this...


    <body bgcolor="white" onload="detectBrowser()">

  • Gerrit Velthuis Level 1 (75 points)

    Thanks Roddy,


    One of the problems solved; I had found one spot to change the bkgnd color, didn't know about the other.


    Of course I know the html export is meant for bringing presentations to web-like situations and the easiest way to do that is an interactive slideshow, but . . . .Keynote is far more sophisticated and can be used to construct a pretty complicated hyper-environments that can be controlled like a normal website.

    In fact, most of the more simple websites are merely slideshows and they don't need a controller bar either.


    So, I know why it is there, but (sometimes) it's not needed and I don't want it; question is, is there a way to get rid of it.


    And than there is still the second problem, the one with the non-functioning actions.

  • Roddy Level 6 (17,265 points)

    The quick and dirty way to get rid of the controls would be to hide it using CSS by adding an inline style to the control bar div in the  KeynoteDHTMLPlayer.html...


    <div id="hud" style="visibility:hidden">

  • Gerrit Velthuis Level 1 (75 points)

    Great Roddy, that one was very helpfull too.

    Maybe you could do some thinking about the action-problem or point me in some direction ?

  • Rexrothbeat Level 1 (0 points)

    Hi Roddy. I just tried this and it worked . . . as long as I previewed the exported HTML in Safari. The control bar would always show in Google Chrome and IE. Any suggestions?



  • Roddy Level 6 (17,265 points)

    In CSS "visibility:hidden" hides an object but it still takes up space. Using "display:none" will hide the object and it will not take up space. Try using them both.


    I don't know about IE (which version?) but this should get rid of it in Chrome...


    <div id="hud" style="display:none;visibility:hidden">

  • Rexrothbeat Level 1 (0 points)

    It doesn't seem to be working, even for Chrome, Roddy. Did I put the div id in the right spot (see Line 62)?



    Screen Shot 2013-01-23 at 3.07.23 PM.png

  • Roddy Level 6 (17,265 points)

    You've put it the correct place.


    Chrome is no use for testing local files. You need to upload them to the server or see the bottom of this page under "Testing Your Website" for how to overcome the disappearance of Web Sharing when using Mountain Lion...


  • Roddy Level 6 (17,265 points)

    I just remembered that I had a page with the old style Keynote slideshow...



    Here's a standalone demo with the navigation buttons removed...



    This should work OK in all browsers.

  • Rexrothbeat Level 1 (0 points)

    HI Roddy. Below is a screen shot of my dilemma. This image was snapped after updating the CSS as you instructed, uploading the show to my server, then previewing in Chrome. The green buttons are hyperlinks that can be bypassed if the user clicks on the Control Bar, which is what I'm trying to avoid. The control bar is the newer version, different than the home, left, and right buttons in the examples you gave me.


    If it helps, I upload the exported Keynote HTML file into a Moodle LMS. So, it displays in a viewer window in the LMS. I don't know if that would affect things.


    Control Bar.png

  • Roddy Level 6 (17,265 points)

    Did you empty the browser cache before visiting the page?


    Here's a demo of the new style slideshow with the controlbar removed...



    It works OK in Safari and Chrome but not in Firefox.


    The more I look at this slideshow, the more I see how hideously complicated it is compared to the one it replaced. Its almost like some hot shot at Apple was asked to redesign it and made it so complicated to impress the boss that the fact that it didn't work too well was overlooked.


    The old style slideshow only requires a folder of images and an HTML file that looks like this....


    <!DOCTYPE html>



        <title>Keynote Style Slideshow</title>

        <meta http-equiv="content-Type" content="text/html; charset=utf-8">

        <script type="text/javascript">

    //      <![CDATA[

                var images = new Array (6);

                images[0] = "HTML-Slideshow.html_files/HTML-Slideshow.001.jpg";

                images[1] = "HTML-Slideshow.html_files/HTML-Slideshow.002.jpg";

                images[2] = "HTML-Slideshow.html_files/HTML-Slideshow.003.jpg";

                images[3] = "HTML-Slideshow.html_files/HTML-Slideshow.004.jpg";

                images[4] = "HTML-Slideshow.html_files/HTML-Slideshow.005.jpg";

                images[5] = "HTML-Slideshow.html_files/HTML-Slideshow.006.jpg";

                var index = 0;

                function WindowLoaded(evt)


                    document.body.onselectstart = function () { return false; };


                function Step(i)


                    GoTo(index + i)


                function GoTo(newIndex)


                    if(newIndex >= 0 && newIndex < images.length)


                        index = newIndex;

                        document.Slideshow.src = images[index];



    //      ]]>



    <body bgcolor="black">

        <p align="center">

            <img name="Slideshow" alt="" src="HTML-Slideshow.html_files/HTML-Slideshow.001.jpg" onclick="Step(1)"/><br /><br />

            <input style="display:none"  class="home" type="image" src="HTML-Slideshow.html_files/home.png" onclick="GoTo(0)"/>

            <input style="display:none"  class="back" type="image" src="HTML-Slideshow.html_files/prev.png" onclick="Step(-1)"/>

            <input style="display:none" type="image" src="HTML-Slideshow.html_files/next.png" onclick="Step(1)"/>




  • Rexrothbeat Level 1 (0 points)

    Yup. I tried clearing cache in both IE and Chrome. The Control Bar still pops up. I wish that boot-licking lap dog who redesigned the HTML export would've simplified this process. It really takes away the functionality of hyperlinks in a presentation. If I was his boss, I would be much more impressed.

  • Rexrothbeat Level 1 (0 points)

    Hey Roddy, I saved a Keynote '09 presentation as Keynote '08, then exported from '08 as HTML. I deselected "show navigation controls" but when I uploaded the HTML file to the server, the display was blank except for a small, blue ? icon. Could it be that it was not displaying because I was using a 30-day free trial version of of '08 and they don't allow advanced features?

  • Roddy Level 6 (17,265 points)

    What is the URL to the HTML file on the server?

Previous 1 2 Next