Codepen live view full/back screen issue - javascript

I have written some HTML, CSS, and JS to create a small and fun project which was working fine in both editor as well as live mode, but unfortunately, now the live view mode is not working correctly, also my code is all fine. Here is my codepen project link https://codepen.io/affu-72/full/jOxaLWw
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap"
rel="stylesheet">
<title>Clock</title>
</head>

Related

Why does sumoselect.css work on localhost but not on live server?

I am using the sumoselect.css to have multiselect listboxes. Everything works fine on my test machine but when I upload everything to the live server the css does not work. From what I have gathered I have a reference problem but I can't seem to figure it out. I am using masterpages and so I will show the header section of the masterpage for your review. I am not sure if the js files need to be listed in a particular order. Thank you for your guidance. I have read other articles here that talked about referencing but I am not having any luck.
<head id="Head1" runat="server">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://www.acmenotary.com/sumoselect.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://www.acmenotary.com/jquery.sumoselect.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="https://www.thenotaryfamily.com/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server" />
</head>
I have changed the reference lines to all types of variations without any luck.

My JavaScript file isn't linking to my HTML file [duplicate]

This question already has answers here:
External JavaScript Not Running, does not write to document
(4 answers)
Do scripts in the document head always execute before DOMContentLoaded fires?
(2 answers)
How can an external Javascript file affect an HTML file's DOM?
(5 answers)
Closed 1 year ago.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<script src="./main.js"></script>
<title>Florida Plan - Financing and Planning</title>
</head>
</html>
Internal JS works fine and I wouldn't mind using it, but I want to start getting into the habit of using external JS files. I've tried linking it, and it doesn't seem to work. I gave it a small test with just one line of code... Also, it didn't correct itself after adding a semi-colon.
document.getElementById("rent").innerHTML = "56" // external
Internal worked
<script>
document.getElementById("rent").innerHTML = "56" // internal
</script>
It only seemed to work in the script tag inside the HTML document. I've also tried specifying full paths to the file, which is in the same directory, it doesn't seem to work. Screenshot of directory. If anyone could help, it'd be great!

Spring Boot Static content issue

Edit: I am using Intellij ultimate.
I attempted to look through similar questions but wasn't able to find an answer to help me.
I've gotten CSS to work with spring boot. However, Js still won't function.
I used this statement to get CSS to work.
application.properties
spring.web.resources.static-locations=classpath:/
and ive added webjar jquery to dependencies
forgive my code its a bit sloppy this is just test file
Html
<head>
<link th:href = "#{../static/css/main.css}" rel="stylesheet">
<script src='/webjars/jquery/3.0.0/jquery.js'></script>
<link type="javascript" href="/static/js/script.js">
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Of Day</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500&display=swap" rel="stylesheet">
</head>
I've used both HTML and thyme.

ReactJS doesn't work with Material Design Lite

I'm developing a site with ReactJS and I'm using MDL.
Well my problem is basically the css of the framework is working perfectly but for some reason the js of the framework doesn't work. As for example the tabs
but I saw when I refresh the page the js of the framework works.
I cannot see any error in the console. Any idea how to fix it and why is happening it? probably I'm adding the dependencies of the framework in a wrong way.
below is the code of my index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Gonzalo Barba - personal website.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Gonzalo Barba</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.grey-pink.min.css" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div id="root" class="mdl-layout mdl-js-layout mdl-layout--fixed-header"></div>
<script src="bundle.js"></script>
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
</body>
</html>

Can't get Modernizr to load

I'm sure this is something daft, but for the life of me cannot find a simple solution. I'm new to using Modernizr and wanted to do a little cross browser testing to utilise its detection of support for svg's, but I can't get the thing to load!Any help would be great...
link to working example
<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script>
</head>

Categories