I'm trying to run npm run build but I encounter this error. I tried to solve it but I'm just beginning my dev journey and was following an old tutoria.how can i go about solving this issue, any solutions will be appreciated.
the error:
error during build:
TypeError: Cannot read properties of undefined (reading 'startOffset')
at overwriteAttrValue (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/vite/dist/node/chunks/dep-557f29e6.js:43339:50)
at Object.transform (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/vite/dist/node/chunks/dep-557f29e6.js:43575:29)
at async transform (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/rollup/dist/es/shared/rollup.js:21928:16)
at async ModuleLoader.addModuleSource (file:///C:/Users/Altayeb/Desktop/guide_gps/node_modules/rollup/dist/es/shared/rollup.js:22153:30)
here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GUIDE GPS</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/a11y-slider#latest/dist/a11y-slider.css" />
<script src="https://unpkg.com/a11y-slider#latest/dist/a11y-slider.js" defer></script>
</head>
<body>
<header class="primary-header">
<div class="container">
<div class="nav-wrapper">
<img src="images/logo.svg" alt="Logo">
<button class="mobile-nav-toggle" aria-controls="primary-navigation" aria-expanded="false">
<span class="visually-hidden">Menu</span>
</button>
<nav class="primary-navigation" id="primary-navigation">
<ul aria-label="Primary" role="list" class="nav-list">
<li>Pricing</li>
<li>Services</li>
<li>About Us</li>
<li>Privacy Policy</li>
<!-- <li>Careers</li>
<li>Community</li> -->
</ul>
</nav>
<button class="button | display-sm-none display-md-inline-flex">Get Started</button>
</div>
</div>
</header>
<main>
<section class="hero | text-center-sm-only padding-block-900">
<div class="container">
<div class="even-columns">
<div class="flow">
<h1 class="fs-primary-heading fw-bold">
Vehicle tracking systems can offer companies big benefits.</h1>
<p>Manage makes it simple for software teams to plan day-to-day tasks while keeping the larger team goals in
view.</p>
<button class="button">Get Started</button>
</div>
<div class="hero__image">
<img class="mx-auto" src="images/gps.png" alt="">
</div>
</div>
</div>
</section>
<section class="sales-points | padding-block-900">
<div class="container">
<div class="even-columns">
<div class="sales-points__blog flow text-center-sm-only" style="--flow-spacer: 1.5rem">
<h2 class="fs-secondary-heading fw-bold">What technology we use?</h2>
<p>We use the state of the art tracking hardware,
Teltonika FMB920 is compact and smart tracker with Bluetooth connectivity,
internal High Gain GNSS and GSM antennas and integrated backup battery.
FMB920 is designed for light vehicles tracking in applications like insurance telematics,
rental cars, recovery of stolen cars, public safety services, delivery transport, taxi and much more.
</p>
<div>
<img src="images/tracker1.png" alt="">
</div>
</div>
<div>
<ul class="numbered-items | flow" role="list">
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items__title | fs-600 fw-bold">Accelerometer sensor</h3>
<p class="numbered-items__body" data-width="wide">
The FMB920 is packed with Accelerometer sensor to detect every possible driving senario,
Green Driving, Over Speeding detection, Jamming detection, GNSS Fuel Counter, DOUT Control Via Call, Excessive Idling detection, Unplug detection, Towing detection, Crash detection, Auto Geofence, Manual Geofence.</p>
</div>
</li>
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items__title | fs-600 fw-bold">Rugged Build</h3>
<p class="numbered-items__body" data-width="wide">
The FMB920 is designed to withstand harsh environmental condition making it last for years.
Operating temperature (without battery) -40 °C to +85 °C,
Operating humidity 5% to 95% non-condensing,
Ingress Protection Rating IP54,
Battery charge temperature 0 °C to +45 °C, Battery discharge temperature -20 °C to +60 °C.</p>
</div>
</li>
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items__title | fs-600 fw-bold">Mobile App For Live-Tracking</h3>
<p class="numbered-items__body" data-width="wide">
GUIDE GPS provide a mobile application for
tracking your vehicles live within the app,
after the inatallment of the tracking hardware.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="carousel | padding-block-700 text-center">
<h2 class="fs-secondary-heading fw-bold">Mobile App</h2>
<div class="hero__image" >
<img class="mx-auto" width="300" height="430" src="images/app.svg" alt="">
</div>
<ul class="slider">
<li>
<!-- <img src="images/avatar-anisha.png" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Live Tracking</h3>
<p data-width="wide">
The applicaton provide the ability to live track your vhechile anywhere.
providing information on the time, distanc, fuel conusumption, and much more.</p>
</div>
</li>
<li>
<li>
<!-- <img src="images/avatar-anisha.png" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Live Tracking</h3>
<p data-width="wide">
The applicaton provide the ability to live track your vhechile anywhere.
providing information on the time, distanc, fuel conusumption, and much more.</p>
</div>
</li>
<li>
<!-- <img src="images/truck.jpg" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Track Your Entire Fleet</h3>
<p data-width="wide">
With our App you will be alble to track
multiple vechiles, with live location updates, time , speed,
fuel conusumbtion, engine igntion, etc...
</p>
</div>
</li>
<li>
<!-- <img src="images/tracker1.png" alt=""> -->
<div class="slider-content | flow" style="--flow-spacer: 1rem">
<h3 class="fw-bold text-accent-400">Hardware Monitring</h3>
<p data-width="wide">
The App allows you to monitor your hardware "GPS Device"
status, incase of dissconnection or signal failure.
</p>
</div>
</li>
<li>
</li>
</ul>
<a class="btn btn-google" href="https://play.google.com/store/apps/details?id=com.guidegpsclient.android" title="Google Play">Google Play</a>
</section>
<section class="cta | padding-block-900 bg-accent-400 text-neutral-100">
<div class="container">
<div class="even-columns vertical-align-center">
<div>
<p class="fs-primary-heading fw-bold">Secure Your Vhicles With Us.</p>
</div>
<div class="justify-self-end-md">
<button class="button" data-type="inverted">Call Us</button>
</div>
</div>
</div>
</section>
</main>
<footer class="primary-footer | padding-block-700 bg-neutral-900 text-neutral-100">
<div class="container">
<div class="primary-footer-wrapper">
<div class="primary-footer-logo-social">
<a href="#" aria-label="home">
<svg class="logo" width="146" height="24">
<use xlink:href=""></use>
</svg>
</a>
<ul class="social-list" role="list" aria-label="Social links">
<li><a aria-label="facebook" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-facebook"></use>
</svg></a>
</li>
<li><a aria-label="youtube" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-youtube"></use>
</svg>
</a></li>
<li><a aria-label="twitter" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-twitter"></use>
</svg>
</a></li>
<li><a aria-label="pinterest" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-pinterest"></use>
</svg>
</a></li>
<li><a aria-label="instragram" href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-instagram"></use>
</svg>
</a></li>
</ul>
</div>
<div class="primary-footer-nav">
<nav class="footer-nav">
<ul class="flow" style="--flow-spacer: 1em" aria-label="Footer" role="list">
<li>Home</li>
<li>Pricing</li>
<li>Services</li>
<li>About Us</li>
<!-- <li>Careers</li>
<li>Community</li> -->
<li>Privacy Policy</li>
</ul>
</nav>
</div>
<div class="primary-footer-form">
<form action="">
<input type="email">
<button class="button" data-shadow="none">Go</button>
</form>
<p>Copyright 2020. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<script type="module" src="/main.js"></script>
</body>
</html>
Related
For the html pages where the external javascript does not work, I put the js code in internally in the HTML file and it worked but what's the problem with the pages that can't do it without applying javascript in the HTML pages. The only page it works externally is in contact.html below. After that code is the sample1.html file where it does not work externally but only internally? What can I do to make it work externally? (javascript file is in the same folder)
contact.html
` <!--contact us page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css"> <!--link stylesheet-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!--link external icons-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!--link external fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<title id="title">Contact Us</title>
</head>
<body>
<!--header-->
<section class="header3">
<nav>
<img src="images/classpass.png">
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>Sponsor Us</li>
<li><a class="active" href="sample1.html">About</a></li>
<li>Contact Us</li>
<li>Kids Help Phone</li>
<li><img src="images/moon.png" id="icon2"></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>Contact Us</h1>
</div>
</section>
<!--inquiry box inspired from w3schools.com-->
<section class="box">
<div class="row">
<div class="box-col">
<form action="/action_page.php">
<div class="container">
<h1>Have Any Inquires?</h1>
<p>Fill out the form and our team will get back to you as soon as possible</p>
</div>
<div class="container" style="background-color:white">
<input type="text" id="inquiry"placeholder="Inquiry" name="name" required>
<p class="rq">*Required Field </p>
<input type="text" id="email2" placeholder="Email address" name="mail" required>
<p class="rq">*Required Field </p>
</div>
<div class="container">
<button type="submit" id="button1">Submit</button>
</div>
</form>
</div>
<div class="box-col">
<form name="form1" action="/action_page.php" onsubmit="required"()>
<div class="container">
<h1>Get A Estimated Quote</h1>
<p>This is just a estimate and our team will send a email with more detailed information</p>
</div>
<div class="container" style="background-color:white">
<input type="text" id="text" placeholder="Name" name="name3" required>
<p class="rq">*Required Field </p>
<input type="text" id="email" placeholder="Email address" name="mail3" required>
<p class="rq">*Required Field </p>
<input type="text" id="classNum" placeholder="How many different classrooms would you need" name="classrooms3" required>
<p class="rq">*Required Field </p>
</div>
<div class="container">
<button type="submit" id="button">Submit</button>
</div>
</form>
</div>
</div>
</section>
<!--end-->
<!-- offices(portion)-->
<section class="portion">
<h1>Our Offices</h1>
<div class="row">
<div class="portion-col">
<img src="images/city1.jpg">
<h3>Toronto Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
<div class="portion-col">
<img src="images/city2.jpg">
<h3>Montreal Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
<div class="portion-col">
<img src="images/city3.jpg">
<h3>Brampton Hub</h3>
<div class="phone">
<i class="fa fa-phone"></i>
<i>4164506779</i>
</div>
</div>
</div>
</section>
<!--contact/support button-->
<section class="contact">
<h1>About Us</h1>
<br>
<br>
Learn More
</section>
<!--footer-->
<section class="footer">
<h4>ClassPass An Interactive Classroom</h4>
<div class="icon">
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-instagram"></i>
</div>
<p>Made by Jashan Judge</p>
</section>
<script src="javascript.js"></script>
</body>
</html>` </strike>
sample1.html page that doesn't work externally
<!--about us page-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylesheet.css"> <!--link stylesheet-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!--link external icons-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!--link external fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap" rel="stylesheet">
<title id="title">ClassPass An Interactive Classroom</title>
</head>
<body>
<!--header-->
<section class="header">
<nav>
<img src="images/classpass.png">
<div class="nav-links" id="navLinks" >
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>Support Us</li>
<li><a class="active" href="sample1.html">About</a></li>
<li>Contact Us</li>
<li>Kids Help Phone</li>
<li><img src="images/moon.png" id="icon2"></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>Class Pass</h1>
<p>An Interactive Classroom</p>
</div>
</section>
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
<script>
var icon2 = document.getElementById("icon2");
if(localStorage.getItem("theme") == null){
localStorage.setItem("theme", "light");
}
let localData = localStorage.getItem("theme");
if(localData=="light"){
icon2.src== "images/moon.png";
document.body.classList.remove("dark-mode");
}
else if(localData=="dark"){
icon2.src== "iamges/sun.png";
document.body.classList.add("dark-mode");
}
icon2.onclick = function(){
document.body.classList.toggle("dark-mode");
if(document.body.classList.contains("dark-mode")){
icon2.src="images/sun.png";
localStorage.setItem("theme","dark");
}
else{
icon2.src="images/moon.png";
localStorage.setItem("theme","light");
}
}
</script>
<!--sideblock-->
<section class="sideblock">
<div class="row">
<div class="side-col">
<h1>Our Mission</h1>
<p>Here at Class Pass we wanted to bring the classroom into the homes of students and teachers. We re-imagined the way students can interact with their classmates and teachers away from school. ClassPass is designed to offer students a wide varity of learning material through artifical intelligence based reccomended resources. At Class Pass we believe the future starts with the classroom. Important features: </p>
<div class="list">
<ul>
<br>
<li>AI Powered Resources</li>
<br>
<li>Interactive Online Community</li>
<br>
<li>Direct Communication To Teachers</li>
</ul>
</div>
</div>
<div class="side-col">
<img src="images/class1.jpg">
</div>
</div>
</section>
<!-- sub moving cards-->
<section class="sub">
<h1>Specififc features</h1>
<div class="row">
<div class="sub-col">
<img src="images/infopic1.png">
<div class="layer">
<h3>AI Powered Resources</h3>
<p>Class Pass uses the power of Artifical Intelligence to curate specialized resources to each student and teacher</p>
</div>
</div>
<div class="sub-col">
<img src="images/infopic2.jpg">
<div class="layer">
<h3>Interactive Online Community</h3>
<p>Students can communicate with their classmates and interact with cards work together</p>
</div>
</div>
<div class="sub-col">
<img src="images/infopic3.jpg">
<div class="layer">
<h3>Direct Communication To Teachers</h3>
<p>Parents and students can ask their teachers any questions anytime of the day</p>
</div>
</div>
</div>
</section>
<!--contact/support button-->
<section class="contact">
<h1>Interested In Our Vision?</h1>
<br>
<br>
Support Us
Contact Us
</section>
<!--footer-->
<section class="footer">
<h4>ClassPass An Interactive Classroom</h4>
<div class="icon">
<i class="fa fa-twitter"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-instagram"></i>
</div>
<p>Made by Jashan Judge</p>
</section>
<script src="javascript.js"></script>
</body>
</html> </strike>
Having some issues with my sliding nav in safari. Basically it just doesn't work. In the inspector panel it is returning the error:
"TypeError: null is not an object (evaluating 'document.getElementById("contracted-menu").style')
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cuttsy+Cuttsy | How we work</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/fonts/fonts.css" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/media.css" rel="stylesheet" type="text/css">
<script src="js/menu.js"></script>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
if (window.matchMedia("(min-width: 769px)").matches) {
function openNav() {
document.getElementById("expanded-menu").style.marginLeft = "0";
document.getElementById("contracted-menu").style.marginLeft = "-75px";
}
function closeNav() {
document.getElementById("expanded-menu").style.marginLeft = "-230px";
document.getElementById("contracted-menu").style.marginLeft = "0";
}
} else if (window.matchMedia("(max-width: 768px)").matches){
function openNav() {
document.getElementById("expanded-menu").style.marginTop = "0";
document.getElementById("contracted-menu").style.marginTop = "-75px";
}
function closeNav() {
document.getElementById("expanded-menu").style.marginTop = "-100vh";
document.getElementById("contracted-menu").style.marginTop = "0";
}
}
</script>
</head>
<body>
<!-- ======================
========== MENU ===========
======================= -->
<div class="expanded-menu" id="expanded-menu">
<!-- MENU -->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">
<img src="images/Backarrow.png" alt="back arrow">
</a>
<a href="index.html">
<img src="images/Cuttsy+Cuttsy_Logo_Square_RGB.png" class="logo" alt="cuttsy and cuttsy logo">
</a>
who we are
<img src="images/Line.png" class="menu-line" alt="line">
how we work
<img src="images/Line.png" class="menu-line" alt="line">
what we do
<img src="images/Line.png" class="menu-line" alt="line">
who we do it for
<img src="images/Line.png" class="menu-line" alt="line">
cuttings
<img src="images/Line.png" class="menu-line" alt="line">
join us
<img src="images/Line.png" class="menu-line" alt="line">
contact
<div class="socialmedia">
<a href="https://www.facebook.com/cuttsyandcuttsy/" target="_blank">
<img src="images/social-media-icons/Facebook.png" alt="facebook logo">
</a>
<a href="https://www.instagram.com/cuttsyandcuttsy/?hl=en" target="_blank">
<img src="images/social-media-icons/Instagram.png" alt="instagram logo">
</a>
<a href="https://www.linkedin.com/company/2128917/" target="_blank">
<img src="images/social-media-icons/Linkedin.png" alt="linkedin logo">
</a>
<a href="https://twitter.com/cuttsyandcuttsy" target="_blank">
<img src="images/social-media-icons/Twitter.png" alt="twitter logo">
</a>
</div>
<div class="privacy">
<p>Privacy policy</p>
<p>© Cuttsy+Cuttsy 2018</p>
</div>
</div>
<!-- ======================
======= SMALL MENU ========
======================= -->
<div class="contracted-menu" id="contracted-menu">
<a href="javascript:void(0)" onclick="openNav()">
<img src="images/nav-icons/menu.png" class="burger" alt="open menu">
</a>
<div class="menu-icons">
<a href="who-we-are.html">
<img src="images/nav-icons/Who-we-are.png" alt="who we are">
</a>
<a href="how-we-work.html">
<img src="images/nav-icons/How-we-work.png" alt="how we work">
</a>
<a href="what-we-do.html">
<img src="images/nav-icons/What-we-do.png" alt="what we do">
</a>
<a href="who-we-do-it-for.html">
<img src="images/nav-icons/who-we-do-it-for.png" alt="who we do it for">
</a>
<a href="cuttings.html">
<img src="images/nav-icons/cuttings.png" alt="cuttings">
</a>
<a href="join-us.html">
<img src="images/nav-icons/join.png" alt="join us">
</a>
<a href="contact.html">
<img src="images/nav-icons/contact.png" alt="contact us">
</a>
<div class="socialmedia-sm">
<a href="https://www.facebook.com/cuttsyandcuttsy/" target="_blank">
<img src="images/social-media-icons/Facebook.png" class="sm-small" alt="facebook logo">
</a>
<a href="https://www.instagram.com/cuttsyandcuttsy/?hl=en" target="_blank">
<img src="images/social-media-icons/Instagram.png" class="sm-small" alt="instagram logo">
</a>
<a href="https://www.linkedin.com/company/2128917/" target="_blank">
<img src="images/social-media-icons/Linkedin.png" class="sm-small" alt="linkedin logo">
</a>
<a href="https://twitter.com/cuttsyandcuttsy" target="_blank">
<img src="images/social-media-icons/Twitter.png" class="sm-small" alt="twitter logo">
</a>
</div>
</div>
</div>
<!-- ======================
========= CONTENT =========
======================= -->
<div class="webcontent">
<div id="main">
<div>
<div class="row" class="col-sm-12">
<h1>How we work.</h1>
<p class="intro">At Cuttsy and Cuttsy, we never lose sight of what really matters – people. That’s why we pride ourselves on developing close and mutually respectful relationships with our clients. It’s why we constantly keep in mind what the patient or end-user really needs to know. And it’s why we work hard to maintain an award-winning culture of professional development to attract the very best people we can to join our team.</p>
</div>
<div class="secNav">
<ul>
<li class="subButton">Emotional Intelligence</li>
<li class="subButton">Co+Create</li>
<li class="subButton">Health Literacy</li>
</ul>
<ul class="secNav-level2">
<li class="subButton">Compliance</li>
<li class="subButton">CSR</li>
</ul>
</div>
<div class="row">
<hr class="dividingline">
<h2>Emotional Intelligence</h2>
<div class="col-sm-10">
<p id="intro-body">Emotional Intelligence (EI) is the capability of individuals to recognise their own and other people’s emotions and use emotional information to guide thinking and behaviour.</p>
<p class="body-copy">
One of our guiding principles is the power of EI. By guiding our thinking and behaviour, EI helps us to build meaningful and impactful connections in our communications.</p>
<h3>EI guides what we do</h3>
<img src="images/emotional-intelligence.png" class="bodyimg">
<hr class="dividingline">
<img src="images/reason-emotion.png" class="bodyimg">
<p class="body-copy" style="padding-top:30px;">
If you would like to find out more about how we use EI to guide our processes, let’s talk.</p>
</div>
</div>
</div>
</div>
</div>
</body>
<footer class="global-footer">
<div class="footer-nav col-sm-10">
<div class="col-sm-3">
<ul>
<li>Home</li>
<li>Who we are</li>
<li>Meet the Team</li>
<li>CPD</li>
<li>How we work</li>
<li>Co+Create</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li>Health Literacy</li>
<li>Compliance</li>
<li>CSR</li>
<li>What we do</li>
<li>Books</li>
<li>Who we do it for</li>
</ul>
</div>
<div class="col-sm-3">
<ul>
<li>Cuttings</li>
<li>Join us</li>
<li>Contact</li>
<li>Privacy policy</li>
</ul>
</div>
</div>
</footer>
</html>
Anyone have any ideas? It's the code between the script tags that doesn't want to work.
assign your functions to variables like this:
<script>
if (window.matchMedia("(min-width: 769px)").matches) {
var openNav = function() {
document.getElementById("expanded-menu").style.marginLeft = "0";
document.getElementById("contracted-menu").style.marginLeft = "-75px";
}
var closeNav = function() {
document.getElementById("expanded-menu").style.marginLeft = "-230px";
document.getElementById("contracted-menu").style.marginLeft = "0";
}
} else if (window.matchMedia("(max-width: 768px)").matches){
var openNav = function() {
document.getElementById("expanded-menu").style.marginTop = "0";
document.getElementById("contracted-menu").style.marginTop = "-75px";
}
var closeNav = function() {
document.getElementById("expanded-menu").style.marginTop = "-100vh";
document.getElementById("contracted-menu").style.marginTop = "0";
}
}
</script>
I have a project that needs a CSS menu bar with panel of overview panels on the right side of HTML page. My issue is the that the CSS menu bar style sheet menu does not render. Attempting to get this CSS menu bar working, then extend code functionality for content links, login, dashboard, etc.
Code: tag
<header class='header'>
<div class='header_top-bar'>
<div class='top-bar_title'>
<a href='index'><h1><img src='images/logo.png' data-image='images/logo.png' alt='Athena'></h1></a>
<div class='ajax-loader' id='ajax-loader'>
<div class='ajax-loader_animator'></div>
</div>
</div>
<div class='top-bar_toggle' id='menu_toggle'>
<span></span>
<span></span>
<span></span>
</div>
<!-- <div class='top-bar_share' id='share_toggle'>
<span class='underline--white'>
SHARE
</span>
</div> -->
<div class='top-bar_menu' id='overlay_menu'>
<ul class='menu_container'>
<li class='menu_item'>
<span>.01.</span>
<a class='link-ajax' href='/'>Home</a>
</li>
<li class='menu_item'>
<span>.02.</span>
<a class='link-ajax' href='/project'>Athena Customers</a>
</li>
<li class='menu_item'>
<span>.03.</span>
<a class='link-ajax' href='/wines'>Athena Services</a>
</li>
<li class='menu_item'>
<span>.04.</span>
<a class='link-ajax' href='/sustainability'>Athena Sustainability</a>
</li>
<li class='menu_item'>
<span>.05.</span>
<a class='link-ajax' href='/hospitality'>Athena Dashboards</a>
</li>
</ul>
<div class='language-chooser menu_item'>
<div class='masi-agricola_wrapper hide-on-mobile'>
<a href='http://www.masi.it' target='_blank' class='masi-agricola_link'>
<img src='images/agricola.png' data-image='images/agricola.png'/>
</a>
</div>
<p class='text--subtitle'>select your language</p>
<span class='language-link'><a class='' href='/en/'>Eng</a></span>
<span class='line-break'></span>
<span class='language-link'><a class='' href='/es/'>Esp</a></span>
<span class='line-break'></span>
<span class='language-link'><a class='' href='/it/'>Ita</a></span>
</div>
</div>
</div>
</header>
Code: content section
<div id="new-plh" class="plh"></div>
<div id="actual-plh" class="plh">
<section class="main-content clearfix homepage">
<div class="main-content_background">
<div class="half_screen full-height-desk" id="biggest_block">
<a href="project" class="">
<div class="text-block">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Athena Intelligence Earth's Essential Data
</h1>
<strong class="page-header_subtitle text--subtitle">
Athena Intelligence Login
</strong>
</div>
<img data-image="images/project-header.jpg" src="images/project-header.jpg" alt="">
</div>
</a>
</div>
<div class="half_screen full-height-desk">
<a href="wines">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Athena: Many industries: all use Land, Food, Energy, Water
</h1>
<strong class="page-header_subtitle text--subtitle">
The Gods: Land, Food, Energy, Water
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/wines-header.jpg" src="images/wines-header.jpg" alt="">
</div>
</div>
</a>
<a href="sustainability" class="">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Land, Food, Energy, Water: Sustainability
</h1>
<strong class="page-header_subtitle text--subtitle">
Athena : Dedication To Land, Food, Energy, Water
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/sustainability-header.jpg" src="images/sustainability-header.jpg" alt="">
</div>
</div>
</a>
<a href="hospitality">
<div class="text-block three_row">
<div class="full-image_header page-header">
<h1 class="page-header_title text--title">
Land, Food, Energy, Water: Hospitality
</h1>
<strong class="page-header_subtitle text--subtitle">
Land, Food, Energy, Water: That Welcomes You
</strong>
</div>
<div class="image-container">
<img class="three_images" data-image="images/hospitality-header.jpg" src="images/hospitality-header.jpg" alt="">
</div>
</div>
</a>
</div>
</div>
</section>
Code: title bar wrapper tag
<div class='out-loader_wrapper'>
<div class='out-loader'>
<div class='filler' id='filler'>
<img class='logo-loader' src='images/logo.png' data-image='images/logo.png'/>
<div class='filler-bar'></div>
<p class='text--title' id='loader_text'>0</p>
</div>
</div>
</div>
Given you did not post the complete HTML I cannot tell if you are linking the stylesheet correctly. Nothing in your HTML looks out of place, which means that if you can't see the styles rendered then either the stylesheet was not linked correctly to the document or you did not import it correctly if you're using a preprocessor like SASS or LESS.
However, you can try the following:
Make sure you're linking it correctly in your document's <head> like <link href="path/to/your/menu-stylesheet.css rel="stylesheet">.
If you're linking multiple stylesheets, make sure to link them in the correct order. This means that if you reference classes or styles that are declared in another stylesheet, you must ensure to link the stylesheet that is referenced before the stylesheet that makes the reference.
If you're using a preprocessor, make sure you imported the stylesheet correctly like #import 'path/to/stylesheet.less (mind the correct extension whichever your case.
If you're using a task runner like grunt or gulp, you can concatenate your stylesheets into one single stylesheet.
Recently i switched to materialize (it's based on Bootstrap i guess) and i'm trying to make modal work. it just doesn't show up. the button is there but it triggers nothing. I'm using starter template from Materialize website.
All i did was copy and paste modal code from Materialize modal page. I put the code in starter template but it doesn't work. i also tested it on another theme based on materialize but that didn't work either.
also jQuery is loaded properly.
edit: it's index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>Starter Template - Materialize</title>
<!-- CSS -->
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="light-blue lighten-1" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right">
<li>Navbar Link</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Navbar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center orange-text">Starter Template</h1>
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
<div class="row center">
<button data-target="#modal1" class="btn modal-trigger">Modal</button>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br><br>
</div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-image-flash-on"></i></h2>
<h5 class="center">Speeds up development</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-social-group"></i></h2>
<h5 class="center">User Experience Focused</h5>
<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-action-settings"></i></h2>
<h5 class="center">Easy to work with</h5>
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="section">
</div>
</div>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>
<script> $(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});</script>
</body>
</html>
modal code:
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
Here's a demo of Starter template
Here's download link of template
In the version v0.97.8 (October 30th, 2016) modal plugin has been refactored according to the updates from github. Now, the initialization of the plugin is done differently, like in the example below.
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
I think you forgot to attach the plugin to the button.
$(document).ready(function() {
$('.modal-trigger').leanModal();
});
Also change this line data-target="#modal1"
<button data-target="#modal1" class="btn modal-trigger">Modal</button>
In to this line data-target="modal1", you inserted # by mistake, a loudy error noticed me in console.
<button data-target="modal1" class="btn modal-trigger">Modal</button>
See the snippet below for working example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<nav class="light-blue lighten-1" role="navigation">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right">
<li>Navbar Link</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Navbar Link</li>
</ul>
<i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<br><br>
<h1 class="header center orange-text">Starter Template</h1>
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
<div class="row center">
<button data-target="modal1" class="btn modal-trigger">Modal</button>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br><br>
</div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-image-flash-on"></i></h2>
<h5 class="center">Speeds up development</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-social-group"></i></h2>
<h5 class="center">User Experience Focused</h5>
<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><i class="mdi-action-settings"></i></h2>
<h5 class="center">Easy to work with</h5>
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
<br><br>
<div class="section">
</div>
</div>
<footer class="page-footer orange">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Company Bio</h5>
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
</div>
<div class="col l3 s12">
<h5 class="white-text">Settings</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
<div class="col l3 s12">
<h5 class="white-text">Connect</h5>
<ul>
<li><a class="white-text" href="#!">Link 1</a></li>
<li><a class="white-text" href="#!">Link 2</a></li>
<li><a class="white-text" href="#!">Link 3</a></li>
<li><a class="white-text" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
</div>
</div>
</footer>
<script>
$(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
</script>
For updated code you should initialize
$(document).ready(function() {
$('.modal').modal();
});
I discovered the difference when checking to see what the requests looked like to download the JavaScript files from the server. I just wanted to see what the link looked like in the HTML, but when I checked in the inspector, I couldn't find any references to any JavaScript. When I checked the source, they were certainly there.
You can see the example here: http://todomvc.com/architecture-examples/angularjs/#/
I can't seem to figure out why.
Here it is in Firebug's inspector:
And here it is when viewing it from the source:
There are also some element attributes that seem to disappear between the two.
Can someone explain why?
Edit:
Here's the complete markup from source:
<!doctype html>
<html lang="en" data-framework="angularjs">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AngularJS • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<style>[ng-cloak] { display: none; }</style>
</head>
<body ng-app="todomvc">
<ng-view />
<script type="text/ng-template" id="todomvc-index.html">
<section id="todoapp" ng-controller="TodoCtrl">
<header id="header">
<h1>todos</h1>
<form id="todo-form" ng-submit="addTodo()">
<input id="new-todo" placeholder="What needs to be done?" ng-model="newTodo" autofocus>
</form>
</header>
<section id="main" ng-show="todos.length" ng-cloak>
<input id="toggle-all" type="checkbox" ng-model="allChecked" ng-click="markAll(allChecked)">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" ng-click="removeTodo(todo)"></button>
</div>
<form ng-submit="doneEditing(todo)">
<input class="edit" ng-trim="false" ng-model="todo.title" todo-escape="revertEditing(todo)" ng-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
</form>
</li>
</ul>
</section>
<footer id="footer" ng-show="todos.length" ng-cloak>
<span id="todo-count"><strong>{{remainingCount}}</strong>
<ng-pluralize count="remainingCount" when="{ one: 'item left', other: 'items left' }"></ng-pluralize>
</span>
<ul id="filters">
<li>
<a ng-class="{selected: status == ''} " href="#/">All</a>
</li>
<li>
<a ng-class="{selected: status == 'active'}" href="#/active">Active</a>
</li>
<li>
<a ng-class="{selected: status == 'completed'}" href="#/completed">Completed</a>
</li>
</ul>
<button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed ({{completedCount}})</button>
</footer>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Credits:
Christoph Burgdorf,
Eric Bidelman,
Jacob Mumm and
Igor Minar
</p>
<p>Part of TodoMVC</p>
</footer>
</script>
<script src="bower_components/todomvc-common/base.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/todoCtrl.js"></script>
<script src="js/services/todoStorage.js"></script>
<script src="js/directives/todoFocus.js"></script>
<script src="js/directives/todoEscape.js"></script>
</body>
</html>
And here's what the markup looks like in the inspector:
<!DOCTYPE html>
<html lang="en" data-framework="angularjs">
<head>
<style type="text/css">
#charset "UTF-8";
[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{
display:none !important;
}ng\:form{
display:block;
}
</style>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title>
AngularJS • TodoMVC
</title>
<link href="bower_components/todomvc-common/base.css" rel="stylesheet">
<style>
[ng-cloak] {
display: none;
}
</style>
</head>
<body class="learn-bar ng-scope" ng-app="todomvc">
<aside class="learn">
<header>
<h3>
AngularJS
</h3>
<span class="source-links">
<h5>
Architecture Example
</h5>
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs">
Source
</a>
<h5>
Dependency Example
</h5>
<a class="demo-link" href="http://todomvc.com/labs/dependency-examples/angularjs_require">
Demo
</a>
,
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/dependency-examples/angularjs_require">
Source
</a>
<h5>
AngularJS Optimized
</h5>
<a class="demo-link" href="http://todomvc.com/architecture-examples/angularjs-perf">
Demo
</a>
,
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/architecture-examples/angularjs-perf">
Source
</a>
<h5>
TypeScript & AngularJS
</h5>
<a class="demo-link" href="http://todomvc.com/labs/architecture-examples/typescript-angular">
Demo
</a>
,
<a href="https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/typescript-angular">
Source
</a>
</span>
</header>
<hr>
<blockquote class="quote speech-bubble">
<p>
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
</p>
<footer>
<a href="http://angularjs.org">
AngularJS
</a>
</footer>
</blockquote>
<hr>
<h4>
Official Resources
</h4>
<ul>
<li>
<a href="http://docs.angularjs.org/tutorial">
Tutorial
</a>
</li>
<li>
<a href="http://docs.angularjs.org/api">
API Reference
</a>
</li>
<li>
<a href="http://docs.angularjs.org/guide">
Developer Guide
</a>
</li>
<li>
<a href="http://builtwith.angularjs.org">
Applications built with AngularJS
</a>
</li>
<li>
<a href="http://blog.angularjs.org">
Blog
</a>
</li>
<li>
<a href="http://docs.angularjs.org/misc/faq">
FAQ
</a>
</li>
<li>
<a href="http://www.youtube.com/angularjs">
AngularJS Meetups
</a>
</li>
</ul>
<h4>
Articles and Guides
</h4>
<ul>
<li>
<a href="http://www.codeschool.com/code_tv/angularjs-part-1">
Code School AngularJS course
</a>
</li>
<li>
<a href="http://net.tutsplus.com/tutorials/javascript-ajax/5-awesome-angularjs-features">
5 Awesome AngularJS Features
</a>
</li>
<li>
<a href="http://briantford.com/blog/angular-yeoman.html">
Using Yeoman with AngularJS
</a>
</li>
<li>
<a href="http://stephenplusplus.github.io/meangular">
me&ngular - an introduction to MVW
</a>
</li>
</ul>
<h4>
Community
</h4>
<ul>
<li>
<a href="http://www.youtube.com/playlist?list=PL1w1q3fL4pmgqpzb-XhG7Clgi67d_OHXz">
Walkthroughs and Tutorials on YouTube
</a>
</li>
<li>
<a href="https://groups.google.com/forum/?fromgroups#!forum/angular">
Google Groups mailing list
</a>
</li>
<li>
<a href="http://stackoverflow.com/questions/tagged/angularjs">
angularjs on Stack Overflow
</a>
</li>
<li>
<a href="https://twitter.com/angularjs">
AngularJS on Twitter
</a>
</li>
<li>
<a href="https://plus.google.com/+AngularJS/posts">
AngularjS on Google +
</a>
</li>
</ul>
<footer>
<hr>
<em>
If you have other helpful links to share, or find any of the links above no longer work, please
<a href="https://github.com/tastejs/todomvc/issues">
let us know
</a>
.
</em>
</footer>
</aside>
<ng-view class="ng-scope">
<section id="todoapp" class="ng-scope" ng-controller="TodoCtrl">
<header id="header">
<h1>
todos
</h1>
<form id="todo-form" class="ng-pristine ng-valid" ng-submit="addTodo()">
<input id="new-todo" class="ng-pristine ng-valid" autofocus="" ng-model="newTodo" placeholder="What needs to be done?">
</form>
</header>
<section id="main" class="ng-hide" ng-show="todos.length">
<input id="toggle-all" class="ng-pristine ng-valid" type="checkbox" ng-click="markAll(allChecked)" ng-model="allChecked">
<label for="toggle-all">
Mark all as complete
</label>
<ul id="todo-list">
</ul>
</section>
<footer id="footer" class="ng-hide" ng-show="todos.length">
<span id="todo-count">
<strong class="ng-binding">
0
</strong>
<ng-pluralize when="{ one: 'item left', other: 'items left' }" count="remainingCount">
items left
</ng-pluralize>
</span>
<ul id="filters">
<li>
<a class="selected" href="#/" ng-class="{selected: status == ''} ">
All
</a>
</li>
<li>
<a href="#/active" ng-class="{selected: status == 'active'}">
Active
</a>
</li>
<li>
<a href="#/completed" ng-class="{selected: status == 'completed'}">
Completed
</a>
</li>
</ul>
<button id="clear-completed" class="ng-binding ng-hide" ng-show="completedCount" ng-click="clearCompletedTodos()">
Clear completed (0)
</button>
</footer>
</section>
<footer id="info" class="ng-scope">
<p>
Double-click to edit a todo
</p>
<p>
Credits:
<a href="http://twitter.com/cburgdorf">
Christoph Burgdorf
</a>
,
<a href="http://ericbidelman.com">
Eric Bidelman
</a>
,
<a href="http://jacobmumm.com">
Jacob Mumm
</a>
and
<a href="http://igorminar.com">
Igor Minar
</a>
</p>
<p>
Part of
<a href="http://todomvc.com">
TodoMVC
</a>
</p>
</footer>
</ng-view>
</body>
</html>
Inspector = current state of the dom (May be modfied by scripts), source code = original data send by server.
Certain elements like scripts that where used to store templates or other data , are often removed from dom by the libraries after their content was read to keep the dom clean.
That's why they don't appear in the inspector.