JavaScript - init function on event (onMouseUp/Release)

JavaScript - init function on event (onMouseUp/Release) inside a worki

Page 1 of 1

3 Replies - 15926 Views - Last Post: 11 August 2009 - 08:47 AM

#1 Fratyr   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 139
  • Joined: 10-April 08

JavaScript - init function on event (onMouseUp/Release)

Post icon  Posted 05 August 2009 - 03:07 AM

Greetings,

I have a problem in doing next thing:

Assume you have a working attachEvent function that initializes a function called "initonresize" when chold your mouse1 button pressed and start dragging the window to resize it:

if ( window.addEventListener )
	{
		window.addEventListener( "resize", initonresize false );
	}
	else
	{
		window.attachEvent( "onresize", initonresize );
	}



When you stop dragging, the function "initonresize" actually starts, which works like this:

function initonresize()
	{
		var urName = document.getElementById( "userName" ).innerHTML;
		
		var clientBrowserWidth = document.documentElement.clientWidth;
		var clientBrowserHeight = document.documentElement.clientHeight;
		
		updateonresize( urName, clientBrowserWidth, clientBrowserHeight );
	}



It takes client's browser new Width and Height properties and sends it to AJAX function "updateonresize", which adds some data to mySQL database.

The problem is, when you stop dragging, without releasing your mouse button, it runs AJAX function, which is wrong for me.
It's too much junk data in DB.

I need a help in initializing AJAX function only when I release mouse1 button while resizing browser's window.

Any ideas? :)

Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript - init function on event (onMouseUp/Release)

#2 Kruithne   User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: JavaScript - init function on event (onMouseUp/Release)

Posted 10 August 2009 - 08:09 AM

As no-one else has posted i'll try to be helpfull ^^

Could you not only run the AJAX function somehow like ..
document.onmouseup = updateonresize( urName, clientBrowserWidth, clientBrowserHeight );

Just a suggestion even if it's useless. :D
Was This Post Helpful? 0
  • +
  • -

#3 przemass   User is offline

  • D.I.C Head

Reputation: 30
  • View blog
  • Posts: 166
  • Joined: 18-July 09

Re: JavaScript - init function on event (onMouseUp/Release)

Posted 11 August 2009 - 08:09 AM

Try this:
var oldClientBrowserWidth, oldClientBrowserHeight;

function initonresize()
{
  var clientBrowserWidth = document.documentElement.clientWidth;
  var clientBrowserHeight = document.documentElement.clientHeight;
  if (clientBrowserWidth !== oldClientBrowserWidth || clientBrowserHeight  !== oldClientBrowserHeight) {
	oldClientBrowserWidth = clientBrowserWidth;
	oldClientBrowserHeight = clientBrowserHeight;
	var urName = document.getElementById( "userName" ).innerHTML;
	updateonresize( urName, clientBrowserWidth, clientBrowserHeight );
  }
}


Was This Post Helpful? 0
  • +
  • -

#4 mocker   User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 466
  • Joined: 14-October 07

Re: JavaScript - init function on event (onMouseUp/Release)

Posted 11 August 2009 - 08:47 AM

I might be wrong, but przemass your code doesn't address the problem, which is that initOnRezie() gets called when the windows resizes, even if the user is still holding the mouse down (ie they pause during a resize but aren't done). You need to check the mouse status, not just if it was actually resized, which you can do by adding an extra variable
var isMouseDown = 0;
window.onmousedown = function(){ isMouseDown = 1; }
window.onmouseup = function(){ isMouseDown = 0; }

function initonresize()
	{
	   if(isMouseDown){ return; } //exit if user is still holding mouse down
		var urName = document.getElementById( "userName" ).innerHTML;
		
		var clientBrowserWidth = document.documentElement.clientWidth;
		var clientBrowserHeight = document.documentElement.clientHeight;
		
		updateonresize( urName, clientBrowserWidth, clientBrowserHeight );
	}


It is possible that the user will resize, hold the mouse down for a while (triggering the event which is then ignored due to the mouse check), and then release, which no longer triggers a resize event. In that case you could use something like przemass's code in the onmouseup event to check if it needs to update the size
Was This Post Helpful? 1

Page 1 of 1