Develop Reference

Shopify | Debut theme static header bounce

I'm editing the Debut theme on Shopify. I wanted to make the header static so I found this tutorial here: https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/m-p/518018/highlight/true#M132407
Everything is working as intended until after all the content is loaded, at which point it "bounces" in order to position the main content under the header. I tried to find the cause, and I realized that removing the $(window).on("load", headerSize);
from the code below stops it, but does not reposition it.
I have no clue how to use JavaScript and I assume I have to set a shorter animation or some kind of timer on the existing code in order to load the page instantly, or without the user noticing the bounce.
JavaScript:
function headerSize() {
var $headerHeight = $('div#shopify-section-header').outerHeight();
$('#PageContainer').css('padding-top', $headerHeight);
}
$(window).on("load", headerSize);
$(window).on("resize", $.debounce(500, headerSize));

The easiest way to achive what you want is to add the following at the bottom of your css file:
#shopify-section-header {
z-index: 999999;
position:fixed;
}

How to get Xterm.js resize properly?

tl;dr
I've created a React wrapper to render an array of log messages into a terminal but resizing is giving a weird output (see screenshot). (There is a React-Wrapper on NPM but that wasn't working for my use-case - caused screen flickering)
I'm working on a feature for Guppy where I'm adding Xterm.js for the terminal output.
The PR can be found here.
I've added xterm because of hyperlink scanning/parsing and that is working.
But I'm stuck with getting resize to work. If I'm starting the devServer in the app and wait for some text it will display with correct letter width.
If I reduce the size I'm getting an output with an incorrect letter width.
Like in the following screenshot:
It is always looking correct in the not resized state but after resize it will get the wrong display - so this will happen for enlarging & shrinking the screen width.
The output should look similar to the following screenshot (maybe with some wrapped lines):
I think this is caused by Fit addon or the way I'm handling resizing with the resize observer but I'm not sure.
The span style of xterm letter are getting a width of NaNpx like in the following screenshot:
Is this caused by a media query I'm using? I haven't seen that yet maybe I have to temporarily disable all media queries to see if that's causing the behaviour.
What I have tried so far:
Wrapped this.xterm.fit() into a setTimeout(func, 0) but with-out an effect
Modified some of the styles I'm using but I haven't found the cause.
Code
The code I'm using can be found on Github branch feature-terminal-links but here I'd like to extract the parts I've added to get Xterm to work with React:
I created a styled-component XtermContainer as a div so I can add Xterm styles and own styling. The following code is inside render and will be our xterm.js container (innerRef will be used later in ComponentDidMount to intialize Xterm with that container):
<XtermContainer
width={width}
height={height}
innerRef={node => (this.node = node)}
/>
Init xterm in componentDidMount with the container above:
componentDidMount() {
Terminal.applyAddon(webLinks);
Terminal.applyAddon(localLinks);
Terminal.applyAddon(fit);
this.xterm = new Terminal({
convertEol: true,
fontFamily: `'Fira Mono', monospace`,
fontSize: 15,
rendererType: 'dom', // default is canvas
});
this.xterm.setOption('theme', {
background: COLORS.blue[900],
foreground: COLORS.white,
});
this.xterm.open(this.node);
this.xterm.fit();
/* ... some addon setup code here (not relevant for the problem) ... */
}
Added react-resize-observer inside of the wrapper that is also containing the terminal container so I can trigger this.xterm.fit() if the size changes (in the repo there is a setTimeout wrapper around for testing).
<ResizeObserver onResize={() => this.xterm && this.xterm.fit()} />
Using componentDidUpdate(prevProps, prevState) to update the terminal and scroll the terminal to the bottom if the component is getting new logs:
componentDidUpdate(prevProps, prevState) {
if (prevProps.task.logs !== this.state.logs) {
if (this.state.logs.length === 0) {
this.xterm.clear();
}
for (const log of this.state.logs) {
/*
We need to track what we have added to xterm - feels hacky but it's working.
`this.xterm.clear()` and re-render everything caused screen flicker that's why I decided to not use it.
Todo: Check if there is a react-xterm wrapper that is not using xterm.clear or
create a wrapper component that can render the logs array (with-out flicker).
*/
if (!this.renderedLogs[log.id]) {
this.writeln(log.text);
this.xterm.scrollToBottom();
this.renderedLogs[log.id] = true;
}
}
}
}
Ideas I have to find the cause:
Check ResizeObserver code. (see update below)
Try to find why xterm css is getting a NaN width. Is Xterm.js using the style width of the container? If yes, maybe that's not correctly set.
Update
OK, the resize obeserver is probably not needed as I'm getting the same behaviour after commenting out the <ResizeObserver/> in render. So I think it's caused by xterm.js or the css in Guppy.

