Code working in Codepen but not in browser

Code working in Codepen but not in browser - javascript

I have made a splash screen that works as intended, and can be seen on this codepen:
https://codepen.io/dbake3452/pen/VwmeoGa
However when I copied that code onto my project, the splash screen no longer goes away after 3 seconds. I'm thinking there is conflicting code somewhere, but I have not been able to spot it
My code:
'/ ///HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" `enter code here`integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
<link rel="stylesheet" href="css/kayportfolio.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/css/splide.min.css">
</head>
<body>
<div id="container">
<header>
<nav>
<img id="bun" src="images/kay logo.png">
</nav>
</header>
<div class="splash">
<img class="fade-in" src="images/pippinhop.png">
</div>
<main>
<i class="fas fa-caret-up"></i>
<img id="myth" src="images/mythologyproj.png">
<i class="fas fa-caret-down"></i>
<img id="fingerguns" src="images/fingerguns.png">
</main>
<footer>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/#splidejs/splide#latest/dist/js/splide.min.js"></script>
<script src="js/kayportfolio.js" async defer></script>
</body>
</html>
///SASS
$purple: #a9aaff;
body {
margin: 0;
padding: 0;
}
#container {
height: 100vh;
display: grid;
grid-template-rows: 25vh 1fr 25vh;
header {
grid-area: 1 / 1 / 1 / -1;
display: flex;
align-items: center;
justify-content: center;
img {
width: 400px;
}
}
.splash {
width: 100%;
height: 100vh;
background-color: $purple;
position: fixed;
top: 0;
left: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
img {
width: 12.5%;
}
}
.display-none {
display: none;
};
#keyframes fadeIn{
to {
opacity: 1;
}
}
.fade-in {
opacity: 0;
animation: fadeIn 1s ease-in forwards;
}
main {
grid-area: 2 / 1 / 2 / -1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 1;
i {
font-size: 60px;
margin: 20px;
color: $purple;
}
i:hover {
cursor: pointer;
}
#myth {
width: 800px;
}
#myth:hover {
opacity: .5;
cursor: pointer;
}
#fingerguns {
width: 400px;
position: fixed;
left: 5%;
top: 49%;
}
}
footer {
grid-area: 3 / 1 / 3 / -1;
}
}
/// JS
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('display-none')
}, 3000);
});

Sass has to be compiled to CSS for your browser to understand it, in VS code, there are handy extensions to require this, for example live sass compiler.
Click the watch sass button on the bottom (or compile in any way you want).
You can see that the compiler added the CSS version to the project.
Now just include the CSS file in your html, for example (if CSS file is in the same folder):
<link rel="stylesheet" href="./style.css" >
Don't forget to put your JS code in <script></script> tags as well, or create a separate file and include it.
<script>
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e) => {
setTimeout(() => {
splash.classList.add('display-none')
}, 3000);
});
</script>

Related

Why does my carousel rotate when the page loads, but then stops completely? [duplicate]

This question already has answers here:
Script Tag - async & defer
(12 answers)
Closed 8 days ago.
I am creating a full-stack application and for my hero page, I am working on adding a carousel that rotates images in the background.
So far I have created the HTML, CSS, and JavaScript files.
When the page loads, it rotates but then the carousel stops working and just stays on the first line.
I am not too sure if there is an error in my code but I would appreciate it if someone helped me out.
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function changeSlide() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].style.opacity = 1;
}
setInterval(changeSlide, 3000);
*{
margin: 0%;
padding: 0%;
}
/*------------------------------Hero Page---------------------------------*/
.carousel {
width: 100%;
height: 700px;
position: relative;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide:first-child {
opacity: 1;
}
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.slide-1 {
background-image: url(Images/derek-baumgartner-A7sfB4yKS7s-unsplash.jpg);
}
.slide-2 {
background-image: url(Images/andrew-bain-jO_Q3EY_T0E-unsplash.jpg);
}
.slide-3 {
background-image: url(Images/aaron-dowd-N7PDwky8doM-unsplash.jpg);
}
<!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">
<script src="practice.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="practice.css">
<title>Welcome to Washington State - Home Page</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!------------Hero Page-------------->
<header>
<div class="carousel">
<div class="slide slide-1">
<div class="slide-content">Slide 1</div>
</div>
<div class="slide slide-2">
<div class="slide-content">Slide 2</div>
</div>
<div class="slide slide-3">
<div class="slide-content">Slide 3</div>
</div>
</div>
</header>
</body>

The problem is that you are loading your script before the page has been created and the script is running as soon as it is loaded.
You can add defer to the script, like so:
<script src="practice.js" defer></script>
Or you can move the script to the end of the HTML.
Script Tag - async & defer would be a good source of information to read for this problem.
To make it easier to see your problem, I removed your images and simply set a background-color, height, and width in the CSS to see the slides and I reduced the delay in setInterval to 1500.
var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
function changeSlide() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].style.opacity = 1;
}
setInterval(changeSlide, 1500);
* {
margin: 0%;
padding: 0%;
}
/*------------------------------Hero Page---------------------------------*/
.carousel {
width: 100%;
height: 700px;
position: relative;
overflow: hidden;
}
.slide {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide:first-child {
opacity: 1;
}
.slide-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}
.slide-1 {
background-color: red;
height: 150px;
width: 200px;
}
.slide-2 {
background-color: green;
height: 150px;
width: 200px;
}
.slide-3 {
background-color: blue;
height: 150px;
width: 200px;
}
<!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">
<script src="practice.js" defer></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="practice.css">
<title>Welcome to Washington State - Home Page</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!------------Hero Page-------------->
<header>
<div class="carousel">
<div class="slide slide-1">
<div class="slide-content">Slide 1</div>
</div>
<div class="slide slide-2">
<div class="slide-content">Slide 2</div>
</div>
<div class="slide slide-3">
<div class="slide-content">Slide 3</div>
</div>
</div>
</header>
</body>

