Category: javascript

Category Added in a WPeMatico Campaign

Render range of pages of a PDF with PDF.JS

Is it possible to render a specific range of pages in a pdf using pdf.js?
I currently have a PHP + Javascript project that classifies a pdf by ranges, so when the user chooses a range, I can only send the viewer the start page and it is responsible for initially displaying that page ignoring the range.

The problem arises when the complete pdf has more than 80 pages because the viewer will load all the pages even though the user only requires a specific range, for example, from page 5 to 10.

In case pdf.js does not allow me to do this, what library can I use to achieve this, thank you very much.

I can only send the viewer the start page and it is responsible for initially displaying that page ignoring the range.

This is my code in PHP.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Visor de PDF Integrado con PDF.js</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 20px;
        }

        iframe {
            width: 90%;
            height: 800px;
            border: 1px solid #ccc;
            margin-top: 20px;
        }

        input[type="file"] {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1>Visor de PDF Integrado</h1>
    <input type="file" id="pdfFileInput" accept="application/pdf" />
    <iframe id="pdfViewer" src=""></iframe>

    <script>
        const pdfFileInput = document.getElementById('pdfFileInput');
        const pdfViewer = document.getElementById('pdfViewer');

        let currentURL = null;

        pdfFileInput.addEventListener('change', (event) => {
            const file = event.target.files[0];
            if (file && file.type === 'application/pdf') {
                // Liberar URL anterior si existe
                if (currentURL) {
                    URL.revokeObjectURL(currentURL);
                }
                // Crear una URL para el archivo PDF
                currentURL = URL.createObjectURL(file);
                // Establecer la fuente del iframe al visor de PDF.js con el archivo PDF
                pdfViewer.src = `pdf.js/web/viewer.html?file=${encodeURIComponent(currentURL)}#page=2`;
            } else {
                alert("Por favor, selecciona un archivo PDF válido.");
            }
        });
    </script>
</body>

</html>

I have already downloaded PDF.js and it works, but I don’t know how to configure a page range.

Jest code coverage not picking up JS files from parent directory even if within rootDir

I have a specific project setup where the Jest tests live in a folder but are testing code from two different source folders located in a parent directory. When trying to setup code coverage, I read on other posts that setting the rootDir to the common parent and adding the other folders as roots should solve it. However, my JS files in the source folders are still not being picked up. I’ve tried moving a JS file around to test and sure enough only files located within the same folder of the Jest config are being picked up for coverage.

Here’s my jest config file:

{
  "testEnvironment": "jsdom",
  "testMatch": [
    "**/jest/**/*.test.js"
  ],
  "rootDir": "../../",
  "transform": {
    "^.+\.[t|j]sx?$": [
      "babel-jest",
      {
        "configFile": "./babel.config.json"
      }
    ]
  },
  "transformIgnorePatterns": [
    "node_modules/(?!(parsel-js|cheerio|uuid)/)"
  ],
  "roots": [
    "<rootDir>/mu-plugins/tests",
    "<rootDir>/mu-plugins/core/assets/src/js",
    "<rootDir>/themes/theme/assets/ts"
  ],
  "setupFilesAfterEnv": [
    "<rootDir>/mu-plugins/tests/jest.setup.js"
  ],
  "moduleDirectories": [
    "<rootDir>/mu-plugins/tests/node_modules"
  ],
  "globals": {
    "CSS": {}
  },
  "collectCoverageFrom": [
    "**/*.js"
  ],
  "coveragePathIgnorePatterns": [
    "/node_modules/",
    "/coverage/"
  ],
  "coverageDirectory": "<rootDir>/mu-plugins/tests/coverage"
}

I am using Jest 29.7 in case it matters.

My rootDir used to be on the same level as the Jest config so I changed it to the common parent, and added all relevant directories to the roots array. This didn’t solve the issue. I’m certain the paths are right though as when putting a wrong folder on purpose, Jest would throw an error.

I’ve tried clearing the Jest cache, but it didn’t solve it either.

I’ve tried various formatting for collectCoverageFrom but none worked.

I’ve also tried changing the value of forceCoverageMatch, no luck there too.

When running jest --coverage I then see:

> jest --coverage

 PASS  jest/theme/components/shared/info.test.js
 PASS  jest/core/variant/variant.test.js
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |       0 |        0 |       0 |       0 |
----------|---------|----------|---------|---------|-------------------

Test Suites: 2 passed, 2 total
Tests:       5 passed, 5 total
Snapshots:   0 total
Time:        5.112 s
Ran all test suites.

angular jest test fails when using js object from shared library

I have an angular 18 app in a NX workspace and I am trying to run a test in isolation. But I am getting an error:

 FAIL   shared-ui  libs/web/shared/ui/src/lib/shared-ui/form-controls/exercise-selector-input/data-access/exercise-input.service.spec.ts
  ● Test suite failed to run
    ReferenceError: fetch is not defined
 .....
  at Object.<anonymous> (src/lib/shared-ui/form-controls/exercise-selector-input/data-access/exercise-input.service.spec.ts:4:1)
 Test Suites: 1 failed, 1 total
 Tests:       0 total

The line referenced is the import line FormatOptionData

I am using the following command to run jus the single file in question:

nx run shared-ui:test --testFile=exercise-input.service.spec.ts

Here is my test file simplified:

    import { TestBed } from '@angular/core/testing';
    
    import { ExerciseInputService } from './exercise-input.service';
    import { Format, FormatOptionData } from '@t3a/shared-data-access';
    
    describe('ExerciseRecordService', () => {
      let service: ExerciseInputService;
      const format: Format[] = FormatOptionData;
    
      beforeEach(() => {
        TestBed.configureTestingModule({});
        service = TestBed.inject(ExerciseInputService);
      });
      
      // tests go here

    });

I know the error occurs on the FormatDataOptions assignemnt because if that is the ONLY thing I remove then there is no error.

FormatDataOptions is a js object that is imported from another shared lib inside the NX workspace. It looks like this:

export const FormatOptionData: Format[] = [
  {
    dataType: DataTypeListEnum.Enum.format,
    name: "Sets x Reps",
    code: "NSETS_XREPS",
    description: "A number of sets of reps",
    useValue: true,
    valueType: FormatValueTypeEnum.enum.set_reps,
    valueLabel: "Sets",
    prefixValue: false,
    public: true,
  },
  {
    dataType: DataTypeListEnum.Enum.format,
    name: "Rep Max",
    code: "NRM",
    description: "Maximum weight for a specific number of reps",
    useValue: true,
    valueType: FormatValueTypeEnum.enum.number,
    valueLabel: "Reps",
    prefixValue: true,
    public: true,
  },
]

I don’t want to mock this because I need to do this with multiple objects like the one above and I don’t want to maintain the data in two places

Can someone help me import this JavaScript object into my angular test

thanks

How can I fix the error where the game goes to game over logic immediately?

I am trying to build a simple game with JS and HTML, but I found it difficult to fix an error where my code immediately goes to the “game over” block at the time of running the program.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas Graphics</title>
  <style>
    .btn {
      margin-right: 65px;
      margin-top: 50px;
    }
  </style>
</head>

<body onload="startGame()">
  <h1>Canvas Graphics</h1>

  <script>
    // Game variables

    let comp1, block, blockArray = [];

    let xSpeed = 0,
      ySpeed = 0,
      blockSpeed = 0;

    let myInterval;

    // Game area setup
    const gameArea = {
      canvas: document.createElement("canvas"),
      start: function() {
        this.canvas.width = 400;
        this.canvas.height = 400;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[3]);
      }
    };

    // Movement functions
    function right() {
      xSpeed += 1;
      ySpeed = 0;
      blockSpeed = 1;
    }

    function up() {
      ySpeed -= 1;
      xSpeed = 0;
      blockSpeed = 1;
    }

    function left() {
      xSpeed -= 1;
      ySpeed = 0;
      blockSpeed = 1;
    }

    function down() {
      ySpeed += 1;
      xSpeed = 0;
      blockSpeed = 1;
    }

    // Update game components
    function updateComponent() {
      gameArea.context.clearRect(0, 0, gameArea.canvas.width, gameArea.canvas.height);
      let overlap = false;

      // Define boundaries for comp1
      const myRight = comp1.x + comp1.width,
        myLeft = comp1.x,
        myTop = comp1.y,
        myBottom = comp1.y + comp1.height;

      // Check for collisions with blocks
      for (let blocks of blockArray) {
        const blockLeft = blocks.x,
          blockRight = blocks.x + blocks.width,
          blockTop = blocks.y,
          blockBottom = blocks.y + blocks.height;

        // Collision detection
        if (myRight > blockLeft && myLeft < blockRight &&
          myBottom > blockTop && myTop < blockBottom) {
          overlap = true;
          break; // Exit loop on collision
        }
      }

      // If no overlap, update positions and create new blocks
      if (!overlap) {
        if (blockSpeed == 1) {
          gameArea.createBlockInterval += 50;

          // Create a new block every 3 seconds
          if (gameArea.createBlockInterval >= 3000) {
            let newBlock = new Component(gameArea.canvas.width,
              Math.random() * (gameArea.canvas.height - block.height),
              15,
              130,
              block.color);
            blockArray.push(newBlock);
            gameArea.createBlockInterval = 0; // Reset interval
          }

          // Update position of comp1
          comp1.x += xSpeed;
          comp1.y += ySpeed;

          // Draw player component
          gameArea.context.fillStyle = comp1.color;
          gameArea.context.fillRect(comp1.x, comp1.y, comp1.width, comp1.height);

          // Draw all blocks in the array
          for (let block of blockArray) {
            block.x -= blockSpeed; // Move blocks left
            gameArea.context.fillStyle = block.color;
            gameArea.context.fillRect(block.x, block.y, block.width, block.height);
          }
        } else {
          clearInterval(myInterval); // Stop the game loop
          prompt("Game Over"); // Notify player of game over
        }
      }
    }

    // Component constructor
    function Component(x, y, width, height, color) {
      this.x = x;
      this.y = y;
      this.width = width;
      this.height = height;
      this.color = color;

      // Draw the component on the canvas
      this.draw = function() {
        const ctx = gameArea.context;
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
      };
    }


    // Start the game function
    function startGame() {
      gameArea.start();
      comp1 = new Component(20, 300, 50, 10, "red"); // Player component
      block = new Component(380, 100, 15, 130, "yellow"); // Initial block
      blockArray.push(block);
      myInterval = setInterval(updateComponent, 50); // Update loop every 50 ms
    }
  </script>

  <!-- Control buttons -->

  <button onclick="left()" class="btn">Left</button>
  <button onclick="right()" class="btn">Right</button><br>
  <button onclick="down()" class="btn">Down</button>
  <button onclick="up()" class="btn">Up</button><br>

