Rakudai Posts - Answer Overflow

Rakudai

Posts Comments

KPCKevin Powell - Community

•Created by Rakudai on 4/2/2024 in #front-end

Triggering an animation based on scroll position

1 replies

KPCKevin Powell - Community

•Created by Rakudai on 4/1/2024 in #front-end

Coding responsive images the correct way

Hi there! I've always wondered what the correct is to code responsive images on a website, in containers and other elements. Either something that can fit different image sizes and still make sense layout wise or make the code clean and logical. I've tried learning the correct way as I never feel quite satisfied. Like having the image percentage wise of the container, having a set px size and other methods. (It doesnt help that every website do it way different) I would like to know the "best" way of doing it if possible, thank you!

6 replies

KPCKevin Powell - Community

•Created by Rakudai on 12/5/2023 in #ui-ux

Shopping cart positioning without a navigation bar

2 replies

KPCKevin Powell - Community

•Created by Rakudai on 11/7/2023 in #front-end

Triggering an animation based on scroll position

8 replies

KPCKevin Powell - Community

•Created by Rakudai on 10/24/2023 in #os-and-tools

Looking for a handy screen recording software for presenting a website

Hi, I'm trying to create various small clips of a website through screen capture. The question is if there's any recommended software, and maybe a feature that automatically slow scrolls instead of doing it myself? I don't have a steady hand, so it wouldn't look great when I drag it down the page myself. There's a few extensions that take full page screenshots which I usually use, and video screen recording extensions but the don't work well. ( Or atleast for my intended purpose ) I wanna be as prepared as possible, as it will be presented on an expo Teemosurprise

2 replies

KPCKevin Powell - Community

•Created by Rakudai on 10/24/2023 in #front-end

How can I replicate this banner border with css

20 replies

KPCKevin Powell - Community

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

Getting Chart.js to work in a Vue js project

I'm trying to use Chart.js in Vue project but nothing seems to happen when I follow the documentation exactly as displayed on their website. https://www.chartjs.org/docs/latest/ https://vue-chartjs.org/ Vue file

 
<template>
  <Doughnut :data="data" :options="options" />
</template>

</main>
</template>

<script>

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
import { Doughnut } from 'vue-chartjs'
import * as chartConfig from './chartConfig'

ChartJS.register(ArcElement, Tooltip, Legend)

 
<template>
  <Doughnut :data="data" :options="options" />
</template>

</main>
</template>

<script>

import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
import { Doughnut } from 'vue-chartjs'
import * as chartConfig from './chartConfig'

ChartJS.register(ArcElement, Tooltip, Legend)

js file

export const data = {
    labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
    datasets: [
      {
        backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
        data: [40, 20, 80, 10]
      }
    ]
  }
  
  export const options = {
    responsive: true,
    maintainAspectRatio: false
  }

export const data = {
    labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
    datasets: [
      {
        backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
        data: [40, 20, 80, 10]
      }
    ]
  }
  
  export const options = {
    responsive: true,
    maintainAspectRatio: false
  }

3 replies

KPCKevin Powell - Community

•Created by Rakudai on 10/3/2023 in #front-end

Changing text depending on url data

Hi is it possible to change text in specific <p> elements depending on the url data? Example: ?period=quarter&periodnr=2&year=2023

 
<p> Period = ? ( 2 in this case ) </p>

 
<p> Period = ? ( 2 in this case ) </p>

I want the ? to change to the number depending on the bold part in the url ( periodnr=2 ) Don't really know where to start searching, copy pasting my question doesnt help alot

10 replies

KPCKevin Powell - Community

•Created by Rakudai on 9/22/2023 in #front-end

Intersection Observer error

Hi, I'm a UX designer trying to get that hang of coding in Vue JS. I wouldn't say it's going great, so here I am asking for some assistance to solve my current issue!

 Uncaught TypeError: IntersectionObserver.observe: Argument 1 is not an object.

 Uncaught TypeError: IntersectionObserver.observe: Argument 1 is not an object.

Code in question;

const movingCarSection = document.querySelector(".hidden");

const movingCarsOptions = {
  rootMargin: "5px 0px 0px 0px"
}

const movingCarsObservers = new IntersectionObserver(function(
  entries,
  movingCarsObservers
  ) {
    entries.forEach(entry => {
      if(!entry.isIntersecting){
        movingCarSection.classList.add("show");
      } else {
        movingCarSection.classList.remove("show");
      }
    });
}, movingCarsOptions);

  movingCarsObservers.observe(movingCarSection);

const movingCarSection = document.querySelector(".hidden");

const movingCarsOptions = {
  rootMargin: "5px 0px 0px 0px"
}

const movingCarsObservers = new IntersectionObserver(function(
  entries,
  movingCarsObservers
  ) {
    entries.forEach(entry => {
      if(!entry.isIntersecting){
        movingCarSection.classList.add("show");
      } else {
        movingCarSection.classList.remove("show");
      }
    });
}, movingCarsOptions);

  movingCarsObservers.observe(movingCarSection);

I've tried multiple different videos, there's also been times where it works only one time for some reason and refuses to do anything after each refresh. Now I keep getting the aforementioned error, looking online didnt give me much of an answer that I understood. Thanks!

94 replies

Gaming

Programming