stickyfloat.js I can not apply next to php pages

Question

stickyfloat.js I can not apply next to php pages

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hello! I'm trying to call the function from stickyfloat.js in my php pages, but it does not work. But in HTML pages it works normally. I tried copying the original code to the PHP page but it does not 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 do not understand where the problem is, because in HTML form and functional the script ...

php javascript

asked by anonymous 08.03.2015 / 20:24

2 answers

Slow map when you press the back button ASP and paths in include

score 0 · Answer 1

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

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

has a .stickyfloat() method that has not yet been loaded.

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

score 0 · Answer 2

Change this:

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

To:

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