I am making a website using PHP to open a static website on Heroku.
I have a problem where everything is fine before deploying on Heroku. Once it is deployed suddenly there are CSS :root head code showing as plain text on all the html files. Here is a picture.
When I do inspect it shows that the plain text is part of the head element. I don't get why it is showing, I don't know if it's because of something to do with PHP or just Heroku. Please help.
Here is some CSS code I have for the file and html stuff too. (This is in the file base.css)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh Sans", sans-serif;
display: block;
}
head {
display: none;
}
.navbar {
background-color: #b6bcc2;
/*border-bottom: 5px solid white;*/
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
(This is in the file home.html) There are no tags and I have only used tags.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Project H.E.L.L.O.</title>
<link rel="stylesheet" href="../css/base.css" type="text/css" />
<link rel="stylesheet" href="../css/home.css" type="text/css" />
</head>
Here is also the only PHP I used :
<?php include_once("html/home.html") ;
I also have a composer.json file with {} and nothing else.
Related
I have some HTML and JavaScript, but this error appears:
I'm building a timer. This is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Timer</title>
</head>
<body>
<div class="timer">
</div>
<script src="appCT.js" type="module"></script>
</body>
</html>
JavaScript File1
export default class Timer {
constructor(root){
console.log(root);
root.innerHTML = Timer.getHTML();
this.el = {
minutes: root.querySelector(".timer__part--minutes");
seconds: root.querySelector(".timer__part--seconds");
control: root.querySelector(".timer__btn--control");
reset: root.querySelector(".timer__btn--reset");
}
console.log(this.el);
}
static getHTML(){
return `
<span class="timer__part timer__part--minutes">00</span>
<span class="timer__part timer__part">:</span>
<span class="timer__part timer__part--seconds">00</span>
<button type="button" class="timer__btn timer__btn--control timer__btn--start">
<span class="material-icons">play_circle_filled</span>
</button>
<button type="button" class="timer__btn timer__btn--reset">
<span class="material-icons">timer</span>
</button>`
}
}
JavaScript File 2
import Timer from "Timer.js";
new Timer{
document.querySelector(".timer");
}
Css code
body{
background: #dddd;
margin: 24px;
}
.timer{
font-family: sans-serif;
display: inline-block;
padding: 24px 32px;
border-radius: 30px;
background: white;
}
.timer__part{
font-size: 40px;
font-weight: bold;
}
.timer__btn{
width: 50px;
height: 50px;
margin-left: 16px;
border-radius: 50%;
border: none;
background: gray;
}
.timer__btn--control{
background: steelblue;
}
.timer__btn--reset{
background: red;
}
The code should be able to display the timer, and each HTML element should be linked with its respective part in the design. I've tried to change the type "attribute" of my script element to text/javascript, but it has not yielded fruits.
Thank you
Your browser will not redirect to such an address.
1- I would recommend trying to work with localhost.
2- VSCode Live Server
And I found something maybe useful to you.
"Cross origin requests are only supported for HTTP." error when loading a local file
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
Website screenshot in PC
Website screenshot in the mobile device
Here is the HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght#700&display=swap" rel="stylesheet"
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "boi.css">
</head>
<body>
<div class="first">
<h1>Hey!</h1>
</div>
</body>
</html>>
and this is the CSS code
body {
background-color: rgb(20, 18, 18);
}
.first {
position: relative;
margin-right: 300px;
color: white;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
}
use following css
.first
{
color: white;
text-align: center;
}
.first h1
{
display: inline-block;
}
Hey There are many solutions.
You can set width of element like the below code.
Or You can set the display: options into the element (for example, display:contents)
body {
background-color: rgb(20, 18, 18);
}
.first {
position: relative;
margin-right: 300px;
color: white;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
width: 100%;
/* display: contents; */
}
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght#700&display=swap" rel="stylesheet"
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "boi.css">
<body>
<div class="first">
<h1>Hey!</h1>
You can use flexbox especially in media queries for mobile size or desktop size
.first {
position: relative;
margin-right: 300px;
color: white;
width:100%;
display:flex;
justify-content:center;
align-items:center;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght#700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "boi.css">
</head>
<body>
<div class="first">
<h1>Hey!</h1>
</div>
</body>
</html>
I think you just need to remove your margin-right: 300px; - that's going to end up moving everything 300px to the left, thus leaving it very off-center on mobile.
I'm not very skilled at CSS. I have website that has 4 stylesheets and 3 JS files-using Bootstrap 4 and jQuery. When I deployed it on live and refresh the page, all was working fine.
However, when I go to website from mobile, it works fine the first time but when I refresh, all the CSS and HTML is broken (this usually happens after 1st or 2nd refresh). After it is broken, I refresh it once or twice, it fixes the issue. I searched about it and some say it is happening because of using relative positioning and floating, but when I commented out those lines from my CSS files, I still have the same problem. Does anyone have any idea about how to fix this issue?
index html
**
<!DOCTYPE html>
<html lang="en">
<head>
<title>Landor App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<style></style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/fonts.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/intro.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/home.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/video.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/modals.css" type="text/css"/>
</head>
<body>
<!--INTRO PAGE-->
<div id="intro-page" class="container-fluid" style="display: none">
<div class="row intro-header">
<div class="col-12"><img id="landor-worldmark"></div>
</div>
<div class="row intro-text">
<div class="intro-text col-12">
<h3>Hi Andrew,</h3><br>
<h3>We can't wait to welcome you to Landor London.
Until then please take a few minutes
<span style="white-space: nowrap;">(3, to be exact)to explore more about us...</span></h3><br>
<h3>Regards,</h3>
<h3>Peter</h3><br><br>
<span id="enter-button">Enter</span>
</div>
</div>
<div class="intro-footer row">
<div class="col-12"><img class="img-fluid intro-boat"></img></div>
</div>
</div>
intro.css
html {
height: 100%;
}
.intro-text{
font-family: "apercuBold";
}
#intro-page{
padding-left: 20px;
padding-right: 20px;
}
body {
background-color:black;
}
.container-fluid{
padding-right: 10px;
padding-left: 10px;
}
.intro-text{
position: relative;
top: 5%;
}
#enter-button{
font-family: "timeposRegular";
text-decoration: underline;
font-size: 150%;
cursor: pointer;
position: relative;
top: 20%;
}
.intro-header{
padding-top: 3%;
}
.intro-text{
padding-top: 50px;
padding-bottom: 50px;
}
#landor-worldmark{
content:url("../assets/Landor_Logo.png");
width: 120px;
height: 30px;
}
.intro-boat{
content:url("../assets/boat2.png");
max-width: 400px;
height: auto;
float:right;
}
#media screen and (max-width: 450px) {
.intro-text > h3{
font-size: 100%;
}
.intro-text{
font-size: 100%;
line-height: 1.4;
padding-top: 30px;
padding-bottom: 30px;
}
#enter-button{
font-size: 100%;
}
.intro-boat{
max-width: 200px;
height: auto;
float:right;
}
.intro-header{
padding-top: 5%;
}
}
#media screen and (max-width: 350px) {
.intro-text > h4{
font-size: 90%;
}
.intro-text{
font-size: 94%;
line-height: 1.1;
padding-top: 30px;
padding-bottom: 30px;
}
#enter-button{
font-size: 94%;
}
.intro-boat{
max-width: 200px;
height: auto;
}
.intro-header{
padding-top: 5%;
}
}
.intro-footer{
position: fixed;
bottom: 10%;
width: 100%;
}
**
I just pulled out my phone and went to the site, and used the Browser tools phone emulator option (i don't know if that's what it's called) and it looks just fine on reload. Maybe try restarting your phone or clearing cache.
Is it because you are tilting your phone and switching the view from horizontal and vertical (That still shouldn't change anything)
After a whole day, I finally solved this problem by adding "?" at the end of my stylesheets paths on the link tag. It's a caching issue, although I disabled caching, for some reason it did not work. Now I refreshed the page > 10 times and never experienced any problem! I think, because of the question mark, when it is loading the CSS, first it's checking to see if there is another version available which prevents it from fetching from the cache completely.
I wanna to get element background value from javascript file.
I has three files -
html.html
css.css
js.js
html.html
<!DOCTYPE html>
<html>
<head>
<title> I'm Button! </title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<div class="myBlock" onclick="heyJS()"></div>
</body>
</html>
css.css
.myBlock {
width: 300px; max-width: 100%;
height: 100px; max-height: 100%;
margin: 0 auto; margin-top: 100px;
font-size: 50px; font-weight: lighter; font-style: normal; text-align: center;
line-height: 100px; position: relative;
background-color: #83DF31;
}
js.js
function heyJS() {
alert(document.getElementsByClassName('myBlock')[0].style.backgroundColor);
}
After running the scrpit,I only get blank alert box.
How can i get div background value ?
You can replace your alert() with this
alert(window.getComputedStyle(document.getElementById('myBlock')).backgroundColor);
or
alert(window.getComputedStyle(document.getElementsByClassName('myBlock')[0]).backgroundColor);
And modify your html a little bit if you using the first one.
<div id="myBlock" class="myBlock" onclick="heyJS()"></div>
Try the following:
window.getComputedStyle(document.querySelector(".myblock")).getPropertyValue("background-color");
I have these files in the same folder:
index.html
style.css
script.js
I want the nav#menu be nav#menu.sticky on top when I scroll. It should be like http://iconmonstr.com/ but nothing. I only know html and css.
index.html
<!DOCTYPE html>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<header id="main-header">
<h1>Title</h1>
<h2>Slogan</h2>
</header>
<nav id="menu">
</nav>
<section id="main-section">
</section>
<footer id="main-footer">
© 2014 Copyright
</footer>
style.css
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: sans-serif;
}
body {
margin: 0;
}
h1 {
font-size: 3em;
margin: 0;
}
h2 {
font-size: 2em;
margin: 0;
}
#main-header {
background: #08c;
color: #fff;
height: 10em;
padding: 2em;
text-align: center;
}
#menu {
background: red;
height: 3em;
width: 100%;
}
.sticky {
position: fixed;
top: 0;
}
#main-section {
border: 0.1em solid #ccc;
color: #444;
height: 1000px;
}
#main-footer {
font-size: 0.75em;
text-align: center;
margin: 1em;
}
script.js
$(document).ready(function() {
var menu = $("#menu");
var pos = menu.position();
$(window).scroll(function() {
if ($(window).scrollTop() >= pos.top) {
menu.addClass("sticky");
} else {
menu.removeClass("sticky");
}
});
});
You're using jQuery in script.js but you don't include the library.
You have malformed html code.
Try following code. It's working for me.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
<header id="main-header">
<h1>Title</h1>
<h2>Slogan</h2>
</header>
<nav id="menu">
</nav>
<section id="main-section">
</section>
<footer id="main-footer">
© 2014 Copyright
</footer>
<script src="script.js"></script>
</body>
</html>
What I've changed?
I've added body and head tags,
I've put script which include jQuery from CDN in head tag but you can include this just before including your script and it can be loaded locally, not from CDN,
I've move your script tag to the end because it's generally good practice. Briefly speaking page is rendered faster.
In addition, you wrote "The script doesn't work and in the developer tools of Firefox and Chrome in the section Javascript I don't see anything.". You should see in the console tab in Chrome: "Uncaught ReferenceError: $ is not defined".
On the future: you should paste the code much earlier.
old:
Try this:
<script src="script.js" type="application/javascript"></script>
Information for downvoters:
in HTML 4.x type attribute should be specified. In html5 is optional.
When you type
<script src="script.js"></script>
in HTML document, you create a "relationship" (browser loads JS and parses it accordingly)
Same goes for CSS files. If they are in same page, they can interact (you can set CSS classes by JS on elements)
Beginner gave an example of how to provide function to your javascript file.
When adding files to your html source, you must use html syntax.
<script src="script.js">
/**
* Additional code may even go here
*/
</script>
Follows this syntax.
When adding the css file you'll want to continue to use html syntax as well.
<link href="style.css" rel="stylesheet" type="text/css">