"Android Data Persistence" was retired on August 31, 2018. You are now viewing the recommended replacement.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by paul white
paul white
13,958 Points

JS Element Popup after Time Delay

Hi all,

I'm wondering if there is an easy way this can be done in JS. I have a piece of script that attaches a chat box to the bottom of my page. A user can click a chat tab at the bottom of the page and the full chat box will pop-up. What I want to do is make this chat box automatically pop-up after a certain amount of time (e.g. 45 seconds).

The idea is if a user is sitting there for a long time trying to login or having issues, we want the chat box to pop up to offer them help.

Any ideas?

4 Answers

Dino Paškvan
Dino Paškvan
Courses Plus Student 44,108 Points

Something like this would work:

var chatTimeout = window.setTimeout(function() {
   // code that displays the chat box
}, 45000); // delay in milliseconds

Then, if the user clicks the chat box on their own, you can clear that timeout:

window.clearTimeout(chatTimeout);
Dean Wagman
Dean Wagman
21,591 Points
Dean Wagman
Dean Wagman
21,591 Points

There is a function called 'setTimeout' which I think could help you out. It takes two parameters, a function to run after the delay, and the time to wait in milliseconds.

Example

setTimeout( function () {
    $('#chatBox').show();
}, 45000);
paul white
paul white
13,958 Points
paul white
paul white
13,958 Points

Thanks I gave both a try but it doesn't seem to be functioning, the original code for the chat box works and is through a service call firehose, looks like this:

<script type="text/javascript">
    var FHChat = {product_id: "OMITTED"}
    FHChat.customAttributes=[];FHChat.sendCustomAttributes=function(data){this.customAttributes.push(data)};!function(){var a,b;return b=document.createElement("script"),a=document.getElementsByTagName("script")[0],b.src="https://chat-client-js.firehoseapp.com/chat-min.js",b.async=!0,a.parentNode.insertBefore(b,a)}();
</script>

I wrapped it in the setTimeout function but it errors out in the console, do you see anything I'm doing wrong here?

<script type="text/javascript">
  var chatTimeout = window.setTimeout(function() { // setTimout function
    var FHChat = {product_id: "OMITTED"}
    FHChat.customAttributes=[];FHChat.sendCustomAttributes=function(data){this.customAttributes.push(data)};!function(){var a,b;return b=document.createElement("script"),a=document.getElementsByTagName("script")[0],b.src="https://chat-client-js.firehoseapp.com/chat-min.js",b.async=!0,a.parentNode.insertBefore(b,a)}();
  }, 45000); // Delay
</script>

Thanks for your help, this seems like it should be something pretty easy to implement.

paul white
paul white
13,958 Points
paul white
paul white
13,958 Points

Never mind, my apologies, I just needed to keep the variable assignment of FHChat outside of the function like so:

<script type="text/javascript">
  var FHChat = {product_id: "OMITTED"}
  var chatTimeout = window.setTimeout(function() {
    FHChat.customAttributes=[];FHChat.sendCustomAttributes=function(data){this.customAttributes.push(data)};!function(){var a,b;return b=document.createElement("script"),a=document.getElementsByTagName("script")[0],b.src="https://chat-client-js.firehoseapp.com/chat-min.js",b.async=!0,a.parentNode.insertBefore(b,a)}();
}, 45000);
</script>

Thanks again everyone!