• From: Houston, TX
  • Registered: 2011-08-29
  • Posts: 20

Topic: Adding a Scroll Option to the Resizable Gallery with Side Menu

Hi,

I am using the Horizontal Resizable Gallery with Side Menu and it has worked great.  I however have added quite a few galleries to the side menu page to the point that if the browser window is small, you don't see all the gallery links on the side menu.

I would like to have it so the side menu displays a vertical scroll bar if it is needed.  I've looked online and found a couple solutions that I think could work, but they seem overly complicated, so I wanted to ask and see if there is a simple solution/fix.

Here is my gallery page so you can see what I'm talking about.

http://experiencetherave.com/subaru/images/6spdswap/01

Thanks!
Josh

  • Registered: 2008-07-06
  • Posts: 6,329

Re: Adding a Scroll Option to the Resizable Gallery with Side Menu

The layout of the page is designed with the intention that scroll bars will never appear on the page.
You could remove overflow: hidden; from your 'sv.horizontal.template.css' file but the gallery will scroll as well as the menu.
You could perhaps try something like 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">
    <title>First Gen Legacy 6spd Swap</title>
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <style type="text/css">
        body, html {
            height: 100%;
            width: 100%;
            margin: 0;
        }
        #header {
            width: 10%;
            height: 100%;
            float: left;
            overflow-y: auto;
        }
        #flashContent {
            width: 90%;
            height: 100%;
            float: right;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="header">
        <div>
            <a href = "../01/index.html">09/16/12</a><br>
            <a href = "../02/index.html">09/21/12</a><br>
            <a href = "../03/index.html">09/22/12</a><br>
            <a href = "../04/index.html">10/27/12</a><br>
            <a href = "../05/index.html">11/03/12</a><br>
            <a href = "../06/index.html">11/17/12</a><br>
            <a href = "../07/index.html">11/21/12</a><br>
            <a href = "../08/index.html">11/23/12</a><br>
            <a href = "../09/index.html">11/27/12</a><br>
            <a href = "../10/index.html">12/01/12</a><br>
            <a href = "../11/index.html">12/08/12</a><br>
            <a href = "../12/index.html">12/12/12</a><br>
            <a href = "../13/index.html">12/13/12</a><br>
            <a href = "../14/index.html">12/14/12</a><br>
            <a href = "../15/index.html">12/15/12</a><br>
            <a href = "../16/index.html">12/16/12</a><br>
            <a href = "../17/index.html">12/22/12</a><br>
            <a href = "../18/index.html">12/23/12</a><br>
            <a href = "../19/index.html">12/29/12</a><br>
            <a href = "../20/index.html">01/05/13</a><br>
            <a href = "../21/index.html">01/12/13</a><br>
            <a href = "../22/index.html">01/19/13</a><br>
            <a href = "../23/index.html">01/23/13</a><br>
            <a href = "../24/index.html">01/25/13</a><br>
            <a href = "../25/index.html">01/26/13</a><br>
            <a href = "../26/index.html">02/03/13</a><br>
            <a href = "../27/index.html">03/14/13</a><br>
            <a href = "../28/index.html">03/16/13</a><br>
        </div>
    </div>
    <div id="flashContent">
        <script type="text/javascript">
            simpleviewer.ready(function () {
                simpleviewer.load('sv-container', '100%', '100%', '222222', true);
            });
        </script>
        <div id="sv-container"></div>
    </div>
</body>
</html>

The above code gives the menu a width of 10% of the total browser window width.
You may wish to tweak the code above to suit your own scenario.

Steven Speirs
SimpleViewer Support Team
  • From: Houston, TX
  • Registered: 2011-08-29
  • Posts: 20

Re: Adding a Scroll Option to the Resizable Gallery with Side Menu

Thanks for the info and feedback Steven!

I'll give it a try tomorrow when I get some more time.

Thanks again.
Josh

  • From: Houston, TX
  • Registered: 2011-08-29
  • Posts: 20

Re: Adding a Scroll Option to the Resizable Gallery with Side Menu

Hi Steven,

Well I tried what you suggested and it didn't really work.  I currently have the overflow:hidden in the stylesheet deleted.  When I add the style info is separates the flash & menu section.  I had some additional code from what you posted.

Here is my original code:

