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>
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>
What I was trying to do is to make my ember app load faster, the index.html file looks like this
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Jobber</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
{{content-for "head"}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/custom.css">
{{content-for "head-footer"}}
</head>
<body>
{{content-for "body"}}
<script src="assets/vendor.js"></script>
<script src="assets/custom.js"></script>
{{content-for "body-footer"}}
</body>
</html>
The size of vendor.js and custom.js together before uglify is 11mb, after uglify from ember-cli is about 4mb.
Then I tried to profile it in chrome Timeline(5x CPU throttling) to see if there is a noticeable difference. And here is what I got, top 3 charts are summaries after being uglified, bottom 3 are without uglify.
My question is will uglify really make it load faster? The only difference I can tell is the time spent in category Other is less, the Scripting part is very close and sometimes even longer.
I did a closer look into the time segmentations, seems like the compile time have decreased a lot but in total there is no much difference, if it does save time, where is the time being saved?
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 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>