Prelaod fetches multiple times - html

In the example below im calling the preload tag mechanism to fetch some resources ahead of time. Doing so, preload fetched the css resource multiple times? Why is this happening?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="preload" onload="console.log('script')" as="script" href='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'>
<link rel="preload" onload="this.rel = 'stylesheet'; console.log('css')" as="style" href='https://s3-eu-west-1.amazonaws.com/welcome.b2b.test/form/bundle.css'>
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>React App</title>
</head>
<body>
<script>
window.onload = function() {
console.log("window");
};
</script>
</body>
</html>

Related

'title' tag on the header is missing in TYPO3 template

I set up a website using TYPO3 v9.5.9 and I can't find the <title> tag on the HTML source.
How can I insert the current page <title> automatically into the header?
Here is how my header is currently displayed:
<!DOCTYPE html><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="TYPO3 CMS" />
<link rel="stylesheet" type="text/css" href="typo3conf/ext/frontend_editing/Resources/Public/Css/frontend_editing.css?1562352305" media="all" />
<link rel="stylesheet" type="text/css" href="typo3/sysext/backend/Resources/Public/Css/backend.css?1566293615" media="all" />
This solution solved my problem. It was necessary to remove the line :
config.noPageTitle = 2
Thanks to #Riccardo De Contardi for this solution.

Thymleaf Spring MVC Application Not able to include .css in HTML

I am new to Thymleaf. The following is my folder structure. Here I am not able to include my css file into ".html" file.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Hello Spring MVC</title>
<link rel="stylesheet" media="all" href="../resources/css/bootstrap.min.css" th:href="#{../resources/css/bootstrap.min.css}" />
<link rel="stylesheet" media="all" href="../resources/css/style.css" th:href="#{../resources/css/style.css}" />
<style>
body {
background-color: lightblue;
}
</style>
</head>
Thanks.
The code is working. It is not including CSS because of ""(double-quotes) are not in compatible.(Copied code from a Blog).
Thanks.

How to limit the body can not be drag out in Framework7?

I am using Framework7 for hybird development.
and In my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>My App</title>
<!-- Path to Framework7 Library CSS-->
<link rel="stylesheet" href="dist/css/framework7.ios.min.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="css/my-app.css">
</head>
<body>
....
</body>
</html>
The effect on my simulator:
I want the body is fixed, can not be drag, how to fix the position, if drag can not can not let the whole view move up or down ?
Try to add this to you config.xml
<preference name="DisallowOverscroll" value="true" />

Why won't my viewport tag properly use device width on most mobile devices?

I am using following meta tag.
<!DOCTYPE html>
<html class="no-js" data-placeholder-focus="false">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=0" />
<meta name="mobileoptimized" content="0" />
<title>index</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/custom.css">
</head>
when I open website from mobile, it is not responsive at all. I have not changed my css code.
Please, help me! Thank you!

Adding multiple images for share button og:image tags

I try to do include multiple og:image meta properties to associate multiple images with my page. According to Facebook's Open Graph protocol documentation, you have only put multiple og:image tags in the html head.
That's what I did but unfortunately it doesn't work. I would be pleased, if anyone could give me a hint.
I have been using the debug page and Facebooks seems to parse it just fine because I see my metatag images:
Meta Tag <meta property="og:title" content="United Serbian Soccer Club" />
Meta Tag <meta property="og:description" content="United Serbian Soccer Club" />
Meta Tag <meta property="og:url" content="http://www.unitedserbians.com" />
Meta Tag <meta property="og:image" content="http://www.unitedserbians.com/images/USSC_futsal_tournament_2016.png" />
Meta Tag <meta property="og:image" content="http://www.unitedserbians.com/images/anualindoortournament2016/FKCZ_MKE_open_winner.jpg" />
Even see the images in the og:image Open Graph properties section, however it always takes only first image and ignores others.
Here is currently my main HTML code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>United Serbians</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="images/USSC_logo_icon.png" type="image/x-icon"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/coin-slider.css" />
<style type="text/css">
body {
background-image: url(images/main_bg.jpg);
}
a:link {
color: #DF0000;
}
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/droid_sans_400-droid_sans_700.font.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/coin-slider.min.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<meta property="fb:admins" content="20312314" />
<meta property="og:title" content="United Serbian Soccer Club" />
<meta property="og:description" content="United Serbian Soccer Club" />
<meta property="og:url" content="http://www.unitedserbians.com" />
<meta property="og:image" content="http://www.unitedserbians.com/images/USSC_futsal_tournament_2016.png" />
<meta property="og:image" content="http://www.unitedserbians.com/images/anualindoortournament2016/FKCZ_MKE_open_winner.jpg" />
</head>
You can see an example page here:
http://www.unitedserbians.com/