Aleksandar Aleksandar - 3 months ago 14
jQuery Question

"Uncaught SyntaxError: Unexpected token < " in first line

I know this question has been asked many times but I can't find a solution for my problem.

On my local machine everything is good, but when I upload files to the server (000webhost), I have six errors, and description of these errors is


Uncaught SyntaxError: Unexpected token <


Thanks in advance.

The domain of my website.

This is my HTML

<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Welcome to my personal web site (web presentation). My name is Aleksandar Mitrović. I am frontend developer from Belgrade, Serbia.
I am interested in web development. My occupation is Professional Electrical and Computer Engineer.">
<meta name="keywords" content="Web presentation, Personal web site, Licni sajt, Frontend developer, Web sajt, Web developmenta, Personal web presentation">
<meta name="author" content="Aleksandar Mitrović">

<title>Personal web presentation | Aleksandar Mitrović</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<!-- 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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!--Favicons-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<!--End of favicons-->

<!--Nav scroll-->
<script src="js/navScroll.js"></script>
<!--End nav scroll-->

<!--Section scroll-->
<script src="js/sectionScroll.js"></script>
<!--End section scroll-->

<!--Toggle button on click change FA icon scroll-->
<script src="js/ToggleButtonChanges.js"></script>
<!--End of Toggle button on click change FA icon scroll-->

<!--Contact map-->
<script src="js/contactMap.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<!--End contact map-->

<!--Aminations-->
<link rel="stylesheet" href="animation/animate.css">
<!--End of animations-->

<!--Font awesome-->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<!--End of font awesome-->

<!--Style.css-->
<link rel="stylesheet" href="stylesheets/screen.css">
<!--End of style.css-->


</head>

<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars" aria-hidden="true"></i>

</button>
<a class="navbar-brand" href="#hero"><img src="img/logo.png" width="110" height="23"></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#hero">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#aboutMe">About us</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#experience">Skills & Experience</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

<div class="hero" id="hero">
<div class="container-fluid">
<video autoplay loop class="hero-video" poster="img/hero.jpg">
<source src="video/Hello-World.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="video/Hello-World.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

<div class="row">
<div class="hero-content animated fadeIn">
<h1 class="hero-content-title">Welcome to my web presentation</h1>
<h2 class="hero-content-subTitle">My name is Aleksandar Mitrović, I'm a <span>frontend developer</span> living in Belgrade, Serbia.</h2>
</div>
</div>

<div class="row">
<a href="#aboutMe" class="hero-scroll animated fadeIn">
<i class="fa fa-angle-double-down fa-2x bounce" aria-hidden="true"></i>
Scroll down
</a>
</div>
</div>
</div>

<section id="aboutMe" class="aboutMe">
<div class="container">

<div class="row">
<div class="sectionTitle">
About me
</div>
</div>

<div class="row">
<div class="aboutMe-image">
<img src="http://s7.postimg.org/54pch8kyz/image.jpg">
</div>
</div>

<div class="row">
<div class="aboutMe-content">
<p>I am a student of final year school of electrical engineering and computer science of applied studies in Belgrade, majoring in new computer technology.</p>
<p>Occupation: Professional Electrical and Computer Engineer.</p>
<p>I finished middle electrical school in Belgrade.</p>
<p>I am a person with adventurous spirit and trips for me represent a kind of hobby.</p>
<p>Besides programming I have a great interest for history and social sciences.</p>
<p>In my free time I prefer drawing.</p>
<p>Knowledge of English and German language.</p>
<p>Active driver B category.</p>
</div>
</div>
</div>
</section>

<section class="portfolio" id="portfolio">
<div class="container-fluid">

<div class="row">
<div class="sectionTitle sectionTitle-color--white">
Portfolio
</div>
</div>

<div class="row">
<a href="http://sf1group.staging.creitiveapps.com/sr" target="_blank">
<div class="col-sm-4 portfolio-article">
<img src="img/sf1group.png">
<div class="portfolio-article-title">
SF1 Group
</div>
</div>
</a>
<a href="http://www.gradjevinar.rs/sr" target="_blank">
<div class="col-sm-4 portfolio-article">
<img src="img/gradjevinar.png">
<div class="portfolio-article-title">
Gradjevinar
</div>
</div>
</a>
<a href="http://globtour.staging.creitiveapps.com/hr" target="_blank">
<div class="col-sm-4 portfolio-article">
<img src="img/globtour.png">
<div class="portfolio-article-title">
Globtour
</div>
</div>
</a>
<a href="http://jadranekspres.staging.creitiveapps.com/en" target="_blank">
<div class="col-sm-4 portfolio-article">
<img src="img/jadranekspres.png">
<div class="portfolio-article-title">
Jadranekspres
</div>
</div>
</a>
<a href="#portfolio">
<div class="col-sm-4 portfolio-article">
<img src="http://www.snopes.com/wordpress/wp-content/uploads/2016/04/the-farm-below-the-mountain.jpg">
<div class="portfolio-article-title">
</div>
</div>
</a>
<a href="#portfolio">
<div class="col-sm-4 portfolio-article">
<img src="http://images.8tracks.com/cover/i/000/933/114/44813.original-6904.jpg?rect=128,0,768,768&q=98&fm=jpg&fit=max">
<div class="portfolio-article-title">
</div>
</div>
</a>
</div>
</div>
</section>

