Topic: Simple viewer squashed to the top

Hi all I recently created my gallery using Simple viewer

how ever it is squashed to the and i cant find a way to change it

!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "100%", "100%", "222222", true);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->





<html>
<head>
<style type="text/css">
    body, html { height: 100%; }
</style>
<title>Image Gallery</title>
</head>
<style>
body {
background-color:#FFFFFF;
color:#000000;
font-family:Arial;
font-size:11pt;
letter-spacing:1;
}
.thumbnail {
border:1px solid #000000;
}
.thumbSelected {
border:1px solid #000000;
}
</style>
 
<script language=javascript>
var lastID = 0;
function SelectImg(id) {
if (lastID > 0) {
document.getElementById(lastID).className = "thumbnail";
}
document.getElementById(id).className = "thumbSelected";
document.getElementById(0).src = document.getElementById(id).src;
lastID = id;
}
function LoadTrigger() {
SelectImg(1);
}
window.onload = LoadTrigger;
</script>
 

Re: Simple viewer squashed to the top

Your web page is incomplete and contains several errors in structure and syntax.

(1) Your web page should use a Doctype Delaration.
(2) The SimpleViewer gallery's embedding code should be within either the <head> or <body> section of your page.
(3) Your page does not contain a <body> section.
(4) The opening < character in the opening <!--START SIMPLEVIEWER EMBED.--> comment is missing.
(5) The second <style> section should be in the <head> section of your page.
(6) Your page has no closing </html> tag.

Try the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <style type="text/css">
            body, html {
                height: 100%;
            }
            body {
                background-color: #FFFFFF;
                color: #000000;
                font-family: Arial;
                font-size: 11pt;
                letter-spacing: 1;
            }
            .thumbnail {
                border: 1px solid #000000;
            }
            .thumbSelected {
                border: 1px solid #000000;
            }
        </style>
        <script type="text/javascript">
            var lastID = 0;
            function SelectImg(id) {
                if (lastID > 0) {
                    document.getElementById(lastID).className = "thumbnail";
                }
                document.getElementById(id).className = "thumbSelected";
                document.getElementById(0).src = document.getElementById(id).src;
                lastID = id;
            }
            function LoadTrigger() {
                SelectImg(1);
            }
            window.onload = LoadTrigger;
        </script>
        <title>Image Gallery</title>
    </head>
    <body>
        <!--START SIMPLEVIEWER EMBED.-->
        <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
        <script type="text/javascript">
            simpleviewer.ready(function () {
                simpleviewer.load("sv-container", "100%", "100%", "222222", true);
            });
        </script>
        <div id="sv-container"></div>
        <!-- END SIMPLEVIEWER EMBED -->
    </body>
 </html>

If you would like to know more about HTML, JavaScript and CSS, an online reference guide can be found here.

I am not sure what the intention of your JavaScript function is. (You will not be able to manipulate gallery elements in a Flash presentation using JavaScript alone. Whever you are trying to do, you may need to use the SimpleViewer-Pro API (which is available to SimpleViewer-Pro only and is not supported by SimpleViewer-Standard, the free version).
If you let me know what you are trying to achieve, I may be able to help.

Steven Speirs
SimpleViewer Support Team.