Tawk.to Widget Stops Working After Livewire Component Change in Laravel

I’m using Laravel Livewire with app.blade.php as the main layout for all pages. The app.blade.php file includes dynamic content using {{$slot}}. I’ve created a separate Livewire component for the Tawk.to widget (TawkWidget) and included it in the layout.

app.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    @livewireStyles
</head>
<body>
    <livewire:header />
    {{ $slot }}
    <livewire:footer />
    <livewire:tawk-widget />
    @livewireScripts
</body>
</html>

tawk-widget.blade.php:

<div id="tawk-widget-container" wire:ignore>
    <!--Start of Tawk.to Script-->
    <script type="text/javascript">
        var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
        (function () {
            var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
            s1.async = true;
            s1.src = 'https://embed.tawk.to/id-provided/some-id';
            s1.charset = 'UTF-8';
            s1.setAttribute('crossorigin', '*');
            s0.parentNode.insertBefore(s1, s0);
        })();
    </script>
    <!--End of Tawk.to Script-->
</div>

How I change component:

return cache()->remember('about-us-v10', 31536000, function () {
    return view('livewire.about-us')->layout('app')->render();
});

Issues:

  • On the initial page load, the Tawk.to widget works perfectly, and its is injected into the DOM.
  • After switching Livewire components (updating the {{$slot}}), the widget disappears, and the is not re-injected.

