I am having an issue linking my CSS to HTML on my computer. My html file has the correct link and name for the CSS file but when I open by HTML file in chrome there is no styling. If I open up dev tools after that and go to source, only my js and html file show in the folder even though there is json, css, html, and js file in the project folder. The CSS file name is index.css, the js file name is index.js, and the html file name is index.html. If you know what could be wrong please let me know. I ran both files here and they work here but not when I try and run my html file on chrome.
CODE:
body {
margin: 0;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
min-width: 400px;
}
input {
width: 100%;
padding: 10px;
box-sizing: border-box;
border: 1px solid #5f9341;
margin-bottom: 4px;
}
button {
background: #5f9341;
color: white;
padding: 10px 20px;
border: 1px solid #5f9341;
font-weight: bold;
}
#delete-btn {
background: white;
color: #5f9341;
}
ul {
margin-top: 20px;
list-style: none;
padding-left: 0;
}
li {
margin-top: 5px;
}
a {
color: #5f9341;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link src="index.css" ref="stylesheet" type: "text/css">
</head>`enter code here`
<body>
<input type="text" id="input-el">
<button id="input-btn">SAVE INPUT</button>
<button id="tab-btn">SAVE TAB</button>
<button id="delete-btn">DELETE</button>
<ul id="ul-el">
</ul>
<script src="index.js"></script>
</body>
</html>
Instead of "src" it needs to be "href", and "type:" must be "type="
<link href="index.css" rel="stylesheet" type="text/css">
Related
I tried to make this simple notes app, just for learning javascript. Then I got error when I tried to hit the "edit" button on this program. It was saying that marked is not a function.
My code is here:
HTML
<html>
<head>
<title>Notes App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.2.12/marked.min.js"></script>
</head>
<body>
<div class="notes">
<div class="tools">
<button class="edit"><i class="fas fa-edit"></i></button>
<button class="delete"><i class="fas fa-trash-alt"></i></button>
</div>
<div class="main hidden">
</div>
<textarea></textarea>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova&display=swap');
* {
box-sizing: border-box;
}
body {
display: flex;
flex-wrap: wrap;
background-color: #7BDAF3;
margin: 0;
font-family: 'Ibarra Real Nova', serif;
}
.notes {
background-color: #fff;
width: 400;
height: 400;
margin: 20px;
}
.notes .tools {
background-color: #9ec862;
display: flex;
justify-content: flex-end;
padding: 0.5rem;
}
.notes .tools button {
background-color: transparent;
border: none;
color: #fff;
font-size: 1.5rem;
margin-left: 0.5rem;
}
.notes .main {
height: 100%;
width: 100%;
}
.notes textarea {
outline: none;
font-family: inherit;
border: none;
height: 100%;
width: 100%;
}
.notes .hidden {
display: none;
}
Javascript
const notesEl = document.querySelector('.notes');
const editBtn = document.querySelector('.edit');
const deleteBtn = document.querySelector('.delete');
const main = notesEl.querySelector('.main');
const textArea = notesEl.querySelector('textarea');
editBtn.addEventListener('click', () => {
main.classList.toggle('hidden');
textArea.classList.toggle('hidden');
});
textArea.addEventListener("input", (e) => {
const { value } = e.target;
main.innerHTML = marked(value);
});
It supposed to show the mark when I hit the edit button. But, even without giving any input of markdown, the result is nothing. And it showed an error on the console log.
I found the problem. So that there is a bug in this version of mark, then I change the marked version to 3.0.7. And its all works fine, cause its fixed in this version.
So change the way you import it in html code:
from:
https://cdnjs.cloudflare.com/ajax/libs/marked/4.2.12/marked.min.js
to:
https://cdn.jsdelivr.net/npm/marked#3.0.7/marked.min.js
I just started learning JS, and im not understanding it that well. I am not that great at coding generally, so apologies for this really barebones and very possibly wrong website, but all I wanted to accomplish at the moment was to change the websites background color when I press the button. When I did it in <script< it worked, but when I moved it into a separate JS file, it stopped working. The error message I get is: SyntaxError: Unexpected token '}'. Expected an opening '{' at the start of a function body.
Could someone please help? Thank you in advance!
function makeRed() {
document.getElementById('temp').style.backgroundColor = 'lightsalmon';
}
let btnRed = document.getElementById = ('btnRed');
btnRed.addEventListener("click", makeRed);
body {
background-color: lightyellow;
text-align: center;
padding: 0;
margin: 0;
}
.temperature {
color: darkgoldenrod;
font-family: Optima, sans-serif;
}
input {
border: none;
border-bottom: 2px solid darkgoldenrod;
background-color: lightyellow;
width: 50px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#header {
background: darkgoldenrod;
font-size: 20px;
color: lightyellow;
font-family: Optima, sans-serif;
}
<html>
<head>
<title>Sun tester</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="icon" href="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcdn.onlinewebfonts.com%2Fsvg%2Fimg_40038.png&f=1&nofb=1" type="image/x-icon">
</head>
<body>
<div id="header">
<h1 id="h1">Sun Tester</h1>
</div>
<div class="temperature">
<p id="temp2">Temperature:
<input type="number" id="temp"> °C</p>
</div>
<button type="button" id="btn-Red">Click Me!</button>
<script src="script.js"></script>
</body>
</html>
you are assigning both btnRed and the document.getElementById method to a String value 'btnRed' instead of actually running the getElementById method and passing it an argument "btnRed"
so just change the
let btnRed = document.getElementById = ('btnRed'); to
let btnRed = document.getElementById('btnRed');
You need to change the HTML element btn-Red to be btnRed and fix up your JavaScript... try this.
function makeRed() {
let r = document.getElementById('temp')
r.style.backgroundColor = 'lightsalmon';
}
let btnRed = document.getElementById('btnRed');
btnRed.addEventListener("click", makeRed);
body {
background-color: lightyellow;
text-align: center;
padding: 0;
margin: 0;
}
.temperature {
color: darkgoldenrod;
font-family: Optima, sans-serif;
}
input {
border: none;
border-bottom: 2px solid darkgoldenrod;
background-color: lightyellow;
width: 50px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#header {
background: darkgoldenrod;
font-size: 20px;
color: lightyellow;
font-family: Optima, sans-serif;
}
<html>
<head>
<title>Sun tester</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="icon" href="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcdn.onlinewebfonts.com%2Fsvg%2Fimg_40038.png&f=1&nofb=1" type="image/x-icon">
</head>
<body>
<div id="header">
<h1 id="h1">Sun Tester</h1>
</div>
<div class="temperature">
<p id="temp2">Temperature:
<input type="number" id="temp"> °C</p>
</div>
<button type="button" id="btnRed">Click Me!</button>
<script src="script.js"></script>
</body>
</html>
Start tag head seen but an element of the same type was already open.
also I got some other errors:
" Saw <?. Probable cause: Attempt to use an XML processing instruction in HTML. (XML processing instructions are not supported in HTML.) "
and
" No p element in scope but a p end tag seen. "
I have no clue how to fix them.
<!DOCTYPE html>
<html lang="pl">
<style>
html, body { margin: 0; padding: 0; color: black; background-color: grey;}
#strona { position: absolute; color: white}
#rects { position: relative; width: 300px; height: 125px; border: 1px solid #FF0000; color: yellow; margin: 5px; padding: 2px;}
</style>
<head>
<meta charset="UTF-8"/>
<title> site</title>
</head>
<body>
<div> <script>
function clickbutton1(){
document.getElementById("opis").innerHTML = Date();
}
</script>
</div>
<div id="strona">
<h1>test</h1>
<?php
echo "<p>data replacement</p>";
echo "<div id='rects'>
<!-- starting of the function -->
<p id='opis'> internal description </p>
<script>
document.getElementById('rects').onclick = clickbutton1;
</script>
</div>";
?>
</div>
</body>
</html>```
There were some added characters under div#strona that were interfering with how the code was being run.
In order to make the Javascript functional, add the clickbutton1() onclick function directly to the HTML element.
Below is the reformatted code with HTML/CSS/Javascript in their own respective files:
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
<head>
<meta charset="UTF-8" />
<title> site</title>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
#weemizo Yes! I added the CSS styles to a style tag and the JS into a script element. They are now both placed in the head tag.
<html>
<head>
<meta charset="UTF-8" />
<title>Site</title>
<style>
html,
body {
margin: 0;
padding: 0;
color: black;
background-color: grey;
}
#strona {
position: absolute;
color: white
}
#rects {
position: relative;
width: 300px;
height: 125px;
border: 1px solid #FF0000;
color: yellow;
margin: 5px;
padding: 2px;
}
</style>
<script>
function clickbutton1() {
return document.getElementById("opis").innerHTML = Date();
}
</script>
</head>
<body>
<div id="strona">
<h1>test</h1>
<div onclick="clickbutton1()" id='rects'>
<p id='opis'></p>
</div>
</div>
</body>
</html>
I have placed a div on html page and text under it with center align. A custom java script button is also placed for printing under the div content. When i press a button it previews the text with left align. Please anyone guide how to set or apply my css or style to this div for center align. Complete html code is following written in asp.net. Thanks in advance
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="margin_issue.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1">
<div id="DivForPrint" class="myDivToPrint" style="border: 1px dotted black; text-align: right; padding-left: 250px; width: 600px">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
<br />
This is <span style="color: #0090CB">Mudassar Khan</span>.<br />
Hoping that you are enjoying my articles!</span>
</div>
<br />
<input type="button" value="Print" onclick="javascript: printDiv('DivForPrint')" style="width: 80px; height: 30px;" />
</form>
</body>
</html>
<script type="text/javascript">
function printDiv(divID) {
//Get the HTML of div
var divElements = document.getElementById(divID).innerHTML;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
</script>
EDIT
Your code is working awesome according to my need. I have little observations that i need to understand. I have copied two portions from your code, CSS and javascript. Please see below.
<style>
.page_size { border: 1px dotted black; text-align: left; width: 800px; height: 950px; }
.instr_date { text-align: right; padding-right: 0px; padding-top: 40px;}
.benef_name {text-align: left; padding-left: 50px; padding-top: 50px; }
.leftDiv { border: 1px dotted black; text-align: left; padding-left: 0px; }
</style>
Javascript
function printDiv(divID) {
var div = document.getElementById(divID).outerHTML;
var mywindow = window.open('', 'Print Contents');
mywindow.document.write('<html><head><title>Print Contents</title>');
mywindow.document.write('<style> .page_size {border: 1px dotted black; text-align: left; width: 800px; height: 950px; }</style>');
mywindow.document.write('<style> .instr_date {text-align: right; padding-right: 0px; padding-top: 40px; }</style>');
mywindow.document.write('<style> .benef_name { text-align: left; padding-left: 50px; padding-top: 50px; }</style>');
mywindow.document.write('<style> .leftDiv {border: 1px dotted black; text-align: left; padding-left: 0px; }</style>');
mywindow.document.write('</head><body>');
mywindow.document.write(div);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
}
</script>
You can see above i have written two css files, one is normal under style tag and other is injected to java script and i am writing many lines for css in java script. Now i have two simple questions following:-
1- Cannot we write one css which should effect everywhere?.
2- If the answer of first question is no: then how can i avoid writing multiple css lines in java script.
Many thanks.
Have a look at the following to point you in the right direction. Instead of changing the entire page and then reverting it, open a new window to do the print. This will stop any potentially nasty bugs appearing when revert the page. Also having 2 different class names for non-print and print DIVs may be useful. You can put these in an external CSS file and then add the CSS link to the new window aswell.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
</title>
<style>
.myDiv {
border: 1px dotted black; text-align: right; padding-left: 250px; width: 600px;
}
</style>
<script type="text/javascript">
function printDiv(divID) {
var div = document.getElementById(divID).outerHTML;
var mywindow = window.open('', 'Print Contents');
mywindow.document.write('<html><head><title>Print Contents</title>');
mywindow.document.write('<style>.myDiv {border: 1px dotted black; text-align: center; width: 100%;}</style>');
mywindow.document.write('</head><body>');
mywindow.document.write(div);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();
}
</script>
</head>
<body>
<form id="form1">
<div id="DivForPrint" class="myDiv">
<span style="font-size: 10pt; font-weight: bold; font-family: Arial">Hello,
<br />
This is <span style="color: #0090CB">Mudassar Khan</span>.<br />
Hoping that you are enjoying my articles!</span>
</div>
<br />
<input type="button" value="Print" onclick="javascript: printDiv('DivForPrint')" style="width: 80px; height: 30px;" />
</form>
</body>
</html>
Here's a quick background on what I'm trying to do. I have a contact form on my website, and when the user clicks on 'Submit', I want it to do this:
User clicks submit
Confirmation box opens, asking user to agree or disagree to the
disclaimer
if agrees = submit form
if disagrees = close confirmation box
Here is what I want to know. I don't necessarily want to style the actual alert box, since I know that is not possible, what I want to do is style the text inside the alert box; the "disclaimer". I tried just adding header tags and bold tags to it, but those just generate the text and not the actual styles.
Here's the code I'm using, its just a very simple alert box script.. if you have a better idea, please let me know.
<SCRIPT language="JavaScript">
<!--
function go_there()
{
var where_to= confirm("DISCLAIMER TEXT WILL GO HERE");
if (where_to== true)
{
window.location="http://mcgehee.ace-onecomputers.com/nlphpmail.php";
}
else
{
}
}
//-->
HTML:
<button class="button" id="submit" value="send" type="submit" name="submit" onClick="go_there()">Send</button>
Also, another issue i'm having with this is that instead of it just closing the dialog box, it still continues the script.
You cannot style alert or confirm box. You have to use DHTML box.
Using Impromptu
Try this, I used jQuery Impromptu plugin http://trentrichardson.com/Impromptu/
Demo: http://jsfiddle.net/muthkum/4h8cX/6/
For full code, check out page source on http://fiddle.jshell.net/muthkum/4h8cX/6/show/
Using smoke.js
Demo: http://jsfiddle.net/muthkum/8qXsv/3/
UPDATE:
Here is the full code using jQuery Impromptu
You can see, I've included jquery-1.8.2.js and jquery-impromptu.4.0.min.js. Also styles are included in the below codes. I hope this helps.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by muthkum</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src="http://trentrichardson.com/Impromptu/scripts/jquery-impromptu.4.0.min.js"></script>
<style type='text/css'>
/*
------------------------------
Impromptu
------------------------------
*/
.jqifade{
position: absolute;
background-color: #777777;
}
div.jqi{
width: 400px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
position: absolute;
background-color: #ffffff;
font-size: 11px;
text-align: left;
border: solid 1px #eeeeee;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 7px;
}
div.jqi .jqicontainer{
font-weight: bold;
}
div.jqi .jqiclose{
position: absolute;
top: 4px; right: -2px;
width: 18px;
cursor: default;
color: #bbbbbb;
font-weight: bold;
}
div.jqi .jqimessage{
padding: 10px;
line-height: 20px;
color: #444444;
}
div.jqi .jqibuttons{
text-align: right;
padding: 5px 0 5px 0;
border: solid 1px #eeeeee;
background-color: #f4f4f4;
}
div.jqi button{
padding: 3px 10px;
margin: 0 10px;
background-color: #2F6073;
border: solid 1px #f4f4f4;
color: #ffffff;
font-weight: bold;
font-size: 12px;
}
div.jqi button:hover{
background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{
background-color: #BF5E26;
}
.jqiwarning .jqi .jqibuttons{
background-color: #BF5E26;
}
</style>
<script type='text/javascript'>//<![CDATA[
function go_there(){
$.prompt('<b>DISCLAIMER</b> <span style="font-weight:normal">TEXT WILL GO HERE</span>',{
buttons: { Ok: true, Cancel: false},
callback: function(e,v,m,f){
if(v){
window.location="http://mcgehee.ace-onecomputers.com/nlphpmail.php";
}else{
}
}
});
}
//]]>
</script>
</head>
<body>
<button class="button" id="submit" value="send" type="submit" name="submit" onClick="go_there()">Send</button>
</body>
</html>