<section class="experience" id="experience">
<div class="sectionTitle">
Skills & Experience
</div>

<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
<div id="skill1" class="experience-skill-circle"></div>
<h2 class="experience-skill-title">Html5 / Bootstrap</h2>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
<div id="skill2" class="experience-skill-circle"></div>
<h2 class="experience-skill-title">Css3 / Sass</h2>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
<div id="skill3" class="experience-skill-circle"></div>
<h2 class="experience-skill-title">Javascript / Jquery</h2>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
<div id="skill4" class="experience-skill-circle"></div>
<h2 class="experience-skill-title">Php / Mysql</h2>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
<div id="skill5" class="experience-skill-circle"></div>
<h2 class="experience-skill-title">Wordpress</h2>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 experience-skill">
<div id="skill6" class="experience-skill-circle"></div>
<h2 class="experience-skill-title">Photoshop</h2>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 experience-content">
<h1>Internship for Frontend developer ( 4 months )</h1>
<p>I had internship for frontend developer in digital agency "Creitive" in Belgrade.</p>

<p>On internship i was working with:</p>
<ul>
<li>-HTML5 ( BOOTSTRAP ) / CSS3 ( SASS, COMPASS, BEM Methodology )</li>
<br>
<li>-JAVASCRIPT (JQUERY)</li>
<br>
<li>-PHP</li>
</ul>

<p>Framework i was working with:</p>
<ul>
<li>-PHP FRAMEWORK LARAVEL</li>
</ul>

<p>OS i was working with:</p>
<ul>
<li>-LINUX</li>
</ul>

<p>Version control system i was working with:</p>
<ul>
<li>-GIT</li>
</ul>

</div>
</div>
</div>
</section>

<section class="contact" id="contact">
<div class="container">

<div class="row">
<div class="sectionTitle">
Contact
</div>
</div>

<div id="map" class="col-sm-12"></div>

<div class="row">
<div class="contact-info">

<a href="tel:+381656761810" class="contact-info-link">
<i class="fa fa-mobile" aria-hidden="true"></i> +381 65 6761 810
</a>
<a href="mailto:coaone93@gmail.com" class="contact-info-link">
<i class="fa fa-envelope" aria-hidden="true"></i> coaone93@gmail.com
</a>
</div>

<form name="contactform" method="post" action="send_form_email.php" class="form" id="forms">
<div class="col-sm-6">
<label for="name">Full name</label>
<input type="text" id="name" name="name" maxlength="50" size="50px" min="5" required>

<label for="email">Email</label>
<input type="email" id="email" name="email" required>

<label for="phone">Phone</label>
<input type="number" id="phone" name="phone" size="50">
</div>

<div class="col-sm-6 ">
<label for="comment">Comment</label>
<textarea id="comment" name="comment" minlength="5" maxlength="1000" cols="25" required></textarea>
<input type="submit" value="Send" class="btn btn-contact">
</div>
</form>
</div>
</div>
</section>

<footer>
<div class="container">
<div class="row">
<div class="footer-logo">
<a href="#hero"><img src="img/logo.png" width="110" height="23"></a>
</div>
</div>
<div class="row">
<div class="footer-social">
<a href="https://www.facebook.com/tadija.stefanovic.5" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com/in/aleksandar-mitrovic-155590b6?trk=nav_responsive_tab_profile_pic" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
<div class="row">
<div class="footer-credits">
Copyright 2016 Aleksandar Mitrović
</div>
</div>
</div>
</div>
</footer>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<!-- Script for circles percents on section skills & experiences -->
<script src="js/circlePercentProgress.js"></script>
<!-- End of script for circles percents on section skills & experiences -->

<!-- Script for options of circles percents on section skills & experiences -->
<script src="js/circlePercentProgressOptions.js"></script>
<!-- End of script for options for circles percents on section skills & experiences -->

<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>



Answer

It's simple: you have lots of broken links in your code. For instance you're trying to include a script called js/navScroll.js, but the file is actually called js/navscroll.js

Each broken link results in a redirect to 000webhost's 404 error page, which is an HTML document and therefore starts with a <.

The browser, expecting CSS or JS files, complains about the unexpected token.

Comments