I'm attempting to conceal a div five seconds after the page loads, but for some reason, it's not working. What could be the

Question

I'm attempting to conceal a div five seconds after the page loads, but for some reason, it's not working. What could be the

Here is the snippet of code I'm working on:

<div class="pop-up-chat">
    <div id="div1">
        <div class="pop-up-msg regular-text">Hi, how can I assist you?</div>
        <div class="triangle-down"></div>
    </div>
</div>

Currently, I am trying to target the pop-up-chat div and add a 5-second delay before hiding it. However, it seems to be encountering some issues. Can you spot the problem?

export default {
    name: 'PopUpMsg',
    mounted() {
        this.msgShow();
    },
    methods: {
        msgShow() {
            const msg = document.getElementsByClassName('pop-up-chat');

            setTimeout(() => {
                msg.style.visibility = 'hidden';
            }, 5000);
        },
    },
}

javascript vue.js

Answer 1

Answer №1

To display a pop-up message, simply add a new property called showPopup to the data object and initialize it as true. Then, within the mounted hook, change it to false.

You can use the v-show directive to control the visibility of the element you want to show or hide. For more information on using v-if-vs-v-show.

<template>
  <div>
    <!-- Binding style -->
    <div :style="{visibility: showPopup ? 'visible' : 'hidden' }"

    <!-- Or use v-show directive to show | hide element -->
    <div v-show="showPopup" class="pop-up-chat">
      <div id="div1">
        <div class="pop-up-msg regular-text">Hi, How may I help you?</div>
        <div class="triangle-down"></div>
      </div>
    </div>
  <!-- The rest of your template -->
  </div>
</template>

<script>
export default {
  name: 'PopUpMsg',
  data() {
    return {
      showPopup: true,
    }
  }
  mounted() {
    this.msgShow();
  },
  methods: {
    msgShow() {
      setTimeout(() => {
        this.showPopup = false
      }, 5000)
    },
  },
}
</script>

Alternatively, you can create a custom directive called v-visible for toggling visibility.

<div v-visible="showPopup" />

Vue.directive('visible', function(el, binding) {
    el.style.visibility = Boolean(binding.value) ? 'visible' : 'hidden';
});

Answer 2

To display a pop-up message, simply add a new property called showPopup to the data object and initialize it as true. Then, within the mounted hook, change it to false.

You can use the v-show directive to control the visibility of the element you want to show or hide. For more information on using v-if-vs-v-show.

<template>
  <div>
    <!-- Binding style -->
    <div :style="{visibility: showPopup ? 'visible' : 'hidden' }"

    <!-- Or use v-show directive to show | hide element -->
    <div v-show="showPopup" class="pop-up-chat">
      <div id="div1">
        <div class="pop-up-msg regular-text">Hi, How may I help you?</div>
        <div class="triangle-down"></div>
      </div>
    </div>
  <!-- The rest of your template -->
  </div>
</template>

<script>
export default {
  name: 'PopUpMsg',
  data() {
    return {
      showPopup: true,
    }
  }
  mounted() {
    this.msgShow();
  },
  methods: {
    msgShow() {
      setTimeout(() => {
        this.showPopup = false
      }, 5000)
    },
  },
}
</script>

Alternatively, you can create a custom directive called v-visible for toggling visibility.

<div v-visible="showPopup" />

Vue.directive('visible', function(el, binding) {
    el.style.visibility = Boolean(binding.value) ? 'visible' : 'hidden';
});

Answer 3

Answer №2

If you're using Vue.js, my recommendation is to utilize the v-show directive for displaying and hiding the popup.

Check out this demo:

new Vue({
  el: '#app',
  data: {
      isVisible: true
  },
  mounted() {
    this.poppupShow();
  },
  methods: {
    poppupShow() {
      setTimeout(() => {
        this.isVisible = false;
      }, 5000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="pop-up-chat" v-show="isVisible">
    <div id="div1">
      <div class="pop-up-msg regular-text">Hi, How may I help you?</div>
      <div class="triangle-down"></div>
    </div>
  </div>
</div>

Answer 4

If you're using Vue.js, my recommendation is to utilize the v-show directive for displaying and hiding the popup.

Check out this demo:

new Vue({
  el: '#app',
  data: {
      isVisible: true
  },
  mounted() {
    this.poppupShow();
  },
  methods: {
    poppupShow() {
      setTimeout(() => {
        this.isVisible = false;
      }, 5000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="pop-up-chat" v-show="isVisible">
    <div id="div1">
      <div class="pop-up-msg regular-text">Hi, How may I help you?</div>
      <div class="triangle-down"></div>
    </div>
  </div>
</div>

Answer 5

Answer №3

This is how it operates

methods: {
    displayMessage() {
        const message = document.getElementById('message');
        setTimeout(() => {
            message.style.display = 'block';
            setTimeout(() => {
                message.style.display = 'none';
            }, 10000);
        }, 5000);
    },
},

.chat-box { display : none; //initially hidden }

Answer 6

This is how it operates

methods: {
    displayMessage() {
        const message = document.getElementById('message');
        setTimeout(() => {
            message.style.display = 'block';
            setTimeout(() => {
                message.style.display = 'none';
            }, 10000);
        }, 5000);
    },
},

.chat-box { display : none; //initially hidden }

I'm attempting to conceal a div five seconds after the page loads, but for some reason, it's not working. What could be the

Answer №1

Answer №2

Answer №3

Similar questions

npm WARNING: The package @angular-devkit/[email protected] is in need of a peer dependency xxxx, however no installation for this dependency has

Steps for eliminating an element upon the second click:

Engage with React application using an Android WebView

iOS alert notification for navigator

ways to navigate to a particular vue js component

Contrasting images showcasing Headless vs Non Headless settings in Puppeteer

Encountering a problem where PDF is displaying squares instead of text while using ReactDOM.createPortal to

I'm having trouble understanding why my Javascript validation suddenly stopped functioning. Can anyone assist me in troubleshooting this issue?

Creating and fetching CSV files using PHP and AJAX

Other options for the keyup event handler

Pass a JavaScript array variable to a PHP script utilizing jQuery Ajax and receive a string output instead of an array

Is it possible to retrieve only the attributes in an array?

What is the best way to modify the state of a nested component?

Attempting to create a digital keyboard using Bootstrap with the help of JavaScript

How come process.env.username is pulling the computer hostname (in Windows 10), rather than the key-value pair specified in the config.env file?

Tips for sending values via props to a different component and the common error message: "Consider using the defaultValue or value props instead of setting selected on the <option> element"

Error: ProductManager cannot be used as a constructor

The Content Security Policy is blocking other sources because it is set to 'self

Is there a way for me to direct to a different HTML page once I click on a certain data point?

Tips for assigning an event to a variable in JavaScript