Can I set expansion-window width with CSS?

[ClassicalMark]

Hi,

I'm using Highslide.full.js, version 4.1.13, and opening a window containing html text (and an image). I'm using the following code:

Code: Select all

<a href='#' onclick='return hs.htmlExpand(this, {  width: "575", headingText: "myHeading", wrapperClassName: "titlebar" } )'><div class='bullet' id='bullet0'>&nbsp; &nbsp; </div><h3>Thumbnail caption</h3></a><div class='highslide-maincontent'><p><img ...>Expansion window text... 

The <div class="bullet"> gets a thumbnail loaded with a CSS sprite, and the following <h3> adds a caption to the thumbnail. The image and text inside the expansion window is contained within the <div class='highslide-maincontent'>. This is all straightforward, and it works perfectly in all desktop browsers.

The problem is the { width: "575" }. When I view the website with an iPhone, the width of the expansion window is considerably wider than the phone screen. If I change the width to 260, it works in the phone in portrait mode, but is too short for landscape, and of course looks silly on a desktop. Width: "400" is better for phones in landscape, but is too wide for portrait.

One obvious answer is to eliminate the width setting in the html and supply it with CSS, using media queries to send the correct width to the various screen sizes. I've been trying to do that, but with no success. Perhaps I'm not finding the correct CSS class to define the width. Is hardcoding the width in the html mandatory?

Or have you come up with another way to target phones and adapt for the phone's orientation?

[MisterNeutron]

You should be able to set the width with CSS targeted to .highslide-html-content.

You've put your finger on one of the Highslide's shortcomings, however. I've long thought that it should be able to adapt the expander size to the viewport for HTML expanders in the same way it does for regular image expanders, with a defined "original" size that can't be exceeded.

[ClassicalMark]

Thanks, MisterNeutron,

It almost works. I set .highslide-html-content width to 400px for landscape and 260px for portrait.

I have a series of expanding thumbnails on the page. I start in portrait mode and tap one and it expands properly to 260 wide. Then I switch to landscape, and if I tap a different thumbnail it expands to 400px. But re-tapping the first one, it only expands to 260. The same thing happens in reverse when I start in landscape. It seems to remember which have been expanded and it uses those dimensions on subsequent taps, irrespective of the orientation.

I tried taking it a step further. Using jquery, I set up the page to run a function on orientation changes. The function reads the new orientation, and if it's landscape, it sets the .highslide-html-content CSS width to 400; if it's portrait, the CSS is set to 260. The function works--it runs on orientation changes and sends the CSS--but this makes no difference for the result. It still expands correctly for every new tap, and expands as it did previously for every repeated tap.

So there must be something more. I can't imagine I'm the first one with this problem.

[MisterNeutron]

I can't imagine I'm the first one with this problem.

I don't recall this coming up before. But remember, the Highslide JS script pre-dates the existence of mobile devices, and has never really been updated to deal with them effectively. It's expecting a fixed-size, non-moving monitor.

In fact, it doesn't really deal with a resized browser window very well - it doesn't adapt to the new viewport size until you go to the next item in the gallery, or close and reopen the current one. On top of all that, the HTML expander has always been the somewhat neglected stepchild, compared to the regular image expander.

[ClassicalMark]

Well, I hope someone's working on it. The reality today is for websites to be viewed on many different screen sizes, and orientation changes on tablets and phones are common. For years I've thought Highslide was by far the best, most elegant, lightbox around, but there are certainly plenty of competitors. I hope I don't have to start looking at them.

[RoadRash]

I have a series of expanding thumbnails on the page. I start in portrait mode and tap one and it expands properly to 260 wide. Then I switch to landscape, and if I tap a different thumbnail it expands to 400px. But re-tapping the first one, it only expands to 260. The same thing happens in reverse when I start in landscape. It seems to remember which have been expanded and it uses those dimensions on subsequent taps, irrespective of the orientation.

Hi Mark,

Have you tried setting hs.preserveContent to false? It would have been easier to see your page live, but it sounds like this setting should fix the "remembering" issue.

Code: Select all

hs.preserveContent = false;

[RoadRash]

Sorry - I forgot to post the solution for how to make the popup automatically fit several device widths in my previous post. Take a look at this demo. http://jsfiddle.net/roadrash/4c3Jv/
maxWidth is set to 575 and allowWidthReduction is set to true. The popup will not exceed the width of 575 px, and it will automatically fit smaller screen sizes. Note that width for .highslide-html-content must be set to auto for this to work.