CSS - JavaScript Not Being Implemented - javascript

I fetched an html file using fetch api and took the div components and embedded them into another html file. The css is not being applied after the process is complete. Nor is the javascript file being called. I checked the file paths and they are correct. Does the css and javascript tags not transfer over when they are fetched using the fetch api?
***Main script.js***
let testSide = document.querySelector('#test-sidebar')
let htmlUrl = './TextBox/index.html'
fetch(htmlUrl)
.then((result)=>{
return result.text()
}).then((html)=>{
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html')
var doDo = doc.querySelector('.parent-container')
testSide.appendChild(doDo)
}).catch((error)=>{
console.log(error)
})
***Main HTML File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>To Do</title>
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href='style.css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="test-sidebar">
</div>
<script src="script.js"></script>
</body>
</html>
***Second Html File***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notbox</title>
<link rel="stylesheet" href="style.css">
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="parent-container">
<!---Select items------>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<ul class="list" id="list">
</ul>
</div>
<button type="button" class="create-text-box">Create Text Box</button>
</div>
</div>
<!--Display notebox-->
<div class="notebox-container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<textarea class="list" id="noteList" ></textarea>
</div>
<button type="button" class="copy-text">Copy Text</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
***CSS of second html file***
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
width: 100%;
height: 100vh;
font-family: 'Titillium Web', sans-serif;
}
/*------------------------container-----------------------*/
.parent-container{
position: relative;
width: 100%;
height: 540px;
max-height: 5400px;
}
/*------------------------container-----------------------*/
.container{
position: absolute;
top: 0;
left: 10px;
width: 400px;
margin: 0 auto;
box-shadow: 5px 5px 8px rgb(171, 178, 185);
border-radius: 15px 15px 0 0;
}
/*--------------------------header-----------------------*/
.header{
position: relative;
width: 100%;
height: 150px;
background-color: #2E86C1;
border-radius: 15px 15px 0 0;
}
/*---------------------------content------------------------*/
.content{
position: relative;
width: 100%;
height: 390px;
max-height: 390px;
background-color: #EAEDED;
overflow: hidden;
}
.content::-webkit-scrollbar{
display: none;
}
.content ul{
padding: 0;
margin: 0;
}
.items-content{
position: relative;
width: 100%;
height: calc(100% - 35px);
max-height: calc(100% - 35px);
overflow: auto;
border-bottom: 1px solid #D6DBDF;
}
.item{
position: relative;
border-bottom: 1px solid #EBEDEF;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 45px;
min-height: 45px;
background-color: white;
display: flex;
align-items: center;
cursor: pointer
}
.item:hover{
background-color: #EAECEE
}
.item p{
position: absolute;
padding-left: 35px;
height: 45px;
line-height: 45px;
width: 100%;
white-space: nowrap;
}
/*--------------------------Create Text Box--------------------------*/
.create-text-box{
position: absolute;
border: none;
outline: none;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: #21618C;
color: white;
cursor: pointer
}
/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container{
position: absolute;
top: 0;
right: 10px;
width: 400px;
margin: 0 auto;
box-shadow: 5px 5px 8px rgb(171, 178, 185);
border-radius: 15px 15px 0 0;
}
/*--------------------------header-----------------------*/
.notebox-container .header{
position: relative;
width: 100%;
height: 150px;
background-color: #2E86C1;
border-radius: 15px 15px 0 0;
}
/*---------------------------content------------------------*/
.notebox-container .content{
position: relative;
width: 100%;
height: 390px;
max-height: 390px;
background-color: #EAEDED;
overflow: hidden;
}
#noteList
{
resize: none;
font-size: 15px;
font: serif;
color: #28B463;
text-align: center;
/*font-weight: bold;*/
border: none;
height: calc(100% - 35px);
width: 100%;
}
.notebox-container .content::-webkit-scrollbar{
display: none;
}
.notebox-container .content ul{
padding: 0;
margin: 0;
}
.notebox-container .items-content{
position: relative;
width: 100%;
height: calc(100% - 35px);
max-height: calc(100% - 35px);
overflow: auto;
border-bottom: 1px solid white;
}
.notebox-container .item{
position: relative;
border-bottom: 1px solid white;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 45px;
min-height: 45px;
background-color: white;
display: flex;
align-items: center;
}
.notebox-container .item p{
position: absolute;
padding-left: 35px;
height: 45px;
line-height: 45px;
width: 100%;
white-space: nowrap;
text-align: center;
}
/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text{
position: absolute;
border: none;
outline: none;
width: 100%;
height: 35px;
bottom: 0;
left: 0;
background-color: #21618C;
color: white;
cursor: pointer
}
.notebox-container #remove{
color: #28B463;
}

