I replaced the content of textarea in https://codepen.io/DerkJanS/pen/owVGZb?editors=1010 by another one I found, and it gets truncated :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>run python in browser!</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css" />
<script src="https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js"></script>
</head>
<body>
<div class="container-fluid bg-light">
<section class="header text-center p-5">
<h2 class="text-dark">python editor with CodeMirror
and
pyodide
</h2>
</section>
<div class="d-flex flex-column">
<section class="input">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page">
<h4>Input</h4>
</a>
</li>
</ul>
<div><textarea id="code" name="code">
</textarea>
</div>
</section>
<div class="align-self-center m-3">
<button type="button" class="btn btn-success" onclick="evaluatePython()">
<h5>Run</h5>
</button>
</div>
<section class="output">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="page">
<h4>Output</h4>
</a>
</li>
</ul>
<div>
<textarea id="output" name="output" class="w-100" rows="15">
</textarea>
</div>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.3/codemirror.min.js"
integrity="sha512-XMlgZzPyVXf1I/wbGnofk1Hfdx+zAWyZjh6c21yGo/k1zNC4Ve6xcQnTDTCHrjFGsOrVicJsBURLYktVEu/8vQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.3/mode/python/python.min.js"
integrity="sha512-/mavDpedrvPG/0Grj2Ughxte/fsm42ZmZWWpHz1jCbzd5ECv8CB7PomGtw0NAnhHmE/lkDFkRMupjoohbKNA1Q=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src='main.js'></script>
</body>
</html>
Related
I am having tremendous difficulty coding with java script. My Java script file is using nodejs, which means i cant perform any DOMS. For examples this code here:
var form = document.getElementsByClassName('nav-item');
console.log(form.length);
There are 4 nav-items which are displayed in the developer tools on the browser but the length is 0, where it should be 4. Why is this happening? Is there a way to disable nodejs or switch ? I know nodejs is server side, so how do i disable it or create another js file that is in client side?
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="boot.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="boot.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Creates the navbar links-->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Subjects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link float-right" href="#">Sign Up</a>
</li>
</ul>
</div>
</nav>
<br>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox">Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
BOOT.JS FILE:
var form = document.getElementsByClassName('nav-item');
console.log(form.length);
Try loading your script at the end of the file instead of the header. The DOM has not loaded when you run the script. Either that or put it inside this event:
document.addEventListener("DOMContentLoaded", function(event) {
var form = document.getElementsByClassName('nav-item');
console.log(form.length);
});
I am writing a spring boot application using Thymelef. When I go to start the application, I realize that although everything loads up fine, my Javascript and Jquery are not rendering. So I am not sure what the issue is. I am not sure if there is a special way to apply the js code. I don't have any idea where the issue is at.
<!DOCTYPE html>
<html xml="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="ISO-8859-1">
<title>Application</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs ">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="create.html">Create</a>
</li>
<li class="nav-item dropdown ml-md-auto">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Account</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Settings</a>
<div class="dropdown-divider">
</div> <a class="dropdown-item" href="#">Log out</a>
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 class="text-center">
App Mapping
</h3>
</div>
</div>
<div class="row" id="search-row">
<div class="col-md-8">
<div class="filter-search">
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<div class="list-group" id="myList" th:each="plants : ${plants}">
</div>
</div>
</div>
<div class="col-md-4">
<span class="input-group-btn">
<button type="button" class="btn btn-success">View</button>
</span>
</div>
</div>
</div>
<script src="js/script.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</body>
</html>
File Structure:
.
+-- static
+-- js
| +-- bootstrap.min.js
| +-- jquery.min.js
| +-- popper.min.js
| +-- script.js
$(document).ready(function() {
$('.sidenav').sidenav();
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<i class="material-icons">menu</i>
</li>
</ul>
<ul class="right">
<li><i class="material-icons right">archive</i>
</li>
<li><i class="material-icons right">delete</i>
</li>
<li><i class="material-icons right">mail</i>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="../images/sidePanelBackgroundImage.jpg">
</div>
<img class="circle" src="../images/profilePicture.png">
<span class="white-text name">John Doe </span>
<span class="white-text email">test#gmail.com</span>
</div>
</li>
<li><i class="material-icons">mail_outline</i>Notifications On
<li>
<li><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
<i class="material-icons">menu</i>
</body>
</html>
I am not sure how to move my menu item which appears below the navbar, learning how to use materialize. I want the side panel to pop out whenever the menu button is clicked in the nav bar (web).
I have tried various things including moving the slideOut into the navBar, but the menu item disappears as a result.
Overwrite the style of sidenav-trigger to display:block !important
$(document).ready(function() {
$('.sidenav').sidenav();
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/script.js"></script>
<link rel="stylesheet" href="../css/style.css">
<meta charset="utf-8">
<title>Web Mail</title>
</head>
<body>
<nav id="navBar">
<div class="nav-wrapper">
<ul class="left">
<i class="material-icons">menu</i>
</li>
</ul>
<ul class="right">
<li><i class="material-icons right">archive</i>
</li>
<li><i class="material-icons right">delete</i>
</li>
<li><i class="material-icons right">mail</i>
</li>
</ul>
</div>
</nav>
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="https://static01.nyt.com/images/2018/05/27/sports/27championstrophy/merlin_138716301_7655ceb3-fb5e-4354-821a-bfad8d475786-superJumbo.jpg?quality=90&auto=webp" style="width:100%">
</div>
<img class="circle" src="https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Real_Madrid_CF.svg/1200px-Real_Madrid_CF.svg.png">
<span class="white-text name">John Doe </span>
<span class="white-text email">test#gmail.com</span>
</div>
</li>
<li><i class="material-icons">mail_outline</i>Notifications On
<li>
<li><i class="material-icons">local_phone</i>(XXX)-XXX-XXXX
<li>
<li>
<div class="divider"></div>
</li>
<li><a class="subheader">Mail Functions</a></li>
<a class="waves-effect waves-light btn-small" id="sendMail"><i class="material-icons left">mail</i>Send Mail</a>
<a class="waves-effect waves-light btn-small" id="viewMail"><i class="material-icons left">drafts</i>View Mailbox</a>
</ul>
</body>
</html>
I'm having difficulty having my off-canvas menu in Foundation 5 toggle on and off, or at least not always appear on canvas. Below is a picture of the current site.
As shown, the offcanvas is very much on canvas
This is the HTML I am running so far. The content is not included as it is on a separate YAML file, but it should be unnecessary.
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="/assets/img/logo/sjpminilogo.png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>{{ page.title }} | Paly SJP</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/assets/css/syntax.css">
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="stylesheet" href="/assets/foundation/css/foundation.css">
<link rel="stylesheet" href="/assets/foundation/css/normalize.css">
<link rel="stylesheet" href="/assets/css/custom.css">
<script type="text/javascript" src="/assets/foundation/js/custom.modernizr.js"></script>
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet" type="text/css">
</head>
<body>
<div class="site">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<div class="header">
<!-- Top Bar -->
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1>Paly SJP</h1>
</li>
</ul>
<!-- All tabs on right side -->
<section class="top-bar-section">
<ul class="right">
<li class="name">
ABOUT US
</li>
<li class="name">
CALENDAR
</li>
<li class="has-dropdown not-click">COHORTS
<ul class="dropdown">
<li>COHORT 1</li>
<li>COHORT 2</li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
<!-- Side bar -->
<nav class="tab-bar show-for-small">
<a class="left-off-canvas-toggle menu-icon" href="#">
<span>
Paly SJP
</span>
</a>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>
<label>Menu</label>
</li>
<li>
Paly SJP
</li>
<li>
About Us
</li>
<li>
Calendar
</li>
<li>
<label>Cohorts</label>
</li>
<li style="background-color: #3B3B3B">
Cohort 1
</li>
</ul>
</aside>
<div class="content">
{{ content }}
</div>
<div class="footer">
<div class="row">
<div class="large-12 columns">
<h6 style="color:#ffffff; margin-top:24px; font-size:14px;">Keep in touch!</h6>
<a href="https://twitter.com/palysocjustice" target="_blank">
<img src="/assets/img/logo/footer/twitter.png" class="logo" /></a>
<a href="https://www.facebook.com/pages/Paly-Social-Justice-Pathway/1481478495402897" target="_blank">
<img src="/assets/img/logo/footer/facebook.png" class="logo" /></a>
<a href="http://palysocialjustice.blogspot.com/" target="_blank">
<img src="/assets/img/logo/footer/blogspot.png" class="logo" /></a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/assets/foundation/js/vendor/jquery.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation.min.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.clearing.js"></script>
<script type="text/javascript" src="/assets/foundation/js/foundation/foundation.offcanvas.js"></script>
<script type="text/javascript" src="/assets/js/custom.js"></script>
</div>
<script type="text/javascript">
$(document).foundation();
</script>
</body>
</html>
If you inspect the aside element using the developer tools in Chrome or whatever browser you're using, the styles associated with the left-off-canvas-menu class are not present.
Re-upload the complete foundation.css file to ensure the appropriate styles are applied.
I'm trying to get the collapse button on a navbar to work but i can't seem to. I've checked that the data target is pointing to .navbar-collapse and as far as I can tell my css and javascript are all there. Can't work out what I'm doing wrong.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javasript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javasript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title></title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="assets/images/title.png" class="img-responsive" /></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-header">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="assets/images/hero-banner.jpg" class="img-responsive" />
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="assets/images/mountains-small.jpg" class="img-responsive" />
<p id="hometext">text goes here</p>
</div>
</div>
</div>
<div class="container">
<div class="container" id="footer">
<div class="row">
<div class="col-xs-12">
<p class="footerheading">Contact Us</p>
<p class="copyright">© 2014 company</p>
</div>
</div>
</div>
</div>
</div>
</body>