How to reverse css keyfrmames animation by only using javascript? [duplicate]

This question already has answers here:
How do I re-trigger a WebKit CSS animation via JavaScript?
(9 answers)
Closed 4 months ago.
document.querySelector(".fall").addEventListener("click", function () {
document.querySelector(".ball").style.animation = "anim 2s forwards";
});
//my try below
document.querySelector(".up").addEventListener("click", function () {
document.querySelector(".ball").style.animation = "anim 2s forwards reverse";
});
body{
display: flex;
justify-content: center;
}
button{
margin-top: 150px;
margin-right: 20px;
padding: 5px;
}
.box{
height: 20px;
width: 100px;
background-color: royalblue;
position: absolute;
top: 100px;
}
.ball{
height: 20px;
width: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 0;
}
#keyframes anim {
100%{
top: 80px;
}
}
<!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" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="ball"></div>
<div class="box"></div>
<button class="fall">Fall ↓</button>
<button class="up">Up ↑</button>
<script src="index.js"></script>
</body>
</html>
I wnna jump up smoothly this red ball by cliking Up ↑ button after clicking Fall ↓ button. I tride it by setting animation property with extra reverse but it's not working. It's jumping up suddenly. How can i achieve smooth jumping up transition by using only keyframes and javascript.

Here is my quick solution.
The animation was removed by setting animation as "" in animationend event listener.
The ball's top position is also set when related event listener is triggered.
const ball = document.querySelector(".ball");
const fallButton = document.querySelector(".fall");
const upButton = document.querySelector(".up");
fallButton.addEventListener("click", function() {
ball.style.animation = "anim 2s forwards";
ball.addEventListener("animationend", function() {
ball.style.top = "80px";
ball.style.animation = "";
});
});
upButton.addEventListener("click", function() {
ball.style.top = 0;
ball.style.animation = "anim 2s forwards reverse";
ball.addEventListener("animationend", function() {
ball.style.top = 0;
ball.style.animation = "";
});
});
body {
display: flex;
justify-content: center;
}
button {
margin-top: 150px;
margin-right: 20px;
padding: 5px;
}
.box {
height: 20px;
width: 100px;
background-color: royalblue;
position: absolute;
top: 100px;
}
.ball {
height: 20px;
width: 20px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 0;
}
#keyframes anim {
100% {
top: 80px;
}
}
<!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" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="ball"></div>
<div class="box"></div>
<button class="fall">Fall ↓</button>
<button class="up">Up ↑</button>
<script src="index.js"></script>
</body>
</html>

I started working before giving the function at JS

