James Coding Tips

Fix Blurry Pixel Art (Disable Antialising)

Before

After

cursor:pointer not working?

The issue has to do with some sort of interference with Photoshop on Mac. Close Photoshop, cursor:pointer would work.

Solution: Close Photoshop

Apparently this can happen due to many different programs including Photoshop, Sketch, DataGrip, Acrobat, Sublime Text, etc.

Sweet Alert

Sakura Calendar

さくらカレンダー

JS Fish Swim Animation

.fish {
        width: 75px;
        height: 75px;
        background-image: url('https://jamesland.org/Images/BeetleMuncher.gif'); 
        background-size: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transition: transform 0.3s ease; 
    }
</style>
    <div class="fishContainer">
    
    <div class="fish" id="fish"></div>
    
    </div></div>
    
  <script>
  function getRandomPosition(currentX, currentY, fish, container) {
    const maxOffset = 100; 
    const fishRect = fish.getBoundingClientRect();
    const containerRect = container.getBoundingClientRect();

let x = currentX + (Math.random() * maxOffset * 2 - maxOffset);
    let y = currentY + (Math.random() * maxOffset * 2 - maxOffset);

const maxX = containerRect.width - fishRect.width;
    const maxY = containerRect.height - fishRect.height;
    x = Math.max(0, Math.min(x, maxX));
    y = Math.max(0, Math.min(y, maxY));

return [x, y];
  }

function lerp(start, end, t) {
    return start * (1 - t) + end * t;
  }

function swimFish() {
    const fish = document.getElementById('fish');
    const container = fish.parentElement || document.body;

const containerRect = container.getBoundingClientRect();
    const fishRect = fish.getBoundingClientRect();

let currentX = parseFloat(fish.style.left) || (containerRect.width - fishRect.width) / 2;
    let currentY = parseFloat(fish.style.top) || (containerRect.height - fishRect.height) / 2;

let target = getRandomPosition(currentX, currentY, fish, container);
    let direction = target[0] > currentX ? 'right' : 'left';
    let startTime = null;
    const duration = 3000;

function animateFish(timestamp) {
      if (!startTime) startTime = timestamp;
      let progress = (timestamp - startTime) / duration;
      if (progress > 1) progress = 1;

const t = progress * progress * (3 - 2 * progress);

const x = lerp(currentX, target[0], t);
      const y = lerp(currentY, target[1], t);

fish.style.left = x + 'px';
      fish.style.top = y + 'px';
      fish.style.position = 'absolute';
      fish.style.transform = direction === 'right' ? 'scaleX(-1)' : 'scaleX(1)';

if (progress < 1) {
        requestAnimationFrame(animateFish);
      } else {
        currentX = target[0];
        currentY = target[1];
        target = getRandomPosition(currentX, currentY, fish, container);
        direction = target[0] > currentX ? 'right' : 'left';
        startTime = timestamp;
        requestAnimationFrame(animateFish);
      }
    }

requestAnimationFrame(animateFish);
  }

window.addEventListener('load', swimFish);
</script>

CSS Shake Animation

CSS Float Animation

CSS Tilt Animation

CSS Hop Tilt Animation

CSS Jello Animation

CSS Quilt Background

James Rope Sign

.ropesign-image {
      display: block;
    }

.ropesign {
      position: absolute;
      top: 35%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 2px;
    }

.ropesign-outer {
      background-color: #8B0000;
      padding: 6px;
      display: inline-block;
    }

.ropesign-inner {
      background-color: #660000;
      color: white;
      border: 2px dotted white;
      padding: 5px 40px;
      font-size: 16px;
      font-family: sans-serif;
      display: inline-block;
    }
    	.line { width: 1000px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
  mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);}
  </style>

<div class="ropesign-container">
    <img src="https://miyu66.org/static/picture/rope.png" class="ropesign-image line">
    <div class="ropesign">
      <div class="ropesign-outer">
        <div class="ropesign-inner">Jamesland</div>
      </div>
    </div>
  </div>

Jamesland

Tooltip

img.addEventListener("mouseenter", () => {
  tooltip = document.createElement("div");
  tooltip.className = "tooltip-box";
  tooltip.textContent = img.alt;
  document.body.appendChild(tooltip);

void tooltip.offsetWidth;

const rect = img.getBoundingClientRect();
  tooltip.style.left =
    rect.left + window.scrollX + rect.width/2 - tooltip.offsetWidth/2 + "px";
  tooltip.style.top = rect.bottom + window.scrollY + 5 + "px";

requestAnimationFrame(() => tooltip.style.opacity = "1");
});

