• Registered: 2014-03-09
  • Posts: 4

Topic: absence of vertical scrollbar [SOLVED]

Hello, I've integrated a simpleviewer in an html  webage, but due to the absence of vertical scrollbar, one sees only a part of the gallery. What can be done ?

My html code is : 

<div id="header">
...
</div>
<div id="nav1">
<ul id="nav">
...menu...
</ul>


</div>

<div id="art1">
    <!--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 -->
</div>

The used names for the "div" are due to the fact that initially it was html5 and that I have regressed to see if it was the reason...

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

Re: absence of vertical scrollbar [SOLVED]

I do not know the full code of your web page but try using the following CSS in the <head> section of your page:

<style type="text/css">
    body {
        margin: 0;
        overflow-y: auto;
    }
    html {
        overflow-y: hidden;
    }
</style>

If you continue to experience difficulties, please post the URL to your gallery so that I can take a look and help further.

If you would rather display your header (with a fixed height) on your web page and have the gallery occupy the remaining space (without the need for a vertical scrollbar), then take a look at the View Vertical Resizable Gallery with Header Example example in the Using a Resizable Gallery with a Header support section. You can view the source of the sample web page in your browser and copy/modify the code to suit your own needs.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2014-03-09
  • Posts: 4

Re: absence of vertical scrollbar [SOLVED]

Thank you because thanks to your CSS code, the scrollbar is here; could you, please, give me the explanation ?

  • Registered: 2014-03-09
  • Posts: 4

Re: absence of vertical scrollbar [SOLVED]

in fact, it's OK for that page, but not for this one (only 2 albums because I'm at the beginning of the site) ; so, you can help me further...

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

Re: absence of vertical scrollbar [SOLVED]

If you are happy to have a scrolling web page, then just set your gallery's height to be a fixed pixel value (instead of 100%).
For example, change:

simpleviewer.load('sv-container', '100%', '100%', '222222', true);

... to:

simpleviewer.load('sv-container', '100%', '800px', '222222', true);

The problem occurs because your gallery currently has a height of 100% but your gallery's parent container does not have a height specified via CSS so the value of 100% is somewhat meaningless (100% of what?) and, consequently, the browser does not know that the gallery extends beyond the bottom of the browser window.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2014-03-24
  • Posts: 12

Re: absence of vertical scrollbar [SOLVED]

In fact, I'm not totally satisfied (so unsatisfied), because even if there is no vertical scrollbar, I can now move down the page with mouse, so it's sufficient but its display is different from the other page http://vercorshandisport.org/html5/stage2014/stage.php different from by example http://vercorshandisport.org/html5/lafeclaz/lafeclaz.php ; I've tried to align the CSS of the other pages but there is still a small difference : http://vercorshandisport.org/html5/pres/pres.php

...
<style  type="text/css">
#art1 {
height:2000px;
}
body {
    margin: 0;
    overflow-y: auto;
    width:1500px;
}
html {
    overflow-y: hidden;
}
#header{
text-align:center;
}
#nav1{
text-align:center;
}
</style>
</head>
<body>
<div id="header">
<?php include("../entete.php"); ?>
</div>
<div id="nav1">
<?php include("../menu2.php"); ?>
</div>

<div id="art1">
...
</div>
...
  • Registered: 2008-07-06
  • Posts: 6,334

Re: absence of vertical scrollbar [SOLVED]

even if there is no vertical scrollbar, I can now move down the page with mouse

On this web page http://vercorshandisport.org/html5/stage2014/stage.php there is a vertical scrollbar but the width of your page is so large (1500px) that you may have to scroll horizontally to the right to see it (in browser windows of limited width).

different from by example http://vercorshandisport.org/html5/lafe … feclaz.php

Unfortunately, this URL leads to an error 404 (file not found) so I cannot view the web page you intended for me to see.

Knowing that you are not setting a height for your gallery's parent container, then the solution to your original problem would be to simply set the gallery's height to a fixed pixel value (and you should not have to worry about any 'overflow' settings in your CSS).

Steven Speirs
SimpleViewer Support Team
  • Registered: 2014-03-24
  • Posts: 12

Re: absence of vertical scrollbar [SOLVED]

I've just tried : 

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

I've seen that in the CSS, the width of the body is specified : 