I have a fix for the issue. It's now working in the above mentioned feature branch. Not sure if there is a better solution but it's working for me.
I like to explain how I have fixed the resizing issue:
The problem was the OnlyOn component that was used in DevelopmentServerPane. It always rendered two TerminalOutput components. One terminal was hidden with display: none and the other was displayed with display: inline - the style change was handled with a media query inside a styled-component.
After replacing OnlyOn with React-responsive and using the render props to check mdMin breakpoint it was working as expected. React-responsive is removing the not displayed mediaquery component from DOM so only one terminal in DOM at the same time.
I still don't know why there was a problem with the letter width but probably the two instances collided somehow. I couldn't create a minimal reproduction. I tried to recreate the issue in this Codesandbox but I have only resized one Terminal at a time and so I haven't got the issue there.
The code that fixed the problem (simplified version from the above mentioned repo):
import MediaQuery from 'react-responsive';
const BREAKPOINT_SIZES = {
sm: 900,
};
const BREAKPOINTS = {
mdMin: `(min-width: ${BREAKPOINT_SIZES.sm + 1}px)`,
};
const DevelopmentServerPane = () => (
<MediaQuery query={BREAKPOINTS['mdMin']}>
{matches =>
matches ? (
<div>{/* ... render Terminal for matching mdMin and above */}</div>
) : (
<div> {/* ... render Terminal for small screens */}</div>
)
}
</MediaQuery>
);

How to dynamically resize a PixiJS (HTML) canvas within angular component

I've written an angular component which creates and renders (renders a single time) a Pixi canvas.
Here is the component (excuse the bad name I'm still new to angular):
import { Component, OnInit } from '#angular/core';
declare var PIXI: any;
declare var $: any;
#Component({
selector: 'pixi-component',
templateUrl: './pixi-component.component.html',
styleUrls: ['./pixi-component.component.css']
})
export class PixiComponentComponent implements OnInit {
constructor() { }
ngOnInit() {
this.generatePixiCanvas();
console.log("pixi component is created");
}
generatePixiCanvas() {
//Create the canvas and add it the DOM...
var renderer = PIXI.autoDetectRenderer(this.getParentDivWidth(), this.getParentDivHeight());
document.getElementById('pixi-canvas-container').appendChild(renderer.view);
renderer.autoResize = true;
//Create a container object called the `stage` and render it...
var stage = new PIXI.Container();
renderer.render(stage);
}
getParentDivHeight() {
return $('#pixi-canvas-container').height();
}
getParentDivWidth() {
return $('#pixi-canvas-container').width() + 1;
}
}
You can see that this component creates the pixi canvas within the ngOnInit function, but it creates it with a set height and width (returned from the stub helper functions).
What I want to do is two-fold:
On page load, create the pixi canvas so that it's size is EQUAL to the size of its parent container. Similar to what CSS {height: 100%; width: 100%} would do.
On window resize, the pixi canvas dynamically resizes with the rest of the webpage, like what a CSS flex box would do.
My original idea was to use those two stub functions getParentDivHeight and getParentDivWidth to deal with the first problem, but I was unable to find an angular-y way of doing this. I think I might be able to use JQuery?
As for the second problem, I'm not sure how to get an angular component to listen to window resize events.
How can I solve this problem?
Also, here's the HTML and CSS code for the above component, in case it helps:
<div id="pixi-canvas-container">
</div>
#pixi-canvas-container {
height: 100%;
width: 100%;
}
EDIT:
After a little bit of research, it seems that a custom directive to watch window resizes could do the trick. Would I need to write a custom directive to somehow resize the pixi canvas? The problem with this would be that the directive would need to be attached to the pixi canvas when it is created (at runtime) which may not be possible with angular.
EDIT2:
Okay, I've managed to solve problem 1 using JQuery. I've gone ahead and edited my code to reflect this. Problem 2 still remains as the pixi canvas does not respond to page resizes or resolution changes.

What has been done to solve the first problem seems to be working fine for now, so I won't address that here.
The best way to solve problem two is to attach a method to angular's window:resize event. This method will recalculate the size of the canvas' parent contain and then resize it - you can use pixi's built in .resize() method.
Here's the code you'll need:
adjustCanvasSize(){
this.renderer.resize(this.getParentDivWidth(), this.getParentDivHeight());
}
And in the HTML template:
<div (window:resize)="adjustCanvasSize()" id="pixi-canvas-container">
</div>
Easy!

Would you like to try render.autosize property?
Source:
Github source
Line: 61

