loading position

[deif]

Is it possible to change the "loading..." position editing the CSS (.highslide-loading)?

thanks!
David

[torstein.honsi]

The position of the loading label is set internally in highslide.js, so it will not be possible to change it through CSS. But there is the http://vikjavev.no/highslide/ref/hs.Exp ... howLoading event.

[Spewed]

I'm interested in this as well. What I'd like to do is to place the loading... label to almost top of the page on some pages and to bottom on another pages. Is there already a way to do this? If not, it would be a great feature to have!

Showing the label on the center of the page would be cool too.

Thanks.

[torstein.honsi]

Highslide hasn't got a way to do it, but using the onShowLoading and onHideLoading events you can change this at will. You can remove Highslide's loading label completely and make your own, or you can alter the position of the label.

[java88]

I have a dozen thumbnail pics on each of my pages, and one need to scroll down a bit in order to see them all... so if I click on the first picture on the top of the page, and then click the "Next" icon continuously, then I will see the loading icon hover over each thumbnail... but as I continue clicking the "Next" icon, the loading icon will eventually disappear out of sight because the thumbnails in question are below the current viewpoint. So I thought it might be a good idea to have the loading icon centered in the middle of the screen for every picture. I added a few lines to the code around line 1162 in highslide-full.js. It now looks like this:

Code: Select all

showLoading : function() {
	if (this.onLoadStarted || this.loading) return;
	
	this.loading = hs.loading;
	var exp = this;
	this.loading.onclick = function() {
		exp.cancelLoading();
	};
	
	
	if (!hs.fireEvent(this, 'onShowLoading')) return;
	var exp = this, 
		l = (this.x.tpos + this.x.tb 
			+ (this.x.t - this.loading.offsetWidth) / 2) +'px',
		t = (this.y.tpos 
			+ (this.y.t - this.loading.offsetHeight) / 2) +'px';
	if (!tgt && this.last && this.transitions[1] == 'crossfade') 
		var tgt = this.last; 
	if (tgt) {
		l = (tgt.x.min + tgt.x.cb + tgt.x.p1
			+ (tgt.x.span - this.loading.offsetWidth) / 2) +'px';
		t = (tgt.y.min + tgt.y.cb + tgt.y.p1
			+ (tgt.y.span - this.loading.offsetHeight) / 2) +'px';
		this.loading.style.zIndex = hs.zIndexCounter++;
	}

// I ADDED THIS

 	if (document.all){
		var getHeight = document.body.offsetHeight;
	}
	else {
		var getHeight = window.innerHeight;
	}
	if (document.all){
		var getWidth = document.body.offsetWidth;
	}
	else {
		var getWidth = window.innerWidth;
	}

	l = (getWidth - this.loading.offsetWidth)/2 + 'px';
	t = (getHeight - this.loading.offsetHeight)/2 + 'px';

// END OF I ADDED THIS

	setTimeout(function () { if (exp.loading) hs.setStyles(exp.loading, { left: l, top: t })}, 100); 
},

It kind of works... it does display the loading icon centered, but the location is fixed... so when I scroll down the page, then the loading icon is out of view, being displayed above the current viewpoint.

My javascript skills aren't the best, so I just wonder if someone else know how to find the HEIGHT value for the current viewpoint... i.e. how far from the very top of the page that the visitor has scrolled down.

[torstein.honsi]

To get the viewport properties, including scrollTop, use hs.getPageSize().

Or you could just use position:fixed on the loading label instead of position:absolute.

[java88]

I used position fixed, and it works nicely in ff, but not in ie6. however, might just leave it like that as it should work in ie7, shouldn't it?

or is anyone aware of a simple fix that would make it work for ie6?

if anyone else wanna give it a try, then you need to do this change around line 844 in highslide-full.js

[torstein.honsi]

There are fixes for position:fixed in IE6, but as far as I know they all involve scripting or changing the entire CSS for the body.