img.addEventListener("mousemove", () => {
    if (tooltip) {
      const rect = img.getBoundingClientRect();
      tooltip.style.left = rect.left + window.scrollX + rect.width / 2 - tooltip.offsetWidth / 2 + "px";
      tooltip.style.top = rect.bottom + window.scrollY + 5 + "px";
    }
  });

img.addEventListener("mouseleave", () => {
    if (tooltip) {
      tooltip.remove();
      tooltip = null;
    }
  });
});
</script>

Hover Over Me

Draggable Element

function dragElement(elmnt) {
    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

elmnt.onmousedown = dragMouseDown;

function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();

pos3 = e.clientX;
        pos4 = e.clientY;

document.onmouseup = closeDragElement;
        document.onmousemove = elementDrag;
    }

function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();

pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;

elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }

function closeDragElement() {
        document.onmouseup = null;
        document.onmousemove = null;
    }
}
</script>

Drag Me Around

CSS Swing Animation

Textarea Copy Code To Clipboard

Copy Code To Clipboard (Without Textarea)

<a href="#" onclick="copyToClipboard(event, 1)" class="showAlert"><img alt="James Pangartica" src="https://jamesland.org/Images/Badges/James_Badge.gif"></a>
    <a href="#" onclick="copyToClipboard(event, 2)" class="showAlert"><img alt="James Pangartica" src="https://jamesland.org/Images/Badges/AvC_Badge.gif"></a>
    <a href="#" onclick="copyToClipboard(event, 3)" class="showAlert"><img alt="James Pangartica" src="https://jamesland.org/Images/Badges/HappyManBadge.gif"></a>
<script>
function copyToClipboard(event, badgeNumber) {
    event.preventDefault(); 
    
    let code = '';
    
    if (badgeNumber === 1) {
        code = `<a href="https://jamesland.org/" target="_blank"> <img src="https://jamesland.org/Images/Badges/James_Badge.gif" style="height:31px;" alt="James Pangartica"> </a>`;
    } else if (badgeNumber === 2) {
        code = `<a href="https://jamesland.org/" target="_blank"> <img src="https://jamesland.org/Images/Badges/AvC_Badge.gif" style="height:31px;" alt="James Pangartica"> </a>`;
    } else if (badgeNumber === 3) {
        code = `<a href="https://jamesland.org/" target="_blank"> <img src="https://jamesland.org/Images/Badges/HappyManBadge.gif" style="height:31px;" alt="James Pangartica"> </a>`;
    const textarea = document.createElement("textarea");
    textarea.value = code;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    document.body.removeChild(textarea);
}
// add Sweetalert for showAlert function
</script>

Hoverselect

<img src="https://jamesland.org/flash/Icons/24054.jpg" class="HoverSelect" style="width:80px;border-radius:10px;position:absolute;" alt="Jamesland">
<script> document.addEventListener("DOMContentLoaded", function() {
        function addHoverEffect(selector, defaultSrc, offsetTop = '0', width = '80px', height = '80px') { const images = document.querySelectorAll(selector);
            images.forEach(image => { let overlayImageSrc = defaultSrc;
                if (image.id === 'WIP') { overlayImageSrc = '/Images/WIP_PRESS.png';} 
          else if (image.id === 'BETA') { overlayImageSrc = '/Images/BETA_PRESS.png'; }
                const overlayImage = document.createElement('img');
                overlayImage.src = overlayImageSrc;
                overlayImage.style.position = 'absolute';
                overlayImage.style.top = offsetTop;
                overlayImage.style.left = '0';
                overlayImage.style.width = width;
                overlayImage.style.height = height;
                overlayImage.style.pointerEvents = 'none';
                overlayImage.style.opacity = '0';
                overlayImage.style.transition = 'opacity 0.3s ease';
                overlayImage.style.zIndex = '1000';
                overlayImage.classList.add('overlay');
                image.parentElement.style.position = 'relative';
                image.insertAdjacentElement('beforebegin', overlayImage);
                image.addEventListener('mouseover', () => { overlayImage.style.opacity = '1'; });
                image.addEventListener('mouseout', () => { overlayImage.style.opacity = '0'; });
            });
        }
        addHoverEffect('.HoverSelect', '/Images/Selecter.png');
        addHoverEffect('.HoverSelect2', '/Images/Selecter.png', '');
        addHoverEffect('.HoverSelect3', '/Images/Selecter.png', '0px', '80px', '54px');
    });
</script>