Your browser does not support String.replaceAll();

[hoops78]

Hi

I'm using bootscore 5.3.4 and I'm finding on Chrome and Android mobile the blog area is not fully loading and getting the error "Your browser does not support String.replaceAll();"

I'm using the plugin Masonry and that part shows, but clicking on a post loads the post without the content (just header and footer).

I've tried disabling aos.js (Animate on Scroll) to see if that was the issue, but still the same result.

I'm not a javascript coder, so I'm not sure how to go about this? Any help would be appreciated.

Thanks

Wayne

[justinkruit]

Could you please share a link and where to replicate this? It's hard to debug javascript otherwise 😉

[hoops78]

Oh yeah 😀

Here you go;

https://arrow.flightcreative.co.uk/2023/12/4-easy-steps-to-booking-your-delivery/

and the blog index page https://arrow.flightcreative.co.uk/blog-news/ (title doesn't load but grid does)

[hoops78]

Seems to be a clash with Ninja Kick plugin. So I'll look for an alternative.

[crftwrk]

Wait, I'm checking it right now. You can simply set the z-index of the overlay lower. Content is below the layer.

[hoops78]

Thanks. Which overlay? I can't seem to see one above the content...

[crftwrk]

Page is covered by #ncf-body-bg overlay.

Lower the z-index and content is visible:

#ncf-body-bg {
  z-index: -1;
}

If you use Ninja Kick just for the contact form, I recommend to replace it with Contact Form 7. This is fully supported by the theme and an additional plugin https://bootscore.me/documentation/bs-contact-form-7/.

[hoops78]

Thanks for your help on this it works great now.

I'm using CF7 as the actual form and then Ninja Kick for the slide in off canvas function.

[crftwrk]

There is no need to install a heavy plugin for just having an offcanvas drawer, because Bootstrap has this already built in. Simply add a custom HTML widget to a footer position and paste following code:

<button class="btn btn-primary position-fixed" style="top: 50%; right:30px;" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasContact" aria-controls="offcanvasContact">
  <i class="fa-solid fa-envelope"></i>
</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasContact" aria-labelledby="offcanvasContactLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasContactLabel">Contact</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    [CF7 Shortcode]
  </div>
</div>

Or use a hook in functions.php:

/**
 * Contact
 */
function bootscore_contact() {
  $output = '
    <button class="btn btn-primary position-fixed" style="top: 50%; right:30px;" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasContact" aria-controls="offcanvasContact">
      <i class="fa-solid fa-envelope"></i>
    </button>

    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasContact" aria-labelledby="offcanvasContactLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasContactLabel">Contact</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        [CF7 Shortcode]
      </div>
    </div>
  ';

  echo $output;
}
add_action('wp_footer', 'bootscore_contact', 5);

[hoops78]

wow

That's great, thank you. I was using this method on a non-bootstrap website and used it without thinking about bootstraps off canvas.

Thank you.

[crftwrk]

You're welcome