The issue I believe is due to the use of href
href linking is the method for including an external style sheet on your web pages. It is intended to link your page with your style sheet. Whereas importing allows you to import one style sheet into another.
Use:
<style>
#import url(YOUR/FILE/PATH)
</style>
Its good practice to place css files in a subfolder located within the main folder your html is stored. This subfolder is labelled static
e.g. main folder
main folder
index.html
static
style.css
<style>
#import url("static/style.css")
</style>

Try replacing your fetch code with this:
fetch(htmlUrl)
.then((result)=>{
return result.text()
})
.then((html)=>{
var doc = document.createRange().createContextualFragment(template);
testSide.appendChild(doc);
}).catch((error)=>{
console.log(error)
})
createContextualFragment renders the Second Html File and load all its scripts

Load .css from Main Html file will work fine.
var doDo = doc.querySelector('.parent-container') here you load only parent-container div element. No css found on here. so if you want to load css from Second Html file then you should write/load css and javascript inner side of parent-container div. ex:
<div class="parent-container">
<link rel="stylesheet" href='style.css'> <!---change here[2]------>
--------
-------
If you try this on local machine you may face this error
Fetch API cannot load file:///C:/....*.html. URL scheme "file" is not supported.
Try in on Localhost or on an online server. you may not found this problem.
Main HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="test-sidebar">
</div>
<script>
let testSide = document.querySelector('#test-sidebar');
let htmlUrl = 'index.html';
fetch(htmlUrl)
.then((result) => {
return result.text()
}).then((html) => {
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html')
var doDo = doc.querySelector('.parent-container')
console.log('doc', doDo)
testSide.appendChild(doDo)
}).catch((error) => {
console.log(error)
})
</script>
<link rel="stylesheet" href='style.css'> <!---change here[1]------>
</body>
</html>
Second Html File
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Notbox</title>
<link rel="stylesheet" href="style.css"> <!-- change here[2] -->
<!-- Boxicons CDN Link -->
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="parent-container">
<link rel="stylesheet" href="style.css"> <!---change here[2]------>
<!---Select items------>
<div class="container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<ul class="list" id="list">
</ul>
</div>
<button type="button" class="create-text-box">Create Text Box</button>
</div>
</div>
<!--Display notebox-->
<div class="notebox-container">
<div class="header">
</div>
<div class="content">
<div class="items-content">
<textarea class="list" id="noteList" ></textarea>
</div>
<button type="button" class="copy-text">Copy Text</button>
</div>
</div>
</div>
</body>
</html>
Output:

Related

Why does the div get created on top of another div in javascipt?

I am trying to make a project and I want button to create a div when it is clicked.But on my second click; system creates the div on top of another.
#Car-adder-div{
width: 250px;
height: 300px;
border: 2px solid #d3d3d3;
position: absolute;
left: 10px;
}
#Car-name-text{
font-family: sans-serif;
font-size: 18px;
position: absolute;
left: 98px;
}
#Car-name{
position: absolute;
top: 40px;
left: 40px;
border-radius: 15px;
border: 2px solid lightgray;
}
#Car-price-text{
font-family: sans-serif;
font-size: 18px;
position: absolute;
left: 98px;
top: 90px;
}
#Car-price{
position: absolute;
top: 130px;
left: 40px;
border-radius: 15px;
border: 2px solid lightgray;
}
#Submit-button{
background-color: black;
color: white;
border-radius: 15px;
width: 100px;
font-family: sans-serif;
position: absolute;
top: 180px;
left: 70px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='Auto_gallery_page.css'>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<div id="Car-adder-div">
<!--Name input-->
<h1 id="Car-name-text">Name</h1>
<input id="Car-name" type="text">
<!--Car price input-->
<h1 id="Car-price-text">Price</h1>
<input id="Car-price" type="text">
<!--Submit button-->
<input id="Submit-button" type="button" onclick="Addcar();" value="Add a car">
</div>
<script>
function Addcar(){
var car_name=$("#Car-name").val();
var car_price=$("#Car-price").val();
var car_div=document.createElement("div");
car_div.style.position="absolute";
car_div.style.width="320px";
car_div.style.height="80px";
car_div.style.left="300px";
car_div.style.top="20px";
car_div.style.top+=car_div.style.top;
car_div.style.border="2px solid #d3d3d3";
document.body.appendChild(car_div);
}
</script>
</body>
</html>
You are absolute positioning the new divs with the exact same absolute co-ordinates for each of them. Use relative positioning instead for the created divs, and instead of setting the width/height via the style attribute, set a class on the new divs and apply styles via a stylesheet.

JQuery/CSS Animation of Sprite image

