Colleen
Posts: 15
Joined: Sun Nov 20, 2016 4:22 pm

Appearance problem with controls and expander posirtion

I'm somewhat familiar with highslide, but not enough to figure this out.

GOALS:
1) Controls-in-heading (top right)
2) Numbers in caption
3) Remove large blank space below thumbstrip when displaying at high resolutions (see comments on following test pages)

TEST 1: Displays fine if numperPosition is 'heading,' but I'm aiming for numberPosition 'caption'. Here's the code with numberPosition in the heading:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<TITLE>Test 1</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
<![endif]-->

<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.showCredits = false;
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];

hs.fadeInOut = true;
hs.outlineType = 'rounded-white';
hs.marginTop = 60; // make room for the thumbstrip and the controls

hs.wrapperClassName = 'controls-in-heading';
hs.captionEval = 'this.thumb.alt';
hs.numberPosition = 'heading';

// Change to 'caption' if desired
hs.dimmingOpacity = 0.8;

hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';

hs.captionOverlay.position = 'rightpanel';
hs.captionOverlay.width = '220px';
hs.captionOverlay.fade = 0;
hs.headingOverlay.fade = 0;

// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
	return hs.next();
}

// Add the slideshow controller
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
		fixedControls: false,
		overlayOptions: {
			opacity: 1,
			position: 'top right',
			hideOnMouseOut: false,
			offsetX: 220,
			offsetY: 0,
			relativeTo: 'expander'
	},
	thumbstrip: {
			position: 'top center',
			mode: 'horizontal',
			relativeTo: 'viewport'
	}
});
</script>