What I Tried:

  • Used wire:ignore in the widget component to prevent Livewire from interfering with the widget’s container.
  • Triggered reinitialization of the script on livewire:update and livewire:load events.
  • Moved the script directly into app.blade.php.
  • Tried @script and @endscript

Expected:
The Tawk.to widget should remain visible and functional across Livewire component changes, or it should reinitialize if needed.
How can I ensure the Tawk.to widget persists or reloads correctly after Livewire component changes? Any advice on handling third-party scripts with Livewire?

How to programmatically draw using DGM.js

I can’t seem to figure out the right combinations of methods/properties/values to draw a simple rectangle into the Editor (I guess onto the canvas) of the DGM.js package.

Is anyone able to provide some example code that will show how to programmatically draw a rectangle (or any shape), that I can use as a starting point?

If it matters, I’d rather the rectangle not be user select-able once it’s drawn, unlike rectangles that a user will draw using their cursor

ClipboardJS – using asp.net textbox as target

I have a basic test html page to test using ClipboardJS. It works when the target is html

<input type="text" id="bar" value="Click to copy me" />

<button class="btn" id="btnCopyToClipboard"
        data-clipboard-action="copy"
        data-clipboard-target="#bar"
        onclick="return false">Copy Me</button>

However, I need to use an asp.net textbox as in:

<asp:TextBox ID="txtResponse" class="form-control ans_box_inner" TextMode="MultiLine" runat="server" Rows="20"></asp:TextBox>

and my “button” is defined using ClientID method:

<button id="btnCopyToClipboard" class="btn" 
data-clipboard-action="copy" data-clipboard-target="#<%= txtResponse.ClientID %>'" 
onclick="return false;">
<img src="Images/CopyToClipboardSmall.png" alt="Copy to clipboard" /></button>

And this is not working.

Why doesn’t the previous() function loop when the find term is the first word in a textarea?

I have a basic text editor where the user can search for a term in the text and navigate to the next or previous occurrence. The issue I’m facing is that when the search term is at the very beginning of the textarea (e.g., the first word “Love”), pressing the “Previous” button doesn’t loop back to the last occurrence. However, this works fine if the search term is not at the start of the text (e.g., searching for the term “never”).

Here is the relevant code:

let currentMatchIndex = -1; // Tracks the current match index

function resetIndex() {
  currentMatchIndex = -1;
}

function highlightMatch(startIndex, endIndex) {
  const textarea = document.getElementById('myTextarea');
  textarea.setSelectionRange(startIndex, endIndex);
  textarea.focus();
}

function next() {
  const findTerm = document.getElementById('findInput').value;
  const textarea = document.getElementById('myTextarea');
  const text = textarea.value;

  if (findTerm) {
    const startIndex = text.indexOf(findTerm, currentMatchIndex + 1);
    if (startIndex !== -1) {
      currentMatchIndex = startIndex;
    } else {
      currentMatchIndex = text.indexOf(findTerm); // Loop back to first occurrence
    }

    if (currentMatchIndex !== -1) {
      highlightMatch(currentMatchIndex, currentMatchIndex + findTerm.length);
    } else {
      alert("Find term not found.");
    }
  }
}

function previous() {
  const findTerm = document.getElementById('findInput').value;
  const textarea = document.getElementById('myTextarea');
  const text = textarea.value;

  if (findTerm) {
    const startIndex = text.lastIndexOf(findTerm, currentMatchIndex - 1);
    if (startIndex !== -1) {
      currentMatchIndex = startIndex;
    } else {
      currentMatchIndex = text.lastIndexOf(findTerm); // Loop to last occurrence
    }

    if (currentMatchIndex !== -1) {
      highlightMatch(currentMatchIndex, currentMatchIndex + findTerm.length);
    } else {
      alert("Find term not found.");
    }
  }
}
<input type="text" id="findInput" placeholder="Find" onchange="resetIndex()">
<button onclick="next()">Next</button>
<button onclick="previous()">Previous</button>
<textarea id="myTextarea" rows="1" cols="50">Love never dies. Love never dies. Love never dies.</textarea>

Issue

When the search term is the first word in the textarea (e.g., “Love”), and I press the “Previous” button, it does not loop back to the last occurrence. However, if I search for a term like “never,” it works fine and loops as expected.

Expected behavior

  • When the “Next” button is pressed, it finds the next occurrence.
  • When the “Previous” button is pressed, it loops to the last occurrence when it reaches the first match.

Has anyone encountered this issue before or knows how to fix it?

js setTimeout function runs every 3s to receive messages , can convert it to Ajax Get ? [closed]

i have a messages chat on my video site .
it is not a comments , it is a chat runs in real time between users .
it is working like this :

  • a setTimeout function runs every 3 seconds all the time .
  • user1 send message .
  • setTimeout function is working so user2 get the message Immediately (3s).
  • setTimeout function working .
  • users send / not send the setTimeout function still working .
  • if stop this setTimeout function user2 will not see the message until refresh the page .

my hosting server company say this cause a heavy load on the cpu .
long polling , websocket , nodejs and other like these methods are not supported on my server .

so the only way i have to do , to convert this kind of code to Ajax .
but i dont have any knowledge of php/js coding .

NOTE: if it is possible to run the setTimeout function only if message sent , this will be great instead of change the code to ajax .

here all my code , php , html and js :
and if you need more codes i will post them

<?php 
if ($first == 'fetch') {
if (empty($_POST['last_id'])) {
$_POST['last_id'] = 0;
}
if (empty($_POST['id'])) {
$_POST['id'] = 0;
}
if (empty($_POST['first_id'])) {
$_POST['first_id'] = 0;
}
$messages_html = PT_GetMessages($_POST['id'], array('last_id' => $_POST['last_id'], 'first_id' => $_POST['first_id'], 'return_method' => 'html'));
if (!empty($messages_html)) {
$html = PT_LoadPage("messages/{$pt->config->server}/messages", array('MESSAGES' => $messages_html));
} else {
$html = PT_LoadPage("messages/ajax/no-messages");
}
$users_html = PT_GetMessagesUserList(array('return_method' => 'html'));
if (!empty($messages_html) || !empty($users_html)) {
$data = array('status' => 200, 'message' => $messages_html, 'users' => $users_html);
}
}
?>

<div class="user-send-message" >                        
<form action="#" method="POST" id="new-message-form" >
<textarea rows="1" name="new-message" id="new-message" ></textarea>
<button type="submit" id="send-button">send</button>
<input type="hidden" id="user-id" name="id" value="<?php echo $pt->chat_id; ?>">
<input type="hidden" id="user-avatar" value="<?php echo ($pt->chat_user->avatar) ? $pt->chat_user->avatar : "";?>">
</form>                 
</div>

<script>
var messagesInterval = <?php echo (!empty($pt->extra_config->ajax_message_update_interval)) ? $pt->extra_config->ajax_message_update_interval : 3000 ?>;
$(function() {
window.UpdateChatU = setTimeout(function () {
fetchMessages();
}, messagesInterval);
});

function fetchMessages() {
clearTimeout(window.UpdateChatU);
$.post('{{LINK aj/messages/fetch}}', {id: $('#user-id').val(), last_id: $('.message:last').attr('data-id')}, function(data, textStatus, xhr) {
if (data.status == 200) {
if (data.message.length > 0) {
$('.messages').append(data.message);
$('.user-messages').scrollTop($('.user-messages')[0].scrollHeight);
}
if ($('#search-list').val() == 0) {
$('.messages-sidebar .list-group').html(data.users);
}
}
window.UpdateChatU = setTimeout(function () {
fetchMessages();
}, messagesInterval);
});
}
$(function() {
form.ajaxForm({
url: '{{LINK aj/messages/new}}?hash=' + $('.main_session').val(),
data: {message_id: $('#message_id').val()},
beforeSubmit: function(formData, jqForm, options) {
if ($('.messages').length == 0) {
$('.user-messages').html('<div class="messages"></div>');
}
if ($('#new-message').val().length >= 1) {
$id = makeid();
formData.push({ name: 'message_id', value: $id });
$('.messages').append('<div class="data_message" data-id="' + $id + '"><div class="message to-user pull-right" data-id=""><div class="user-message">' + nl2br(escapeHTML($('#new-message').val())) + '</div><div class="clear"></div></div><div class="clear"></div></div>');
$('#new-message').val('');
$('#new-message').height(40); 
$('.user-messages').scrollTop($('.user-messages')[0].scrollHeight);
} else {
$('#new-message').val('');
} 
},
success: function(data,rew,rr) {
if (data.status == 400) {
$('.data_message[data-id="' + $id + '"]').remove();
swal({
title: '{{LANG error}}',
text: data.message,
type: 'error',
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'OK',
buttonsStyling: true,
confirmButtonClass: 'btn btn-success',
});
}
else{
$('.data_message[data-id="' + data.message_id + '"]').html(data.message);
}
}
});
});

</script>

Parsing Error: Cannot Find Module ‘@babel/preset-env’ in React App Using react-scripts

I’m encountering a persistent issue when trying to start my React app. The error I receive is:

Parsing error: Cannot find module '@babel/preset-env'
Require stack:
- /path/to/node_modules/@babel/core/lib/config/files/plugins.js
- /path/to/node_modules/@babel/core/lib/config/files/index.js
- /path/to/node_modules/@babel/core/lib/index.js
...

I’m using react-scripts and eslint, and the error suggests that the @babel/preset-env module is missing. However, I don’t explicitly use a babel.config.js file in my project. My package.json contains the following dependencies:

{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "devDependencies": {
    "eslint": "^7.32.0"
  }
}

I’ve tried the following solutions but haven’t had success:

  1. Reinstalling dependencies (npm install and npm ci).
  2. Manually installing @babel/preset-env using npm install --save-dev @babel/preset-env.
  3. Clearing the npm cache (npm cache clean --force).
  4. Downgrading and upgrading Node.js (currently using Node v20.15.0 with nvm).

I use concurrently to start both a backend and frontend service, and this is the script that triggers the issue:

"start": "concurrently "npm run start --prefix backend" "npm run start --prefix frontend""

The backend works fine, but the frontend fails to compile with the error above.

Any guidance on how to resolve this error would be greatly appreciated!

Show hide PayPal SDK based on date

I’ve seen other posts similar to this. I post this question because my functionality works at least in part!
I can display this code to give you an idea, but the long and the short of it is, the ensuing div tags with a PayPal SDK for a second button do not show. I initially have both main divs for show and hide set to none, and based on date, they’ll show or be hidden. Pretty basic.
I have an “early bird” price with one SDK button, and then a second, that after Q1 will expire and hopefully show the second, regular rate with that part of the SDK and hosted button.

To test if the latter was working, I painted text within it. The text does show, meaning the div tag does fire off, it’s just the rest of the ensuing, embedded div tags with the SDK do not show. If I take away the other SDK button set it will show, so it can be done, just so far not dynamically.

My main, underlying question here is, do we think this is something the SO community would know or should I be addressing the PayPal community with type of question?
Any and all feedback is welcomed, and if you think it does any help to post the nuts and bolts of the code here I will.

Thanks!

Get datavalue of checkbox in a clickboxlist when the checkbox is clicked

I see plenty of methods to loop through and retrieve the values of the check boxes that are checked, I need to kick off a process with the checkbox value immediately when a checkbox is checked in the checkbox list. Not sure if it’s possible, but would be nice if it is. Otherwise I’d have to create a extremely complex and inefficient procedure to check ALL check boxes and their relationship to values in the system, I’d like to avoid that. My code thus far:

I bind the data to the checkbox list in the code behind:

First I get the data from the database:

MyDataSet = GetItems(MyConnection, MyDataSetAssoc.Tables(0).Rows(0)("itemvalue"), MyDataSetPrograms.Tables(0).Rows(0)("Program"))

Then bind it to the control:

CheckBoxList_Items.DataSource = MyDataSet
CheckBoxList_Items.DataMember = "Items"
CheckBoxList_Items.DataTextField = "ItemName"
CheckBoxList_Items.DataValueField = "ItemID"

This is the jquery code in the document ready function:

$(document).ready(function() {
  $('#<%= CheckBoxList_Items.ClientID %>').click(function() {
    if ($(this).is(":checked")) {
      alert("ID #" + this.value + " was just checked.");
    } else {
      alert("ID #" + this.value + " was just unchecked.");
    }
  });
});

This executes when any checkbox in the list is clicked, now I need to get the value of the checkbox that was just checked. this.value is undefined and
only the else portion of the if statement is executed, so that won’t do it. Is there a way I can get the value of the checkbox that just triggered this function? Or is there another approach I have to use? There can be 1 to N items in the list, and there are three checkbox lists I have to manipulate when one checkbox is “clicked” This particular checkboxlist is at the lowest “level” in the three.

Jquery – Get datavalue of checkbox in a clickboxlist when the checkbox is clicked

I see plenty of methods to loop through and retrieve the values of the check boxes that are checked, I need to kick off a process with the checkbox value immediately when a checkbox is checked in the checkbox list. Not sure if it’s possible, but would be nice if it is. Otherwise I’d have to create a extremely complex and inefficient procedure to check ALL check boxes and their relationship to values in the system, I’d like to avoid that. My code thus far:

$(document).ready(function() {
  $('#<%= CheckBoxList_Items.ClientID %>').click(function() {
    if ($(this).is(":checked")) {
      alert("ID #" + this.value + " was just checked.");
    } else {
      alert("ID #" + this.value + " was just unchecked.");
    }
  });
});

This executes when any checkbox in the list is clicked, now I need to get the value of the checkbox that was just checked. this.value is undefined and
only the else portion of the if statement is executed, so that won’t do it. Is there a way I can get the value of the checkbox that just triggered this function? Or is there another approach I have to use? There can be 1 to N items in the list, and there are three checkbox lists I have to manipulate when one checkbox is “clicked” This particular checkboxlist is at the lowest “level” in the three.

Custom Cursor Stuck on Interactive Elements like Links/Buttons

I’m implementing a custom cursor consisting of two elements: a small black dot and a larger trailing transparent circle. While it works globally, the issue arises when hovering over interactive elements like links or buttons. The custom cursor freezes at the edge of these elements, and the default hand pointer appears instead.

<style>
  body {
    cursor: none;
  }
  .cursor {
    position: fixed;
    width: 8px;
    height: 8px;
    background: #2f2f2f;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
  }
  .cursor-follower {
    position: fixed;
    width: 30px;
    height: 30px;
    background: rgba(232, 226, 223, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
  }
  a {
    cursor: none;
  }
</style>
<div class="cursor"></div>
<div class="cursor-follower"></div>
<script>
  const cursor = document.querySelector('.cursor');
  const follower = document.querySelector('.cursor-follower');
  document.addEventListener('mousemove', (e) => {
    cursor.style.left = `${e.clientX}px`;
    cursor.style.top = `${e.clientY}px`;
  });
</script>

Problem: When hovering over elements or buttons, the custom cursor disappears, and the default hand pointer reappears. How can I ensure that the custom cursor remains visible and functional over interactive elements? Is it a conflict with pointer-events or CSS specificity?

Any guidance is appreciated!

What I Tried:

I implemented a custom cursor using HTML, CSS, and JavaScript. The cursor consists of two elements: a small black dot and a larger trailing circle. I used pointer-events: none and cursor: none globally to disable the default cursor. However, when hovering over interactive elements like links or buttons, the custom cursor freezes at the edge, and the default hand pointer appears.

What I Expected:

I expected the custom cursor to remain functional and visible over all elements, including links and buttons, without the default cursor appearing.

What Happened:

The custom cursor disappears when hovering over links or buttons, and the default hand pointer takes over.

How to allow to select only 1.5 hour duration in fullcalendar

Fullcalender has 15 minute slots:

javascript:

document.addEventListener('DOMContentLoaded', function() {
const calOpts = {
  locale: 'ee',
  slotDuration: '00:15:00',
  slotLabelInterval: '00:15',
  allDaySlot: false,
  selectConstraint: 'businessHours',
  select : function( selectionInfo  ) {
     document.getElementById('start').value = selectionInfo.start
     },
    selectable: true,
   events: { url: 'api/fullcalendar' }
   }
  const calendarEl = document.getElementById('calendar')
  calendar = new FullCalendar.Calendar(calendarEl, calOpts)
  calendar.render()
  })

html:

<form action="~/kinnitatud" method="post">
<input type="hidden" name="start" id="start" />
<input type='submit'/>
</form>

Selectable event duration is 1.5 hours and it occurs in same day. Using this code user can select start time so that there in less than 1.5 hours to next event or to end of day.
Also it can select event by dragging it to be more or less than 1.5 hours.

How to disable such selection so that user can select only 1.5 hour event in free time area?

Fullcalendar 7 beta version is used in ASP.NET 9 MVC view.