Response title
This is preview!
Move this topic
Help Needed With My jQuery & CSS Exit Popup Modal....
in Using jQuery
•
5 years ago
So I have this code, but it does NOT trigger the way that I would like it to. I'm new to learning jQuery (a month or two) so I'm still not 100% with understanding this code that I have.
The code is supposed to create an "exit popup" to help folks learn about my subscribers newsletter, but it doesn't open if you scroll down the page & then try to exit. It only fires off if you are at the top of the page & then try to move off to click on the exit tab.
I need the code to fire off even when the user has scrolled down the page, & preferably have it only fire off no more than 2 times in one session. I know that this would also require some kind of cookie install.
Anyhow, here is the current code that I'm working with:
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
- <style type="text/css">
- body{
- margin:0px;
- padding:0px;
- font-family:'Helvetica Neue', Helvetica, Arial, Courier;
- text-align:center;
- }
- code{
- width:800px;
- display:block;
- white-space:pre;
- width:600px;
- }
- #exitpopup{
- text-align:center;
- }
- #exitpopup h1{
- margin-top:0px;
- padding-top:0px;
- }
- #exitpopup p{
- text-align:left;
- }
- </style>
Would appreciate the help with getting the code to popup regardless if the user is at the top of the page or bottom. Thanks in advance if you can offer any help.
1
Replies(17)
It will make it easier for us to help you if you make a jsFiddle. Then, we can see what your page looks like instead of reading your HTML and constructing the page in our minds... As well, then we can make changes and post a URL to the changed Fiddle.
I'm afraid I'm struggling to understand what it is you are trying to do. I don't know what an "exit tab" is. Nor do I understand what you are saying about scrolling. "Scroll down the page and try to exit"? I don't understand what that means.
It will help to see the page.
Realize that mousemove will fire continuously so long as the mouse pointer is moving. So, your code as you have it now will repeatedly fire. You should stop listening for mousemove once you've satisfied the condition.
$(document).off('mousemove');
Would appreciate the help with getting the code to popup regardless if the user is at the top of the page or bottom.
I'm not sure what you mean by that.
Is the a site you can point us to that does something similar to what you want?
Are you trying to see if the mouse is moving off of the browser content window? If so, why not also left/right as well as top/bottom?
As written, the code doesn't care what direction the mouse movement is in - just that it is moving within 5 pixels of the top.
Realize that this will be of no use for touchscreen devices. There is no mouse pointer. You could support touch events, but few users would slide their finger off of the page. They would just tap on something else.
Personally, I find sites that try to force a popup on me as a last-ditch attempt at attention before the user leaves quite annoying! ;)
In any case, if I wanted to implement this, I would seek out a plugin, and leverage the work that others have already done.
Okay, I see what you're saying & asking. I'm new here so I wasn't well aware of the jsFiddle option or how to use it exactly, but I'm sure that I can figure it out.
What I meant by "exit tab" was actually the small "exit" option of the web browser tab that has that little "x" on it. It looks like this:
And as far as trying to exit after scrolling down the page, this means that a user can visit my web page, start scrolling down the page, but then decides to leave without scrolling back up to the top to click on the "X" of the web browser tab, they instead just scroll down the page, look back up, see the web browser "X" option to close the tab as it's always visible even after scrolling down the web page. I noticed that the jQuery DOESN'T fire off if the user scrolls down the page, then moves the mouse cursor to exit the page, but rather it only fires off if the user is still at the top of the web page. Does that make sense to you now? Hopefully you've gotten the visual by now. Let me know & I can continue ellaborating a little more for you.
As for the "jsFiddle", I'll have to give it a shot & see what I can do. I appreciate your consideration. Just give me a few minutes & I'll see what I can come up with. Thanks again.
Leave a comment on watusiware's reply
There are a number of plugins that can trigger events based on scroll position.
Here's are a few. There are more.
I haven't used any of these myself. But I would probably use one of these for your problem (if I understand it properly).
I don't enjoy reinventing wheels.
Oh, and btw (for the mean time while I insert the code into "jsFiddle"), here are a few great examples that I'm trying to achieve. These sites are using perfect "Exit Popups":
https://www.traffictravis.com/
https://socialtrigge.../list-building/
https://longtailpro.com/
https://www.traffictravis.com/
https://socialtrigge.../list-building/
https://longtailpro.com/
Please try to visit "Traffic Travis", wait about 5 seconds, then try to scroll off the page to "exit" & you will see the script is fired off. All 3 of these pages have these types of scripts.
Leave a comment on watusiware's reply
BTW, where is the "jsFiddle" option located so that I can use it? Thanks again.
And one more thing, you wouldn't be "re-inventing the wheel" if I've already provided more than 90% of it. I just need help with the existing wheel that I already have.
Leave a comment on Aaron Esteban's reply
FWIW, some browsers have tabs above the content window. Some don't. Especially touchscreen mobile devices.
I tried TrafficTravis on iPad. iPad browser DOES have tabs above the content window. But it doesn't have a mouse pointer, and people don't use their fingers like they use a mouse. So, their popup doesn't work on iPad.
iPhone doesn't have tabs above the content window. You tap on an icon at the bottom and get a list of tabs to choose from.
Leave a comment on watusiware's reply
Okay, so I guess that I was supposed to use the "jsFiddle" website. Please excuse me if it's a little messy, but it's my first time using it:
Leave a comment on Aaron Esteban's reply
Traffic Travis uses this script:
It does a lot more than just provide an exit popup, though, and you have to pay for it on a subscription.
You might want to examine the other sites to see if you can figure out what they are using. You can use the debug/inspection tools in your browser, and look for scripts with likely names.
Yes, I am well-aware that this is NOT for touch screen, but rather desktop devices.
"Personally, I find sites that try to force a popup on me as a last-ditch attempt at attention before the user leaves quite annoying! ;)"
Well, that's because you don't understand "Internet Marketing", "List-building", or "lead caputre" in general. If you did, you would understand the importance of this. Also, if the FREE product offer was of value to you, you wouldn't find it "annoying" at all, but rather useful instead. If a person wants to leave the page, they still can, but it's just like adding 1 last suggestions in which they can either accept or decline, but the script needs to run properly in order to execute this in the manner that I'm mentioning here. ;)
NOOOO, NOO, Nooo! I would NEVER want to depend on other people's code for something as small as this! Why would I want to take the fun out of creating it myself when especially I'm a "DIY" type of person anyhow? This isn't something that should be that difficult to accomplish or achieve. Actually it should just be a couple small lines of code to add to the existing code that I currently have. I know that I'm already close, but just need a little touch up. I don't even like the idea of mentioning other services & relying on them when I'm here to be a coder myself. After all, how did "exersion.com" come up with their little script to create a popup? They apparently wrote their own code, so that's why I'm here to learn to write my own as well. I'm not a follower like that. LOL
Anyhow, I appreciate your ideas thus far. :-)
Leave a comment on watusiware's reply
There's some garbage characters in your Fiddle content, but it does the job to demonstrate. It's best to remove as much as possible that doesn't demonstrate the problem.
jQuery 1.7.1 is obsolete, but is good enough for this Fiddle.
It seems to do the job you want it to. I see you changed your code to use mouseleave now. That's much better than mousemove!
Can you explain now what it doesn't do that you want it to?
You did well as a jsFiddle newbie. You discovered how to add jQuery! ;) jsFiddle is the best way to present your problems here.
Let me try to do a little more touch up on the current jsFiddle example to make things a little cleaner.
Okay, yes! I'm glad that you noticed the "mouseleave" event that I switched to. I'll do a little more touch up & then explain it again what I'm trying to fix.
Leave a comment on watusiware's reply
Okay, so here is another example that I've come up with, but I'm not sure why there is still some garbage in the output (not sure what's causing this):
As for the problem that I'm still having, it's like I've mentioned before that you can scroll down in the window and try to then move your mouse back towards the top, but then the event doesn't fire off that way. The event only fires off if the user is still at the top of the page & never scrolled down the page at all. I need the exit popup to pop up even if the user has scrolled down the page to look at the content of the page down toward the bottom. Say that I have a sales page like this:
and the user is looking at the price down at the bottom of that page, but then decides NOT to scroll back up to top to close the browser tab, the user will NOT see the "exit popup", but if I have a script that can detect when the user is anywhere at the top, middle, or bottom of that page, and then tries to leave, the exit popup will still appear.
Leave a comment on Aaron Esteban's reply
Also, even in this jsFiddle example, you can try to scroll to the bottom of that output window, then move your mouse up to the top of that window & notice that the event ISN'T firing off. It only fires off if the code can detect the "<=5 px" on the "Y coordinate". The exit still needs to fire off regardless of where you've scrolled down to when you try to exit off of the page by moving your mouse out.
Leave a comment on Aaron Esteban's reply
Use .scrollTop() to find the number of pixels hidden from view.
Awesome! Thanks for you help my friend!
Okay, but just one more thing before we go separate directions. Do you also know how to create a cookie that will only run this script just 1 time instead of keep firing off the way that it does multiple times? I could always look it up, but if you just so happen to know to speed things up, would greatly appreciate that as well. Thanks again!
Leave a comment on watusiware's reply
You don't need a cookie. Cookies are so 1995.
You could store a value in localstorage.
Yeah, that's true. I just started thinking about that right before you mentioned it.
I actually created a variable that stores an increment of 1. If the value is still at zero, then it will only fire off at 0, then increment to 1 and no longer fire off unless the user refreshes the page which is actually much better than storing a cookie. Anyhow, thanks again for you awesome support!
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Aaron Esteban's question
{"z648107161":[14737000007525130,14737000007525141,14737000007525143,14737000007525145,14737000007521131,14737000007521137,14737000007521139,14737000007521141,14737000007521143,14737000007521147,14737000007521151],"z7664639":[14737000007521123,14737000007521125,14737000007521129,14737000007521133,14737000007521135,14737000007521145,14737000007521149]}
Statistics
- 17 Replies
- 3685 Views
- 0 Followers