I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
Sorry for double text for publishing my question.
I just put some JavaScript code for show nav. I mean when I click my navbar icon then show my all nav item. Yeah! perfectly this working, then I need again 2nd time when I click navbar icon then automatic should will remove nav all item by Javascript function remove code. that's is rules. but still i not giving any remove Javascript function code for remove navbar item. But working without remove Javascript function code. So my Question how this remove working Without code.
It(navbar) will only work below 768px in browser display size.
// MENU SHOW
const first = document.getElementById('nav-toggle')
const second = document.getElementById('nav-menu')
first.addEventListener('click',()=>{
second.classList.toggle('show')
} )
<!-- begin snippet: js hide: false console: true babel: false -->
<!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">
<title>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>
}
html{
scroll-behavior: smooth;
}
body{
margin: var(--header-height) 0 0 0;
font-family: var(--body-font);
font-size: var(--normal-font-size);
font-weight: var(--font-meduim);
color: var(--dark-color);
line-height: 1.6;
}
h1,h2,h3,p,ul{
margin: 0;
}
ul{
padding: 0;
list-style: none;
}
a{
text-decoration: none;
color: var(--dark-color);
}
img{
max-width: 100%;
height: auto;
display: block;
}
/* Class Css */
.section{
padding: 5rem 0 2rem;
}
.section-title{
position: relative;
font-size: var(--big-font-size);
margin-bottom: var(--mb-4);
text-align: center;
letter-spacing: .1rem;
}
.section-title::after{
content: '';
position: absolute;
width: 56px;
height: .18rem;
top: -1rem;
left: 0;
right: 0;
margin: auto;
background-color: var(--dark-color);
}
/* Layout */
.bd-grid{
max-width: 1024px;
display: gird;
grid-template-columns: 100%;
column-gap: 2rem;
width: calc(100%-2rem);
margin-left: var(--mb-2);
margin-right: var(--mb-2);
}
.l-header{
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--dark-color-lighten);
}
/* nav */
.nav{
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
#media screen and (max-width:768px) {
.nav__menu{
position: fixed;
top: var(--header-height);
left: -100%;
width: 70%;
height: 100vh;
padding: 2rem;
background-color: var(--white-color);
transition: .5s;
}
}
.nav__item{
margin-bottom: var(--mb-4);
}
.nav__logo{
font-weight: var(--font-semi-bold);
}
.nav__toggle, .nav__shop{
font-size: 1.3rem;
cursor: pointer;
}
.show{
left: 0;
}
<!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">
<title>E-Commerce Responsive Website</title>
<link rel="stylesheet" href="./style.css">
<!-- Box icon -->
<link href='https://unpkg.com/boxicons#2.1.1/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="l-header" id="header">
<nav class="nav bd-grid">
<div class="nav__toggle" id="nav-toggle">
<i class="bx bxs-grid"></i>
</div>
Shohel
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">Home</li>
<li class="nav__item">Featured</li>
<li class="nav__item">Women</li>
<li class="nav__item">New</li>
<li class="nav__item">Shop</li>
</ul>
</div>
<div class="nav__shop">
<i class="bx bx-shopping-bag"></i>
</div>
</nav>
</header>
<script src="./script.js"></script>
</body>
</html>

Javascript querySelector not working even with my script at the end of the html file

