Changing the Pixels to Percentage in JavaScript

[Abbster22]

On my site currently, I'm trying to make it so that the scrollbar and the content fits to different screen resolutions. I'm wondering if it were possible for me to do this using percentiles or do I have to stick with the pixels that I currently have? Thank you very much.

http://www.clintshipley.com

(If more information is needed, please let me know.)

[jscheuer1]

I think this may actually be a css or HTML question. However, I don't see any scrollbar.

What exactly are you trying to scale? If it 's the Flash, yes. Use percentage width and height for the object and/or embed tag. Hopefully the script you are using for that will translate it correctly (probably will). In and of itself your Flash feature will scale to percentage dimensions. You've nothing to lose by trying.

[Abbster22]

I'm sorry. When you look at http://www.clintshipley.com/about.html that's where I'm talking about the scrollbar. I apologize for the misguidance. Here is some of the code below to help understand better:

//Written by Nathan Faubion: http://n-son.com
function jsScroller (o, w, h) {
	var self = this;
	var list = o.getElementsByTagName("div");
	for (var i = 0; i < list.length; i++) {
		if (list[i].className.indexOf("scroller-content") > -1) {
			o = list[i];
		}
	}
	
	//Private methods
	this._setPos = function (x, y) {
		if (x < this.viewableWidth - this.totalWidth) 
			x = this.viewableWidth - this.totalWidth;
		if (x > 0) x = 0;
		if (y < this.viewableHeight - this.totalHeight) 
			y = this.viewableHeight - this.totalHeight;
		if (y > 0) y = 0;
		this._x = x;
		this._y = y;
		with (o.style) {
			left = this._x +"px";
			top  = this._y +"px";
		}
	};
	
	//Public Methods
	this.reset = function () {
		this.content = o;
		this.totalHeight = o.offsetHeight;
		this.totalWidth	 = o.offsetWidth;
		this._x = 0;
		this._y = 0;
		with (o.style) {
			left = "0px";
			top  = "0px";
		}
	};
	this.scrollBy = function (x, y) {
		this._setPos(this._x + x, this._y + y);
	};
	this.scrollTo = function (x, y) {
		this._setPos(-x, -y);
	};
	this.stopScroll = function () {
		if (this.scrollTimer) window.clearInterval(this.scrollTimer);
	};
	this.startScroll = function (x, y) {
		this.stopScroll();
		this.scrollTimer = window.setInterval(
			function(){ self.scrollBy(x, y); }, 40
		);
	};
	this.swapContent = function (c, w, h) {
		o = c;
		var list = o.getElementsByTagName("div");
		for (var i = 0; i < list.length; i++) {
			if (list[i].className.indexOf("scroller-content") > -1) {
				o = list[i];
			}
		}
		if (w) this.viewableWidth  = w;
		if (h) this.viewableHeight = h;
		this.reset();
	};
	
	//variables
	this.content = o;
	this.viewableWidth  = w;
	this.viewableHeight = h;
	this.totalWidth	 = o.offsetWidth;
	this.totalHeight = o.offsetHeight;
	this.scrollTimer = null;
	this.reset();
};

There is another JavaScript file that I used from the same person and I thought if I could find a way to do it with this one, then it could help me figure out the other one.

[jscheuer1]

The best I can tell from that code is that you have to feed it pixel width and height as numbers for use in its internal math as regards positioning (scrolling) the content:

scroller  = new jsScroller(document.getElementById("scroller"), 550, 275);

If you were to feed it a string (all percent values in javascript are meaningless as percents unless given as strings), there would be an error or the math would be off.

A fairly major rewrite might be able to get this script to utilize percent width and/or height. Or you could make up a 'front end' that would calculate the width and height in pixels from percent values that you would feed the 'front end', but then you would be subject to dealing with issues arising from the window possibly being resized.

In any case, if the width and/or height were percent based, a situation could at least on occasion arise where there wasn't enough content to require a scroller, as well as on occasion one where the amount of content available for view at any given time was ridiculously small. These, like the window possibly being resized, would also have to be taken into account in the modified code, and some sensible method of preventing and/or dealing gracefully with them devised.

Short answer:

Probably not without a fair amount of additional thought and code.

[Abbster22]

I see where you're coming from because it can't take the pixels being used and automatically convert them into a percentage without a math equation.

But I did manage to contact Nathan (the author of the JavaScript that I used) and told me he made a different scrollbar that could customize to the window. Here is the website: http://n-son.com/jsScrollbar/ The problem with this was when I was trying to put my up and down arrows along with the tracking and handle I created, it doesn't show. Also, it seems to have a focus feature which makes the container the content is in show up in a special way (which I don't want to use). What am I doing wrong?

If anymore information is needed, please let me know.