1 Topic by Dave Pitman (edited by Dave Pitman 2012-03-17 20:02:23)

  • Registered: 2012-03-01
  • Posts: 56

Topic: Understanding the "Stage"

I'm trying to place a slideshow as a banner for a home page.

Using main image only, no thumnails and no manual controls.

My problem is that although the images themselves are 300px tall, the sv object lists 534px (or more).

So, that leaves a 234px empty space below the images.

Is it possible to shrink the object to the acutal (or close) size of the images, and remove the blank space? What is it's purpose within the sv object.

Yes, I can wrap the sv-container within a div with a specified height, e.g. 300px, and that works. But, is undesirable for using within a responsive design because as the widith decreases, the height stays the same, resulting in more blank space and defeating the purpose of using %'s.

Thank You.

RE: http://www.ridgestyle.com/
XML: http://www.ridgestyle.com/galleries/home/gallery.xml

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

Re: Understanding the "Stage"

Please see the 'Layout Troubleshooting' section of the 'SimpleViewer-Pro Layout Guide' which deals with the question: I have extra spacing in my gallery. How do I get rid of it?
Hopefully the suggestions there will help.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-03-01
  • Posts: 56

Re: Understanding the "Stage"

Steven Speirs wrote:

Please see the 'Layout Troubleshooting' section of the 'SimpleViewer-Pro Layout Guide' which deals with the question: I have extra spacing in my gallery. How do I get rid of it?
Hopefully the suggestions there will help.

Looking at that guide, and viewing the generated html, it seems that the swf object is too large. Every setting that I could find to set to 0 (height, padding, etc.) doesn't help.

The zip file shows a screencapture with the swf object active in FireBug. It has a height much higher than that of the image.

The embedding code has 100% for the height.

SV seems to be adding height from somewhere.

http://dl.dropbox.com/u/1868808/space.zip

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

Re: Understanding the "Stage"

Your gallery dynamically resizes depending on the size of the user's browser window and, under certain circumstances, could be square.
The gallery also respects the image's aspect ratio and rescales the image on-the-fly to fit within the image area without any cropping. This may result in unused space within the gallery if the image does not have the same aspect ratio as the gallery itself.
One way to combat this would be to change the imageScaleMode from its default value of SCALE to FILL, though this may result in images being cropped. In doing this, you can change the size of the image to fit the gallery. However, it is not possible to shrink the gallery to fit the image.
The other way to combat this would be to set the gallery's size in absolute pixel values which have the same aspect ratio as your images.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-03-01
  • Posts: 56

Re: Understanding the "Stage"

Your gallery dynamically resizes depending on the size of the user's browser window

Yes,  this is the goal of using % values rather than absolute values.

under certain circumstances, could be square.

I'm sorry, I don't understand this. I have  never seen a parent div that has a % value be larger than it's contents; But, I am not an expert.

The gallery also respects the image's aspect ratio and rescales the image on-the-fly to fit within the image area without any cropping.

Again, yes, this is the desired result.

This may result in unused space within the gallery if the image does not have the same aspect ratio as the gallery itself.

Again, I do not understand how the "gallery" (swf object ?) can even have a different aspect ratio if it's dimensions are set with %s.

In my instance, the image scales perfectly as the browser window (veiwport) scales. The sv object however does not initially condense to the image size; and seemingly scales at a different aspect ratio than the image as the viewport size is reduced.

