hackett_hkd Comments - Answer Overflow

Topics

hackett_hkd

KPCKevin Powell - Community

•Created by hackett_hkd on 9/11/2023 in #front-end

How to accurate the canvas height with mobile keyboard shown?

I'm still stuck with this problem... I come across this stackoverflow post: https://stackoverflow.com/questions/23023549/get-viewport-height-when-soft-keyboard-is-on I attempted to adjust the container height through JavaScript. It appears to have some effect, but after scrolling to the end, it inexplicably allows for additional scrolling, as seen in the video. I've uploaded my code to a new CodePen for further insights: https://codepen.io/hackett-lai/pen/NWVPLqw

2 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

Thanks for your kind words and encouragement !!!! 😊

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

haha ya but its OK as its just dummy message, at the end they should not more than 2 to 3 lines hahha

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

I just go straightforward following my thinking process and use the code that I've learned so far, I'm not sure if there is a better way or how to optimize it. 🤔 haha~~but seems like it work 😎

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

https://codepen.io/hackett-lai/pen/QWJXoQd Now I create an array to get all the height from previous message, and than calculate the actual value for each message.

function up() {
  const element = document.getElementById(currentID);
  const height = element.offsetHeight;
  let heightArray = [];

  for (let i = 1; i < currentID; i++) {
    const currentElement = document.getElementById(i.toString());
    if (currentElement) {
      let currentHeight = currentElement.offsetHeight;
      heightArray.push(currentHeight);
    }
  }

  heightArray.shift();
  heightArray.push(height);

  for (let i = 1; i < currentID; i++) {
    let upCount = heightArray.reduce((acc, num) => acc + parseInt(num), 0);
    const currentElement = document.getElementById(i.toString());

    if (currentElement) {
      currentElement.style.transform =

translateY(-${upCount}px)

;
      heightArray.shift();
    }
  }
}

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

You're so nice! I actually found where I made my mistake. I shouldn't have just multiplied the height of the new message blindly. For example, let's say each line of text has a height of 10px. Considering the existing messages: - Msg A: 1 line (10px) - Msg B: 1 line (10px) - Msg C: 2 lines (20px) If we add a new Msg D with 3 lines (30px), my previous code would perform the following calculations: - Msg A: 1 line (10 + 30 * 3px) - Msg B: 1 line (10 + 30 * 2px) - Msg C: 2 lines (20 + 30px) - Msg D: 3 lines (30px) This is what causes the issue.

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

I've added some console log and seems like the maths is correct and make sense to me ~

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

Hey I just found than if my message is being longer, it will break my animation, as the spacing will start getting unstable. I 've update a new codepen: https://codepen.io/hackett-lai/pen/XWyLOMd?editors=1010 Do you know which part i'm doing it wrong??

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

Thanks!!! Also thanks for your help 🥰🥰

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

Yeah!! I think I've got it! https://codepen.io/hackett-lai/pen/RwqzjmW So I added the move up function at the bottom and take out the counter as your suggestion. Also I've changed the css class .bubble to become absolute. And at last I make the glass bigger to fit all messages haha do you think this is better?

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

I've just started learning programming after transitioning from design, and everything seems amazing to me. Haha, give me some time on the translate though.

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

Oh ya, I've noticed you have limited only 6 "bubble" to be shown in everytime!

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

wow you are amazing ~ may I know what have you changed? and ya~~ i think it would be better to use a translate function. I'm trying it now

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

I'm kind of making progress I guess, I turn all the .bubble into position: absolute; which stick all of message at the bottom and than I'm trying to transform = translateY(-${some value}px) to push it up.

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

oh that's a visual effect which I intended to make the chatlist a bit wider than the glass

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

well because I'm doing this animation for decoration only, And I dun want my html elements to become more and more if user stay on my page for a long time

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

Oh no … if I use scrollIntoView , I will force the page scrolling back to the last message. I can’t use this if I want to put this animation in my website with other content

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

Right~~ so here is what I've got by so far.. https://codepen.io/hackett-lai/pen/mdQZOMG I've added some additional styling, but I'm still unsure how to prevent the animation break when using the .remove() function to remove elements. I'm uncertain about the impact on performance, so I'm considering increasing the hideCounter condition from if (hideCounter == 10) to if (hideCounter == 20) or possibly a higher number.

47 replies

KPCKevin Powell - Community

•Created by hackett_hkd on 8/10/2023 in #front-end

How can I animate an existing element when appending a new one?

I've tried to use scrollIntoView to kind of achieve the "scroll-up" animation. however I found that everytime When I .remove() element from the DOM, the scroll-up effect will break. Currently my solution is add a counter and only run the delete action every 10 time. New codepen: https://codepen.io/hackett-lai/pen/mdQZryr

47 replies