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>
Related
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.
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>
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.
I'm building a wordpress theme with angular as described here.
This is my index.html that is loaded by wordpress' index.php:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TITLE</title>
<base href="/wp-content/themes/TITLE/dist/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
The url result is:
http://HOST/wp-content/themes/TITLE/dist/#/ , but should be http://HOST/#/
I need to set the tag in my index.html to enable angular to find its resources. Is there a way to hide the /wp-content/themes/TITLE/dist part before the /#/ from angulars HashLocationStrategy?
I would prefer to hide it from the angular settings, but if a wordpress configuration in the admin view is necessary this would be fine, too.
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>