I have not seen any container (that has it's dimensions set in %s) act this way unless there is something else within the container forcing the behavior. But, again, I am no expert with regard to flash objects.

To reiterate, if I set the height and width of the object with absolute (the image size) pixel dimensions, the gallery object is indeed close to the size of the image. But, of course it will not scale with the viewport.

With all other settings the same, and using %s for the object's size, the resulting width of the object is what I would expect, but the height is not even close.

So, something is creating the extra space within the object. A container set in %s will only be as big as it's contents plus padding, etc.

I hope I am clear, and thanks for your help.

  • Registered: 2012-03-01
  • Posts: 56

Re: Understanding the "Stage"

Generated code from the page:

<div id="sv-container" style="width: 100%; height: 100%; "><div id="svcp-0-sv-mobile-flash" class="cls-mobile-flash" style="width: 1140px; height: 534px; "><object type="application/x-shockwave-flash" data="http://www.ridgestyle.com/js/simpleviewer/svcore/swf/simpleviewer_icc.swf" width="100%" height="100%" id="svcp-0-sv-mobile-flash-swf" style="visibility: visible; width: 1140px; height: 534px; "><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="wmode" value="transparent"><param name="bgcolor" value="#222222"><param name="flashvars" value="baseURL=/galleries/home/&amp;preloaderColor=#333333&amp;embedurl=http://www.ridgestyle.com/"></object></div></div>

Just looking at the code, where is the height of 534px coming from?

The image is 300px in height, and all controls, thumbnails, titles, etc., are all 0.

Thanks again,

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

Re: Understanding the "Stage"

By setting your gallery's height to 100%, the gallery will take up 100% of the height of its parent container.
Within the gallery, SimpleViewer will scale the image to fit within the bounds of the gallery.

I'm sorry, I don't understand this. I have  never seen a parent div that has a % value be larger than it's contents; But, I am not an expert.

Take the following as an example:
With screenshot #1, the gallery is displayed in a 'normal' large browser window and your image looks OK with little space surrounding it.
With screenshot #2, I have reduced the width of the browser window.
The height of the browser window has not changed so the height of the gallery has not changed.
The width of the browser window has decreased and so, because the width of the gallery was expressed as a percentage, the width of the gallery has also decreased.
The gallery is essentially now square in shape.
SimpleViewer now dynamically scales your image to fit the gallery and because it is a panoramic image (much wider than it is tall), it does not fit well in the square gallery and there is space above and below the image.
It is not possible to shrink a gallery to fit an image though you can change the imageScaleMode to change the way an image fits the gallery.

Screenshots are in this zip file: [Link removed.]

I hope this explains things better.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2012-03-01
  • Posts: 56

Re: Understanding the "Stage"

Steven, thanks for your concideration in this.

When you took your screenshots,  I had already reverted the height setting of the gallery back to an absolute value of 300px.

When the viewport is narrowed, the gallery remains at 300px, while the width (set at 100%) scales to the veiwport; This is what it should do based on the values set.

That is a workaround, as SV is not handling the height value correctly when set as a %, as far as I can tell.

If you look at a screenshot (above in "space.zip")  of the page with the height set to 100%,  with a wide (greater than 1200px) viewport, you will see that the gallery is much taller than the image. And that there is over 200px of blank space.

All other settings are the same as when the height was set to 300px.

I am trying to acount for why the gallery object is adding over 200px to it's height when set to 100%

It's parent container has no height value, so it is not that the gallery is filling it's parent. The parent is being filled with the child. And the child (the gallery) is adding internal space in addition to the image.

Thank You.

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

Re: Understanding the "Stage"

When you took your screenshots,  I had already reverted the height setting of the gallery back to an absolute value of 300px.

I checked before I took the screenshots and the gallery's height was (and still is) set to 100%.

simpleviewer.load("sv-container", "100%", "100%", "transparent", true, flashvars);

However, the gallery is in amongst other elements on your page and has a height of 100% but does not seem to have a parent container (though I could be wrong about this) so 100% is somewhat meaningless (100% of what?).
The gallery's height is not affected (and cannot be changed) by the size of the main image being displayed within the gallery.
Your workaround may actually be the easiest solution. To either set the gallery's height to 300px or to leave the gallery's height as 100% but to put the gallery in a container whose height is defined as 300px.

I am trying to acount for why the gallery object is adding over 200px to it's height when set to 100%

You should be able to work out the height of the gallery by checking the CSS heights of all parent containers of the gallery.
If the gallery's height is 100% and it has one parent container whose height is 300px, then the gallery's height will always be 300px, regardless of the size of the browser window.
If the gallery's height is 100% and it has one parent container whose height is 50% (of the total browser window height), then the gallery's height will always be 50% of the total browser window.
However, if you have elements on your web page which have heights defined in both absolute pixel values and percentages, then you may get unexpected results (eg. 300px + 50% = ?).

You seem to be looking to shrink the gallery's height (to match that of the the scaled main image), when the browser window's width is changed. One way to do this would be to use JavaScript to listen for the browser's window size being changed by the user and then dynamically change the gallery's container's dimensions so that they match that of your gallery's images.

Steven Speirs
SimpleViewer Support Team

10 Reply by Dave Pitman (edited by Dave Pitman 2012-03-19 01:56:55)

  • Registered: 2012-03-01
  • Posts: 56

Re: Understanding the "Stage"

I checked before I took the screenshots and the gallery's height was (and still is) set to 100%.

I mispoke; The gallery is indeed set to 100% height, but it's parent div (that I added) is set to "max-height:300px".

What I meant was, that if i remove the height of the added parent div, then the SV gallery grows to 534px.

All the upstream parent divs in which the gallery lives contain NO height value. So, if I don't put any content within them, they are essensially flat.

If I place an image in the same div that now holds the gallery object, the image will scale with the viewport. The height of the image scales, and so does the parent div containing it.

When I take out the image, and place the gallery in that same parent div, the div will only expand relative to it's content.

Without the constraining parent div set to an absolute value, it is expands to 534px., and by using Firebug I can select the gallery, and it is indeed 534px in height (all documented in the zip file above); But the image height is only 300px, I ask again where is the extra 234px coming from within the gallery.

Try this, it will only take you a second.
View the page, and use you developer tools of choice to set the gallery's div (#sv-container) to "height:0%, and note that the area containing the gallery goes flat. The parent's div is not dictating the height of the gallery. The gallery is dictating the height of the div.

It is ok to say that you don't know why the gallery is adding 234px to the height, but it clearly is.

I don't have the skillset to know why it is adding the height, but it clearly will still function if contrained within a parent div with an absolute value. So, perhaps SV's developers can figure out what is causing the added height and remove it.

Thanks again Steven, I am not trying to be a pita, but the gallery is adding height,  beyond the height of the image, to the object when set to "height:100%".

  • Felix
  • Site Admin
  • Offline
  • Registered: 2006-03-16
  • Posts: 4,395

Re: Understanding the "Stage"

hi,

CSS sizing is something of a black art especially when you add the complexities of SWF embedding and dynamic layout via Javascript. It's actually surprisingly difficult to determine the height of a div via Javascript when it is not explicitly specified.

In this case SimpleViewer is embedded inside multiple nested divs and seems to have miscalculated the height of it's div somehow.

There are 2 posible solutions:

1) Give SimpleViewer a fixed height and 100% width. This seems like it would work OK with your layout.

