Can any one advise when I render a page I can check to see what blocks have been used in out block grids.
I am relying on some JavaScript to do some effects on a block they are firing on page load.
let ranStatCount = false;
var $this = $('#@id');
var elementTarget = document.getElementById('@id');
var position = elementTarget.getBoundingClientRect();
// If the elements are in the top of the page view,
// increment the stat count straight away
if (position.top >= 0 && position.bottom <= window.innerHeight) {
IncrementStatCount($this);
}
We have added addEventListener that added to each of the blocks, that executes the above code.
That should execure when get to a specific section of the page, but it executing on load.
I have used the same position check in other code that runs on .ready and that correctly works when the page is set to a specific position.
But when I use a block it not.
Is there a way to detect if specific blocks have been used on the page, and then I can add the correct javascript on the .ready event.
It sounds like the issue might stem from your JavaScript detecting the blocks too early, before they’re fully rendered in the viewport. Here are a few approaches that might help:
You can check if the blocks are present on the page using a jQuery selector once the document is ready:
$(document).ready(function () {
$('.your-block-selector').each(function () {
if ($(this).length > 0) {
// Block exists on the page, attach any specific JavaScript here
// Or initialize the Intersection Observer here if preferred
}
});
});
Another way to handle this is to use the Intersection Observer API to detect when a block enters the viewport, rather than running code immediately on page load.
If you’re working with Umbraco’s Block Grid, you can also get block aliases from the block grid directly in the backend before rendering the page. This approach allows you to pass only the necessary block information to JavaScript, making it easier to initialize specific scripts only for the blocks you need.
These methods should help prevent premature execution and make your JavaScript more responsive to when blocks are actually visible on the page. Let me know if you need further assistance—happy to help!
Umbraco Block Grid
Hi,
Can any one advise when I render a page I can check to see what blocks have been used in out block grids.
I am relying on some JavaScript to do some effects on a block they are firing on page load.
let ranStatCount = false; var $this = $('#@id');
var elementTarget = document.getElementById('@id'); var position = elementTarget.getBoundingClientRect();
// If the elements are in the top of the page view, // increment the stat count straight away if (position.top >= 0 && position.bottom <= window.innerHeight) { IncrementStatCount($this); }
We have added addEventListener that added to each of the blocks, that executes the above code.
That should execure when get to a specific section of the page, but it executing on load.
I have used the same position check in other code that runs on .ready and that correctly works when the page is set to a specific position.
But when I use a block it not.
Is there a way to detect if specific blocks have been used on the page, and then I can add the correct javascript on the .ready event.
It sounds like the issue might stem from your JavaScript detecting the blocks too early, before they’re fully rendered in the viewport. Here are a few approaches that might help:
You can check if the blocks are present on the page using a jQuery selector once the document is ready:
Another way to handle this is to use the Intersection Observer API to detect when a block enters the viewport, rather than running code immediately on page load.
If you’re working with Umbraco’s Block Grid, you can also get block aliases from the block grid directly in the backend before rendering the page. This approach allows you to pass only the necessary block information to JavaScript, making it easier to initialize specific scripts only for the blocks you need.
These methods should help prevent premature execution and make your JavaScript more responsive to when blocks are actually visible on the page. Let me know if you need further assistance—happy to help!
is working on a reply...