I'm learning javascript and used this youtube video as an example:
https://www.youtube.com/watch?v=RLc8NB2JyxE&
He does not include source code but I have made sure that my code is exactly how it is in the video.
The tutorial walks through how to use html, css, and javascript to make a navbar that changes as you scroll down the screen. Any example of this error I could find had a solution of "put the script at the end of the html body" but mine is already there and I'm not sure why the script is not loading.
this is the error:
app.js:28 Uncaught TypeError: Cannot read property 'style' of null
at app.js:28
at Array.forEach (<anonymous>)
at IntersectionObserver.navCheck (app.js:16)
(anonymous) # app.js:28
navCheck # app.js:16
index.html
<!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="./style.css" />
<title>PhotoGem | slogan here</title>
</head>
<body>
<header>
<nav>
<h1>PhotoGem</h1>
<ul>
<li><a data-page="home" href="#">Home</a></li>
<li><a data-page="project" href="#">Project</a></li>
<li><a data-page="contact" href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section data-index="0" class="home">
<h2>Home</h2>
</section>
<section data-index="1" class="project">
<h2>Projects</h2>
</section>
<section data-index="2" class="contact">
<h2>Contact</h2>
</section>
</main>
<script src="./app.js"></script>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
header {
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
position: sticky;
top: 0px;
background: white;
}
nav {
min-height: 10vh;
margin: auto;
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav h1,
nav ul {
font-size: 1.5rem;
flex: 1;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-between;
}
nav a {
color: black;
text-decoration: none;
}
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section h2 {
font-size: 5rem;
color: white;
}
.home {
background: linear-gradient(to right top, #f46b45, #eea849);
}
.project {
background: linear-gradient(to right top, #005c97, #363795);
}
.contact {
background: linear-gradient(to right top, #e53935, #e35d5b);
}
.bubble {
position: absolute;
z-index: -2;
background: linear-gradient(to right top orange, yellow);
}
app.js
const sections = document.querySelectorAll("section");
const bubble = document.querySelector(".bubble");
const gradients = [
"linear-gradients(to right top, #f46b45, #eea849)",
"linear-gradients(to right top, #005c97, #363795)",
"linear-gradients(to right top, #e53935, #e35d5b)"
];
const options = {
threshold: 0.7
};
let observer = new IntersectionObserver(navCheck, options);
function navCheck(entries) {
entries.forEach(entry => {
const className = entry.target.className;
const activeAnchor = document.querySelector(`[data-page=${className}]`);
const gradientIndex = entry.target.getAttribute("data-index");
const coords = activeAnchor.getBoundingClientRect();
const directions = {
height: coords.height,
width: coords.width,
top: coords.top,
left: coords.left
};
if (entry.isIntersecting) {
bubble.style.setProperty("left", `${directions.left}px`);
bubble.style.setProperty("top", `${directions.top}px`);
bubble.style.setProperty("width", `${directions.width}px`);
bubble.style.setProperty("height", `${directions.height}px`);
}
});
}
sections.forEach(section => {
observer.observe(section);
});

Remove height in DOM while using jQueryUI resizable

I'm using flex to make a responsive layout for my web-app.
I'm using jQuery UI on my navigator panel to be able to resize it. Unfortunately, when the resize event is triggered, jQuery UI inserts in the DOM a hard-coded height for my element, even if I specify the handles in the resizable settings.
Here's what I get in the DOM when the resize event is triggered:
<div class="navigator ui-resizable" style="top: 0px; left: 0px; width: 245px; height: 929px;">
I want to get rid of all the the other styles except the width.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
height: 100%;
}
.mainWrapper_1
{
display: flex;
backgound: gold;
height:100%;
}
.mainWrapper_1 .navigatorManager
{
background: tomato;
flex: 0 0 30px;
}
.mainWrapper_1 .mainWrapper_2
{
background: gray;
flex: 1;
display: flex;
flex-direction: column;
}
.topSideBar
{
height:50px;
background: yellow;
}
.mainWrapper_3
{
flex: 1;
background: cyan;
display:flex;
}
.navigator
{
flex: 0 0 auto/*100px*/;
background-color: green;
}
.mainWrapper_4
{
flex: 1;
display:flex;
flex-direction: column;
background: red;
}
.tabs
{
height:50px;
background: pink;
}
.mainWrapper_5
{
flex: 1;
background: magenta;
}
</style>
</head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
<body>
<div class="mainWrapper_1">
<div class="navigatorManager">side</div>
<div class="mainWrapper_2">
<div class="topSideBar">
top side bar
</div>
<div class="mainWrapper_3">
<div class="navigator">
navigator
</div>
<div class="mainWrapper_4">
<div class="tabs">
TABS
</div>
<div class="mainWrapper_5">
MAIN
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$(".navigator").resizable({handles: "e"});
});
</script>
</html>

Try removing only the height attribute, the other attributes: top and left are responsible for positioning the .navigator and is probably essential for the resize feature to function. To remove an attribute you can try removeAttr() jQuery method or .removeAttribute() JavaScript method. The example below is using .removeAttr() and has .removeAttribute() commented out. If you prefer the latter just swap the comment marks to the other line.
BTW, your code had some weird placements like...
...the <script> tags being placed after the closing </body> tag.
<script> tags should either be situated at the <head> after <link> and <style> tags.
OR
<script> tags can be placed before the closing </body> tag.
Also there was a <link> tag outside of the <head>.
Although I believe it's ok to place a <link> tag outside of the head, it should be in the most possibly highest position possible (i.e. the head under any <meta> tags.). This is because the browser will render styles as they discovered along the way and you want the DOM finished as early as possible.
$(document).ready(function() {
$(".navigator").resizable({
handles: "e"
}).removeAttr('height');
//document.querySelector('.navigator').removeAttribute('height');
});
Live Demo: PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css">
<style>
html, body { margin: 0; height: 100%; }
.extLayer { display: flex; backgound: gold; height: 100%; }
.extLayer .navMgr { background: tomato; flex: 0 0 30px; }
.extLayer .endoLayer { background: gray; flex: 1; display: flex; flex-direction: column; }
.topSideBar { height: 50px; background: yellow; }
.intLayer { flex: 1; background: cyan; display: flex; }
.navigator { flex: 0 0 auto/*100px*/; background-color: green; }
.auxLayer { flex: 1; display: flex; flex-direction: column; background: red; }
.tabs { height: 50px; background: pink; }
.coreLayer { flex: 1; background: magenta; }
</style>
</head>
<body>
<div class="extLayer">
<nav class="navMgr">side</nav>
<div class="endoLayer">
<header class="topSideBar"> top side bar </header>
<div class="intLayer">
<nav class="navigator"> navigator </nav>
<section class="auxLayer">
<div class="tabs"> TABS </div>
<main class="coreLayer">
MAIN
</main>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
$(".navigator").resizable({handles: "e"}).removeAttr('height');
//document.querySelector('.navigator').removeAttribute('height');
});
</script>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

Code working in Codepen but not in browser - javascript

Related

Why does my carousel rotate when the page loads, but then stops completely? [duplicate]

How to reverse css keyfrmames animation by only using javascript? [duplicate]

I started working before giving the function at JS

Javascript querySelector not working even with my script at the end of the html file

Remove height in DOM while using jQueryUI resizable

Categories

Resources