It is currently Mon Sep 24, 2018 6:51 am Advanced search

Force focus on an expanded document+2 other minor issues

Technical support, bug reports, feature requests and more.

Force focus on an expanded document+2 other minor issues

Postby mathen » Thu May 03, 2018 9:57 pm

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.
mathen
 
Posts: 4
Joined: Thu May 03, 2018 9:41 pm

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

Postby MisterNeutron » Thu May 03, 2018 10:21 pm

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.
User avatar
MisterNeutron
 
Posts: 421
Joined: Sun Aug 18, 2013 1:20 pm

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

Postby MisterNeutron » Thu May 03, 2018 10:28 pm

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';
User avatar
MisterNeutron
 
Posts: 421
Joined: Sun Aug 18, 2013 1:20 pm

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

Postby MisterNeutron » Thu May 03, 2018 10:40 pm

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.
User avatar
MisterNeutron
 
Posts: 421
Joined: Sun Aug 18, 2013 1:20 pm

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

Postby mathen » Mon May 14, 2018 5:51 am

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 9:41 pm

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

Postby mathen » Wed May 16, 2018 7:01 am

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...
mathen
 
Posts: 4
Joined: Thu May 03, 2018 9:41 pm

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

Postby MisterNeutron » Wed May 16, 2018 3:20 pm

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.
User avatar
MisterNeutron
 
Posts: 421
Joined: Sun Aug 18, 2013 1:20 pm

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

Postby mathen » Sat May 19, 2018 8:43 pm

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.
mathen
 
Posts: 4
Joined: Thu May 03, 2018 9:41 pm


Return to Highslide JS Usage

Who is online

Users browsing this forum: No registered users and 0 guests