<!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">
    <title>First Gen Legacy 6spd Swap</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../css/sv.horizontal.template.css" />
    <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
    function doLayout() {
        var winHeight, winWidth, headerWidth;
        winHeight = window.innerHeight ? window.innerHeight : $(window).height();
        winWidth = window.innerWidth ? window.innerWidth : $(window).width();
        headerWidth = $('#header').outerWidth();
        $('#flashContent').height(parseInt(winHeight)).width(parseInt(winWidth) - parseInt(headerWidth));
    }

    $(document).ready(function () {
        doLayout();
        $(window).bind('resize', doLayout);
        SV.simpleviewer.load('sv-container', '100%', '100%', '222222',true);
    });
    </script>
</head>

<body>

    <div id="header">
        <div>
            <a href = "../01/index.html">09/16/12</a><br>
            <a href = "../02/index.html">09/21/12</a><br>
            <a href = "../03/index.html">09/22/12</a><br>
            <a href = "../04/index.html">10/27/12</a><br>
            <a href = "../05/index.html">11/03/12</a><br>
            <a href = "../06/index.html">11/17/12</a><br>
            <a href = "../07/index.html">11/21/12</a><br>
            <a href = "../08/index.html">11/23/12</a><br>
            <a href = "../09/index.html">11/27/12</a><br>
            <a href = "../10/index.html">12/01/12</a><br>
            <a href = "../11/index.html">12/08/12</a><br>
            <a href = "../12/index.html">12/12/12</a><br>
            <a href = "../13/index.html">12/13/12</a><br>
            <a href = "../14/index.html">12/14/12</a><br>
            <a href = "../15/index.html">12/15/12</a><br>
            <a href = "../16/index.html">12/16/12</a><br>
            <a href = "../17/index.html">12/22/12</a><br>
            <a href = "../18/index.html">12/23/12</a><br>
            <a href = "../19/index.html">12/29/12</a><br>
            <a href = "../20/index.html">01/05/13</a><br>
            <a href = "../21/index.html">01/12/13</a><br>
            <a href = "../22/index.html">01/19/13</a><br>
            <a href = "../23/index.html">01/23/13</a><br>
            <a href = "../24/index.html">01/25/13</a><br>
            <a href = "../25/index.html">01/26/13</a><br>
            <a href = "../26/index.html">02/03/13</a><br>
            <a href = "../27/index.html">03/14/13</a><br>
            <a href = "../28/index.html">03/16/13</a><br>
           
        </div>
    </div>

    <div id="flashContent">
        <div id="sv-container"></div>
    </div>

</body>
</html>

Here is the modified code with the style info added.

<!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">
    <title>First Gen Legacy 6spd Swap</title>
    <link rel="stylesheet" type="text/css" media="screen" href="../css/sv.horizontal.template.css" />
    <script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../svcore/js/simpleviewer.js"></script>
    <style type="text/css">
        body, html {
            height: 100%;
            width: 100%;
            margin: 0;
        }
        #header {
            width: 10%;
            height: 100%;
            float: left;
            overflow-y: auto;
        }
        #flashContent {
            width: 90%;
            height: 100%;
            float: right;
            overflow: hidden;
        }
    </style>

    <script type="text/javascript">
    function doLayout() {
        var winHeight, winWidth, headerWidth;
        winHeight = window.innerHeight ? window.innerHeight : $(window).height();
        winWidth = window.innerWidth ? window.innerWidth : $(window).width();
        headerWidth = $('#header').outerWidth();
        $('#flashContent').height(parseInt(winHeight)).width(parseInt(winWidth) - parseInt(headerWidth));
    }

    $(document).ready(function () {
        doLayout();
        $(window).bind('resize', doLayout);
        SV.simpleviewer.load('sv-container', '100%', '100%', '222222',true);
    });
    </script>
</head>

<body>

    <div id="header">
        <div>
            <a href = "../01/index.html">09/16/12</a><br>
            <a href = "../02/index.html">09/21/12</a><br>
            <a href = "../03/index.html">09/22/12</a><br>
            <a href = "../04/index.html">10/27/12</a><br>
            <a href = "../05/index.html">11/03/12</a><br>
            <a href = "../06/index.html">11/17/12</a><br>
            <a href = "../07/index.html">11/21/12</a><br>
            <a href = "../08/index.html">11/23/12</a><br>
            <a href = "../09/index.html">11/27/12</a><br>
            <a href = "../10/index.html">12/01/12</a><br>
            <a href = "../11/index.html">12/08/12</a><br>
            <a href = "../12/index.html">12/12/12</a><br>
            <a href = "../13/index.html">12/13/12</a><br>
            <a href = "../14/index.html">12/14/12</a><br>
            <a href = "../15/index.html">12/15/12</a><br>
            <a href = "../16/index.html">12/16/12</a><br>
            <a href = "../17/index.html">12/22/12</a><br>
            <a href = "../18/index.html">12/23/12</a><br>
            <a href = "../19/index.html">12/29/12</a><br>
            <a href = "../20/index.html">01/05/13</a><br>
            <a href = "../21/index.html">01/12/13</a><br>
            <a href = "../22/index.html">01/19/13</a><br>
            <a href = "../23/index.html">01/23/13</a><br>
            <a href = "../24/index.html">01/25/13</a><br>
            <a href = "../25/index.html">01/26/13</a><br>
            <a href = "../26/index.html">02/03/13</a><br>
            <a href = "../27/index.html">03/14/13</a><br>
            <a href = "../28/index.html">03/16/13</a><br>
           
        </div>
    </div>

    <div id="flashContent">
        <div id="sv-container"></div>
    </div>

