1 Topic by georg_m (edited by georg_m 2014-01-11 11:50:53)

  • Registered: 2013-07-07
  • Posts: 13

Topic: like stagepadding, only on one side?

couldn't find a satisfactory answer in the forums, so her goes:

the menu (css #header) of my page georgmolterer.com has a padding of 2 rem on the left side to the edge of the browser. i would like to add the same 2 rem padding on the right side between browser window and gallery.  is this possible?
thanks

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

Re: like stagepadding, only on one side?

You can use the CSS margin-right property on the body tag of your web page to add space between the right edges of the gallery and the browser window, e.g.:

body {
    margin-right: 20px;
}

Whatever margin you choose to use, you will need to compensate for it in your gallery resizing doLayout() function.
After defining winWidth, use the following (changing the value to whatever margin you use):

winWidth = winWidth - 20;

3 Reply by georg_m (edited by georg_m 2014-01-11 11:40:06)

  • Registered: 2013-07-07
  • Posts: 13

Re: like stagepadding, only on one side?

thanks for the reply.

margin-right on the body tag works.

however if i replace in doLayout() 

winWidth = window.innerWidth ? window.innerWidth : $(window).width();

with 

winWidth = winWidth - 2rem;

or add - 2rem at the end of the winWidth definition like this 

winWidth = (window.innerWidth ? window.innerWidth : $(window).width()) - 2rem;

the gallery drops right under the header with the correct margin on the right.
http://www.georgmolterer.com/data/margin.jpg

also my editor(netbeans) gives me a warning

Expected ; but found rem

.
the same goes for using px instead of rem.

can i use margin-right and margin-left at the same time on the body tag and how would i compensate for that?
doing so would render the padding-left in the header obsolete and the code would be clearer.

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

Re: like stagepadding, only on one side?

My suggestion was not to replace the line:

winWidth = window.innerWidth ? window.innerWidth : $(window).width();

... but to make the adjustment after it, e.g.:

winWidth = window.innerWidth ? window.innerWidth : $(window).width();
winWidth = winWidth - 20;

The code which determines the window width will return the result in pixels so you should stick to using a pixel value for this right-hand border so you can subtract the border (px) from the window width (also px).
Also, when making the adjustment to the winWidth value, the code will be purely arithmetic so you should not use a suffix, such as px. (I used a suffix in my original code above but I have corrected the error. Sorry for any inconvenience.)
Use a CSS border such as:

body {
    margin-right: 20px;
}

... and then use either:

winWidth = window.innerWidth ? window.innerWidth : $(window).width();
winWidth = winWidth - 20;

... or:

winWidth = window.innerWidth ? window.innerWidth - 20 : $(window).width() - 20;

I have tested this myself and it seems to work fine.