Member Avatar for Julia25

i posted this question in other forum but no luck so far,
i found a link that has the same goal as i am but dont know how modify this
http://www.verysimple.com/blog/wp-content/uploads/2007/01/resize_css.html

my goal would be in reverse when enlarge (window browser dragging) my div will decrease size (width) when enlarge my div will be shorter or narrower.
the div will resize by increments just dont know the exact but
like 1024 window width the div width would be 15px and the 1900 window width the div would be3px.
really need your help!

  • 2 Contributors
  • 6 Replies
  • 133 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Julia25
Member Avatar for Airshow

Julia,

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#resize_me { height:15px; background-color:#e0e0e0; border:1px solid #006699; }
</style>

<script>
var Resizer = function(){
	var prev_w = 0;
	var dupe_count = 0;
	var resize_div = null;

	// 1024 window width ==> 15px
	// 1900 window width ==> 3px
	var p1 = {x:1024, y:15};//coordinate of point 1
	var p2 = {x:1900, y:3};//coordinate of point 2
//	var p1 = {x:300, y:150};//coordinate of point 1
//	var p2 = {x:1024, y:35};//coordinate of point 2
	var m = (p2.y - p1.y) / (p2.x - p1.x);//linear gradient between points
	var c = p2.y - m * p2.x;//y-axix crossing point

	return {
		setDiv : function(divID) {
			resize_div = (document.getElementById) ? document.getElementById(divID) : document.all[divID];
			if(!resize_div) { alert('Target div not found'); }
		},
		resize : function(){
			if(!resize_div) { return; }
			//var W = document.body.clientWidth; //document.body.offsetWidth;
			WW = window.innerWidth || document.body.clientWidth || ((document.documentElement) ? document.documentElement.clientWidth : null);
			if(!WW) { return; }
			var w = Resizer.calc(WW);
			// This prevents an infinite loop problem in IE 6
			if (prev_w == w && dupe_count++ > 10){
				alert('Dynamic resize CSS has been disabled to prevent an infinite loop. (Are you using IE 6?)');
				window.onresize = null;
			}
			prev_w = w;
			resize_div.style.width = w + 'px';
		},
		calc : function(W){
			var w = (m * W) + c;
			w = Math.max( Math.min( p1.y, w ), p2.y );//impose limits (adjust as required)
			return Math.round(w);
		}
	};
}();

onload = function(){
	Resizer.setDiv('resize_me');
	Resizer.resize();
	window.onresize = Resizer.resize;
}
</script>
</head>

<body>

<div id="resize_me"></div>

</body>
</html>

I've wrapped the whole thing up in a namespace, Resizer, to save the global namespace from an overload of symbols. If you are not familiar with this javascipt namespace pattern, it will look a little odd.

Internally, a linear model between the two points you gave in your question is assumed. These points (p1 and p2) are easily changed. It will be a little more tricky to change the linear model but certainly not impossible. How good is your maths? I recommend sticking with linear.

The code also clips to the limits of p1's and p2's y-values (upper limit 15px; lower limit 3px), but you can change that if you want something different. That's quite easy.

I tested with different values for p1 and p2 and left the two lines of code in there, but commented out. This should give you a good idea of how easy it is set different resize rules.

I'm not sure that IE6 infinite loop buster in the original code is necessary but left it in there.

Tested in IE6 and FF 3.0.11 . Recommend it's tested in IE7+ before release.

Airshow

Member Avatar for Julia25

Thank you!!! you are genius!ill try to integrate this with my project tonight.
btw if you wont mind me asking, are you a freelancer?


“Great minds discuss ideas;
average minds discuss events;
small minds discuss people.”
Eleanor Roosevelt

Member Avatar for Airshow

btw if you wont mind me asking, are you a freelancer?

Yes, my life oscillates between freelance and freefall.

Airshow

Member Avatar for Julia25

pls pm your personal website and might have project in the future. im a web designer but not in programming stuff. again thanks a lot and really happy that this been solve :)


really grateful!

Member Avatar for Airshow

Julia,

Use this version to avoid that nasty javascript alert (without needing to reload the page).

var Resizer = function(){
	var resize_div = null;
	var dupe_count = 0;
	var prev_WW = -1;

	// 1024 window width ==> 15px
	// 1900 window width ==> 3px
	var p1 = {x:1024, y:15};//coordinate of point 1
	var p2 = {x:1900, y:3};//coordinate of point 2
//	var p1 = {x:300, y:150};//coordinate of point 1
//	var p2 = {x:1024, y:35};//coordinate of point 2
	var m = (p2.y - p1.y) / (p2.x - p1.x);//linear gradient between points
	var c = p2.y - m * p2.x;//y-axix crossing point

	return {
		setDiv : function(divID) {
			resize_div = (document.getElementById) ? document.getElementById(divID) : document.all[divID];
			if(!resize_div) { alert('Target div not found'); }
		},
		resize : function(){
			if(!resize_div) { return; }
			//var W = document.body.clientWidth; //document.body.offsetWidth;
			WW = window.innerWidth || document.body.clientWidth || ((document.documentElement) ? document.documentElement.clientWidth : null);
			if(!WW || prev_WW == WW) { return; }
			prev_WW = WW;
			var w = Resizer.calc(WW);
			window.onresize = null;//Potential infinite loop buster - I.E.
			setTimeout('window.onresize = Resizer.resize;', 100);
			resize_div.style.width = w + 'px';
		},
		calc : function(W){
			var w = (m * W) + c;
			w = Math.max( Math.min( p1.y, w ), p2.y );//impose limits (adjust as required)
			return Math.round(w);
		}
	};
}();

In this version we detach the onresize handler then reattach it after a short delay to break a possible infinite loop.

Airshow

Member Avatar for Julia25

Wow!!! just tried it and works even better in ie 6 :)
Im so happy!
Thank you!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.