Tok124 (CSS Nerd) Posts - Answer Overflow

Tok124 (CSS Nerd)

•Created by Tok124 (CSS Nerd) on 2/29/2024 in #front-end

sticky element move outside parent element

So... I don't really have an issue. It's just a question... But, i have always thought an element with position:sticky; cannot move outside the parent element. But i just realized today that it can actually move outside parent element... But this is really strange. To make position:sticky; element move out from parent element, the parent element needs display:initial;. But the strange thing about this is that as far as i know display:initial; will revert the display value to it's initial value (the default value) but even if you have never changed the display value of the parent element, it the sticky element wont follow until you add display:initial; to parent element. Can anyone explain this to me because this really makes no sense at all. I am so confused 😂 Here is a codepen example... https://codepen.io/tok124/pen/LYvYeLo

68 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 9/1/2023 in #front-end

background-break property, how does it work?

4 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 8/5/2023 in #front-end

difference between display:inline flex; and display:inline-flex;?

Hi. i have always written display:inline flex; but i just realized that you can also write display:inline-flex; so i'm just wondering. Is there any difference between them? I know that it is used to create and inline flex container. I just don't know if there is any difference between them...

7 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 7/11/2023 in #front-end

Need help with my slots machine

Hello, I have created a slots machine using html (pug), scss and JavaScript. It works fine but i want to make it so when each wheel stops spinning, i want them to stop inline with the gray center line that i have created. Im not really sure how i would do this. I would appreciate it if anyone can give me some help with this Here is my code https://codepen.io/tok124/pen/dyQVPzb

5 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 7/1/2023 in #front-end

pattern attribute not working in Chrome and Edge but works fine in Firefox

I have this input

<input id="email" type="email" name="email" placeholder="email@company.com" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[a-zA-Z]{2,}">

I can write "email@t" in the input and still submit the form while using Chrome or Edge. But when i use firefox the pattern works just fine so the input is invalid if i just write "email@t"

35 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 5/13/2023 in #front-end

JavaScript Desktop/Push Notification

Hello, i have a javascript that sends a desktop notification whenever i upload a picture on my website. But if someone else uploads a picture while i'm not on the website, i dont get a notification. ChatGPT told me i need a service worker that runs in the background. But i just have no idea at all how to do that. So i would really appreciate it if someone could help me out.

12 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 3/25/2023 in #front-end

Custom Music Player - Play song where it left off after Page Refresh

Hi, I don't know much about JS so i have a piece of JavaScript code used for a Custom Music Player that was created with ChatGPT. But ChatGPT seem to have some limit for how long code it can write because when i ask to fix so the song will keep playing after i refresh the page, it stops generating the code pretty much in the middle of the script... So i hope that someone here can help me fix this. I do know that localStorage needs to be used. But i dont know exactly how to do it. The script is too long to paste here in the chat so i have to upload it to pastebin... https://pastebin.com/60BhnxPz

34 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 3/20/2023 in #front-end

Convert script from jQuery to Vanilla JavaScript

Hello. I was wondering if anyone could help me to change this jQuery AJAX Script to vanilla javascript. I don't really feel like importint a whole library to use only AJAX for my forms so i would appreciate it a lot if someone could help.

  $(document).ready(function() {
    $('.myForm').submit(function (event) {
      var data = $(this);
      $.ajax({
        type: data.attr('method'),
        url: data.attr('action'),
        data: data.serialize(),
        success: function (data) {
          $('.output').html(data);
          $('.myForm input:NOT([type=submit])').val('');
        }
      });
      event.preventDefault();
    });
  });

  $(document).ready(function() {
    $('.myForm').submit(function (event) {
      var data = $(this);
      $.ajax({
        type: data.attr('method'),
        url: data.attr('action'),
        data: data.serialize(),
        success: function (data) {
          $('.output').html(data);
          $('.myForm input:NOT([type=submit])').val('');
        }
      });
      event.preventDefault();
    });
  });

4 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 2/23/2023 in #front-end

grid span unknown column count

Hi i am not even sure if this is possible. But i was wondering if its possible to use like grid-column:span 3; but you dont actually know the column count. So for example. Let's say i have this html code

<div class="parent">
  <div class="span-all">Span All Columns</div>
  <div class="child"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
</div>

<div class="parent">
  <div class="span-all">Span All Columns</div>
  <div class="child"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
  <div class="child"> </div>
</div>

And this css code

.parent {
  max-width:1000px;
  display: grid;
  grid-template-columns:repeat(3, 1fr);
  margin-inline:auto;
  margin-block-start:100px;
  gap:20px;
}

.child {
  aspect-ratio:1;
  background: #000;
}

.span-all {
  grid-column:span 3;
  background: #000;
  color:#FFF;
  padding:10px;
  font-family:arial black;
}

.parent {
  max-width:1000px;
  display: grid;
  grid-template-columns:repeat(3, 1fr);
  margin-inline:auto;
  margin-block-start:100px;
  gap:20px;
}

.child {
  aspect-ratio:1;
  background: #000;
}

.span-all {
  grid-column:span 3;
  background: #000;
  color:#FFF;
  padding:10px;
  font-family:arial black;
}

then the .span-all class will span all 3 columns. But what about if i change the grid-template-columns to grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); then the amount of columns will change based on screen width. So my question is how can i get the .span-all to span all columns when i don't know the column count? Is it even possible? And yeah, i know a work around for it. I was just wondering if this is possible because i would not need as much code if it is possible ^^

5 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 10/26/2022 in #front-end

Escape String in pug

27 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 10/19/2022 in #front-end

Convert Array to String

Hello, I have some problems to convert Array to String. So in my example code i have an array of 4 items. I do know that i can just arr.join(" ") to convert it to a string. However, i don't want to include the first item from the array in my new string. I have created a code that kinda works but is there any better way to do it? This is my example code

let arr = "Item1 Item2 Item3 Item4",
    newmsg = ""

arr = arr.split(" ")

if(arr[0] === "Item1") {
  for(let i = 1; i < arr.length; i++) {
    if(i === arr.length -1) { 
      newmsg += arr[i]
    }else{
      newmsg += arr[i]+" "
    }
  }
  console.log(newmsg) 
}

let arr = "Item1 Item2 Item3 Item4",
    newmsg = ""

arr = arr.split(" ")

if(arr[0] === "Item1") {
  for(let i = 1; i < arr.length; i++) {
    if(i === arr.length -1) { 
      newmsg += arr[i]
    }else{
      newmsg += arr[i]+" "
    }
  }
  console.log(newmsg) 
}

14 replies

Gaming

Programming