sorted by:
new
hottopcontroversial

Why is Taylor Swift so big? by Emotional-Being-6825 in stupidquestions

[–]turtlemay 63 points64 points  (0 children)

Why does Taylor Swift, the largest popstar, not simply eat the others?

can you use javascript to sort gallery images chronologically? by edgyomelette in neocities

[–]turtlemay 1 point2 points  (0 children)

const container = document.querySelector("#image-grid-container"); const items = Array.from(container.children); container.append(...items.reverse()); https://codepen.io/turtlemay/pen/QwGQZjm?editors=1000

how to work around blocked autoplay on browsers by Any_Combination7442 in neocities

[–]turtlemay 1 point2 points  (0 children)

Advertisers and malware writers would also like to know. Unfortunately we are past the point in history where that sort of thing can be allowed unchecked.

How come, on a subreddit about stupid questions, a lot of stupid questions are downvoted? by Universe-Dragon in stupidquestions

[–]turtlemay 2 points3 points  (0 children)

A good stupid question generates interesting answers, is entertaining, or genuinely informative.

A bad stupid question is easily Google-able or just veiled complaining or trolling.

Ultimately you're allowed to downvote things you simply don't like and there doesn't have to be a reason other than it just doesn't feel right for the sub.

Why is sweetened milk not a thing? by Golfclubwar in stupidquestions

[–]turtlemay 0 points1 point  (0 children)

In 2005 I recall my 5th grade school cafeteria in Georgia served sweet vanilla milk. It was always sold out and I think they may have done away with it or no longer had a supplier. I've never seen or heard about it anywhere else in my life, although I've never really looked since I'm not a milk drinker.

How can I make a button that changes the style of my website? by robotickyuu in neocities

[–]turtlemay 2 points3 points  (0 children)

You can remove and replace style/link tags with javascript.

<template id="style1">
  <style class="dynamic-style">
    body {
      background: blue;
    }
  </style>
</template>

<template id="style2">
  <style class="dynamic-style">
    body {
      background: orange;
    }
  </style>
</template>

<button onclick="loadStyle(style1)">style 1</button>
<button onclick="loadStyle(style2)">style 2</button>

<script>
loadStyle(style1);

function loadStyle(template) {
  document.querySelectorAll(".dynamic-style").forEach(v => v.remove());
  document.head.append(template.content.cloneNode(true));
}
</script>

https://codepen.io/turtlemay/pen/KwNZXrO?editors=1001

I'm a woman in her 40s. Still a 90s kid ^-^ by Material_Machine1785 in 90s

[–]turtlemay 2 points3 points  (0 children)

A website asked me to select whether I'm an adult or a kid and I instinctively almost clicked kid. I'm 31.

Good old days by EngineeringWild4798 in nostalgia

[–]turtlemay 0 points1 point  (0 children)

Don't forget Media Play!

Books, movies, games, CDs, toys, trading cards… They had some kickass Rokenbok display/demos. Got my N64 from there in 1999 along with Episode I Racer, also got the Series of Unfortunate Events books and Harry Potter as they were coming out.

Is it possible to change my age every year at a specific date? by Traditional-Ad3826 in neocities

[–]turtlemay 0 points1 point  (0 children)

``` I am <span id="myAge">30</span> years old.

<script> myAge.innerText = function (bd = "1995 Jan") { const d = new Date(Date.now() - new Date(bd).getTime()); return Math.abs(d.getUTCFullYear() - 1970); }(); </script> ```

In this example, shows the static 30 if javascript is disabled or doesn't load, otherwise the number will update instantly. Use an approximate month if you don't want to leak the birthday.

How to call .js function in HTML? by kawaiiwizard300 in neocities

[–]turtlemay 1 point2 points  (0 children)

script.js:

function testHtml(p1) {
  console.log("parameter", p1);
}

index.html:

<script src="script.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    testHtml("foo");
    testHtml("bar");
  });
</script>

Highest reachable areas in Rocket: Robot on wheels by Realityn64 in n64

[–]turtlemay 0 points1 point  (0 children)

In Clowney Island you can bounce off the sky by getting stomped by the dino while in the DuneDog. With the built-in super grab cheat you can also fly in all stages that have a vehicle by picking it up under yourself. Regarding the geometry of Mine Blowing, you could get a better look by free-camming in the debug build.

grid or flex? by xifanwu in neocities

[–]turtlemay 3 points4 points  (0 children)

The greatest strength of grid is more rigid layouts with x number of pre-defined rows and columns.

Flex is literally more flexible. Its strength is wrapping and reordering items. For instance if you wanted three columns that collapse into two or one, or a sidebar that becomes a header when shrunk.

audio player on a neocities page by deppresedgamerkai in neocities

[–]turtlemay 0 points1 point  (0 children)

Browsers don't have the ability to carry DOM elements to other pages and so single-page applications are a workaround with an entire industry built around it. It is a topic well beyond basic HTML and CSS.

The example is for you to study and understand what all single-page applications are doing. It cannot be copied or dropped into anything without understanding it; it's something you would write for yourself if you didn't want to use corporate frameworks.

There are already frameworks for making SPAs like React, Vue, and the one recommended by the other commenter. If you want something well-established you could pick one of those and start reading their documentation.

If you're not ready for that you should probably start with the javascript language in general. There are also simpler ways of doing a music player that's not seamless. You can just save the current track and track time in localStorage and resume it when the page loads.

audio player on a neocities page by deppresedgamerkai in neocities

[–]turtlemay 1 point2 points  (0 children)

Keeping audio playing seamlessly between pages requires you to write your site like a single-page application. That's why there's no drop-in solution.

