Recently, I used a nifty CSS-Element-Queries tool to perform basic element manipulations that trigger whenever the window is resized.
In simple terms, my goal was to dynamically adjust an element's attribute based on the current width of the window – essentially, I wanted to respond to every resize event by modifying a specific element accordingly.
Following the tutorial instructions precisely, I implemented the code as shown below. However, despite my efforts, it seems like something is amiss as the functionality does not seem to be working at all:
<script src="css-element-queries/src/ResizeSensor.js"></script>
<script src="css-element-queries/src/ElementQueries.js"></script>
<script>
new ResizeSensor(jQuery(window), function(){
var windowWidth = $(window).width();
if (windowWidth < 1024 && windowWidth > 768) {
$(".slideshow").attr("data-cycle-carousel-visible", 4);
}
if (windowWidth <= 768 && windowWidth > 480) {
$(".slideshow").attr("data-cycle-carousel-visible", 3);
}
if ((windowWidth <= 480) && (windowWidth > 320)) {
$(".slideshow").attr("data-cycle-carousel-visible", 2);
}
if (windowWidth <= 320) {
$(".slideshow").attr("data-cycle-carousel-visible", 1);
}
});
</script>