stickyfloat.js can’t apply together to php pages

Asked

Viewed 60 times

0

Hello! I’m trying to call the stickyfloat.js function on my php pages, but it doesn’t work. But in HTML pages it works normally. I tried to copy the original code to the PHP page but it doesn’t work :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>

I did not understand where the problem is, because in HTML form and functional the script...

php javascript

  • That PHP file and the file stickyfloat.js are on the same board?

  • Yes normally, I test by view-source, this is normal.. but the function does not sort what the script asks for.

  • That’s because the script should be in HEAD or inside a domready

  • the way you put it there, it wouldn’t even work on html pages... php has nothing to do with it.. is probably what they commented about Ibraries being out of the header and starting the methods even before loading them.

2 answers

0

You are loading the script after the code has run, that is to say 

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

has a method .stickyfloat() that hasn’t even been loaded.

You have to load that file into the page head (always after jQuery) or put that script on the page after the script has loaded (at the end of body). You could almost solve it with a domready function but jQuery would always have to be loaded first.

0

Change that:

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

for:

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

Browser other questions tagged php javascript

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