0

Olá! Eu estou tentando chamar a função do stickyfloat.js em minhas paginas php, mas não funciona. Mas em paginas HTML funciona normalmente. Eu tentei copiar o código original para a pagina PHP mas não funciona :S

<?php // require_once 'engine/init.php'; include 'public/layout/head.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
	<title>floating menu demo</title>
	<meta charset="UTF-8" />
	<style type="text/css">
		code{ padding:10px 8px; margin:3px 0; display:block; background-color:#333; color:#eee; }
		body{ margin:0; padding:0; font-size:12px; font-family:arial; }
		.header{ height:200px; background-color:darkred; text-align:center; color:#FFF; font-size:3em; }
		.content{ padding:10px 10px 30px; width:960px; margin:0 auto; background-color:#f1f1f1; position:relative; }
			.wrap{ height:1300px; padding:20px; background-color:#ddd; margin:0 250px; color:#333; }
				.wrap h2{ font-size:2em; }
				.wrap ul{ list-style:none; padding:0; }
					.wrap ul li{ margin-bottom:20px; }
						.wrap ul li h3{ font-size:1.2em; padding:0; margin:0; }
			.ad{ position:absolute; top:10px; right:10px; width:240px; height:100px; background:#8B0000; color:#FFF; font-size:2em; text-align:center; line-height:100px; }
			.menu{ position:absolute; left:10px; padding:15px; width:210px; background:green; color:#FFF; }
			.menu label input[type=text]{ width:60px; }
			.menu2_wrap{ position:absolute; top:120px; right:0; bottom:30px; }
			.menu2{ top:120px; right:10px; left:auto; background-color:purple; }
			.transition200 .duration,
			.transition200 .delay{ visibility:hidden; }
			.transition200{ transition:200ms; -webkit-transition:200ms; -o-transition:200ms; }
		.footer{  height:500px; background-color:blue; text-align:center; color:#FFF; font-size:3em; }
	</style>
</head>
<body>
	<div class="header">Header</div>
	<div class="content">
		<div class='menu2_wrap'>
			<div class="menu menu2">
				<h3>Menu 2 Options:</h3>
				<div class='easing'>
					<button>linear</button>
					<button>swing</button>
					<button>easeInQuad</button>
					<button>easeOutQuad</button>
					<button>easeInOutQuad</button>
					<button>easeOutElastic</button>
					<button>easeInOutElastic</button>
					<button>easeInBack</button>
					<button>easeOutBack</button>
					<button>easeInOutBack</button>
				</div>

			</div>
		</div>
		<div class="wrap">
			
		</div>
	</div>
	<div class="footer">Footer</div>
	<script>
		$('.menu').stickyfloat({})
		$('.menu2').stickyfloat('update',{ duration:0 });
	</script>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src='stickyfloat.js'></script>
</body>
</html>

Não entendi onde esta o problema, porque em forma de HTML e funcional o script...

4
  • Esse ficheiro PHP e o ficheiro stickyfloat.js estão na mesma diretoria?
    – Sergio
    8/03/2015 às 19:28
  • Sim normalmente, eu testo pelo view-source, esta normal.. mas a função não ordena o que o script pede. 8/03/2015 às 19:31
  • Isso é porque o script devia estar na HEAD ou dentro de um domready
    – Sergio
    8/03/2015 às 19:32
  • do jeito que colocou aí, não funcionaria nem mesmo em páginas html... o php não tem nada a ver com isso.. é provavelmente o que comentaram sobre as libraries estarem fora do header e iniciar os métodos antes mesmo de carregá-los. 8/04/2015 às 10:19

2 Respostas 2

0

Estás a carregar o script depois de o código ter corrido, ou seja esse

<script>
    $('.menu').stickyfloat({})
    $('.menu2').stickyfloat('update',{ duration:0 });
</script>

tem um método .stickyfloat() que ainda não foi sequer carregado.

Tens de carregar esse ficheiro na head da página (sempre depois do jQuery) ou colocar esse script que está na página depois do script ter carregado (no final do body). Quase que podias resolver isso com uma função domready mas o jQuery teria sempre de ser carregado antes.

0

Mude isso:

<script>
$('.menu').stickyfloat({})
$('.menu2').stickyfloat('update',{ duration:0 });
</script'>

para:

<script>
window.onload=function(){
    $('.menu').stickyfloat({})
    $('.menu2').stickyfloat('update',{ duration:0 });
};
</script'>

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 .