2) If you need percentage height, try explicitly setting the height of each one of the SimpleViewer's parent divs via inline CSS. Check the 'Using Percentage Heights' section here for more details: http://www.simpleviewer.net/simpleviewe … html#embed

Felix Turner
SimpleViewer Support Team.

Felix's Website

  • Registered: 2012-03-01
  • Posts: 56

Re: Understanding the "Stage"

Felix wrote:

In this case SimpleViewer is embedded inside multiple nested divs and seems to have miscalculated the height of it's div somehow.

There are 2 posible solutions:

1) Give SimpleViewer a fixed height and 100% width. This seems like it would work OK with your layout.

2) If you need percentage height, try explicitly setting the height of each one of the SimpleViewer's parent divs via inline CSS. Check the 'Using Percentage Heights' section here for more details: http://www.simpleviewer.net/simpleviewe … html#embed

Hi Felix,

Thank you for acknowledging that SV is miscalculating the needed gallery height.

Since the div generated by SV contains inline absolute height values, there doesn't seem to be anything I can do to make it use %s instead.

Perhaps this can be forwarded to developement for correction in the future.

Thanks,

<div class="cls-mobile-flash" id="svcp-0-sv-mobile-flash" style="height: 534px; width: 1140px;"><object width="100%" height="100%" type="application/x-shockwave-flash" data="http://www.ridgestyle.com/js/simpleviewer/svcore/swf/simpleviewer_icc.swf" id="svcp-0-sv-mobile-flash-swf" style="visibility: visible; width: 1140px; height: 534px;"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="wmode" value="transparent"><param name="bgcolor" value="#222222"><param name="flashvars" value="baseURL=/galleries/home/&amp;preloaderColor=#333333&amp;embedurl=http://www.ridgestyle.com/"></object></div>