I have a function that happens lots of times on the server and when I have counted the correct number of successes, it moves me to my Complete page. Huzzah!
But I want to pause, and javascript hates pausing. I want my users to savor that 100%.
setTimeout(app.showPage(app.pages.Complete),1000);
Didn't work.
Try with
setTimeout(function(){
app.showPage(app.pages.Complete);
}, 1000);
Related
Tracking outbound links and forms can be tricky because most browsers will stop executing JavaScript on the current page once a new page starts to load.
This can be mitigated by setting 'transport': 'beacon'.
According to this support page, which I have followed, I have been able to set this up correctly.
<script>
var trackOutboundLink = function(url) {
ga('send', 'event', 'outbound', 'click', url, {
'transport': 'beacon',
'hitCallback': function(){document.location = url;}
});
}
</script>
And my links do this:
Check out example.com
When I test click on it, I can see it registered on RealTime > Events:
And yet when I try to set a goal the event is not seen:
Admin > Goal > new Goal > Custom > Event > Goal Details set to outbound and click:
And yet when I click on verify goal, it says nothing like has been found in the last seven days. I have waited for many hours and still nothing is seen, even though the real-time event is seeing the clicks.
What am I missing, please?
UPDATE:
After waiting for 24 hours, I can see the event showing up in the report section. However, the goal verification still can't see it.
If it is not available in the regular reports either it most likely is a matter of waiting a bit longer. It can take up to 24 hours for events to show up in reports.
Please let us know if that was indeed the problem
Using browserstate/history.js
All my links are running through the history adapter:
History.Adapter.bind(window,'statechange',function() {
// do some stuff here
});
but if a user clicks the same link twice in a row then the second time it will not run since there is no 'statechange'. What is the solution for this?
You can add random data to differentiate the actions:
History.replaceState( {randomData: window.Math.random()}, '', url);
That way statechange will always fire.
Found answer here https://github.com/browserstate/history.js/issues/293
On this page I am making I have a button at the bottom of the page, which has to get wider and then move up when clicked. After the button has reached its new place, new content should load.
I have found a lot about CSS transitions an animations on hover, but I want to use this as a page transition.
How do I get this transition to happen before loading the new page??
I would love to do this with as little JS as possible..
Thanx Y'all!
Based on what you asked:
This delays the page load until the transition is complete (the setTimeout just need to be set to whatever the duration of the CSS transition is).
$('.link').click(function () {
$(this).addClass('clicked');
setTimeout( function() {
window.location.href = "url for page goes here";
}, 500);//set 500 to whatever timeout you want
});
See pen example: (http://cdpn.io/vyuch)
BUT
This is not a good idea... If CSS transitions aren't available, it will just look like a terrible link and confuse users. If they are, it is still slow and frustrating.
If you want the content to load on the same page, you need to use AJAX. To help with this, some more information would be helpful...
So I have an empty div set to display:none called id="c1".
I am trying to queue it so that it will fade in and will say:
2 seconds
then after 1 second it will say:
1 second
then will fade out and the page redirects.
$('#c1').html('2 seconds').fadeIn('fast').delay(800).html('1 second').delay(800).fadeOut('fast');
However, when I run it, I only see "1 second" and it fades out. I cannot see the 2 seconds message at all. It's like as if jquery only listens to the last "html" event.
I have also tried just entering "2 seconds" in the div as default text in html. That doesn't work either. still says "1 second" as soon as the page loads.
EDIT SOLUTION
You can do something like this:
$('#c1').html('2').fadeIn('fast').delay(800).queue(function () {$(this).html('1');$(this).dequeue();}).delay(800).fadeOut('fast');
You can only delay() animations, not other functions like html(), they are perfomered instantly.
Use a timeout for the html() functions instead, or place them in the animation callback.
$('#c1').html('2 seconds').fadeIn(1000, function() {
$(this).html('1 second').fadeOut(1000);
});
Try
$('#c1').html('2 seconds')fadeIn('fast');
setTimeout($('#c1').html('1 second'), 800);
setTimeout($('#c1').fadeOut('fast'), 800);
Right, the doc states: "It can be used with the standard effects queue or with a custom queue", but the operations like .html() are not using the effects queue...
I have a usercontrol with a couple of drop downs Lists and a button, I want the user to click the button (Which response.redirects depending on the selection in the DDL's).
Now instead of redirecting straight away, I want to display a little loading icon for 3 seconds and then redirect... Has anyone done anything like this?
An artificial delay where none is needed is kinda lame. What you can do instead is on submission of your form display your throbber. I use the following on a document upload form where large media files are being posted.
<script type="text/javascript" id="PreJavaScript">
function NUsubmit(){
document.getElementById("uploadFormInputs").style.display = 'none';
document.getElementById("progressBar").style.display = 'block';
return true;
};
function init() { document.getElementById("UploadFormObject").onsubmit = NUsubmit; };
window.onload = init;
</script>
If I remember correctly, in some versions of IE the animated gif didn't play but it worked fine in IE6+ and FireFox.
This way if the postback is quick they never see the throbber but if it takes a while they see it and it gives them the sense that something is happening.
You can perform delays with the setTimeout() function in javascript.
setTimeout(function() { alert('After 5 seconds.'); }, 5000);
You're probably going to need to override a couple things in your Javascript and use a "setTimeout" to delay the loading.
<script type="text/javascript" >
var __handleSubmit = theForm.submit;
theForm.onsubmit = function() {
alert('loading'); //Show your message here
window.setTimeout(function() {
__handleSubmit();
}, 3000);
}
</script>
You might want to play with a bit more... this is may not work for all instances since I've never done it.
If the delay is simply for "aesthetics", to make it appear it is working, then I'd recommend against it - programmers appear to be the only people that think loading bars are cool :)
Looks like you should implement this page using AJAX. You can place a progress indictor on your page to alert the user that a long running process is taking place.
I got this working by using
System.Threading.Thread.Sleep(4000);
In the postback