Bounce Exchange has figured out an almost perfect way of detecting if a user will leave the website. They do this based on tracking mouse gestures, mouse velocity, and breaking of the browser plane. If they detect someone is leaving they fire off a popup on a lightbox.
I can poorly emulate this, by the following:
$("body").mouseleave(function() {
jQuery('#avoid-bounce').show();
});
The only problem is this is rather annoying. Even if it captures someone, the moment they leave the body it fires again.
How probable would it be to factor in mouse speed and allow the event to fire only once? I'm still fairly new to JavaScript and jQuery, but I'm learning.
This is exactly what .one() is for:
$("body").one('mouseleave', function() {
jQuery('#avoid-bounce').show();
});
You can add a flag to your code:
$("body").mouseleave(function() {
if ( jQuery('#avoid-bounce').data('shown') != true ) {
jQuery('#avoid-bounce').data('shown', true).show();
}
});
Creating a flag will make sure the show() code will not be called the second time.
Or you can try OuiBounce,the bounce exchange alternative: https://github.com/carlsednaoui/bounce-exchange-alternative
Related
How to handle Cesuim timebar click?
It would be very comfortable to get clicked time in callback.
Im nearly sure that it is implemented, so im looking for something like this.
function handleClick(event) {
console.log(event.CLICKED_DATETIME);
}
viewer.timebar.ON_TIMEBAR_CLICK = handleClick;
Thanks.
Yes, that's pretty simple. Here's what Viewer does currently:
viewer.timeline.addEventListener('settime', onTimelineScrubfunction, false);
But, some caveats:
This event will fire quite rapidly if the user "scrubs" (drags the current time bar across the timeline). Be prepared for a lot of events at once, like mousemove or touch/pointer move. Don't try to animate the globe during the event, just set some variable to take effect on the next animation frame like Viewer does.
This API is technically "private", which just means it is subject to change in any release without Cesium's normal deprecation policy. Even so, it's the only way to get this event, so go ahead and use it, just be careful to retest it particularly after reading about any timeline changes in the release notes (this is uncommon, as the timeline has been static for a long time now, but someday a full replacement could happen).
not too elegant but also an option
viewer.timeline.container.onmouseup = (e) => {
console.log(viewer.clock.currentTime);
}
I am working in JavaScript / jQuery (1.3.2) and have two functions:
open() and close()
The functions need to be called when based on a predefined point on the page which we wil call posY.
The open function needs to be triggered once the user scrolls below posY and the close function needs to be triggered once the person scrolls above posY again.
This is pretty easily done using the jQuery scroll feature.
My issue is that I only want the functions to be triggered ONCE - Open needs to be triggered ONE TIME on entering and Close needs to be triggered ONE TIME on exiting.
I have been trying for ages now, with different solutions that get more and more complicated than I thing it needs to be. Hopefully I'm being an idiot, missing a really simple solution.
For this project I cannot use any jQuery features above 1.3.2 and I want to avoid adding any external plugins if it can be avoided.
Thanks in advance!
edit:
I got asked to add some example code. This is the code I found on a different post on Stackoverflow, that I based my experiments on - I tried to stop it from triggering constantly by monitoring a variable, but it got a bit too complicated for me.
:
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 150; // set to whatever you want it to be
if(y_scroll_pos > scroll_pos_test) {
//do stuff
}
});
Simple!
.unbind();
Just unbind the event.
http://api.jquery.com/unbind/
Sounds like you need this http://api.jquery.com/one/ . Need to see some code as well for a better explanation.
I have been recently studying and learning Flash AC3 and my intention was to make a small voice recorder for my website. I have been using google and the search engines and get different answers here and there but still it is not exactly working properly.
The problem I am having is, the flash plugin is 215x50 pixels. I know that unless it is 215x138 pixels, the flash player security panel will automatically NOT open.
I devised a work around which is that if and when the security is being called to open, I would resize the DIV the flash object is in using a javascript function called ResizeFlash to a size of 215x138 and then back again to 215x50 after the user makes a choice whether or not they allow the microphone.
Now I have been scratching my head for a few days because I DO get the following code to work and it does resize the DIV, but it does not resize the DIV back. I think I might have the call to ResizeFlash in the wrong place (???). I am not familiar enough to know where it might be wrong.
I keep rearranging the code to see if that would work and I would get times where it does resize to 215x138, open the Security Panel, then resize back to 215x50 but then the recording would not begin, as if I were stuck somewhere in a loop.
I hope that someone can please take some time and just take a glance at this code and show me the right way to handle this. Thank you very much!
Here is the code:
public function Main():void
{
recButton.stop();
submitButton.enabled = false; // These reset everything, maybe in wrong place??
activity.stop();
addListeners();
mic = Microphone.getMicrophone();
if (mic == null)
{
// no camera is installed
}
else if (mic.muted)
{
// user has disabled the access in security settings
mic.addEventListener(StatusEvent.STATUS, onMicStatus, false, 0, true); // listen out for their new decision
Security.showSettings('2'); // show security settings window to allow them to change security settings
}
else
{
// you have access
mic.setUseEchoSuppression(true); //... also this might be in wrong place?
// .. I would like this to always be on
}
}
private function addListeners():void
{
recButton.addEventListener(MouseEvent.MOUSE_UP, startRecording);
submitButton.addEventListener(MouseEvent.MOUSE_UP, onSend);
recorder.addEventListener(RecordingEvent.RECORDING, recording);
recorder.addEventListener(Event.COMPLETE, recordComplete);
activity.addEventListener(Event.ENTER_FRAME, updateMeter);
}
function onMicStatus(event:StatusEvent):void
{
if (event.code == "Microphone.Unmuted")
{
mic.removeEventListener(StatusEvent.STATUS, onMicStatus);
ExternalInterface.call('ResizeFlash', '215', '50'); // When the user presses allow, resize the div back to 215x50
}
}
private function startRecording(e:MouseEvent):void
{
recorder.record();
e.target.gotoAndStop(2);
recButton.removeEventListener(MouseEvent.MOUSE_UP, startRecording);
recButton.addEventListener(MouseEvent.MOUSE_UP, stopRecording);
}
private function stopRecording(e:MouseEvent):void
{
recorder.stop();
e.target.gotoAndStop(1);
recButton.removeEventListener(MouseEvent.MOUSE_UP, stopRecording);
recButton.addEventListener(MouseEvent.MOUSE_UP, startRecording);
}
I know that I have something in there in the wrong order..! I appreciate any comments.
Resizing the app back to 215x50 in the Microphone's status event handler may be too soon, as you have suggested.
Just a hunch, but that status event is dispatched immediately when the user clicks the "Allow" radio button in the Flash security panel. The panel is still open. In fact, if you leave it open and click between allow/deny it will get dispatched each time...
When the security panel is up, there are some things you cannot do. I wonder if using ExternalInterface (to resize the app) is falling into this bucket.
I would suggest the following:
Test your resize functionality without the security panel in the mix. Make sure this code successfully resizes the app in both directions.
Then have a look at this question about how to detect when the user actually closes the security panel. There are two approaches there, one is very hacky (the BitmapData.draw() hack) but I know it works. I suggest trying the second one, and commenting/upvoting there if it does work (I will too). It's a more elegant way to detect when the user closes the dialog, but I haven't had a chance to try it.
When you detect the dialog is closed, resize the app.
I am trying Impromptu in my javascript and for some reason it will load fine, all the functionality I apply within works but calling a close or using the 'x' in the upper right will not close the prompt. The opacity of the overlay lightens slightly but the prompt is model and I can continue to interact with it but not the underlying page.
I have gone back to basics and I am using this function;
$Kurve.prototype.tooltip = function(){
$.prompt('Hello World',{ opacity: 0.1 });
}
It is being called a part of a JQPlot chart;
$l_jqPlotArg.highlighter.tooltipContentEditor = $.jqplot.eventListenerHooks.push(['jqplotClick', this.tooltip]);
Any help appreciated and if you need more info I will do my best to supply it...also, if you have a better suggestion on an overlaying prompt (with good appearance) that can handle a JSON please don't hesitate to tell me!
I have asked th
Thanks
C
Ok, I figured this out...the click listener was fine but I had to move the handler to a var inside the chart function. All is well :)
There is an old StackOverflow question on how to unhide/hide text using +/- symbols.
Cheeso posted a nice solution with some sample code. It was just what I was looking for, although the original poster didn't agree. :-)
I'm using the code on a web site that is intended to be used on mobile devices. The only problem is that the page jumps back to the top of the screen whenever the +/- is tapped.
Is there anyway to get around that? Thanks.
In your click event handler, return false.
$('a.selector').click(function() {
return false;
});
Here is the answer that Cheeso provided to me in email. I am posting it here for the benefit of others who follow. This didn't quite work and I am in the process of figuring out why.
If you change this line
$('div p a[href="#"]').click(function() { expando(this); });
to this:
$('div p a[href="#"]').click(function(ev) { ev.preventDefault(); expando(this); });
...I think it should stop scrolling to the top.
When a user clicks on a link that has a hash character, the browser is expected to scroll to the location on the page where the fragment marker is placed. Like a bookmark. For example, in this URL: http://en.wikipedia.org/wiki/Causes_of_WWII#Militarism The fragment (bookmark) is #Militarism , and if you click that link, your browser will scroll to that section.
In the case of that sample I wrote, the hrefs are bare # characters, which implies an empty fragment. And I suppose the browser is scrolling to the default location, which (I guess) is "the top of the page".
To avoid this, just call ev.preventDefault() in the click handler. This is a jQuery trick that suppresses the normal handling of the click; in your case, it suppresses the part where the browser tries to scroll to a non-existent anchor.
Implement event.preventDefault() in the click handler.
$('a').click(function(e) {
e.preventDefault();
// more code here
});