I'm new to coding js, and am trying to use GSAP to animate some code. I cannot get anything to move or do any function. I don't have any errors when I compile my file. Also, I cannot get anything to animate on my CodePen, which I have been trying to use to see if I can try to do anything that might work. My html and css are working fine. I don't know what might be the problem?
CodePen:
https://codepen.io/ashleynw1800/pen/VwaRGBX
HTML:
<!-- Font Awesome-->
<script src="https://kit.fontawesome.com/3c79b583ac.js" crossorigin="anonymous"></script>
<!-- Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
<section class="section-1">
<div id="hello-container">
<h1 class="hello"> hello!</h1>
</div>
<div id="happy-container">
<i class="fa fa-smile-o" aria-hidden="true"></i>
</div>
</section>
CSS:
/* =============
Demo
============= */
.section-1{
display: grid;
grid-template-areas: ". hello happy .";
grid-template-columns: "auto 2fr 1fr auto";
background-color: #E6EBFF;
}
#hello-container{
grid-area: hello;
align-self: center;
}
.hello{
font-size: 150px;
font-family: 'Abril Fatface', cursive;
color: #FF4F2D;
}
#happy-container{
grid-area: happy;
align-self: center;
color: #FF89FF;
font-size: 150px;
}
JS(I have taken all out except for one basic line to try to get anything to work):
import {gsap} from "gsap";
gsap.to(".hello", {duration:2, alpha:0})
"Your mistake" ==> Wrong implementation of the module idea/concept:
The module to import from. This is often a relative or absolute path
name to the .js file containing the module.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#:~:text=To%20dynamically%20import%20a%20module,js')%20.
Installation by CDN (Codepen). Remove import {gsap} from "gsap"; and the code will work fine. Otherwise, you get this error:
Uncaught TypeError: Failed to resolve module specifier "gsap"
In general, it is very useful to inspect your code and check for console errors.
https://developers.google.com/web/tools/chrome-devtools/console
Related article:
Failed to resolve module specifier
https://medium.com/#samichkhachkhi/failed-to-resolve-module-specifier-23fae20222df
Loading GSAP using modules tutorial:
https://greensock.com/docs/v3/Installation#npm
Related
I have a .scss file in src/assets/css/button.module.css
simplified content below
.btn:visited{
text-transform: uppercase;
text-decoration: none;
padding: 15px 40px;
}
I want to use this style in multiple components. How can i import the css to required component
I tried importing this in another scss as below
#import url('../../assets/css/button.module.scss');
But the the styles are not getting loaded. Any advice please
Try using
#import '../../assets/css/button.module.scss'
If does not work try using partials
When styles are globally imported into _app.js (As the Next js documentation says) and the first page load is done, the server-side response comes without styles.
I have made use of this repository and have modified it so that the new Nextjs feature, Built-In CSS Support, can be used.
In order for Next js to take over the styles, I have removed the legacy dependencies next-compose-plugins, next-fonts and next-images and have removed the next.config.js file.
To reproduce
git clone https://github.com/turrione/nextjs-mdbreact.git
yarn install
yarn dev
Notice that when a request is made, the response preview is unstyled.
Unstyled response preview
The only way I have managed to fix the error is by adding the styles directly in the Head component of next-head
import Head from 'next/head';
import { MDBContainer } from 'mdbreact';
import NavBar from './NavBar';
import Footer from './Footer';
function Layout(props) {
return (
<>
<Head>
{/* HARDCODING STYLES */}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.0/css/mdb.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
</Head>
<NavBar />
<MDBContainer>{props.children}</MDBContainer>
<Footer />
<style jsx global>{`
#__next {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
`}</style>
</>
);
}
export default Layout;
Now you can see how the server side response comes with styles.
Is there a way to import the css files into the custom _app.js file (as the Nextjs documentation says) and get stylized pages from server-side?
Styled response preview
I have built a small library of several HTML web components for internal company use. Some components are mutually dependent on each other, so I also import them mutually. Until recently, I had no serious issues with this approach, but I am now encountering an error message when loading a HTML page that uses such mutually dependent components.
I have isolated the issue in a small example. Please review the following three files.
test-container.js
import { TestItem } from "./test-item";
export class TestContainer extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" }).innerHTML = `
<style>
* {
position: relative;
box-sizing: border-box;
}
:host {
contain: content;
display: block;
}
</style>
<div>
<slot></slot>
</div>
`;
}
connectedCallback() {
if (!this.isConnected) {
return;
}
for (const node of this.childNodes) {
if (node instanceof TestItem) {
//...
}
}
}
}
customElements.define("test-container", TestContainer);
test-item.js
import { TestContainer } from "./test-container";
export class TestItem extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" }).innerHTML = `
<style>
* {
position: relative;
box-sizing: border-box;
}
:host {
contain: content;
display: block;
}
</style>
<div>
<slot></slot>
</div>
`;
}
}
customElements.define("test-item", TestItem);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<script type="module" src="/test-container"></script>
<script type="module" src="/test-item"></script>
<style>
test-container {
width: 600px;
height: 400px;
background: lightblue;
border: 1px solid;
}
test-item {
width: 200px;
height: 200px;
background: lightgreen;
border: 1px solid;
}
</style>
</head>
<body>
<test-container>
<test-item></test-item>
</test-container>
</body>
</html>
This code seems to work fine.
However, if I switch the two <script> tags in the index.html file, the developer tools console shows the following error:
Uncaught ReferenceError: Cannot access 'TestItem' before initialization
at HTMLElement.connectedCallback (test-container:30)
at test-container:37
Since I import several modules in many of my components, I want to sort them alphabetically (for clarity). In my test example it's fine, but in my actual code it isn't...
So basically I want my modules to be completely independent of the order in which they will be imported by other modules. Is there any way to achieve that?
All suggestions are very welcome. However, I am not allowed to install and use any external/3rd party packages. Even the use of jQuery is not allowed. So a solution should consist of only plain vanilla JS, plain CSS, and plain HTML5, and it should at least work correctly in the latest Google Chrome and Mozilla Firefox web browsers.
When you can't control the order in which Elements are loaded,
you have to handle the dependency in your Element
Use: https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined
whenDefined returns a Promise!
So your <test-container> code needs something like:
customElements.whenDefined('test-item')
.then( () => {
//execute when already exist or became available
});
https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/whenDefined
has a more detailed example waiting for all undefined elements in a page
Dependencies
An Event driven approach might be better to get rid of dependencies.
Make <test-item> dispatch Event X in the connectedCallback
<test-container> listens for Event X and does something with the item
You can then add <another-item> to the mix without having to change <test-container>
Maybe the default slotchange Event can be of help:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSlotElement/slotchange_event
.
Success met welke aanpak je ook kiest
it may help
<!-- This script will execute after… -->
<script type="module" src="1.mjs"></script>
<!-- …this script… -->
<script src="2.js"></script>
<!-- …but before this script. -->
<script defer src="3.js"></script>
The order should be 2.js, 1.mjs, 3.js.
The way scripts block the HTML parser during fetching is baaaad.
With regular scripts you can use defer to prevent blocking, which also delays script execution until the document has finished parsing, and maintains execution order with other deferred scripts.
Module scripts behave like defer by default – there's no way to make a module script block the HTML parser while it fetches.
Module scripts use the same execution queue as regular scripts using defer.
Source
I am trying to bundle my css like below.
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/styles.css"));
But when i run the code i get this.
JavaScript critical error at line 1, column 1 in
http://localhost:49934/Content/css?v=8I6_j_wgn_9yNhfGU_-N-R8Ya98JN2nc600cBlm8VBM1
SCRIPT1002: Syntax error
Assuming my css had some funny characters or invalid paths, i removed everything except the below. It still did not work
.full {
height: 100%;
}
.content {
padding-top: 52px;
padding-right: 10px;
padding-left: 55px;
width: 100%;
}
When i disable bundling, add the link the usual way like below, it works
<link href="~/Content/styles.css" rel="stylesheet" type="text/css" />
I googled and most of the links talk about javascript error in javascript. I dont know why i am getting Javascript error in css.
Any help will be appreciated.
I've got a problem with CssSandpaper script. Once I run it on one of my site's pages, I get following error:
"rules is null" in FF,
"Error: 'rules.length' is null or not an object" in IE,
"Uncaught TypeError: Cannot read property 'length' of null" in Chrome,
so basically object 'rules' is undefined. Here is CSS for my div (id="textTransform"):
#textTransform {
border: 1px solid green;
-sand-transform: rotate(90deg);
width: 23px;
height: 74px;
}
Has anyone of you ever had such issue? Any help would be much appreciated.
Thanks
Two things for me caused an "uncaught exception error" in combination with the csssandpaper.js and the other required scripts for the css sandpaper library.
html5doctor.com Reset Stylesheet
Typekit js
Removing both of those removed the error
Ok. I've got it. This library gets all the references that are listed in "link" tags in you "meta" section in HTML. I've had this line that defines a link to favicon:
<link rel="shortcut icon" href="/favicon.ico" />
The favicon wasn't present at the server and its response was 404. That was the reason. Once I removed it it start working.