Tag Archives: jQuery

Fresh Humbug

Every programmer who took a formal web development course has had to write Javascript to make it look like it was snowing on their web page at some point… Apparently someone at Freshservice thought this was so cool that everyone who uses their service is subjected to the buggy white mess every holiday season.

Here’s a Greasemonkey/Tampermonkey script that would make The Grinch proud:

// ==UserScript==
// @name         Fresh Humbug
// @namespace    https://triggerhappy.me/2020/01/fresh-humbug/
// @downloadURL  https://triggerhappy.me/downloads/freshhumbug/freshhumbug.user.js
// @version      0.3
// @description  Get rid of the buggy Christmas theme that Freshservice forces on everyone
// @author       Eric Murphy
// @match        https://yourfreshserviceurl.example.com/*
// @grant        GM_addStyle
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js

// ==/UserScript==

(function() {
    'use strict';
    $( document ).ready(function() {

I probably could have done it without JQuery, but I only dabble in web programming these days, so that’s what I’m most familiar with.

Anyway, you’re welcome. Download it here!

Parallax Scrolling on the Momentum Squarespace Template

While working on my wife’s web page, I ran into a difficult challenge. She asked for a page to include parallax scrolling on a template that does not include parallax scrolling as a feature. In this case, we’re using Momentum. I figured I might have to dive into developer mode to achieve this, but I’ve been running into problems getting that to work, so I thought I’d take a stab at it without developer mode.

Requirements were clear:

  • Stationary parallax scrolling (image stays stationary while other elements scroll over it)
  • Images must be added/edited in the Squarespace online design tools (no hard-coding images here)
  • Height of the “window” must be editable in the Squarespace online design tools as well
  • Must be able to embed text over the images

After walking through a few examples online, I figured it shouldn’t be too hard to accomplish with some CSS and jQuery. I added several “poster” and “text” blocks to a page and plugged the following code into the page header. You could put this in code injection if you wanted this effect on every page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

html {
	overflow-x: hidden;
.image-inset {	
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 0px;
	border: 0px;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: hidden;
.sqs-block-image .image-block-outer-wrapper.image-block-v2 .intrinsic img {
	display: none;
.sqs-block-image .image-block-outer-wrapper.image-block-v2 .image-overlay {
	display: none;

	$('.image-inset').each(function(i,e) {
		$(e).css('background-image', 'url("'+$(e).children('img')[0].src+'")');

To get this to work on other templates, you might need to tweak the CSS a bit, but it should be doable.