• josh
  • Member
  • Offline
  • Registered: 2015-01-14
  • Posts: 4

Topic: Overflow/Scroll problems

I'm having some trouble with elements showing scrolling boxes when viewed on a small laptop screen. These aren't there when on a larger screen (both screens Mac Laptops running Chrome). I have the juicebox pro css embedded in some of the pages as well as the the main css embeddd in all pages on the site - I imagine there is some kind of conflict going on, but don't know enough about the code to know how to start tracking it down.

Can you help ?!

http://www.blanchandshock.com

Thanks

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Overflow/Scroll problems

If you want to suppress scroll bars on your web page, you can use the following CSS in the <head> section of your web page:

<style type="text/css">
    body, html {
        overflow: hidden;
    }
</style>

However, if content on your web page extends beyond the bottom of the browser window, then users will not be able to scroll down to see the hidden content.
If you want to ensure that your web page displays your header and gallery without the need for scroll bars (displaying the header with a specified height and using the remainder of the space for the gallery), then you might like to take a look at the online View Resizable Gallery with Top Menu Example sample in the Using a Resizable Gallery with a Header support section. You could view the source of the web page in a browser and copy/modify the code to suit your own needs (swapping the header content for your own header and the sample gallery for your own gallery).

  • josh
  • Member
  • Offline
  • Registered: 2015-01-14
  • Posts: 4

Re: Overflow/Scroll problems

Thanks, Steven, I'll give it a try

  • josh
  • Member
  • Offline
  • Registered: 2015-01-14
  • Posts: 4

Re: Overflow/Scroll problems

HI Steven.

Two problems persist

1.
I tried adding the javascript to a test page, and the rescaling works, but too much - it resizes and distorts all the elements around it. I copied evrything in the source from the link you sent ( lines 9-41) and continued to use the embed method you can see, rather than directly using the structure of the demo. The test page is here - http://www.blanchandshock.com/futurenewest In the meantime, the empty scroll bars are showing up on similarly sized screens. I'm running Yosemite on a Retina display new macbook. The laptops showing the empty scrollbars (around every element) are all running older versions of OSX and often on older machines. Could this have anything to do with why I can't see the problem they are experiencing ?

2.
Certain pictures in the galleries which I have edited in photoshop and tried to replace in the image folder are not updating on the web. Again, this is happening on my computer, but not on the other one I've tested it on (another macbook, older OS) It works fine on my htc mobile phone too.. I have tried clearing my browser cache. The two pictures which refuse to update are the seventh and ninth in the gallery on http://www.blanchandshock.com/futurefest

I'm a bit mystified by both, and a bit out my depth, are you able to take a look ?

Many thanks

Josh

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Overflow/Scroll problems

Here are a few tips which may help.

(1) The <div id="header"> is not closed on your page. If a browser does not know where the end of the container should be, this can affect the layout of the page.
(3) The sample gallery whose code you are using sets fixed dimensions for the header and footer and then embeds the gallery in the remaining space. Try giving your gallery dimensions of 100% x 100% so that it fills the space available.
(2) The JavaScript code on your web page resizes the 'juicebox-content' container but there is no such container on your web page. Try wrapping your 'juicebox-container' <div> in a parent <div> with id="juicebox-content" so that the gallery can be resized correctly when the size of the browser window changes:

<div id="juicebox-content">
    <div id="juicebox-container"></div>
</div>

(4) Try removing the <table> from your web page and use only CSS to layout your page.

If you see different images in your gallery on different computers or devices, then this can only be due to your browser caching your gallery files. Please double-check that you are completely clearing your browser's cache before reloading your gallery to ensure that your browser is fetching and using the most recent versions of your gallery files.
Please see this FAQ:
When I update my gallery I don't see my changes online. Why? - http://www.juicebox.net/support/faq/#troubleshooting-6

Hopefully this will help.