No announcement yet.

Need to shorten duration of top message bar

  • Filter
  • Time
  • Show
Clear All
new posts

  • Need to shorten duration of top message bar

    Hi Does anyone know how to shorten the amount of time the out of stock bar at the top of the page is visible? I've attached some screens shots of what I have found in my research. I have pinpointed the css style and what I believe is the .js file that the action comes from but can't figure out where the time is set.

    I figured out how to change the amount of time it takes to ease out but not the total amount of time before it start to fade.

    if someone clicks another product option the bar is still visible which could leave someone to think that option is unavailable as well. Time is too long.

    Thanks for any help.

    i apologize the image sizes are somehow are getting reduced when I select full size and large when posting.

    image_592.jpg screen2.jpg

    Last edited by wdesign; 01-22-2016, 09:45 AM.

  • #2
    The images are just too small :(
    - Dean P. e-commerce and small business consulting


    • #3
      Post a link to an affected page.


      • #4
        Hi celelbra1,
        Here is the link. We are out of 20lb kettlebells. click on that option and you will see the message bar.


        • #5
          ​.mb--messagebar {
          position: fixed;
          top: -100px;
          left: 0px;
          right: 0px;
          opacity: 0;
          transition: all .2s ease-in-out;
          background: #3498db;
          font-size: 2em;
          line-height: 2em;
          color: #fff;
          text-align: center;
          z-index: 9999;


          • #6
            Thanks celebra1,
            I did find that before and it actually from what I see is the transition time from when it starts sliding up off the page. Not the amount of time it's actually there once it appears. I tried changing the .2s in dev tools and it's definately changing the time once its starts sliding.


            • #7
              The length of time appears to be controlled in utilities.js towards the very bottom...
              var t = {
              close_delay: 5e3,
              display_class: "mb--messagebar--show",
              disappear_class: "mb--messagebar--hide",
              default_class: "mb--messagebar",
              is_html: !1

              5e3 is like saying "5*1000" (5 seconds). I changed the 5e3 to 1000, which is 1 second.
              However, we cannot edit this file directly. I'm sure there's a much more efficient way, and if somebody knows of one, please let me know, but I just copied the file and added it to my template directory.

              If you go this route, be sure to link to your js file AFTER the core utilities file...
              <script type="text/javascript" src="assets/templates/common-html5/js/utilities.js"></script>
              <script type="text/javascript" src="assets/templates/justswell-html5/js/utilities.js"></script>
              Last edited by iMarketing Guy; 02-09-2017, 04:17 PM.