Warrior Forum - The #1 Digital Marketing Forum & Marketplace

Warrior Forum - The #1 Digital Marketing Forum & Marketplace (https://www.warriorforum.com/)
-   Programming (https://www.warriorforum.com/programming/)
-   -   Javascript events (https://www.warriorforum.com/programming/38307-javascript-events.html)

dougyitbos 22nd December 2008 09:55 AM

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

n7 Studios 22nd December 2008 03:34 PM

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.

dougyitbos 22nd December 2008 05:47 PM

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!

Jenniferlinn 26th December 2008 03:54 AM

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

n7 Studios 26th December 2008 11:04 AM

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.

dougyitbos 31st December 2008 04:12 AM

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.

n7 Studios 31st December 2008 07:27 AM

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

dougyitbos 31st December 2008 01:10 PM

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.


All times are GMT -6. The time now is 07:52 AM.