I have a sprite image containing 4 different pictures. They are 520px in height. I would like animate them sliding from the first picture to the last picture. I am able to get them to flip through images, however I cannot get them to slide smoothly. Also, when the last image is reached, I need to slide back to the first image. I am unsure how to do this, this is my current code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>FVRC Pics</title>
<meta charset="UTF-8">
<link type="text/css" href="styles/normalize.css" rel="stylesheet" />
<link type="text/css" href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<h1> Fox Valley Runner Club</h1>
<div class="container">
<div id="slider">
<div id="leftArrow"</div>
<div id="rightArrow"></div>
</div>
</div>
<div id="startApp">
<ul>
<li>Start here!</li>
</ul>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>-->
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function() {
$("#leftArrow").click(function() {
$("#slider").css("backgroundPostionX","+=792px");
});
$("#rightArrow").click(function() {
$("#slider").css("backgroundPostionX","-=792px");
});
});
</script>
</body>
</html>
CSS:
h1 {
color: #0000ff; /*blue*/
font-size: 44px;
padding-left: 10%;
}
.container {
max-height: 520px;
background-color: #808080; /*grey*/
}
#leftArrow, #rightArrow {
display: inline-block;
width: 38px;
height: 50px;
}
#leftArrow {
position: relative;
/*top: 0;*/`enter code here`
top: 235px;
left: 2%;
width: 5%;
height: 50px;
background: url('../images/left_arrow.png') 0 0 no-repeat;
z-index: 10;
}
#rightArrow {
position: relative;
/*top: 0;*/
top: 235px;
left: 87.5%;
width: 5%;
height: 50px;
background: url('../images/right_arrow.png') bottom right no-repeat;
z-index: 10;
}
#slider {
position: relative;
height: 520px;
max-width: 792px;
margin: 0 auto;
/*background: url("../images/Animate-Sprite_520a.png") -0 0 no-repeat;*/
background-image: url('../images/Animate-Sprite_520a.png');
background-repeat: no-repeat;
}
#startApp {
width: 235px;
margin: 0 auto;
}
#startApp ul {
list-style-type: none;
}
#startApp ul li a {
display: inline-block;
text-decoration: none;
width: 150px;
text-align: center;
background-color: steelblue;
border: 2px solid #808080;
color: white;
font-size: 32px;

App returns error "your user photo IMG wrapper is not rendered as a circle yet"

