I am getting a few errors within JavaScript. I am fairly new at JavaScript/Jquery. I have checked the errors over google and I understand the errors, however they still appear after attempting to troubleshoot these problems....
Errors are shown on this link:
JavaScript Console Errors
I have tried - Changing file directories, - changing file names, - adding JQuery CDN as first point of call in HTML as expected,- adding a Local Jquery file, - Adding Particles.js and Typed.Js in body tags, adding the js code within body.
HTML Code shown below:
<!DOCTYPE html>
<html>
<head>
<meta lang="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link rel="stylesheet" href="stylesheet/normalize.css">
<link rel="stylesheet" href="stylesheet/bootstrap.min.css">
<link rel="stylesheet" href="stylesheet/c0nsec.min.css">
<!-- Scripts -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/particles.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/typed.js"></script>
<script type="text/javascript" src="js/c0nsec.min.js"></script>
<!-- My own js file -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
</head>
<body>
<div id="particles-js"></div>
<!-- For full body paricles -->
<div class="container">
<section class="mainLanding">
<div class="row">
<div class="col-md-12 col-sm-12">
<h1 class="test"> ELLO WORLD M8</h1>
<div class="center">
<!-- For typed.js plugin -->
<span class="type"></span>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
CSS code shown Below:
/*======================*/
/* DEFAULT TEMPLATE*/
/*======================*/
html {
font-family: 'Source Sans Pro', Sans-Serif;
}
body {
background: #1f1f1f;
}
/* Particles JS tag */
#particles-js {
width: 100%;
height: 100%;
}
/*======================*/
/* HEADER */
/*======================*/
/*======================*/
/* HEADINGS */
/*======================*/
.test {
font-family: Source Sans Pro;
font-weight: 300;
color: #fff;
text-align: center;
font-size: 7vh;
}
/*======================*/
/* SECTIONS */
/*======================*/
.mainLanding {
position: relative;
top: 50vh;
width: 100vh;
height: 100vh;
left: 0;
right: 0;
}
/* Typed JS tags */
.center {
position: absolute;
top: 50%;
left: 0;
transform: translate(0, -50%);
text-align: center;
width: 100%;
}
.center span {
font-family: Source Sans Pro;
font-size: 5em;
color: #fff;
}
JavaScript code shown below:
// Custom Typed.js scripts
$(function() {
$(".type").typed({
strings: [
"Hello World",
"We are C0nSec, we consult with security vulnerabilites",
"Our mission is to keep the internet safe from criminals"
],
typeSpeed: 70,
backDelay: 200,
loop: true
})
})
Related
I am trying to add trix editor in a form. It appears but the toolbar is disabled its not working. After some research i found that was in the header of my layout file so i moved it in the end of the body and removed "defer" and now trix editor is disappeared.
layout file
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
#yield('scripts')
</body>
</html>
field where i want trix editor
<div class="form-group">
<label for="content">Content</label>
<input id="content" type="hidden" name="content">
<trix-editor input="content"></trix-editor>
</div>
trix js and css
#section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.js"></script>
#endsection
#section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.css">
#endsection
--> composer require te7a-houdini/laravel-trix
--> php artisan vendor:publish --provider="Te7aHoudini\LaravelTrix\LaravelTrixServiceProvider"
--> php artisan migrate
In your page use like
<html>
<head>
#trixassets
</head>
<body>
<form method="POST" action="route('article.store')">
#csrf
#trix(\App\Article::class, 'content')
<input type="submit">
</form>
</body>
</html>
Here i made demo trix editor and it's working fine in laravel 5.8.14 v
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.css">
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="flex-center position-ref full-height">
#if (Route::has('login'))
<div class="top-right links">
#auth
Home
#else
Login
#if (Route::has('register'))
Register
#endif
#endauth
</div>
#endif
<div class="content">
<div class="title m-b-md">
Laravel
</div>
<trix-editor input="content"></trix-editor>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/trix/1.1.1/trix.js"></script>
</body>
</html>
Did you forget to add jquery ?
The link of js of trix code that you have mentioned in your section('scripts'), instead of including in 'scripts' section. Directly paste the link in your main HEAD section of html, may be its in layouts.app.
or you can also do the same as you have done but just change some code as like:
In your html, head section, add yield as like #YIELD('CSCRIPTS') just below other mentioned SCRIPT tag, make sure you use new name in yield.
In html, head section, you will also see other SCRIPT tag, there remove DEFER if it is there.
And finally, go to the blade where your SECTION belong and change it to #SECTION('CSCRIPTS').
Works well.
But also you will see the other script tag, there and remove DEFER keyword.
Other keep as it, works perfectly
I'm trying to add a WebGL-script to a site with FullPage.js but it doesn't work so well (I just get a black screen). I have no idea what the problem is since both the WebGL-script and Fullpage.js work perfect separately. I was not able to add all the script to a jsFiddle but the scripts can be seen at this site http://www.scandinavija.com/index.html (I removed all the non-relevant script).
When I inspect the site in Chrome I get the following error: "Uncaught TypeError: Cannot read property 'offsetWidth' of null at particles.js:6" May that be the problem?
My instinct, however, rather tells me that the problem should be somewhere here:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
<link rel="stylesheet" type="text/css" href="css/examples.css">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/scrolloverflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<!-- Particles (three.js) -->
<script type="text/javascript" src="js/detector.js"></script>
<script type="text/javascript" src="js/stats.min.js"></script>
<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/particles.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
verticalCentered: true,
anchors: ['firstSection', 'secondSection', '3rdSection',
'4thSection', '5thSection'],
});
});
</script>
</head>
<body>
<!-- My canvas (three.js) below -->
<div id="canvas-container"></div>
<div id="fullpage">
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>
<div class="section" id="section5"></div>
</div>
</body>
</html>
CSS:
#CHARSET "ISO-8859-1";
/* Reset CSS
* --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
background-color: #000;
}
a{
text-decoration:none;
}
table {
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
strong{
font-weight: bold;
}
ol,ul {
list-style: none;
margin:0;
padding:0;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
margin:0;
padding:0;
color:#444;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
/* START OF MY SCRIPT BELOW*/
#canvas-container {
z-index: 1000;
position: absolute;
width: 100%;
height: 100%;
}
You get this error because you try to access a property of an object that is evaluated to null.
particles.js
var container = document.getElementById('canvas-container');
// ^^^^^^^^^^^^^^^^
// not found
var w = container.offsetWidth;
// ^^^^^^^^^
// eq. null
This is because your element #canvas-container doesn't exists in the DOM when the script particles.js is executed.
You just have to wrap your code inside a document loaded callback to ensure the element will be accessible :
$(function() {
// particles.js code
});
You can also simply move your script tag at the end of your HTML file :
...
<script type="text/javascript" src="js/particles.js"></script>
</body>
This is my first time building a website. I picked a free bootstrap 3 theme and started editing it from there to try and get the hang of it all. So far it has been going well but I am having problems trying to horizontally center the countdown timer on my site (http://romy.landofthelegend.com/index.php?cID=1)
I tried fidgeting with the HTML, js, and CSS but if there is change the timer will still be aligned left but have a word-break instead.
var finalDate = '2017/04/14';
$('div#counter').countdown(finalDate)
.on('update.countdown', function(event) {
$(this).html(event.strftime('<div class=\"half\">' +
'<span>%D <sup>days</sup></span>' +
'<span>%H <sup>hours</sup></span>' +
'</div>' +
'<div class=\"half\">' +
'<span>%M <sup>mins</sup></span>' +
'<span>%S <sup>secs</sup></span>' +
'</div>'));
});
.main-content-tablecell {
display: table-cell;
vertical-align: bottom;
z-index: 700;
}
.main-content-tablecell .row {
position: relative;
padding-top: 4.2rem;
padding-bottom: 15rem;
}
.main-content-tablecell #counter {
margin-bottom: 4.2rem;
}
.main-content-tablecell #counter:before,
.main-content-tablecell #counter:after {
content: "";
display: table;
}
.main-content-tablecell #counter:after {
clear: both;
}
.main-content-tablecell #counter .half {
float: left;
}
.main-content-tablecell #counter span {
float: left;
text-align: right;
color: #FFFFFF;
font-family: "roboto-black", sans-serif;
font-size: 12rem;
line-height: 1;
padding: 0;
margin-bottom: 1.5rem;
}
.main-content-tablecell #counter span sup {
font-family: "roboto-bold", sans-serif;
font-size: .17em;
color: rgba(255, 255, 255, 0.3);
top: -3.6em;
right: 1em;
}
.main-content-tablecell h1 {
font-size: 4.2rem;
line-height: 1.143;
color: #FFFFFF;
margin-bottom: 1.2rem;
max-width: 600px;
position: relative;
}
.main-content-tablecell p {
color: rgba(255, 255, 255, 0.3);
font-family: "roboto-regular", sans-serif;
font-size: 1.8rem;
max-width: 400px;
<div class="row">
<div class="col-md-2 col-md-offset-5">
<div class="col-twelve">
<div id="counter">
<div class="center-div">
<span class="inner">94 <sup>days</sup></span>
<span class="inner">23 <sup>hours</sup></span>
</div>
<div class="center-div">
<span class="inner"> 40 <sup>mins</sup></span>
<span class="inner">03 <sup>secs</sup></span>
</div>
</div>
</div>
</div>
</div>
please try to make it as simple as possible with explaining, since I am still learning :)
Thank you in advance!
I would suggest first go over bootstrap css and understand grid system and existing components structure. Try to reuse what is already. http://getbootstrap.com/css/#overview
<!DOCTYPE html>
<html lang="en">
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap</title>
<!-- Bootstrap -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="contianer"> <!-- Boostrap main contianer (Bootstrap requires a containing element to wrap site contents and house in grid system.) http://getbootstrap.com/css/#overview-container-->
<div class="row">
<div class="col-md-2 col-md-offset-5">
<div class="col-twelve">
<div id="counter" class="text-center"></div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/hilios/jQuery.countdown/2.2.0/dist/jquery.countdown.min.js"></script>
<script>
var finalDate = '2017/04/14';
$('#counter').countdown(finalDate)
.on('update.countdown', function(event) {
$(this).html(event.strftime('<div>' +
'<span>%D <sup>days</sup></span>' +
'<span>%H <sup>hours</sup></span>' +
'</div>' +
'<div class=\"half\">' +
'<span>%M <sup>mins</sup></span>' +
'<span>%S <sup>secs</sup></span>' +
'</div>'));
});
</script>
</body>
</html>
When I run the following in the JavaScript console in chrome:
var doc = document.documentElement.innerHTML;
prompt('test',doc);
I receive the following:
<head>
<title>****</title>
<style type="text/css">
/* Hide all indicators by default even css bundle is not loaded */
body > div.suspension-indicator-backdrop, body > div[class$='-indicator'] {
display: none;
}
</style>
<link href="/css/bundle/app?v=******" rel="stylesheet">
<!--[if IE]>
<script src="/css/bundle/ie?v=" crossorigin="anonymous"></script>
<![endif]-->
<script type="application/javascript" async="" defer="" src="https://****/track.js?_=****"; }
#intercom-container .intercom-conversation-embed .intercom-sheet-body {
border: none;
z-index: 0; }
#intercom-container .intercom-conversation-embed .intercom-comment-timestamp {
display: none; }
#intercom-container #intercom-embedded-launcher {
z-index: *****;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
height: 48px;
width: 48px;
position: relative; }
#intercom-container #intercom-embedded-launcher.intercom-launcher-with-preview {
width: 340px; }
</style><div id="intercom-launcher" class="intercom-launcher intercom-launcher-active"><div class="intercom-launcher-button"></div>
<div class="intercom-launcher-badge"></div>
<div class="intercom-launcher-preview">
<div class="intercom-launcher-preview-body"></div>
<div class="intercom-launcher-preview-caret"></div>
<div class="intercom-launcher-preview-close"></div>
</div>
</div><div id="intercom-messenger" class="intercom-messenger intercom-messenger-inactive"></div></div></body>
The displayed page however has fields, buttons, and other elements that aren't being returned in my prompt. Can anyone explain why this is happening and how to get access to those elements through external javascript?
I have these files in the same folder:
index.html
style.css
script.js
I want the nav#menu be nav#menu.sticky on top when I scroll. It should be like http://iconmonstr.com/ but nothing. I only know html and css.
index.html
<!DOCTYPE html>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<header id="main-header">
<h1>Title</h1>
<h2>Slogan</h2>
</header>
<nav id="menu">
</nav>
<section id="main-section">
</section>
<footer id="main-footer">
© 2014 Copyright
</footer>
style.css
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: sans-serif;
}
body {
margin: 0;
}
h1 {
font-size: 3em;
margin: 0;
}
h2 {
font-size: 2em;
margin: 0;
}
#main-header {
background: #08c;
color: #fff;
height: 10em;
padding: 2em;
text-align: center;
}
#menu {
background: red;
height: 3em;
width: 100%;
}
.sticky {
position: fixed;
top: 0;
}
#main-section {
border: 0.1em solid #ccc;
color: #444;
height: 1000px;
}
#main-footer {
font-size: 0.75em;
text-align: center;
margin: 1em;
}
script.js
$(document).ready(function() {
var menu = $("#menu");
var pos = menu.position();
$(window).scroll(function() {
if ($(window).scrollTop() >= pos.top) {
menu.addClass("sticky");
} else {
menu.removeClass("sticky");
}
});
});
You're using jQuery in script.js but you don't include the library.
You have malformed html code.
Try following code. It's working for me.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
<header id="main-header">
<h1>Title</h1>
<h2>Slogan</h2>
</header>
<nav id="menu">
</nav>
<section id="main-section">
</section>
<footer id="main-footer">
© 2014 Copyright
</footer>
<script src="script.js"></script>
</body>
</html>
What I've changed?
I've added body and head tags,
I've put script which include jQuery from CDN in head tag but you can include this just before including your script and it can be loaded locally, not from CDN,
I've move your script tag to the end because it's generally good practice. Briefly speaking page is rendered faster.
In addition, you wrote "The script doesn't work and in the developer tools of Firefox and Chrome in the section Javascript I don't see anything.". You should see in the console tab in Chrome: "Uncaught ReferenceError: $ is not defined".
On the future: you should paste the code much earlier.
old:
Try this:
<script src="script.js" type="application/javascript"></script>
Information for downvoters:
in HTML 4.x type attribute should be specified. In html5 is optional.
When you type
<script src="script.js"></script>
in HTML document, you create a "relationship" (browser loads JS and parses it accordingly)
Same goes for CSS files. If they are in same page, they can interact (you can set CSS classes by JS on elements)
Beginner gave an example of how to provide function to your javascript file.
When adding files to your html source, you must use html syntax.
<script src="script.js">
/**
* Additional code may even go here
*/
</script>
Follows this syntax.
When adding the css file you'll want to continue to use html syntax as well.
<link href="style.css" rel="stylesheet" type="text/css">