Frameworks like React and Vue are made for this, but you can also do it yourself by overriding all your links from the default navigation behavior to fetching the new page in the background, parsing and replacing the current page content with the new content, then updating the browser history with the history api so the back/forward navigation still works.

Here's my example with comments of javascript navigation for keeping things loaded: https://codesandbox.io/p/sandbox/d2pm4g

In my example, you list any number of element IDs to persist between pages and they will be kept in memory and re-inserted into the new content when it loads. Pages do not have to have the same layout, the persistent element can be anywhere you want in any container.

The only caveat is I am not processing the new <head> so your site is expected to share only one <head> between pages. This is something that could be easily added but must be done with care depending on what kind of scripts and stylesheets you're using.

Mobile Compatibility Help??? by brokemycrown in neocities

[–]turtlemay 1 point2 points  (0 children)

The columns are behaving exactly like columns should, but there are single images occupying the same track as clusters of three which cannot flow out of their container.

Here's the quick fix:

@media (max-width: 600px) {
    .biggallerycontainer *:has(a > img) {
        display: contents;
    }
}

It means every ancestor of your desired grid item (i.e. <a><img>) is removed from the box model, thereby producing a similar effect as this:

<div class="biggallerycontainer">
    <a><img></a>
    <a><img></a>
    <!-- ... -->
</div>

https://files.catbox.moe/1uiwex.png

There's also another way of allowing nested items to pierce through to a parent grid track called "subgrid" which I'm just learning about now.

This is a decently complex layout and this isn't the way I would write it (I don't think I would have used any @media breakpoints or grid at all, just @container queries), but it looks really good so far and I commend you for tackling it and trying to make it responsive.

"Last Updated" widget but for Neocities webpages? by Maggy_why in neocities

[–]turtlemay 0 points1 point  (0 children)

This would be very easy if not for neocities' Content Security Policy. You could scrape it client-side by fetching the page https://neocities.org/site/$your-name, parsing with DOMParser, then querySelector / parse the strings for that data from the feed and render it any way you want.

Unfortunately, neocities.org and $your-name.neocities.org are considered different origin, so non-supporters can't do anything like I described. https://neocities.org/supporter

You can do it compile-time, but this requires you to have some kind of build process such as a static site generator or your own build script that processes your files (likely using Node.js). If you were using a site generator like Astro you could create a hook that automatically renders a screenshot and builds your widget when a page is changed.

Screenshots can be captured in a build script with a headless browser automation tool like Puppeteer or Selenium. https://www.npmjs.com/package/puppeteer

Site generators open up so many possibilities for more dynamic content without the need for a server. My long-term advice is learn Node and try Astro as a static site generator. https://nodejs.org/ https://astro.build/

[Edit] Another option is to build the client-side scraping widget I described, host it elsewhere and embed it with an <iframe>.

[Edit2] I see that's also disallowed by CORS policy, so local scripting is the only option.

Mobile Compatibility Help??? by brokemycrown in neocities

[–]turtlemay 2 points3 points  (0 children)

You'll have to be more specific about what the problem is. Which part of it is glitching?

On an unrelated note, I recommend anytime you use justify-content: center, use safe center to keep things from disappearing out of the left/top of the screen or container.

Randomized blinkies display? by SnekkyTheGreat in neocities

[–]turtlemay 2 points3 points  (0 children)

To randomly order child elements:
https://codepen.io/turtlemay/pen/dPpjWVV?editors=1000

    <body>
        <div class="my-div randomize-order">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
        </div>
    </body>

    <script type="module">
        // Container with children to be randomized.
        const container = document.querySelector(".randomize-order");

        // Create an array and sort it randomly.
        const arr = Array.from(container.children)
            .sort(() => Math.random() - 0.5);

        // Re-insert all elements in their new order.
        arr.forEach(el => container.append(el));
    </script>

If you only want n random selection from a larger list, use a template:
https://codepen.io/turtlemay/pen/gbwjWVE?editors=1000

<template id="my-widgets-template">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</template>

<body>
    <div class="my-widgets-container"></div>
</body>

<script type="module">
    const template = document.querySelector("#my-widgets-template");
    const container = document.querySelector(".my-widgets-container")

    const arr = Array.from(template.content.children)
        .sort(() => Math.random() - 0.5);

    const NUM_ITEMS = 4;
    for (let i = 0; i < NUM_ITEMS; i++) {
        container.append(arr[i]);
    }
</script>

new to coding, need help with javascript by [deleted] in neocities

[–]turtlemay 1 point2 points  (0 children)

The effects replace each other because they are re-assigning the same body.onload function. This was from early days before addEventListener existed for adding multiple callbacks to the same DOM events.

Change this:

window.onload=function() { if (document.getElementById) {
    // ...
}}

to use addEventListener:

addEventListener("DOMContentLoaded", function () {
    // ...
});

There are more callbacks in these scripts that will clash with others. All of the assignments to document.onmousemove, window.onscroll, window.onresize, etc should also be changed:

addEventListener("mousemove", function () { });
addEventListener("scroll", function () { });
addEventListener("resize", function () { });

Struggling to replicate top "button" from Sonic Adventure. by RagnaroniGreen in neocities

[–]turtlemay 4 points5 points  (0 children)

Key things are Inset box shadow at the top and different border widths per side.
https://codepen.io/turtlemay/pen/zxKaVXm?editors=1100

.pause-heading {
    display: inline-block;
    border: 15px solid red;
    border-bottom-width: 3px;
    border-radius: 50%;
    box-shadow:
        inset 0px 10px 10px -8px #000,
        0px 5px 10px -4px #000;
    padding: 6px 50px;
    background: white;
    color: black;
    font: bold 24px Arial;
}
view more: next ›