body {font: normal .8em/1.5em Arial, Helvetica, sans-serif;background: #ebebeb;width: 1000px;margin: 100px auto;color: #666;}
a {color: #333;}

but now, and I don't understand why, I've no longer any scrollbar (horizontal or vertical) ; would you see the explanation ?
And error 404 : on what URL ?

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

Re: absence of vertical scrollbar [SOLVED]

but now, and I don't understand why, I've no longer any scrollbar (horizontal or vertical) ; would you see the explanation ?

Set your gallery's height to be an absolute pixel value (as you have already done) and remove all the 'overflow' rules form the CSS on your web page. They should not be necessary. When embedding a gallery with fixed dimensions, the browser should display scroll bars (both horizontal and vertical) if necessary.

And error 404 : on what URL ?

The URL I quoted in my last post (http://vercorshandisport.org/html5/lafe … feclaz.php) resulted in an error 404 when I tried it a couple of days ago (several times). It seems OK now, though.

Incidentally, I notice that your web pages try to load a file named 'style.css' but this file does not exist in the correct location on your web server.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2014-03-24
  • Posts: 12

Re: absence of vertical scrollbar [SOLVED]

As I don't see what to suppress in the CSS, I allow myself to post it (quite long) :

body {font: normal .8em/1.5em Arial, Helvetica, sans-serif;background: #ebebeb;width: 2000px;height: 2000px;margin: 100px auto;color: #666;}
a {color: #333;}

#nav {margin: 0;padding: 7px 6px 0;background: #7d7d7d url(../images/gradient.png) repeat-x 0 -110px;line-height: 100%;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
}
#nav li {margin: 0 5px;padding: 0 0 8px;float: left;position: relative;list-style: none;}

/* main level link */
#nav a {font-weight: bold;color: #e7e5e5;text-decoration: none;display: block;padding:  8px 20px;margin: 0;
    -webkit-border-radius: 1.6em;
    -moz-border-radius: 1.6em;
}
#nav a:hover {background: #000;color: #fff;}

/* main level link hover */
#nav .current a, #nav li:hover > a {background: #666 url(../images/gradient.png) repeat-x 0 -40px;color: #444;border-top: solid 0px #f8f8f8;
}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {background: non;border: none;color: #666;
}
#nav ul a:hover {background: #0078ff url(../images/gradient.png) repeat-x 0 -100px !important;
    color: #fff !important;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

/* dropdown */
#nav li:hover > ul {display: block;}

/* level 2 list */
#nav ul {display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 35px;left: 0;
    background: #ddd url(../images/gradient.png) repeat-x 0 0;
    border: solid 1px #b4b4b4;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#nav ul li {float: none;margin: 0;padding: 0;}

/*#nav ul a {font-weight: normal;text-shadow: 0 1px 0 #fff;}*/

/* level 3+ list */
#nav ul ul {left: 181px;top: -3px;}

/* rounded corners of first and last link */
#nav ul li:first-child > a {
    -webkit-border-top-left-radius: 9px;
    -moz-border-radius-topleft: 9px;

    -webkit-border-top-right-radius: 9px;
    -moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
    -webkit-border-bottom-left-radius: 9px;
    -moz-border-radius-bottomleft: 9px;

    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomright: 9px;
}

/* clearfix */
#nav:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#nav {display: inline-block;} 
html[xmlns] #nav {display: block;}
* html #nav {height: 1%;}

and OK for style.css : in fact, I start from an existing page which includes this, but here, it's unuseful...

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

Re: absence of vertical scrollbar [SOLVED]

In your http://vercorshandisport.org/html5/stage2014/stage.php page, you have the following CSS code:

body {
    margin: 0;
    overflow-y: auto;
    /*width:1500px;*/
}
html {
    overflow-y: hidden;
}

Remove both lines with 'overflow' in them and a vertical scrollbar should appear on your web page.

If this is not the web page you are referring to, then please let me know which web page you are asking about.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2014-03-24
  • Posts: 12

Re: absence of vertical scrollbar [SOLVED]

Thanks a lot, I have had a look to the CSS file, but not to that (and I'm conscious that it isn't a good practice to put style in 2 locations...). And, as I had also a pb of scrolling in my other photo gallery, I've remembered your previous advise : to replace '100%' by a fixed width (or height), and now, it's also OK. Thank you very much for your help.

Last edited by laurentsch (2014-03-27 13:15:35)