<HTML> is automatically setting inline-style that I think is set by Google's JSAPI

So, I bought the Roker theme from themeforest.net and created my website. It works fine and looks great but when I try to open my website on a Windows touch device - Surface Pro (IE and Firefox) or Windows Phone, I cannot scroll with my finger i.e. touch is not working.
When I look at the HTML code, the rendered page’s tag is adding this style
-ms-overflow-x: hidden; -ms-overflow-y: hidden; -ms-touch-action: auto !important;
And the overflow is set as an inline style.
This seems to get set automatically when I include the Google's JSAPI, because when I comment the <script type="text/javascript" src="http://www.google.com/jsapi"></script>, then everything works fine.
Any suggestions on how can I overcome this? I can share the link of my website if you want to see what is happening yourself.

Ideally you would want to track down the js file and find out why it is adding those inline styles.
I have a feeling it may have to do with the 'no-touch' class. You may want to use something like the following JS:
$(document).ready(function(){
detectMsTouch();
function detectMsTouch() {
var touchPoints = window.navigator.msMaxTouchPoints;
if (touchPoints) {
$('html').removeClass('no-touch').addClass('touch');
}
else {
return;
}
}
});
Another thing that may work is forcing the style with a CSS override.
ms-overflow-y: visible !important;
Hope it works for you.

How do I remove Bootstrap Affix from an element under certain conditions?

I have an element where I'm using the Twitter Bootstrap Affix plugin. If the window gets vertically resized to the point where it is smaller than the height of the item, I'd like to remove the affix functionality from the element since you wouldn't be able to see all of it in the window.
So far I've tried this in the console just to see if it can be removed, but it doesn't seem to be working.
$("#myElement")
.removeClass("affix affix-top affix-bottom")
.removeData("affix");
$(window)
.off("scroll.affix.data-api, click.affix.data-api");
Maybe I'm going about this the wrong way? How Can I programmatically remove the affix from an element that already had it applied?

I ended up going for a mostly CSS solution, similar to what #Marcin Skórzewski suggested.
This just adds a new class when the height of the window is shorter than the height of the element.
var sizeTimer;
$(window).on("resize", function() {
clearTimeout(sizeTimer);
sizeTimer = setTimeout(function() {
var isWindowTallEnough = $overviewContainer.height() + 20 < $(window).height();
if (isWindowTallEnough) {
$overviewContainer.removeClass("affix-force-top");
} else {
$overviewContainer.addClass("affix-force-top");
}
}, 300);
});
And then in CSS, this class just gets added:
.affix-force-top{
position:absolute !important;
top:auto !important;
bottom:auto !important;
}
EDIT
For bootstrap 3, this seems to be effective:
$(window).off('.affix');
$("#my-element")
.removeClass("affix affix-top affix-bottom")
.removeData("bs.affix");

Deprecated: Answer refers to Twitter Bootstrap v2. Current version is v4.
There are few options to try.
Use function for data-offset-top. Normally, you use the integer value, for number of scrolled pixels to fix the element. According to documentation you can use the JS function, that will calculate the offset dynamically. In this case you can make your function to return different number depending on the conditions of your choice.
Use media query to override affix CSS rule for small window (eg. height 200px or less).
I think, the second variant should be suitable for you. Something like:
#media (max-height: 200px) {
.affix {
position: static;
}
}
If you would provide jsfiddle for your problem others could try to actually solve it, instead of giving just theoretical suggestion, that may or may not work.
PS. Bootstrap's navbar component uses media query for max-width to disable fixed style for small devices. It is good to do that not just because the screen size is to small for navbar, but in mobile devices position: fixed; CSS works really ugly. Take w look at navbar inside the bootstrap-responsive.css file.

Your $(window).off is close, according to #fat (author of bootstrap-affix.js) you can disable the plugin like this:
$(window).off('.affix');
That will disable the affix plugin.
See: https://github.com/twitter/bootstrap/issues/5870

On line 1890 of bootstrap is a conditional for whether the default action should be prevented. This allows your to listen for events and if some condition is met, prevent the affix from happening.
line 1890 from bootstrap:
if (e.isDefaultPrevented()) return
Example:
$('someselector')
.affix()
.on(
'affix.bs.affix affix-top.bs.affix affix-bottom.bs.affix'
, function(evt){
if(/* some condition */){
evt.preventDefault();
}
}
);

Even though this was answered, I just wanted to give my solution for this in case someone ran into a similar situation as mine.
I modified the offset top option to a ridiculous number that would never get scrolled to. This made it so I did not have to do $(window).off('.affix'); and disable affix for everything.
$('#element-id').data('bs.affix').options.offset.top = 1000000000;