mathen
Posts: 4
Joined: Thu May 03, 2018 7:41 pm

Force focus on an expanded document+2 other minor issues

Hi,
I'm creating this for 3 issues, but really the first one is the most important at the moment, which is why I didn,t create multiple thread. I can split it in 3 if required.

First, I've been trying to scroll in an extanded document in Highslide either with a mouse scroll or a page up/page down, but it only works when the cursor is over the expanded document for the mouse scroll or when I click on the document while it's expanded for the page up and page down to work.

I notice there is a "focus()" function, but it doesn't seem to work in this case. So, how could I force the focus on the expanded document so all inputs apply to the expanded document? there's no point scrolling in the page if the user opened a document to see it, especially in the case the rest of the page is darkened.


Also a totally unrelated issue, to have the fullexpand icon top right of the expanded image, I added fullExpandPosition : 'top right' to the config file in "hs.addSlideshow({"'s parameters, but it sticks with the default 'bottom right'. Is there any way I can troubleshoot this?

Also, the last totally unrelated issue, I want to change the color of the small triangle pointing which image is viewed under the thumbnails in galleries. I cannot find where the asset is taken or created, but I could for all the other ones. I've been looking for a while.
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Force focus on an expanded document+2 other minor issues

First one first. The Highslide focus() function is, as you've discovered, aimed at something entirely different - it's just for shifting focus between multiple expanders via mouseover, so it won't help you with what you're trying to do.

Maybe something like this, from an old RoadRash post?

Code: Select all

hs.Expander.prototype.onAfterExpand = function() {
    $(this.content).find('.highslide-body').attr('tabindex', -1).focus();
};
This requires jQuery.

I'm fairly certain that hs.Expander.prototype.onAfterExpand is your starting point. What, exactly, should get the focus() is a little vague to me, so it's probably going to take some tinkering. Search the forums for that onAfterExpand event.
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Force focus on an expanded document+2 other minor issues

OK, now the easiest one - full expand. That's not part of addSlideShow - it's just entered as a Highslide variable along with all the other options, like:

Code: Select all

hs.graphicsDir = '../highslide/graphics/';
hs.marginTop = 25;
hs.marginBottom = 15;
hs.fullExpandPosition = 'top left';
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Force focus on an expanded document+2 other minor issues

You can be forgiven for not being able to figure out how to style the little marker triangle on the thumbstrip. It's created using a marvelous little CSS trick usually referred to as a CSS triangle. If you've never seen it before, you'd never recognize it in the code!

It's buried in the highslide.css. Here, for example, is the entry for a horizontal thumbstrip. Change the "gray" to "red" and see what happens. ;)

Code: Select all

.highslide-thumbstrip-horizontal .highslide-marker {
	top: 47px;
	border-left-width: 6px;
	border-right-width: 6px;
	border-bottom: 6px solid gray;
}
This is also where you can meddle with the size, though that also means making other adjustments to things like margins. Size changes sometimes have some nasty little ripple effects.
mathen
Posts: 4
Joined: Thu May 03, 2018 7:41 pm

Re: Force focus on an expanded document+2 other minor issues

Hi, thanks a lot for the replies, Sorry I didn't see sooner that I had replies. I'll try those tricks out tomorrow, and come back with results :)
cheers
mathen
Posts: 4
Joined: Thu May 03, 2018 7:41 pm

Re: Force focus on an expanded document+2 other minor issues

Hi,
thanks a lot for the help.
I got point 2 and 3 to work as I wanted.
Point 1 is trickier, I'm still trying to figure out how to force the scroll when the cursor is not on top of the window.

I'm thinking I may have to check if the swipe or mouse scroll is done outside then apply the scrolling effect. Not sure yet how though...
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Force focus on an expanded document+2 other minor issues

I'm on the road at the moment, and even if I weren't, my desktop PC died a horrible death last week, so I'm not in a great position to be testing things. But try something like this:

First, put an ID on your call to Highslide:

Code: Select all

<a id='exp01' class='highslide' onclick='return hs.htmlExpand(this,..  etc.>
Then in your Highslide config, after loading the script:

Code: Select all

hs.addEventListener(document, "ready", function() {
document.getElementById('exp01').focus();
This is straight Javascript - no jQuery necessary.
mathen
Posts: 4
Joined: Thu May 03, 2018 7:41 pm

Re: Force focus on an expanded document+2 other minor issues

Hi,
Sorry to hear about your PC.

I tried only adding the listener and the function is called after the loading of the page.
The first method you've shown ("hs.Expander.prototype.onAfterExpand = function() {") actually works for calling the function when I open the document with the expander... it's really the "focus" part that doesn't seem to work. Maybe because there is a listener with a real time check for the mouse's location? which means even if the focus is set correctly for 1 frame, then it'd be lost right afterwards, and on mobile whatever action is done after the function call would override it.

I'm just guessing really, I have no proof except the behavior that it is doing so.

Return to “Highslide JS Usage”