I can not call a jquery file in html

0

Well I'm having a problem to call a script the navbar appears all right as in img:

ButthescriptdoesnotloaddonotknowwhathappensalreadyItriedtochangetheorderandeverythinganditwillnot..

Code:

#body{
	width: 100%;
	height: 500px;

}/* Style for our header texts
	* --------------------------------------- */
	h1{
		font-size: 5em;
		font-family: arial,helvetica;
		color: #fff;
		margin:0;
		padding:0;
	}

	/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center;
	}


	/* Backgrounds will cover all the section
	* --------------------------------------- */
	#section0,
	#section1,
	#section2,
	#section3{
		background-size: cover;
		background-attachment: fixed;
	}

	/* Defining each sectino background and styles
	* --------------------------------------- */
	#section0{
		background-image: url(imgs/fundo1.jpg);
	}
	#section0 h1{
		top: 50%;
		transform: translateY(-50%);
		position: relative;
	}
	#section1{
			background-image: url(imgs/fundo4.jpg);
		}
		#section1 h1{
			top: 50%;
			transform: translateY(-50%);
			position: relative;
		}
	#section2{
		background-image: url(imgs/fundo2.png);
		padding: 6% 0 0 0;
	}
	#section3{
		background-image: url(imgs/fundo4.jpg);
		padding: 6% 0 0 0;
	}
	#section3 h1{
		color: #000;
	}



.cnt
{
	height: 635px;
	background-color: orangered;
}

	/* Bottom menu
	* --------------------------------------- */
	#infoMenu li a {
		color: #fff;
	}

*{
	margin: 0;
	padding: 0;
	font-family: helvetica;
}



header{
	z-index: 333;
	position: fixed;
	width: 100%;
	height: 70px;
	background-color: transparent;
	-webkit-transition: background-color .5s;
}

nav{
	display: table;
	margin: auto;
	margin-top: 15px;
	height: 40px;
	-webkit-transition: margin-left .5s;
}

ul{
	display: block;
	float: left;
	list-style: none;
}

ul li{
	float: left;
	margin: 10px;
	padding: 2px;
}

ul a{
	color: #F3F3F3;
	text-decoration: none;
}

img#logo{
	
	float:left;
	display: block;
	width: 150px;
	height: 150px;

	-webkit-transition: width .5s, height .5s, margin-right .5s, margin-top .5s;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Fixed fullscreen backgrounds - fullPage.js</title>
    <link rel="stylesheet" type="text/css" href="css/css.css" />
	<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
   
	<link rel="stylesheet" type="text/css" href="examples.css" />
	


	<!--[if IE]>
		<script type="text/javascript">
			 var console = { log: function() {} };
		</script>
	<![endif]-->


	
	<script type="text/javascript" src="examples.js"></script>


</head>
<body>

<header class="header">
		<nav>
			<ul>
				<a href='http://www.keyquotes.es'><li>Inicio</li></a>
				<a href='http://www.keyquotes.es'><li>Videos</li></a>
				<a href='http://www.keyquotes.es'><li>Im&aacute;genes</li></a>
			</ul>
				
				<img id='logo' src='pictures/logo.png'>

			<ul>
				<a href='http://www.keyquotes.es'><li>Youtube</li></a>
				<a href='http://www.keyquotes.es'><li>Nosotros</li></a>
				<a href='http://www.keyquotes.es'><li>Contacto</li></a>
			</ul>
		</nav>
</header>
<section class="cnt">
	fafq
	</section>

<div id="fullpage">
	<div class="section " id="section0"><h1>fullPage.js</h1></div>
	<div class="section " id="section1"><h1>fullPdsadass</h1></div>
	<div class="section" id="section2"><h1>Lovely images <br />for a lovely page</h1></div>
	<div class="section" id="section3"><h1>One Image = One thousand words</h1></div>
</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><scriptsrc="js/examples.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><scriptsrc="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../vendors/scrolloverflow.js"></script>
	<script type="text/javascript" src="../jquery.fullPage.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$('#fullpage').fullpage({
				verticalCentered: false,

				//to avoid problems with css3 transforms and fixed elements in Chrome, as detailed here: https://github.com/alvarotrigo/fullPage.js/issues/208
				css3:false
			});
		});
	</script>

</body>
</html>

I have tried to add below one page script, but it does not work and buga script

<script type="text/javascript">
    $(document).ready(function() {
        $('#fullpage').fullpage({
            verticalCentered: false,

            //to avoid problems with css3 transforms and fixed elements in Chrome, as detailed here: https://github.com/alvarotrigo/fullPage.js/issues/208
            css3:false
        });
    });
</script>

Can anyone help me solve this?

    
asked by anonymous 04.01.2018 / 11:50

1 answer

1

Let's organize in parts, scripts and the like inside the head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><scriptsrc="js/examples.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><scriptsrc="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../vendors/scrolloverflow.js"></script>

Now let's fix your mistake by removing multiple jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><scriptsrc="js/examples.js"></script>
<script type="text/javascript" src="../vendors/scrolloverflow.js"></script>
    <script type="text/javascript" src="../jquery.fullPage.js"></script>

If you need to use all these jquery use this script to remove the conflict

<script>var $oldjQuery = $.noConflict(true);</script>
    
04.01.2018 / 12:07