8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Javascript events

by dougyitbos
7 replies
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
#events #javascript
  • Profile picture of the author n7 Studios
    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.
    Signature
    THE Web Development Guru - Bespoke WordPress Theme, Plugin + iPhone Apps [HTML5, CSS3, PHP, MySQL].
    {{ DiscussionBoard.errors[351278].message }}
  • Profile picture of the author dougyitbos
    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!
    {{ DiscussionBoard.errors[351539].message }}
  • Profile picture of the author Jenniferlinn
    Banned
    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
    {{ DiscussionBoard.errors[359276].message }}
  • Profile picture of the author n7 Studios
    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.
    Signature
    THE Web Development Guru - Bespoke WordPress Theme, Plugin + iPhone Apps [HTML5, CSS3, PHP, MySQL].
    {{ DiscussionBoard.errors[359873].message }}
  • Profile picture of the author dougyitbos
    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.
    {{ DiscussionBoard.errors[373590].message }}
  • Profile picture of the author n7 Studios
    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
    Signature
    THE Web Development Guru - Bespoke WordPress Theme, Plugin + iPhone Apps [HTML5, CSS3, PHP, MySQL].
    {{ DiscussionBoard.errors[373840].message }}
  • Profile picture of the author dougyitbos
    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.
    {{ DiscussionBoard.errors[374788].message }}

Trending Topics