I am unable to call a jquery file in html

Asked

Viewed 1,438 times

0

Well I’m having a problem to call a script the navbar appears all right as in img: inserir a descrição da imagem aqui

But the script doesn’t load I don’t know what happens I’ve tried to change the order and everything and it won’t ..

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>
	<script src="js/examples.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="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’ve tried to add below the one page script, but it doesn’t work and Leave the 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>

Someone could help me solve this?

html jquery css

  • First of all. See if there is an error in the browser console...

  • It didn’t work out..

  • I believe I have some problem with the script order.

  • You’re calling 2 jquerys, that’s probably it. Just call one. And your example.js should be the last of them, if it is in this script that you have configured its functions...

  • Ah Pow this ai was only in the snippet on my localhost is only one and not going. And when I put in the last Uga all one page script..

  • pq vc call two different versions of jquery? , this example.js should possibly be the last to be called, not?

  • Type the last jquery q script is on the page is one page, and then I do not know whether I put the navbar script last or not, yes I call only the current?

  • Then arrange your code exactly as it is on your localhost. And you don’t need to use the snippet unless you want to simulate the situation.

  • is why I am using 2 scripts and one was using 2.1

  • The other 1 . 8, but I only call the 2.1?

Show 5 more comments

1 answer

1


Let’s organize into parts, scripts and the like inside the head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/examples.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="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 error by removing multiple jquery 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="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>

  • Oops bro I put everything above the one page script?

  • <head> in that part </head>

  • if you put in jsfindle I’ll send it to you

  • opa blz I put here now.

  • https://jsfiddle.net/k41t9n52/ I put in jfiddle, but it didn’t show the problem in the stack snippet has to see what happened.

  • got bro? ??

  • https://jsfiddle.net/k41t9n52/2/ like this, you don’t need the other jquery

  • Vlw bro I was getting confused already, it is not in the html of the website worked well, but agr in html n ..

  • Bro I’m going to ask another question related to changing the menu color <li> in the script could you help me? I send you the link aq.

  • Let’s go continue this discussion in chat.

  • https://answall.com/questions/266890/somethings .

Show 6 more comments

Browser other questions tagged html jquery css

You are not signed in. Login or sign up in order to post.