Question posted in 
Here is my html:
Hello i dont get my Javascript working i used codepen.io to write it and it worked. but when i want to use it on my webhost it isnt responding. I try to use it local but its not working. I googled the problem and its proberly something about the place of but im not sure about that. Can someone help me out and teach me how i can fix this? its a problem that i get alot of times.
<html>
<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">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Sandro Swabedissen">
<title>Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://i.imgur.com/dqhQX0E.png" alt="Portrait of Mr. Swabedissen" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><a href="#about"><i class="fa fa-angle-down"></i></a></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text">Hi! I'm Sandro Swabedissen I'm 18 years old and I'm from the Netherlands and I live in Apeldoorn. I study IT support at ROC Aventus in Deventer.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">I like to Photograph and longboarding and basic website coding. I spent most of my time behind the desk or hanging out with my friends.</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<!-- Portfolio -->
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-12 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://cdn2.hubspot.net/hubfs/145335/responsive-vs-adaptive-design-compressor.jpg" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address>
<strong><i class="fa fa-location-arrow"></i> Swabedissen Inc.</strong><br>Netherlands,<br>Gelderland, Apeldoorn<br><br>
<a class="tel" href="tel:0636597738" type="tel"><i class="fa fa-mobile"></i><span> +31 06-36597738</span></a>
</address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div><hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Sandro Swabedissen</strong></h4>
</div>
</div>
</div><hr class="copyright">
<h4><i class="fa fa-copyright"></i> COPYRIGHTS 2012 ALL RIGHTS RESERVED</h4>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
Here is my css:
* {
box-sizing: border-box;
}
#menu
{
background-color: #ffffff79;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
ul.navbar-nav {
float:right;
text-align:center;
}
ul.navbar-nav li
{
padding: 0 10px;
}
@media only screen and (max-width:767px)
{ ul.navbar-nav { float:none; } }
.container-fluid {
padding: 0 1em;
}
.navbar-nav li a
{
color:black!important;
font-size:1.2em;
font-family: Century gothic,sans-serif;
font-weight:600;
transition: 0.4s ease;
}
.navbar-nav li a:hover
{
color:#fff!important;
background-color:black!important;
}
.navbar-brand {
padding:10px 15px!important;
}
a.navbar-brand .fa-globe
{
font-size: 30px;
color: black;
transition:0.5s ease;
}
a.navbar-brand .fa-globe:hover
{
color: #3935e6;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: black!important;
}
.navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus {
background-color: #fff!important;
}
.container {
margin: 0 auto;
max-width: 996px;
}
.splash {
background:url("https://photos.gurushots.com/unsafe/0x0/351cef5284542fdc28a01f8d2c67c3be/3_ea1623d74f3828136d8e55e6cd5501e1.jpg") no-repeat fixed center bottom;
background-size: cover;
color: #fff;
}
.splash .container {
padding-top: 15vh; /* No JS fallback*/
padding-bottom: 10vh; /* No JS fallback*/
}
.profile-image {
border-radius: 50%;
display: block;
max-height:250px;
max-width: 250px;
margin: 0 auto 1em;
width: 100%;
opacity: 0.85;
}
.splash h1 {
font-size: 40px;
margin-bottom: .15em;
text-align: center;
}
.splash .lead, .splash .continue {
display: inline-block;
text-align: center;
}
h1.intro-text
{
margin:0;
color:#fff;
}
.splash .lead {
font-size: 30px;
margin-bottom: 1em;
font-family: Rockwell;
}
.navbar-inverse
{
border:none!important;
}
@keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-ms-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes blink
{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
/* code for animated blinking cursor */
#typed-cursor
{
opacity: 1;
font-size: 40px;
color: #fff;
font-weight: 50;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-ms-animation: blink 1s infinite;
-o-animation: blink 1s infinite;
animation: blink 1s infinite;
}
.splash .continue {
font-size: 3em;
display:block;
}
.splash .continue a {
border: 2px solid #fff;
border-radius: 100%;
color: #fff;
display: inline-block;
text-decoration: none;
width: 40px;
height:40px;
font-size:30px;
}
.splash .continue a:hover {
background-color: rgba(255, 255, 255, .25);
}
#about,#portfolio,#contact
{
padding-top:4em!important;
}
section h2 {
margin: 0;
font-size: 3em;
}
section.success {
color: #fff;
background: rgb(13, 79, 136);
padding: 2%;
}
section.success a
{
color:black;
transition: 0.4s ease;
}
section.success a:hover {
outline: 0;
color: #fff;
border: 2px solid #fff;
}
.contact-button
{
padding-bottom:2%;
}
hr.star-light,hr.star-portfolio {
margin: 25px auto 30px;
padding: 0;
max-width: 250px;
border: 0;
border-top: solid 3px;
text-align: center;
}
hr.star-light:after,hr.star-portfolio:after {
content: "f005";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-family: FontAwesome;
font-size: 2em;
}
hr.star-light {
border-color: #fff;
}
hr.star-portfolio {
border-color: black;
}
hr.star-portfolio:after {
color: black;
background-color: #eee;
}
hr.star-light:after {
color: #fff;
background-color: rgb(13, 79, 136);
}
p.content-text { font-size: 25px; }
/* PORTFOLIO */
.portfolio-card{
box-shadow: 0px 2px 5px #888888;
background: #eee;
border-radius: 4px;
}
.portfolio-card:hover{
box-shadow: 0px 10px 10px #888888;
cursor: pointer
}
.portfolio-container-holder{
background: #eee;
padding-bottom: 20px;
}
.portfolio-card-holder{
padding: 5px;
margin-bottom: 5px;
}
.portfolio-img{
width: 100%;
border-radius: 4px 4px 0 0;
}
.portfolio-img-desc{
position: relative;
bottom: 0px;
left: 0px;
right: 0px;
background: #fff;
color: #000;
text-align: center;
padding: 5px;
}
/* Contact */
.contact-me-container{
padding:3%;
background: rgb(13, 79, 136);
}
.fa-user,.fa-at,.fa-phone
{
color:black;
}
.submit-button{
margin-top: 10px;
margin-bottom: 10px;
}
/* ========================
Footer
======================== */
footer {
background-color: #2C3E50;
color: #fff;
font-size: 1.5em;
text-align: center;
padding:3%;
}
a.tel,a.tel:hover
{
text-decoration:none;
color:#fff;
}
a.social-button {
background: #fff;
font-size: 20px;
border-radius: 50%;
margin: 5px;
}
.address-container{
display: inline-block;
margin: 0 auto;
}
a.link-facebook,a.link-twitter,a.link-codepen,a.link-linkedin,a.link-instagram
{
transition:0.4s ease;
}
a.link-twitter
{
color:#1DA1F2;
}
a.link-facebook
{
color: #3b5998;
}
a.link-linkedin
{
color:#007bb6;
}
a.link-instagram
{
color:#e95950;
}
a.link-facebook:hover{
background-color: #3b5998;
color: #fff;
}
a.link-twitter:hover{
background-color: #1DA1F2;
color: #fff;
}
a.link-codepen:hover{
background-color: black;
color: #fff;
}
a.link-linkedin:hover{
background-color: #007bb6;
color: #fff;
}
a.link-instagram:hover{
background-color: #e95950;
color: #fff;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: transparent!important;
}
.fa-heart {
color:#f32323;
}
h4.author
{
letter-spacing:4px;
}
hr.footer-hr
{
width:150px;
}
hr.copyright
{
opacity:0.4;
}
Here is my script.js:
$( window ).resize( function() {
centerSplash();
});
!function($){
"use strict";
var Typed = function(el, options){
// chosen element to manipulate text
this.el = $(el);
// options
this.options = $.extend({}, $.fn.typed.defaults, options);
// text content of element
this.text = this.el.text();
// typing speed
this.typeSpeed = this.options.typeSpeed;
// amount of time to wait before backspacing
this.backDelay = this.options.backDelay;
// input strings of text
this.strings = this.options.strings;
// character number position of current string
this.strPos = 0;
// current array position
this.arrayPos = 0;
// current string based on current values[] array position
this.string = this.strings[this.arrayPos];
// number to stop backspacing on.
// default 0, can change depending on how many chars
// you want to remove at the time
this.stopNum = 0;
// Looping logic
this.loop = this.options.loop;
this.loopCount = this.options.loopCount;
this.curLoop = 1;
if (this.loop === false){
// number in which to stop going through array
// set to strings[] array (length - 1) to stop deleting after last string is typed
this.stopArray = this.strings.length-1;
}
else{
this.stopArray = this.strings.length;
}
// All systems go!
this.init();
this.build();
}
Typed.prototype = {
constructor: Typed
, init: function(){
// begin the loop w/ first current string (global self.string)
// current string will be passed as an argument each time after this
this.typewrite(this.string, this.strPos);
}
, build: function(){
this.el.after("<span id="typed-cursor">|</span>");
}
// pass current string state to each function
, typewrite: function(curString, curStrPos){
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
var self = this;
// ------------- optional ------------- //
// backpaces a certain string faster
// ------------------------------------ //
// if (self.arrayPos == 1){
// self.backDelay = 50;
// }
// else{ self.backDelay = 500; }
// containg entire typing function in a timeout
setTimeout(function() {
// make sure array position is less than array length
if (self.arrayPos < self.strings.length){
// start typing each new char into existing string
// curString is function arg
self.el.text(self.text + curString.substr(0, curStrPos));
// check if current character number is the string's length
// and if the current array position is less than the stopping point
// if so, backspace after backDelay setting
if (curStrPos > curString.length && self.arrayPos < self.stopArray){
clearTimeout(clear);
var clear = setTimeout(function(){
self.backspace(curString, curStrPos);
}, self.backDelay);
}
// else, keep typing
else{
// add characters one by one
curStrPos++;
// loop the function
self.typewrite(curString, curStrPos);
// if the array position is at the stopping position
// finish code, on to next task
if (self.loop === false){
if (self.arrayPos === self.stopArray && curStrPos === curString.length){
// animation that occurs on the last typed string
// fires callback function
var clear = self.options.callback();
clearTimeout(clear);
}
}
}
}
// if the array position is greater than array length
// and looping is active, reset array pos and start over.
else if (self.loop === true && self.loopCount === false){
self.arrayPos = 0;
self.init();
}
else if(self.loopCount !== false && self.curLoop < self.loopCount){
self.arrayPos = 0;
self.curLoop = self.curLoop+1;
self.init();
}
// humanized value for typing
}, humanize);
}
, backspace: function(curString, curStrPos){
// varying values for setTimeout during typing
// can't be global since number changes each time loop is executed
var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
var self = this;
setTimeout(function() {
// ----- this part is optional ----- //
// check string array position
// on the first string, only delete one word
// the stopNum actually represents the amount of chars to
// keep in the current string. In my case it's 14.
if (self.arrayPos == 1, 2, 3, 4){
self.stopNum = 0;
}
//every other time, delete the whole typed string
//else{
//self.stopNum = 0;
//}
// ----- continue important stuff ----- //
// replace text with current text + typed characters
self.el.text(self.text + curString.substr(0, curStrPos));
// if the number (id of character in current string) is
// less than the stop number, keep going
if (curStrPos > self.stopNum){
// subtract characters one by one
curStrPos--;
// loop the function
self.backspace(curString, curStrPos);
}
// if the stop number has been reached, increase
// array position to next string
else if (curStrPos <= self.stopNum){
clearTimeout(clear);
var clear = self.arrayPos = self.arrayPos+1;
// must pass new array position in this instance
// instead of using global arrayPos
self.typewrite(self.strings[self.arrayPos], curStrPos);
}
// humanized value for typing
}, humanize);
}
}
$.fn.typed = function (option) {
return this.each(function () {
var $this = $(this)
, data = $this.data('typed')
, options = typeof option == 'object' && option
if (!data) $this.data('typed', (data = new Typed(this, options)))
if (typeof option == 'string') data[option]()
});
}
$.fn.typed.defaults = {
strings: ["Hello, hola, hi! ", "Welcome to my website ", "Go on, scroll down", ":)"],
// typing and backspacing speed
typeSpeed: 50, // speed decreases as number increased
// time before backspacing
backDelay: 100,
// loop
loop: true,
// false = infinite
loopCount: false,
// ending callback function
callback: function(){ null }
}
}(window.jQuery);
$(function(){
$("#typed").typed({
strings: ["web developer","photographer","human being"], //Strings to display when typing
typeSpeed: 40,
backDelay: 600,
loop: true,
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); }
});
function foo(){ console.log("Callback"); }
});
2
Answers
You are running the script in
headand expecting all of the document’s content to be loaded (for example thetypeddiv). This explains why it works in Codepen but not in your local environment, because Codepen runs the javascript after the html content has been loaded.To solve this, you can use an event listener to wait for the document to fully load.
The document is not loaded by the time you are trying to find an element with the id
typed. Change it toDocs on
document.readyI was able to fix your web page for you, but there is one thing I cannot fix. I have no idea what you wanted to do with this part of your
script.js:There is no function anywhere called
centerSplash. Most of your errors were in your html file, but I fixed them all. The main errors were that you were importing 2 different versions of jQuery and your scripts/links were trying to access local files when they were being run directly through the file system.With that out of the way, here is your fixed HTML:
style.cssis the same.script.jswill work as is, but I would comment out those first three lines until you figure out what it is you want to do with thecenterSplashthing.Nice page btw.