Resize after set size

[bigheadedd]

Hi,

 

I'm wondering if anyone can help me with this one. I have a page, which dependent on the size of the browser, shows different amounts of columns.

For example if the page is 1005 pixels, it shows 3 columns, 1340 pixels, it shows 4 etc.

On each resize it resizes the header, main div and footer. All working great.

 

<script type="text/javascript">
<!--

function resetHeaderSize(){
		pages = document.getElementById('previous');
		pagesn = document.getElementById('next');

if (window.innerWidth<1341){
	topbar = document.getElementById('header');
	topbar.style.width = "985px";
	ajaxFunction();

	mainaj = document.getElementById('ajaxDiv');
	mainaj.style.width = "1005px";

	botbar = document.getElementById('footer');
	botbar.style.width = "985px";
	if (window.innerHeight<760){
		pages.style.visibility = "visible";
		pagesn.style.visibility = "visible";
		} else {
		pages.style.visibility = "hidden";
		pagesn.style.visibility = "hidden";
		}
	}
else if (window.innerWidth>=1342 && window.innerWidth<=1650){
	topbar = document.getElementById('header');
	topbar.style.width = "1320px";
	ajaxFunction();

	mainaj = document.getElementById('ajaxDiv');
	mainaj.style.width = "1340px";


	botbar = document.getElementById('footer');
	botbar.style.width = "1320px";
}
else if (window.innerWidth>1671){
	topbar = document.getElementById('header');
	topbar.style.width = "1655px";
	ajaxFunction();

	mainaj = document.getElementById('ajaxDiv');
	mainaj.style.width = "1675px";

	botbar = document.getElementById('footer');
	botbar.style.width = "1655px";
}
} 
//-->
</script>

On each 'change' of width, it also fires an ajaxrequest which is dealt with seperately. 
What i'm struggling to figure out though is how this ajaxfunction can only be fired when the width changes from one figure to the other, and not constantly when the page is being resized. I hope that makes sense? So rather than it being fired constantly, it only gets fired once the page 'jumps' between the main amounts.

Any help on this would be great!

Thanks

Edd

[denno020]

I'm not all that familiar with how ajax requests would work, so this might not be possible, but I'll give it a go anyway.

You could store the amount of columns being displayed in a variable, and then everytime the window is resized, check to see if this amount changes, and if it does then fire the ajax request.

 

However it may not be that simple...

 

Denno

[bigheadedd]

Ah I see what you mean.

I think though that the ajax request itself is irrelevant as its just a function that happens. The problem is that I only want it to fire at set pixel widths when being resized. The current code sees that the width is higher than the set amount and fires the function everytime the browser is resized. Is there a way to do it only once the criteria has been met and then thats it?

[denno020]

Put it inside if statements? That's the only thing I could think of..

 

 

Provided you have a line of code that sill send the ajax request, otherwise I don't think it will work..

 

 

Denno

[bigheadedd]

I'm wondering if theres an easy way to note if the browsers width changes by set amounts? So every 50 pixel increments it checks etc?