[Jen L.]

I have the message showing at the bottom which is a short version of a long element on the page with an ID of #isi. I am trying to figure out how to have the announce message hide when #isi is in the viewport and show when it is not. Is this doable. I am happy to buy PRO if that is possible, but I cannot tell.

[Aakash Chakravarthy]

Hi Jen,

Thanks for using Announcer.

It might require some JS to get it done.

Can you please share your website URL? I might need to look at the site to see the possibility.

Thanks,
Aakash

[Jen L.]

Sure thing.

Here is the URL:

https://navisyncllc.com/dev/eoa

So you will see the Announcer set up at the bottom… and on the page where you see IMPORTANT SAFETY INFORMATION on the page that section is called #isi.

The announcer piece is s snippet of the above.. so when #iisi is in viewport…I would like the bottom to hide..and when it is not to have ti show.

I can also grant you access if you need.

[Aakash Chakravarthy]

Hi Jen,

I’ll get back to you tomorrow on this.

Thanks,
Aakash

[Jen L.]

Thanks so much….. would be a great feature request to have it hide when an ID is in the viewport!

J

[Aakash Chakravarthy]

Hi Jen,

Looks like you have already figured it out.
I see it working on your site.

One optimization I give is below. You can try replacing the below code

jQuery(window).on('DOMContentLoaded load resize scroll', function() {
  var isi= document.getElementById('isi'); 
  if (isi) {
    onVisibilityChange(isi, function(visible) {
      var my_ancr = document.getElementById('ancr-1641');

      if (visible) {   
        my_ancr.announcer.hide();
      }
      else {
        my_ancr.announcer.show();
      }
    })();
  }
});

with this

jQuery( document ).ready(function() {
    
    var isi= document.getElementById('isi');
    
    jQuery(window).on('DOMContentLoaded load resize scroll', function() {
      
      if (isi) {
        onVisibilityChange(isi, function(visible) {
          var my_ancr = document.getElementById('ancr-1641');

          if(typeof my_ancr.announcer === 'undefined'){
              return;
          }

          if (visible) {
            my_ancr.announcer.hide();
          }else {
            my_ancr.announcer.show();
          }
        })();
      }
      
    });
    
});

[Author]

Posts