0

Bom estou com um problema para chamar uma script o navbar aparece tudo certinho como na img: inserir a descrição da imagem aqui

Mas a script não carrega não sei oq acontece já tentei mudar a ordem e tudo e não vai ..

Codigo :

#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>

Já tentei adiconar em baixo da script da one page, mas não funciona e buga a 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>

Alguém podeira me ajudar a solucionar isso?

10
  • Primeiro de tudo. Veja se dá algum erro no console do navegador... Commented 4/01/2018 às 10:55
  • Não deu está normal..
    – Felipe
    Commented 4/01/2018 às 10:58
  • Creio q tenha algum problema com a ordem do script.
    – Felipe
    Commented 4/01/2018 às 10:59
  • Você está chamando 2 jquerys, provavelmente é isso. Chame apenas um só. E o seu example.js deve ser o último deles, caso seja nesse script que você tenha configurado suas funções... Commented 4/01/2018 às 11:00
  • Ah pow isso ai foi só no snippet no meu localhost está só um e não ta indo. E quando eu boto no último buga toda a script da one page..
    – Felipe
    Commented 4/01/2018 às 11:03

1 Resposta 1

1

Vamos organizar em partes, scripts e afins dentro da 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>

agora vamos corrigir o seu erro, removendo multiplos 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>

caso precise usar todos esses jquery use esse script para remover o conflito

<script>var $oldjQuery = $.noConflict(true);</script>
11
  • Opa mano eu coloco tudo acima da script do one page?
    – Felipe
    Commented 4/01/2018 às 11:09
  • <head> nessa parte </head>
    – HudsonPH
    Commented 4/01/2018 às 11:10
  • se voce colocar no jsfindle eu corrigo para vc
    – HudsonPH
    Commented 4/01/2018 às 11:10
  • opa blz vou colocar aqui agora.
    – Felipe
    Commented 4/01/2018 às 11:11
  • jsfiddle.net/k41t9n52 Eu botei no jfiddle, mas não mostrou o problema no snippet do stack tem como ver oq aconteceu.
    – Felipe
    Commented 4/01/2018 às 11:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .