OldViking013 Posts - Answer Overflow

OldViking013

•Created by OldViking013 on 11/1/2023 in #support

Show PDF on my page

Does anyone know of a good way to have an interactable/live preview of PDF files and a good way to go about them? I'm trying to provide multiple research docs on my site and would like to showcase them trough PDF's (it is also a requirement to provide PDFs so why not show them as well?) I tried adding the pdfsclick library for Solid but it wouldn't show the PDFs (the examples also look a bit broken) and there was not a lot of documentation for it. Does anyone know about another good library to use with solid (maybe also Tailwind) or a way that I can implement it myself without a library?

6 replies

SSolidJS

•Created by OldViking013 on 6/20/2023 in #support

addEventListener not working?

Hey there, I'm kinda new working with SolidJS, I've worked with React before and have a lot of experience in plain HTML + CSS + JS without framework. But I was trying to create a hovering effect on my cards by adding a JavaScript function to rotate it in '3D'. The problem is that when I add an event listener, it never fires off even when meeting the condition to trigger it. Here's the code:

function map(val, minA, maxA, minB, maxB) {
    return minB + ((val - minA) * (maxB - minB)) / (maxA - minA);
}

function Card3D(card, ev) {
    console.log("card3D");
    let img = card.querySelector('img');
    let imgRect = card.getBoundingClientRect();
    let width = imgRect.width;
    let height = imgRect.height;
    let mouseX = ev.offsetX;
    let mouseY = ev.offsetY;
    let rotateY = map(mouseX, 0, 180, -25, 25);
    let rotateX = map(mouseY, 0, 250, 25, -25);
    let brightness = map(mouseY, 0, 250, 1.5, 0.5);

    img.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    img.style.filter = `brightness(${brightness})`;
}

let cards = document.querySelectorAll('.staff-item');

cards.forEach((card) => {
    console.log(card);
    card.addEventListener('mousemove', (ev) => {
        Card3D(card, ev);
    });

    card.addEventListener('mouseleave', (ev) => {
        let img = card.querySelector('img');

        img.style.transform = 'rotateX(0deg) rotateY(0deg)';
        img.style.filter = 'brightness(1)';
    });
});

function map(val, minA, maxA, minB, maxB) {
    return minB + ((val - minA) * (maxB - minB)) / (maxA - minA);
}

function Card3D(card, ev) {
    console.log("card3D");
    let img = card.querySelector('img');
    let imgRect = card.getBoundingClientRect();
    let width = imgRect.width;
    let height = imgRect.height;
    let mouseX = ev.offsetX;
    let mouseY = ev.offsetY;
    let rotateY = map(mouseX, 0, 180, -25, 25);
    let rotateX = map(mouseY, 0, 250, 25, -25);
    let brightness = map(mouseY, 0, 250, 1.5, 0.5);

    img.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
    img.style.filter = `brightness(${brightness})`;
}

let cards = document.querySelectorAll('.staff-item');

cards.forEach((card) => {
    console.log(card);
    card.addEventListener('mousemove', (ev) => {
        Card3D(card, ev);
    });

    card.addEventListener('mouseleave', (ev) => {
        let img = card.querySelector('img');

        img.style.transform = 'rotateX(0deg) rotateY(0deg)';
        img.style.filter = 'brightness(1)';
    });
});

as you can see I tried checking to see if the cards were not registered by using the console but they all show up, the problem lies when I move my mouse over the item nothing seems to happen, I also tried adding a consol.log to the hover function to see if it at least went in there, but nothing happened. Does anybody know what I might be doing wrong? Or if anything is unclear, please ask!

5 replies

Gaming

Programming