• seb
  • Member
  • Offline
  • Registered: 2014-10-19
  • Posts: 41

Topic: Right hand Margins

I have an issue with right hand margins. When I put an embedded gallery into a page, the right margin to the page is not respected when the browser window is narrowed (to emulate a hand-held device). The slider bar on the right of the browser window encroaches onto the gallery window – only by a little, but enough to cover images in the rest of the body of the page. Is this a known problem? I don’t have a live page to show you the problem yet.

Cheers,

Seb

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

Re: Right hand Margins

This sounds like a page layout problem rather than something directly related to Juicebox.

A Juicebox gallery is essentially just a div container on a web page and the page layout should remain consistent regardless of whether there is a Juicebox gallery inside the 'juicebox-container' div or some other content.

Try replacing your gallery with an empty div (with the same dimensions as your gallery and a solid background color so that you can see what is going on) to see if the same thing happens with this container.
For example, change:

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

... to something like:

<div id="test" style="width: 100%; height: 600px; background-color: #f00;"></div>

... making sure that the dimensions are the same as those of your gallery.

Also, you might like to check the HTML and CSS code on your web page with the following validators and then fix any errors reported.
HTML: https://validator.w3.org/
CSS: https://jigsaw.w3.org/css-validator/

Not knowing the layout of your page, I do not know if the following will help but if you have not already done so, try adding the following CSS code to the <head> section of your web page.

<style type="text/css">
    body, html {
        width: 100%;
    }
</style>

If you are trying to horizontally center your gallery in a parent container, then you could change:

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

... to:

<div id="juicebox-container" style="margin: 0 auto;"></div>

In order to troubleshoot further, I'd really need to see the web page that you are referring to so please upload it to a web server and post the URL so that I can take a look at the problem for myself .
Also, please let me know what browser(s) you see the problem in. Thank you.

  • seb
  • Member
  • Offline
  • Registered: 2014-10-19
  • Posts: 41

Re: Right hand Margins

Hi Steven,

Thanks for the advice - here is the test page: http://www.feltbetter.com/galleryNeedleFeltAnimals.asp

If you narrow the browser - the vertical slide bar encroaches on the page layout when it comes into contact with it. Mouse off the browser window and wait a few seconds and the vertical slide bar disappears. It re-appears when you mouse back over the page - but covers the right part of the page.

I'm using quite few style sheets from P7 so there is probably a conflict. I'm afraid my programing skills are poor so I'm a bit lost!

Any help would be appreciated!

Cheers,

Seb

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

Re: Right hand Margins

I'm not really seeing a problem with your web page.
When I narrow the browser window, the gallery's width reduces dynamically to fit the new viewport width but the gallery is always visible in its entirety. The vertical scroll bar never obscures the gallery, no matter how narrow it is. (I have viewed your web page in Chrome, Firefox and Internet Explorer on PC.)
Please let me know what browser(s) you see the problem in and, if possible, please upload a screenshot somewhere so that I can see what you are seeing.

There are a few things I have noticed on your web page which might help, though:

(1) You currently load the 'juicebox.js' file three times on your web page.
The 'juicebox.js' file should be loaded only once per page (regardless of how many galleries you have embedded on the page).
Try deleting two of the following lines of code on your page:

<script src="needleFeltAnimals4/jbcore/juicebox.js"></script>

(2) You currently set your gallery's width to be:

galleryWidth : '',

Using an empty string for the gallery width will probably default to 100% but, to be sure that the gallery is using a 100% width, use the following instead:

galleryWidth : '100%',

(3) The Doctype Declaration should be at the very top of your web page. Currently there is a blank line (whitespace) above it.
This is unlikely to be causing any problems and browsers will probably overlook it but, strictly speaking, it should be the first thing in the document.

(4) Try checking the code on your web page with the W3C Markup Validation Service and fix the errors reported.
https://validator.w3.org/
Once the code on your web page validates correctly, the page should be rendered with greater predictability and consistency across different browsers.

I hope these notes help.