</body>
</html>

Here's what the added style info looks like.

http://www.main.experiencetherave.com/s … ndex2.html

Thanks for any additional help you may have.
Josh

  • Registered: 2008-07-06
  • Posts: 6,329

Re: Adding a Scroll Option to the Resizable Gallery with Side Menu

If you would like to give your side menu a fixed width and do not want the side menu and gallery to be separated by a vertical scroll bar, then try the following which fixes the position of the gallery to the top right corner of the browser window and displays the vertical scroll bar to the right of gallery. (The gallery is still resized when the size of the browser window changes and the vertical scroll bar appears only if necessary.)

<!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">
    <title>First Gen Legacy 6spd Swap</title>
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <style type="text/css">
        body, html {
             background-color: #222222;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        #header {
            width: 100px;
       }
        #flashContent {
            position: fixed;
            top: 0;
            right: 0;
        }
    </style>
    <script type="text/javascript">
    function doLayout() {
        var winHeight, winWidth, headerWidth;
        winHeight = window.innerHeight ? window.innerHeight : $(window).height();
        winWidth = window.innerWidth ? window.innerWidth : $(window).width();
        headerWidth = $('#header').outerWidth();
        $('#flashContent').height(parseInt(winHeight)).width(parseInt(winWidth) - parseInt(headerWidth));
    }
    $(document).ready(function () {
        doLayout();
        $(window).bind('resize', doLayout);
        simpleviewer.load('sv-container', '100%', '100%', '222222',true);
    });
    </script>    
</head>
<body>
    <div id="header">
        <a href = "../01/index.html">09/16/12</a><br>
        <a href = "../02/index.html">09/21/12</a><br>
        <a href = "../03/index.html">09/22/12</a><br>
        <a href = "../04/index.html">10/27/12</a><br>
        <a href = "../05/index.html">11/03/12</a><br>
        <a href = "../06/index.html">11/17/12</a><br>
        <a href = "../07/index.html">11/21/12</a><br>
        <a href = "../08/index.html">11/23/12</a><br>
        <a href = "../09/index.html">11/27/12</a><br>
        <a href = "../10/index.html">12/01/12</a><br>
        <a href = "../11/index.html">12/08/12</a><br>
        <a href = "../12/index.html">12/12/12</a><br>
        <a href = "../13/index.html">12/13/12</a><br>
        <a href = "../14/index.html">12/14/12</a><br>
        <a href = "../15/index.html">12/15/12</a><br>
        <a href = "../16/index.html">12/16/12</a><br>
        <a href = "../17/index.html">12/22/12</a><br>
        <a href = "../18/index.html">12/23/12</a><br>
        <a href = "../19/index.html">12/29/12</a><br>
        <a href = "../20/index.html">01/05/13</a><br>
        <a href = "../21/index.html">01/12/13</a><br>
        <a href = "../22/index.html">01/19/13</a><br>
        <a href = "../23/index.html">01/23/13</a><br>
        <a href = "../24/index.html">01/25/13</a><br>
        <a href = "../25/index.html">01/26/13</a><br>
        <a href = "../26/index.html">02/03/13</a><br>
        <a href = "../27/index.html">03/14/13</a><br>
        <a href = "../28/index.html">03/16/13</a><br>
    </div>
    <div id="flashContent">
        <div id="sv-container"></div>
    </div>
</body>
</html>
Steven Speirs
SimpleViewer Support Team
  • From: Houston, TX
  • Registered: 2011-08-29
  • Posts: 20

Re: Adding a Scroll Option to the Resizable Gallery with Side Menu

Steven,

Thanks for the follow up.  I tried what you suggested, but didn't care for how it looked in the various browsers and tablets.  I think for the time being I'm just going to leave the "overflow: hidden"  out of the stylesheet.

Thanks for the help & suggestions

Josh