<style type="text/css">
.controls-in-heading .highslide-heading {
	color: gray;
	font-weight: bold;
	height: 20px;
	overflow: hidden;
	cursor: default;
	padding: 0; /* ORIGINAL WAS 0 0 0 22px; */
	margin: 0;
	background: none; /* ORIGINAL WAS background: url(graphics/icon.gif) no-repeat 0 1px; */
}
.highslide-caption {
	display: none;
	font-size: 1em;
	padding: 5px;
	margin: 10px 5px 10px 5px;
	border: 1px solid silver;
	background: #FFFFFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));
	background: -webkit-linear-gradient(#FFFFFF, #E6E6E6);
	background: -moz-linear-gradient(top, #FFFFFF, #E6E6E6);
	background: -ms-linear-gradient(#FFFFFF, #E6E6E6);
	background: -o-linear-gradient(#FFFFFF, #E6E6E6);
	background: linear-gradient(#FFFFFF, #E6E6E6);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E6E6E6');
}
</style>

</head>

<body>
<h3>Long caption in 1st image</h3>
<p><strong>Good, if numberPosition is 'heading'</strong></p>
<p>PROBLEM: Display is fine at lower screen resolution like 1024x768.  At higher resolutions (e.g. 1280x1024), large space appears between thumbstrip and expander.  Is it possible to remove that space, so expander always appear just below thumbstrip, regardless of screen resolution (preferably WITHOUT implementing useBox)?</p>

<div class="highslide-gallery">

<a class="highslide" onclick="return hs.expand(this, {src: 'flower01.jpg', slideshowGroup: 1})">
<img src="flower01_thumb.jpg" alt="Flower 1: 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. 
In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse 
condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec 
mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi.
 Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque 
 nonummy pretium tellus. 
Cras interdum accumsan diam. Nam neque neque, feugiat sed, blandit quis, feugiat et, magna. 
Etiam ornare cursus eros. Duis gravida. Integer bibendum. Nulla nonummy ante eu est. Mauris 
dapibus quam eget orci. Praesent nec metus eget mauris sagittis consequat. Cras rutrum. Etiam 
dictum. Cras placerat orci non quam. Suspendisse nec nulla sit amet enim ultricies malesuada. 
Nullam lobortis. Ut gravida. Morbi hendrerit. Integer pretium euismod mauris. Duis condimentum 
sagittis arcu. Integer est. Nulla ante ligula, auctor sit amet, vulputate in, aliquet in, sem." title=""></a>

<a class="highslide" onclick="return hs.expand(this, {src: 'flower02.jpg', slideshowGroup: 1})">
<img src="flower02_thumb.jpg" alt="Flower 2
" title=""></a>

<a class="highslide" onclick="return hs.expand(this, {src: 'flower03.jpg', slideshowGroup: 1})">
<img src="flower03_thumb.jpg" alt="Flower 3" title=""></a>

</div>

</body>
</html>

TEST 2: Changing the numpberPosition to 'caption' results in poor display of controls, and ability to move image is gone:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<TITLE>Test 2</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
<![endif]-->

<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.showCredits = false;
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];

hs.fadeInOut = true;
hs.outlineType = 'rounded-white';
hs.marginTop = 60; // make room for the thumbstrip and the controls
hs.wrapperClassName = 'controls-in-heading';
hs.captionEval = 'this.thumb.alt';
hs.numberPosition = 'caption';

// Change to 'heading' if desired
hs.dimmingOpacity = 0.8;

hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';

hs.captionOverlay.position = 'rightpanel';
hs.captionOverlay.width = '220px';
hs.captionOverlay.fade = 0;
hs.headingOverlay.fade = 0;

// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
	return hs.next();
}

// Add the slideshow controller
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
		fixedControls: false,
		overlayOptions: {
			opacity: 1,
			position: 'top right',
			hideOnMouseOut: false,
			offsetX: 220,
			offsetY: 0,
			relativeTo: 'expander'
	},
	thumbstrip: {
			position: 'top center',
			mode: 'horizontal',
			relativeTo: 'viewport'
	}
});
</script>

<style type="text/css">
.controls-in-heading .highslide-heading {
	color: gray;
	font-weight: bold;
	height: 20px;
	overflow: hidden;
	cursor: default;
	padding: 0; /* ORIGINAL WAS 0 0 0 22px; */
	margin: 0;
	background: none; /* ORIGINAL WAS background: url(graphics/icon.gif) no-repeat 0 1px; */
}
.highslide-number {
	font-weight: bold;
	color: gray;
	font-size: .9em;
	margin-bottom: 1em;
}
.highslide-caption {
	display: none;
	font-size: 1em;
	padding: 5px;
	margin: 0px 5px 10px 5px;
	border: 1px solid silver;
	background: #FFFFFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));
	background: -webkit-linear-gradient(#FFFFFF, #E6E6E6);
	background: -moz-linear-gradient(top, #FFFFFF, #E6E6E6);
	background: -ms-linear-gradient(#FFFFFF, #E6E6E6);
	background: -o-linear-gradient(#FFFFFF, #E6E6E6);
	background: linear-gradient(#FFFFFF, #E6E6E6);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E6E6E6');
}
</style>

</head>

<body>
<h3>Long caption in 1st image</h3>
<p><strong>Bad controls appearance if numberPosition is 'caption', and ability to move image is gone</strong></p>
<p>ALSO: Display is fine at lower screen resolution like 1024x768.  At higher resolutions (e.g. 1280x1024), large space appears between thumbstrip and expander.  Is it possible to remove that space, so expander always appear just below thumbstrip, regardless of screen resolution (preferably WITHOUT implementing useBox)?</p>

<div class="highslide-gallery">

<a class="highslide" onclick="return hs.expand(this, {src: 'flower01.jpg', slideshowGroup: 1})">
<img src="flower01_thumb.jpg" alt="Flower 1: 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. 
In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse 
condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec 
mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi.
 Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque 
 nonummy pretium tellus. 
Cras interdum accumsan diam. Nam neque neque, feugiat sed, blandit quis, feugiat et, magna. 
Etiam ornare cursus eros. Duis gravida. Integer bibendum. Nulla nonummy ante eu est. Mauris 
dapibus quam eget orci. Praesent nec metus eget mauris sagittis consequat. Cras rutrum. Etiam 
dictum. Cras placerat orci non quam. Suspendisse nec nulla sit amet enim ultricies malesuada. 
Nullam lobortis. Ut gravida. Morbi hendrerit. Integer pretium euismod mauris. Duis condimentum 
sagittis arcu. Integer est. Nulla ante ligula, auctor sit amet, vulputate in, aliquet in, sem." title=""></a>

<a class="highslide" onclick="return hs.expand(this, {src: 'flower02.jpg', slideshowGroup: 1})">
<img src="flower02_thumb.jpg" alt="Flower 2
" title=""></a>

<a class="highslide" onclick="return hs.expand(this, {src: 'flower03.jpg', slideshowGroup: 1})">
<img src="flower03_thumb.jpg" alt="Flower 3" title=""></a>

</div>

</body>
</html>

TEST 3: Playing around with the styles didn't help:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<TITLE>Test 3</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
<![endif]-->

<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.showCredits = false;
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.outlineType = 'rounded-white';
hs.marginTop = 60; // make room for the thumbstrip and the controls
hs.wrapperClassName = 'controls-in-heading';
hs.captionEval = 'this.thumb.alt';
hs.numberPosition = 'caption';

// Change to 'heading' if desired
hs.dimmingOpacity = 0.8;

hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';

hs.captionOverlay.position = 'rightpanel';
hs.captionOverlay.width = '220px';
hs.captionOverlay.fade = 0;
hs.headingOverlay.fade = 0;

// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
	return hs.next();
}

// Add the slideshow controller
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
		fixedControls: false,
		overlayOptions: {
			opacity: 1,
			position: 'top right',
			hideOnMouseOut: false,
			offsetX: 220,
			offsetY: 0,
			relativeTo: 'expander'
	},
	thumbstrip: {
			position: 'top center',
			mode: 'horizontal',
			relativeTo: 'viewport'
	}
});
</script>

<style type="text/css">
.controls-in-heading .highslide-controls {
	width: 105px;
	height: 20px;
	position: relative;
	margin-top: 20px; /* ORIGINAL WAS margin: 0; */
	/* top: -23px; */
	left: 7px;
	background: none;
}
.highslide-number {
	font-weight: bold;
	color: gray;
	font-size: .9em;
	margin-bottom: 1em;
}
.highslide-caption {
	display: none;
	font-size: 1em;
	padding: 5px;
	margin: 40px 5px 10px 5px;
	border: 1px solid silver;
	background: #FFFFFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));
	background: -webkit-linear-gradient(#FFFFFF, #E6E6E6);
	background: -moz-linear-gradient(top, #FFFFFF, #E6E6E6);
	background: -ms-linear-gradient(#FFFFFF, #E6E6E6);
	background: -o-linear-gradient(#FFFFFF, #E6E6E6);
	background: linear-gradient(#FFFFFF, #E6E6E6);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E6E6E6');
}
</style>

</head>

<body>
<h3>Long caption in 1st image</h3>
<strong>Bad scrolling if numberPosition is 'caption', and ability to move image is gone:</strong>
<ul>
<li>Turns blue, sometimes on 1st scroll, sometimes on subsequent scrolls</li>
<li>Attempts at changing 'margin' and 'top' styles for .controls-in-heading results in bad appearance of controls when scrolling (i.e. controls appear inside scrolled area)</li>
</ul>
<p>ALSO: Display is fine at lower screen resolution like 1024x768.  At higher resolutions (e.g. 1280x1024), large space appears between thumbstrip and expander.  Is it possible to remove that space, so expander always appear just below thumbstrip, regardless of screen resolution (preferably WITHOUT implementing useBox)?</p>

<div class="highslide-gallery">

<a class="highslide" onclick="return hs.expand(this, {src: 'flower01.jpg', slideshowGroup: 1})">
<img src="flower01_thumb.jpg" alt="Flower 1: 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. 
In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse 
condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec 
mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi.
 Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque 
 nonummy pretium tellus. 
Cras interdum accumsan diam. Nam neque neque, feugiat sed, blandit quis, feugiat et, magna. 
Etiam ornare cursus eros. Duis gravida. Integer bibendum. Nulla nonummy ante eu est. Mauris 
dapibus quam eget orci. Praesent nec metus eget mauris sagittis consequat. Cras rutrum. Etiam 
dictum. Cras placerat orci non quam. Suspendisse nec nulla sit amet enim ultricies malesuada. 
Nullam lobortis. Ut gravida. Morbi hendrerit. Integer pretium euismod mauris. Duis condimentum 
sagittis arcu. Integer est. Nulla ante ligula, auctor sit amet, vulputate in, aliquet in, sem." title=""></a>

<a class="highslide" onclick="return hs.expand(this, {src: 'flower02.jpg', slideshowGroup: 1})">
<img src="flower02_thumb.jpg" alt="Flower 2
" title=""></a>

<a class="highslide" onclick="return hs.expand(this, {src: 'flower03.jpg', slideshowGroup: 1})">
<img src="flower03_thumb.jpg" alt="Flower 3" title=""></a>

</div>

</body>
</html>
I feel like the answers to these issues are probably pretty simple, but I'm still a Highslide novice and am not sure how to fix the problems. Thank you in advance for any help you can provide.
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Appearance problem with controls and expander posirtion

Just so you don't feel like you're being ignored (though it appears that I'm the only person in the entire universe who's doing any sort of Highslide JS support these days)....

These issues actually aren't simple, so don't feel bad about struggling with them a bit. As soon as you wander away from the canned configurations in Highslide, you're in a whole new world, and have to start taking control of things yourself, and it's not easy.

First, the easy one, though I don't have a satisfying answer. When you place the thumbstrip in relation to the viewport, it's going to be in a fixed position (like 20px from the top of the window), no matter how big the expander is. The only alternative is to place the thumbstrip within the expander. I've never found this particularly satisfying, but maybe you'd like it better. A quick demo: demo removed

Second, the "blue" text. That's just what happens in any browser when you click and drag over some text - the browser is "selecting" that text for copying. You'll notice in my demo that doesn't happen, and it's just because I've applied the "draggable" area to the entire wrapper, rather than just the image. You can click and drag from literally anywhere, even the control bar and thumbstrip (try it). I use some forced cursors to disguise this fact, so when you hover on the controlbar you get a pointer instead of a "move" icon, but you actually can drag the expander around from there. But it means that the visitor can't click and drag over the caption text to "select" it.

I'll do my best to get back to this in the next few days, and see if I can cobble together a revision of your test code that works better. It's a bit of a struggle because I built these options into my own software years ago, so all I ever have to do is select some checkboxes - I never have to wade into the raw code any longer. So, I've forgotten a lot of it!
Last edited by MisterNeutron on Sat Jan 14, 2017 9:32 pm, edited 2 times in total.
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Appearance problem with controls and expander posirtion

BTW, this was posted in the wrong forum section - I'll ask the moderators to move it.
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Appearance problem with controls and expander posirtion

I wrestled with this for a bit, and finally realized that my customized CSS was fighting with the default CSS, so I took a more radical approach.

First, the HTML. I've dumped the "controls-in-heading" wrapper class, because it's not really helpful to this setup. I've put in a "highslide-move" class, instead, which really consists only of a few attributes. I'm loading highslide2.css, which is heavily customized... more about this in a moment. You can, of course, tinker with the offsetX and offsetY to put the controlbar where you want it (along with the margin-top on highslide-caption).

I've rewritten the HTML for HTML5 - it's really time to dump XHTML for good. It's obsolete, and was never "real" XHTML anyway (all browsers, under the hood, interpret it as HTML with syntax errors).

For the highslide2.css file, I've stripped out a lot of the stuff you're not using anyway, like various wrapper classes, and all of the text controlbar stuff. I've done a wholesale replacement of the highslide-controls entries. They look a lot like like the defaults, but there are a lot of differences buried in there - I'd be hard-pressed to tell you exactly where each of the changes is. There are also some explicit pointer choices, so that while you can drag the expander from anywhere, the main image shows a hand pointer (to go along with the "click for next" functionality), and the controlbar icons show either a hand or the default pointer (active or disabled).

So where does this leave things? The controlbar can be positioned where you want it, and the expander can be dragged from absolutely anywhere. The visitor can't select any of the caption text (which is what makes it turn blue). The only downside is that the vertical scrollbar within the caption can't be dragged. You can thumbwheel scroll the long caption, and you can click above/below the marker within the vertical scrollbar, but if you try to drag it, you just end up dragging the expander. This is really unavoidable. The only way to get the vertical scrollbar to behave normally is to turn off the ability to drag the expander from the caption, which lands you back with the "selected text" issue.

The forum software won't let me attach the necessary files to this post (it's a real PITA about things like that). So, here's a link to the working album (using my own images), and a link to the CSS file:

demo removed
Last edited by MisterNeutron on Sat Jan 14, 2017 9:33 pm, edited 1 time in total.
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Appearance problem with controls and expander posirtion

Unsolicited advice follows....

I notice a lot of browser-prefix stuff in your CSS, along with a call to the old IE6 version of the CSS. Unless you've got a client who's absolutely insisting on all of this, I'd advise you to save yourself a lot of mucking about, and ditch all of it.

Chrome, Edge, Firefox, Opera, and Safari are all self-updating, so if someone out there is still using Firefox 2, that's his problem, not yours. And the recent versions of all of those browsers, along with IE11 and IE10, can handle the CSS3 stuff without prefixes (for example, they all understand linear-gradient). That leaves only the old IE dogs, IE9 and below. Coding for them ends up taking a lot of time and effort, and it's just enabling behavior - users need to be pushed, kicking and screaming if necessary, to modern browsers.

I recall a post a couple of years ago from a developer who said he had a client who insisted on supporting everything back to IE6. The developer said he informed the client that he could certainly do that, but that it would increase the development costs by 60% - 75%. He said he was amazed at how quickly the client got religion. ;)
Colleen
Posts: 15
Joined: Sun Nov 20, 2016 4:22 pm

Re: Appearance problem with controls and expander posirtion

Thank you for the words of encouragement in your first reply. When I posted previously, I was going to write, "Sometimes Highslide is not for the faint of heart...", but decided no, it's just me. Now, I think maybe I was right the first time. LOL!

Thank you so much for the "Colleen Demo." It's lovely (even using two of my favorite colors!). I notice it's much like the Matrix "Patagonia" demo you pointed me to in another post (https://jgromit.com/matrix/sidepanel/), but you've added the thumbstrip and the controls I like, which I wasn't able to do when I tried fussing around with the "Patagonia" demo. Now, I have your "Colleen Demo" working, but have only just started trying to change some of the styling to fit my website (which uses accordion-style dropdowns for each of many image galleries).

Re: my CSS: I have a very large site containing thousands of documents, some of which use Highslide images with different styling than what I'll be using in these new test image-only pages. So I just left the original highslide.css file pretty much as-is for the time being, and decided to just override the original highslide.css styling as needed, by adding styles inside the HEAD of the test-page HTML itself. Once everything is done, I can go clean up the original highslide.css (which does have a lot of stuff I'm definitely not using).

Re: the XHTML: I spent a long time trying to figure out why some of my tests weren't working, and finally realized it was because I'd carried over an old "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">" (and an old "<meta http-equiv="Content-Type" CONTENT="text/html; charset=ISO-8859-1">") from pages I wrote many years ago. I'm painfully ignorant about various DOCTYPEs, but I looked at the original Highslide examples and saw they all used DOCTYPE...XHTML and a different "charset." Once I put those in, my tests worked correctly, so I left it in.

I did a quick check of the link you posted to your last demo, and am impressed beyond belief with the work you've done. That said, I do agree that the non-draggable scrollbar is a "downside." I'm venturing a guess that most users would probably automatically try to drag the scrolbar to see the rest of the caption, rather than using the wheel. (I actually never use the wheel at all; it's just habit for me to drag instead of wheeling.)

Thanks again for all your help. I'd be totally lost if it weren't for people like you. Now, I'm off to download and experiment with your latest demo (and also to play around some more with your "Colleen Demo"). I'll try to return here ASAP to let you know how things worked out.

The difficult we do immediately; the impossible takes a little longer...Onward through the fog... :)
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Appearance problem with controls and expander posirtion

The "Colleen Demo" and "Patagonia" albums were produced with my Matrix skin for jAlbum, the product of about a decade of gradual improvements, fixes, and so on. Ironically, that's what makes it difficult for me to plunge into the raw Highslide stuff again - my software makes all of that a matter of choosing options in a user interface (like the Highslide Editor, but much more extensive). I almost have to re-learn the internals. I've even built in a few tweaks to the highslide-full.js file to correct some small errors (which is why it's renamed in those albums).

The vertical scrollbar issue is always going to be messy. I would do almost anything to avoid having one at all. A scrollbar within a web page is usually problematic, especially on mobile devices, where it's virtually unusable. Even on a laptop without a mouse, it can be a pain.

Re: doctypes, a lot of the Highslide stuff is mired in old standards since it hasn't been updated in years (and internally, the expander is produced with HTML tables - using them for layout is frowned upon these days). The initial process of getting all of your stuff into HTML5 can be painful, especially when it somes to now-obsolete presentational tags like <font>. But once you embrace it, it becomes second-nature.

And a lot of the changes are simple, often involving just deleting stuff (like type="text/css" and type="text/javascript", which aren't needed any longer, and the self-closing tags). Pumping the pages through a validator is helpful - online, http://validator.w3.org/ (and for the CSS, https://jigsaw.w3.org/css-validator/), or install something like Total Validator, which also checks for bad links: https://www.totalvalidator.com/
Colleen
Posts: 15
Joined: Sun Nov 20, 2016 4:22 pm

Re: Appearance problem with controls and expander posirtion

Well, wonders never cease. I've been working for a couple of weeks trying to figure all this out, and now I think I've almost got it. We might need to re-think the idea that the scrollbar problem can't be fixed!

Using TEST #3 again, I reasonsed that maybe something needed to change regarding the large-image border-top height, and maybe then the controls would fit better. I grabbed the original highslide.css file, and figured out that changing the .highslide-image style was what I needed.

In the original highslide.css, it was:

Code: Select all

.highslide-image {
	border-width: 2px;
	border-style: solid;
	border-color: white;
}
Inside my TEST #3 HTML file (which is now TEST #4), I overrode that by implementing this style instead:

Code: Select all

.highslide-image {
	border: 20px 2px 2px 2px solid white;
}
(I also discovered that "border-top: 20px solid white; border-bottom: 2px solid white; border-left: 2px solid white; border-right: 2px solid white;" also works; just gives a slightly different appearance).

Now the controls fit better, but I still had the "blue" problem. And out of the blue (no pun intended), I suddenly realized what the problem was. My rightpanel is 220px, and my "offsetX" in the overlayOptions was also 220, which caused the controls to conflict with the scrollbar. I changed the offrsetX to 200, and voila! No more "blue," and I can scroll the caption with no problem.

Finally, I completely removed the style for ".controls-in-heading .highslide-controls" from TEST #4 file, since they weren't needed anymore.

So I'm pretty happy at the moment, but still have one issue to deal with. I don't know how to make the caption box automatically fit the expander height. You will see what mean if you take a look at the caption style inside the following code. If I can just get the caption to fit whatever height is needed, I think that'll give me exactly what I want:

TEST #4 - What do you think? Does this work ok on your end? Is it time to say "I am woman; hear me roar..." yet? LOL!:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<TITLE>Test</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
<![endif]-->

<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.showCredits = false;
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];

hs.fadeInOut = true;
hs.outlineType = 'rounded-white';
hs.marginTop = 60; // make room for the thumbstrip and the controls
hs.wrapperClassName = 'controls-in-heading';
hs.captionEval = 'this.thumb.alt';
hs.numberPosition = 'caption';

// Change to 'heading' if desired
hs.dimmingOpacity = 0.8;

hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';

hs.captionOverlay.position = 'rightpanel';
hs.captionOverlay.width = '220px';
hs.captionOverlay.fade = 0;
hs.headingOverlay.fade = 0;

// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
	return hs.next();
}

// Add the slideshow controller
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
		fixedControls: false,
		overlayOptions: {
			opacity: 1,
			position: 'top right',
			hideOnMouseOut: false,
			offsetX: 200,
			offsetY: 20,
			relativeTo: 'expander'
	},
	thumbstrip: {
			position: 'top center',
			mode: 'horizontal',
			relativeTo: 'viewport'
	}
});

</script>

<style type="text/css">
.highslide-image {
	border: 20px 2px 2px 2px solid white;
}
.highslide-number {
	font-weight: bold;
	color: gray;
	font-size: .9em;
	margin-bottom: 1em;
}
.highslide-caption {
	display: none;
position: fixed;
width: 200px;
height: 300px;
overflow: auto;
	font-size: 1em;
	padding: 5px;
	margin: 40px 5px 10px 5px;
	border: 1px solid silver;
	background: #FFFFFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));
	background: -webkit-linear-gradient(#FFFFFF, #E6E6E6);
	background: -moz-linear-gradient(top, #FFFFFF, #E6E6E6);
	background: -ms-linear-gradient(#FFFFFF, #E6E6E6);
	background: -o-linear-gradient(#FFFFFF, #E6E6E6);
	background: linear-gradient(#FFFFFF, #E6E6E6);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E6E6E6');
}
</style>

</head>
<body>

<h3>Long caption in 1st image</h3>
<strong>ALMOST PERFECT EXCEPT FOR:</strong>
<ul>
<li>CAPTION: How to get caption box to automatically fit whatever height is needed, vs. a fixed height?<br>I've tried height:auto; and max-height, etc. but can't get it to work right.</li>
<p>Right now, the caption style (inside this HTML file) includes:
<br>position: fixed;
<br>width: 200px;
<br>height: 300px;
<br>overflow: auto;
</p>
</ul>

<div class="highslide-gallery">

<a class="highslide" onclick="return hs.expand(this, {src: 'flower01.jpg', slideshowGroup: 1})">
<img src="flower01_thumb.jpg" alt="Flower 1: 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. 
In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse 
condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec 
mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi.
 Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque 
 nonummy pretium tellus. 
Cras interdum accumsan diam. Nam neque neque, feugiat sed, blandit quis, feugiat et, magna. 
Etiam ornare cursus eros. Duis gravida. Integer bibendum. Nulla nonummy ante eu est. Mauris 
dapibus quam eget orci. Praesent nec metus eget mauris sagittis consequat. Cras rutrum. Etiam 
dictum. Cras placerat orci non quam. Suspendisse nec nulla sit amet enim ultricies malesuada. 
Nullam lobortis. Ut gravida. Morbi hendrerit. Integer pretium euismod mauris. Duis condimentum 
sagittis arcu. Integer est. Nulla ante ligula, auctor sit amet, vulputate in, aliquet in, sem." title=""></a>

<a class="highslide" onclick="return hs.expand(this, {src: 'flower02.jpg', slideshowGroup: 1})">
<img src="flower02_thumb.jpg" alt="Flower 2
" title=""></a>

<a class="highslide" onclick="return hs.expand(this, {src: 'flower03.jpg', slideshowGroup: 1})">
<img src="flower03_thumb.jpg" alt="Flower 3" title=""></a>

</div>

</body>
</html>
p.s. I'm still very grateful for your demos, and plan to rip off quite a bit of your styling when all is said and done, as well as cleaning up the highslide.css as you suggested...thanks again!
Colleen
Posts: 15
Joined: Sun Nov 20, 2016 4:22 pm

Re: Appearance problem with controls and expander posirtion

Sorry, I also meant to say that I agree about trying to avoid scrollbars within a page, but on my site, it almost can't be helped. I spent four or five weeks fussing around with "read more" links in the caption (which you bravely tried to help me with!), but nothing gave me the results I wanted. More accurately, I could get good results, but only by adding a lot of specific coding to each individual image (and sometimes also having to use unique IDs, which I hate), and there are hundreds of images, so that just wasn't working out for me.

For my site, just using a rightpanel and having a scroll ability for those images with very long captions seems like it's going to work just right, so I guess I'll stick with that until a better solution comes along.

I also wanted to say that I might be more appreciative of your help than some other readers might be, since I spent almost a decade being a system operator on the old CompuServe network back in the mid-80s. My days were filled with answering questions from readers in 32 different graphics forums, so I can appreciate the time and effort you put in to help people like me.

:wink:
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Appearance problem with controls and expander posirtion

Colleen wrote: So I'm pretty happy at the moment, but still have one issue to deal with. I don't know how to make the caption box automatically fit the expander height.
You've come up against a fundamental problem, here. The height of highslide-caption can't ever be known, because the expander might be much smaller on a small monitor or laptop. And it can change if the user resizes the browser window and then moves to the next image. Setting it to auto won't work, because then it gets as large as it wants to be, regardless of the expander size.

I've wrestled with this problem before (albeit in a very different context), and even with the able assistance of RoadRash, we couldn't beat it. It required some jQuery noodling, but that rather disturbed the fluidity of the display. Had to give it up.

I wouldn't try to force the size of the caption precisely because of this collision with what the script is trying to do. I'd stick to tinkering with margins, maybe nesting the content within an inner <div> of some sort in order to control styling, and so on, but let the script provide the height and width.
TEST #4 - What do you think? Does this work ok on your end?
Well.... dragging the image produces rather a bizarre effect. The culprit, of course, is the position: fixed. On the theory that a picture is worth a thousand words.... demo removed
I'm still very grateful for your demos, and plan to rip off quite a bit of your styling when all is said and done....
Be my guest - my stuff is all open-source.
Last edited by MisterNeutron on Sat Jan 14, 2017 9:34 pm, edited 2 times in total.
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Appearance problem with controls and expander posirtion

BTW, here's the hazard of trying to force the highslide-caption height, in a small window: demo removed Notice the completely unnecessary scrollbars.
Last edited by MisterNeutron on Sat Jan 14, 2017 9:34 pm, edited 1 time in total.
Colleen
Posts: 15
Joined: Sun Nov 20, 2016 4:22 pm

Re: Appearance problem with controls and expander posirtion

Good gracious -- you're right: a very bizarre effect on that "fixed" caption test! Sort of a highslide-on-acid effect. I'm embarrassed; I completely forgot to try moving the image(s) when I did that test. Mea culpa.

Now for some good news (I think). After I put my eyeballs back into my head, I plowed on, determined to get what I wanted. Now I think I finally may have done it.

I was totally on the wrong track when I tried to heighten the top border of the expander in order to make room for the controls. A simple addition of <div class="highslide-heading"></div> at the end of each image section did the trick.

Once I figured that out, I put offsetX back to 220 to match the rightpanel width. removed the "icon.gif" image that appears by default in the heading, and now I think everything works correctly. No "blue copy" effect, the image can be moved by dragging, and scrolling the caption seems to work properly.

I also replaced the XHTML doctype and the charset to match your "trial" page. Thanks for that suggestion.

Can you stand one more test? I know I'm probably becoming a PITA at this point, but am hoping very much that there are no other bugs that I've missed. My sincere goal is that after this, I won't have to bother you again.

Code: Select all

<!DOCTYPE html>
<html>
<head>
<TITLE>Test 5</TITLE>
<meta charset="UTF-8">

<script type="text/javascript" src="../highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="../highslide/highslide-ie6.css" />
<![endif]-->

<script type="text/javascript">
hs.graphicsDir = '../highslide/graphics/';
hs.showCredits = false;
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.outlineType = 'rounded-white';
hs.marginTop = 60; // make room for the thumbstrip and the controls
hs.wrapperClassName = 'controls-in-heading';
hs.captionEval = 'this.thumb.alt';
hs.numberPosition = 'caption';

// Change to 'heading' if desired
hs.dimmingOpacity = 0.8;

hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image. Click and drag to move. Use arrow keys for next and previous.';

hs.captionOverlay.position = 'rightpanel';
hs.captionOverlay.width = '220px';
hs.captionOverlay.fade = 0;
hs.headingOverlay.fade = 0;

// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
	return hs.next();
}

// Add the slideshow controller
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
		fixedControls: false,
		overlayOptions: {
			opacity: 1,
			position: 'top right',
			hideOnMouseOut: false,
			offsetX: 220,
			offsetY: 0,
			relativeTo: 'expander'
	},
	thumbstrip: {
			position: 'top center',
			mode: 'horizontal',
			relativeTo: 'viewport'
	}

});

</script>

<style type="text/css">
.controls-in-heading .highslide-heading {
	background: none;
}
.highslide-number {
	font-weight: bold;
	color: gray;
	font-size: .9em;
	margin-bottom: 1em;
}
.highslide-caption {
	display: none;
	font-size: 1em;
	padding: 5px;
	margin: 0px 5px 10px 5px;
	border: 1px solid silver;
	background: #FFFFFF;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));
	background: -webkit-linear-gradient(#FFFFFF, #E6E6E6);
	background: -moz-linear-gradient(top, #FFFFFF, #E6E6E6);
	background: -ms-linear-gradient(#FFFFFF, #E6E6E6);
	background: -o-linear-gradient(#FFFFFF, #E6E6E6);
	background: linear-gradient(#FFFFFF, #E6E6E6);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E6E6E6');
}
</style>

</head>

<body>

<h3>Long caption in 1st image</h3>
<h4>Controls-in-heading, and numberPosition in caption</h4>

<div class="highslide-gallery">

<a class="highslide" onclick="return hs.expand(this, {src: 'flower01.jpg', slideshowGroup: 1})">
<img src="flower01_thumb.jpg" alt="Flower 1: 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. 
In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse 
condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec 
mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi.
 Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque 
 nonummy pretium tellus. 
Cras interdum accumsan diam. Nam neque neque, feugiat sed, blandit quis, feugiat et, magna. 
Etiam ornare cursus eros. Duis gravida. Integer bibendum. Nulla nonummy ante eu est. Mauris 
dapibus quam eget orci. Praesent nec metus eget mauris sagittis consequat. Cras rutrum. Etiam 
dictum. Cras placerat orci non quam. Suspendisse nec nulla sit amet enim ultricies malesuada. 
Nullam lobortis. Ut gravida. Morbi hendrerit. Integer pretium euismod mauris. Duis condimentum 
sagittis arcu. Integer est. Nulla ante ligula, auctor sit amet, vulputate in, aliquet in, sem." title=""></a>
<div class="highslide-heading"></div>

<a class="highslide" onclick="return hs.expand(this, {src: 'flower02.jpg', slideshowGroup: 1})">
<img src="flower02_thumb.jpg" alt="Flower 2
" title=""></a>
<div class="highslide-heading"></div>

<a class="highslide" onclick="return hs.expand(this, {src: 'flower03.jpg', slideshowGroup: 1})">
<img src="flower03_thumb.jpg" alt="Flower 3" title=""></a>
<div class="highslide-heading"></div>

</div>

</body>
</html>
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Appearance problem with controls and expander posirtion

Yes, that seems to work nicely. I'd forgotten about that little trick - I never used it because I didn't like the extra margin above the image. Planting the controls in the caption area worked better for me. That raises the other problem with putting the controls in the caption when you've got a long caption - the caption scrolls beneath the controls themselves, which looks weird. Your approach avoids that little oddity.

Another plus - the page validates as HTML5, and the CSS validates as CSS3 (though the validator doesn't know what to make of the browser prefix stuff and the filter: progid: in the inline CSS - all deprecated). :)
My sincere goal is that after this, I won't have to bother you again.
You obviously haven't learned the First Rule of Software: There's always one more bug.
Colleen
Posts: 15
Joined: Sun Nov 20, 2016 4:22 pm

Re: Appearance problem with controls and expander posirtion

That raises the other problem with putting the controls in the caption when you've got a long caption - the caption scrolls beneath the controls themselves, which looks weird.
Yeah, I discovered that a while ago. Same thing happens on the "Colleen Demo" if I add a long caption and comment the wrapper "highslide-move" in the hsconfig.js.

I haven't messed around with a test yet, but I'm wondering if that could be fixed by putting the caption (and/or controls?) inside a table, to try and force a separation between the caption and the controlbar? Not sure if that would work or not, but may be something to try sometime.

Regardless, I very much appreciate your taking the time to try out that last test. I'm glad to know it's working now, so I can start testing out some of the styling from your nice demos. Thanks again for all the top-notch help; it was invaluable.
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Appearance problem with controls and expander posirtion

I'm going to remove the various temporary demos from my site (if I don't clean house, I risk getting overwhelmed by the debris). You should be able to mine my permanent skin demo site for anything you want to adopt or adapt: https://jgromit.com/matrix/. Everything's in the common.css and hsconfig.js files for any given demo album.

Return to “Highslide JS Usage”