Zach.. Posts - Answer Overflow

Zach..

•Created by Zach.. on 12/6/2023 in #front-end

jQuery Library Conflict (TamperMonkey)

Hello all! I'm writing a short little script for a website I use frequently using TamperMonkey. I'm coding in jQuery, but the site uses a different library. These two libraries conflict and break some of the site's built-in coding (all my customizations work). I went through this https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ and it seemed perfect for what I was trying to do, but TamperMonkey insists that jQuery is an undefined function and cannot be used. When I force it to run on the site, it throws a console error as well. This is what I have so far, with the main code snipped since it's not relevent.

// ==UserScript==
// @name         {snipped}
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  {snipped}
// @author       You
// @match        {snipped}
// @require      http://code.jquery.com/jquery-3.7.1.min.js
// @icon         https://www.google.com/s2/favicons?sz=64&domain=pokefarm.com
// @grant        none
// ==/UserScript==

/* global jQuery */

jQuery.noConflict();

jQuery( document ).ready(function( $ ) { ... });

// ==UserScript==
// @name         {snipped}
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  {snipped}
// @author       You
// @match        {snipped}
// @require      http://code.jquery.com/jquery-3.7.1.min.js
// @icon         https://www.google.com/s2/favicons?sz=64&domain=pokefarm.com
// @grant        none
// ==/UserScript==

/* global jQuery */

jQuery.noConflict();

jQuery( document ).ready(function( $ ) { ... });

17 replies

KPCKevin Powell - Community

•Created by Zach.. on 3/23/2023 in #front-end

.box:hover:after fade in transition

I'm trying to animate a fade-in transition for a .box:hover:after property, and am not having much luck. Codepen; https://codepen.io/rainbow_blacklight/pen/qBMQXXB Would I need to make use of the animation property to achieve this?

4 replies

KPCKevin Powell - Community

•Created by Zach.. on 3/16/2023 in #front-end

Letter Spacing on Hover causes Visual Glitching

This is actually for a different website that has some semi unique css/html, but I was able to recreate the problem in a codepen with some specific rules. https://codepen.io/rainbow_blacklight/pen/mdGKyag Here's a video of the error; warning for photosensitive viewers. https://imgur.com/2QBfqCF I'm wondering if its possible to prevent this from happening while still utilizing letter spacing expansion on hover. Moving the link to the next line or using smaller letter spacing isn't the kind of fix I'm looking for, because I'm making code that other people will use, and they don't know to do those things when adding in their html.

5 replies

Gaming

Programming