Javascript events

dougyitbos · 12-22-2008, 09:55 AM

Hi folks...

I need to show a div when a visitor attempts to leave my page.

I've tried using "onMouseout" on a div.
I've also tried onbeforeunload, and onbeforeunload

These events are not behaving as I expected.
The div shows when a user leaves the page - but also when the page loads.
That's no good.

Also - in the case of "onMouseout" it fires when I try to take the mouse over to the scroll bar and scroll down. Also not good.

O Need something that only shows when the user is leaving - not arriving, or scrolling.

What event should I be using?

Thanks folks!
Doug

n7 Studios · 12-22-2008, 03:34 PM

Have you considered using jQuery?

It's a really useful Javascript framework, that takes a little getting used to - but has some really powerful selectors and methods available for hooking into practically any event on a web page, and modifying it - stuff like when a page is being closed, you could use the following JS in jQuery:

PHP Code:


			
$(window).bind("beforeunload", function(e){e.returnValue = "Unsaved
changes."; });

jQuery is a single JS file that you need to include in your web page(s). As I said, it takes some learning, but it's incredibly powerful and useful to use for writing quick one or two line JS scripts that result in being able to hook into a number of document events.

dougyitbos · 12-22-2008, 05:47 PM

I did consider that.

Turns out my problem was that if your mouse goes over a child element it fires the mouseout of the patent.

Wasn't expecting that and was able to work aroud it.

Thanks!

Jenniferlinn · 12-26-2008, 03:54 AM

By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript.
Every element on a web page has certain events which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.
Examples of events:

A mouse click
A web page or an image loading
Mousing over a hot spot on the web page
Selecting an input box in an HTML form
Submitting an HTML form
A keystroke

For having solution to your problem , visit the links below:

tizag.com/javascriptT/javascriptevents.php
devarticles.com/c/a/JavaScript/JavaScript-Events/
w3schools.com/js/js_events.asp

n7 Studios · 12-26-2008, 11:04 AM

Some good points, Jennifer, but it's worth pointing out that your onClick example wouldn't work in XHTML Strict.

Why?

Well, each (X)HTML document type specification covers Javascript events (loosely speaking) - and XHTML Strict requires that the onClick event be named onclick - all lowercase.

Using a framework library, such as jQuery, MooTools, Prototype etc can get around these common errors that result in either events not working properly, or not validating correctly.

Yes, they introduce a small overhead to your code - but make development cross browser compatible (imagine trying to deal with AJAX style requests in IE 6 and Firefox - that's a lot of coding without a framework!), and can mean introducing some hot, degradable effects to your web pages to help users.

dougyitbos · 12-31-2008, 04:12 AM

Still not 100% pleased with the result.
I added a time so it wouldn't fire all the friggin' time... but I think there must be some special trick to doing exit events that I'm missing. There are folks out there with such events that appear so much more intelligent than mine.

If your curious you can see what I've done in action at:
The Complete Google Analytics Tutorial Guidebook!

Would love your input on ways to improve the exit message event.

n7 Studios · 12-31-2008, 07:27 AM

Hmm, I've not used GreyBox - but your site was quite random. First, the box didn't show, and then when I loaded the page, it did show - before I'd even navigated away.

I assume you only want it to show when you exit the page i.e. close the window or click on a link to another site or go forward/back in the browser.

I threw together something simple using jQuery, but you can do the same using the onUnload event in Javascript - or you could just use jQuery

Of course, you'd need to replace the alert with your GreyBox code - or if it's proving to be a complete pig still, drop us a PM and we can discuss something.

Anyway, my quick example - jQuery Unload Event Example

dougyitbos · 12-31-2008, 01:10 PM

Yeah the problem is the alert is pretty much all you can do with the onUnload or onBeforeUnload....

Expect a PM. - But would still love to hear any/all ideas from everyone.
I think this is a problem others must be facing as well.

12-22-2008, 09:55 AM	#1
dougyitbos HyperActive Warrior War Room Member Join Date: Sep 2007 Location: Indianapolis, IN USA Posts: 139 Thanks: 3 Thanked 2 Times in 2 Posts Social Networking	Javascript events Hi folks... I need to show a div when a visitor attempts to leave my page. I've tried using "onMouseout" on a div. I've also tried onbeforeunload, and onbeforeunload These events are not behaving as I expected. The div shows when a user leaves the page - but also when the page loads. That's no good. Also - in the case of "onMouseout" it fires when I try to take the mouse over to the scroll bar and scroll down. Also not good. O Need something that only shows when the user is leaving - not arriving, or scrolling. What event should I be using? Thanks folks! Doug
	Master Google Analytics: http://GoogleWebTracking.com -- Follow me: http://twitter.valueguardian.com

12-22-2008, 03:34 PM	#2
n7 Studios Web Developer, IT Support War Room Member Join Date: Dec 2008 Location: Birmingham, UK Posts: 290 Thanks: 7 Thanked 37 Times in 35 Posts Social Networking Contact Info	Re: Javascript events Have you considered using jQuery? It's a really useful Javascript framework, that takes a little getting used to - but has some really powerful selectors and methods available for hooking into practically any event on a web page, and modifying it - stuff like when a page is being closed, you could use the following JS in jQuery: PHP Code: `$(window).bind("beforeunload", function(e){e.returnValue = "Unsaved changes."; });` jQuery is a single JS file that you need to include in your web page(s). As I said, it takes some learning, but it's incredibly powerful and useful to use for writing quick one or two line JS scripts that result in being able to hook into a number of document events.

12-22-2008, 05:47 PM	#3
dougyitbos HyperActive Warrior War Room Member Join Date: Sep 2007 Location: Indianapolis, IN USA Posts: 139 Thanks: 3 Thanked 2 Times in 2 Posts Social Networking	Re: Javascript events I did consider that. Turns out my problem was that if your mouse goes over a child element it fires the mouseout of the patent. Wasn't expecting that and was able to work aroud it. Thanks!
	Master Google Analytics: http://GoogleWebTracking.com -- Follow me: http://twitter.valueguardian.com

12-26-2008, 03:54 AM	#4
Jenniferlinn Banned Join Date: Dec 2008 Location: UK Posts: 19 Thanks: 0 Thanked 1 Time in 1 Post	Re: Javascript events By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript. Every element on a web page has certain events which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags. Examples of events: A mouse click A web page or an image loading Mousing over a hot spot on the web page Selecting an input box in an HTML form Submitting an HTML form A keystroke For having solution to your problem , visit the links below: tizag.com/javascriptT/javascriptevents.php devarticles.com/c/a/JavaScript/JavaScript-Events/ w3schools.com/js/js_events.asp

12-26-2008, 11:04 AM	#5
n7 Studios Web Developer, IT Support War Room Member Join Date: Dec 2008 Location: Birmingham, UK Posts: 290 Thanks: 7 Thanked 37 Times in 35 Posts Social Networking Contact Info	Re: Javascript events Some good points, Jennifer, but it's worth pointing out that your onClick example wouldn't work in XHTML Strict. Why? Well, each (X)HTML document type specification covers Javascript events (loosely speaking) - and XHTML Strict requires that the onClick event be named onclick - all lowercase. Using a framework library, such as jQuery, MooTools, Prototype etc can get around these common errors that result in either events not working properly, or not validating correctly. Yes, they introduce a small overhead to your code - but make development cross browser compatible (imagine trying to deal with AJAX style requests in IE 6 and Firefox - that's a lot of coding without a framework!), and can mean introducing some hot, degradable effects to your web pages to help users.

12-31-2008, 04:12 AM	#6
dougyitbos HyperActive Warrior War Room Member Join Date: Sep 2007 Location: Indianapolis, IN USA Posts: 139 Thanks: 3 Thanked 2 Times in 2 Posts Social Networking	Re: Javascript events Still not 100% pleased with the result. I added a time so it wouldn't fire all the friggin' time... but I think there must be some special trick to doing exit events that I'm missing. There are folks out there with such events that appear so much more intelligent than mine. If your curious you can see what I've done in action at: The Complete Google Analytics Tutorial Guidebook! Would love your input on ways to improve the exit message event.
	Master Google Analytics: http://GoogleWebTracking.com -- Follow me: http://twitter.valueguardian.com

12-31-2008, 07:27 AM	#7
n7 Studios Web Developer, IT Support War Room Member Join Date: Dec 2008 Location: Birmingham, UK Posts: 290 Thanks: 7 Thanked 37 Times in 35 Posts Social Networking Contact Info	Re: Javascript events Hmm, I've not used GreyBox - but your site was quite random. First, the box didn't show, and then when I loaded the page, it did show - before I'd even navigated away. I assume you only want it to show when you exit the page i.e. close the window or click on a link to another site or go forward/back in the browser. I threw together something simple using jQuery, but you can do the same using the onUnload event in Javascript - or you could just use jQuery Of course, you'd need to replace the alert with your GreyBox code - or if it's proving to be a complete pig still, drop us a PM and we can discuss something. Anyway, my quick example - jQuery Unload Event Example
	n7 Studios - Web Development, Design and IT Support Need a Web Site? Hire Me!

12-31-2008, 01:10 PM	#8
dougyitbos HyperActive Warrior War Room Member Join Date: Sep 2007 Location: Indianapolis, IN USA Posts: 139 Thanks: 3 Thanked 2 Times in 2 Posts Social Networking	Re: Javascript events Yeah the problem is the alert is pretty much all you can do with the onUnload or onBeforeUnload.... Expect a PM. - But would still love to hear any/all ideas from everyone. I think this is a problem others must be facing as well.
	Master Google Analytics: http://GoogleWebTracking.com -- Follow me: http://twitter.valueguardian.com