I have an issue with a challenge I am undertaking: App returns error "your user photo IMG wrapper is not rendered as a circle yet". I have tried and checked most resources but have been left stuck. I don't know if it is a viewport issue or not but my tests keep failing.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Mini App</title>
<style>
body{
background: lavender;
margin: 0px;
overflow: hidden
}
*{
margin: 0;
padding: 0;
}
h2{
text-align: center;
margin-bottom: 2.79em;
text-transform: Capitalize;
}
div.user-photo{
width: 150px;
height: 150px;
margin: 1em auto;
background: #fff;
overflow: hidden;
border-radius: 100%;
-webkit-border-radius: 60%;
-moz-border-radius: 60%;
}
div.details{
font-size: 2.3em;
margin: 2.5em 0.2em 0.2em 0.2em;
color: #fff;
padding: 0.2em;
display: flex;
min-height: 6em;
background: #6200ee;
}
footer{
width: calc(100% - 2em);
z-index: 500;
position: absolute;
bottom: 0;
overflow: hidden;
display: flex;
justify-content: space-between;
margin: 0 1em;
}
footer button.mdc-icon-button{
margin: 0.5em;
background-color: #573594;
}
img{
max-width: 100%;
max-height: 100%;
display: block;
}
</style>
</head>
<body>
<header>
<h2>Ibu Omenka Eric</h2>
</header>
<div class="user-photo mdc-elevation--z3" >
<img src="https://via.placeholder.com/150" alt =""/>
</div>
<div class ="details mdc-elevation--z3"></div>
<div class ="messages"></div>
<footer>
<button id = "btn-address"
class="mdc-icon-button small material-icons" style="color: white;"><i> home</i></button>
<button id = "btn-phone"
class="mdc-icon-button small material-icons" style="color: white;"><i>phone</i></button>
<button id = "btn-birthdate"
class="mdc-icon-button small material-icons" style="color: white;"><i>date_range</i></button>
</footer>
<script>
const notify = (msg) => {
const toastr = document.querySelector('.messages');
if(!toastr) return;
toastr.textContent = msg;
if(!toastr.classList.contains('on')) {
toastr.classList.add('on');
}
};
const clearNotice = () => {
const toastr = document.querySelector('.messages');
if(!toastr) return;
toastr.textContent = '';
toastr.classList.remove('on');
};
const displayUserPhotoAndName = (data) => {
if(!data) return;
// add your code here
clearNotice();
};
const getAUserProfile = () => {
const api = 'https://randomuser.me/api/';
// make API call here
notify(`requesting profile data ...`);
};
const startApp = () => {
// invoke the getAUserProfile here
};
startApp();
</script>
</body>
</html>
I cannot figure out where the error is in the code.
div .user-photo {
width: 150px;
height: 150px;
margin: 1em auto;
background: #fff;
border-radius: 50%;
display: block;
overflow: hidden;

HTML and Javascript Won't Link

<!DOCTYPE html>
<html>
<head>
<link rel = stylesheet href = Father.css>
<title> Very Important Company </title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
I've included here only the portion of my HTML that involves linking with the javascript. The javascript is in a folder called "js" that is in the same folder as the HTML document. I've tried both with and without quotation marks because often my HTML doesn't work when I reference images or links within quotation marks--although most online tutorials seem to say that one must use quotation marks.
Here's the rest of the code if you must peruse it:
function main() {
$(‘.main’).hide();
$(‘.main’).fadeIn(1000);
}
$(document).ready(main);
$(‘.main’);
* {
margin: 0;
padding: 0;
}
#backs {
background: white;
}
#gecko {
content: url (“http: //www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png”);
height: 128px;
width: 128px;
position: relative;
float: left;
margin-left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
display: inline;
padding-left: 50px;
min-width: 100%
}
.navigation {
color: black;
letter-spacing: 2px;
float: right;
vertical-align: top;
width: 800px;
height: 70px;
margin-top: 47px;
min-width: 800px;
padding-left: 150px;
position: absolute;
}
.main {
color: white;
font-size: 100px;
position: relative;
top: 150px;
background-image: url(http://soupbelly.com/wp-content/uploads/2011/11/DSC_0034.jpg);
background-size: cover;
background-repeat: no-repeat;
min-width: 100%;
height: 900px;
padding-top: 90px;
text-transform: uppercase;
}
* {
margin: 0;
padding: 0;
}
#backs {
background: white;
}
#gecko {
content: url (“http: //www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png”);
height: 128px;
width: 128px;
position: relative;
float: left;
margin-left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline;
}
li {
display: inline;
padding-left: 50px;
min-width: 100%
}
.navigation {
color: black;
letter-spacing: 2px;
float: right;
vertical-align: top;
width: 800px;
height: 70px;
margin-top: 47px;
min-width: 800px;
padding-left: 150px;
position: absolute;
}
.main {
color: white;
font-size: 100px;
position: relative;
top: 150px;
background-image: url(http://soupbelly.com/wp-content/uploads/2011/11/DSC_0034.jpg);
background-size: cover;
background-repeat: no-repeat;
min-width: 100%;
height: 900px;
padding-top: 90px;
text-transform: uppercase;
}
<!DOCTYPE html>
<html>
<head>
<link rel=stylesheet href=Father.css>
<title> Very Important Company </title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id=backs </div>
<div class=header>
<p>
<img src=http://www.unixstickers.com/image/data/stickers/opensuse/Opensuse-logo-wob.sh.png id=g ecko>
</p>
<div class=navigation>
<ul>
<li> SHOP </li>
<li> ABOUT US </li>
<li> RENTALS </li>
<li> CONTACT </li>
<li> PARTIES </li>
</ul>
</div>
</div>
<p>
How come you are noticing only the script not working. Does your stylish wet even work?
The missing "" in your style sheet link may be the reason for your script not work
It should be
<link rel="stylesheet" href="style.css" type="text/css">
Remember the quotes
Noticed your kind of quotes are not right in your script. Use These
$('.class') or $(".class")
And I just prefer you write your codes the normal way in your html by putting the quotes where they need to be and also there is no where you used the
.main
In your html code
What you need to do is append './' to your script src tag.
So your final file should look like this.
<!DOCTYPE html>
<html>
<head>
<link rel = stylesheet href = Father.css>
<title> Very Important Company </title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
Doing this informs your HTML code to look for the 'js' folder in your current directory.

children div not stacking side by side inside parent div

For some reason the video and sidebar div keep pushing each other outside of the wrapper div. In addition, it seem like the main wrapper div is not being defined for some reason. I been messing around for hours now and it seem like nothing work . Can some give me some pointer.
https://jsfiddle.net/4z5wwq2j/
Thank you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
#wrapper{
width: 100%;
height: 500px;
white-space: nowrap;
display: inline-block;
}
#sidebar{
height: 420px;
width: 10%;
background-color: red;
}
#video{
border-radius: 25px;
background: #C5EFF7;
border: 5px solid #19B5FE;
padding: 20px;
width: 65%;
height: 420px;
display: inline-block;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar"></div>
<div id="video"></div>
</div>
</body>
</html>
You have to set display: inline-block; for the #sidebar div as well:
https://jsfiddle.net/4z5wwq2j/1/
#sidebar{
height: 420px;
width: 10%;
background-color: red;
display:inline-block;
}
Set the vertical-align as well for both of them as you need.

Categories