I need only some js to run during some parts of a php script, for testing purposes I commented out the php so I am not going to show it here.
<!DOCTYPE HTML>
<html>
<head>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<?php
echo '<script>
var width = $(window).width();<---Not working down too 1A
var height = $(window).height();
var widthSTR = width.toString();
widthSTR = widthSTR.concat("px");
var heightSTR = height.toString();
heightSTR = heightSTR.concat("px");
heightSTR = " ".concat(heightSTR);
var size = widthSTR.concat(heightSTR);
$("body").css({
"background-size" : size, <---1A and above ^
"background" : "url(p.jpg) 50% 0 no-repeat fixed"<---1B
});
</script>
';
?>
</body>
</html>
The line I have labeled 1B works fine, the background image displays. The section labeled not working seems to have no effect but when I run it separately in a Script tag outside of the php it works fine. Any idea why/huge mistakes I missed? Thanks in advance.
Advertisement
Answer
Your code should be executed once the full dom has been loaded if it depends on the objects being loaded, which width etc will do.
<!DOCTYPE HTML>
<html>
<head>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<?php
echo '<script>
$(document).ready(function(){
var width = $(window).width();<---Not working down too 1A
var height = $(window).height();
var widthSTR = width.toString();
widthSTR = widthSTR.concat("px");
var heightSTR = height.toString();
heightSTR = heightSTR.concat("px");
heightSTR = " ".concat(heightSTR);
var size = widthSTR.concat(heightSTR);
$("body").css({
"background-size" : size, <---1A and above ^
"background" : "url(p.jpg) 50% 0 no-repeat fixed"<---1B
});
});
</script>
';
?>
</body>
</html>
Although I no reason why you even need to echo out the string anyway? Why not just include the actual Javascript directly inside the HTML with the echo?
Javascript only would be much easier to read, especially in your editor:
<body>
<script>
$(document).ready(function(){
var width = $(window).width();
var height = $(window).height();
var widthSTR = width.toString();
widthSTR = widthSTR.concat("px");
var heightSTR = height.toString();
heightSTR = heightSTR.concat("px");
heightSTR = " ".concat(heightSTR);
var size = widthSTR.concat(heightSTR);
$("body").css({
"background-size" : size,
"background" : "url(p.jpg) 50% 0 no-repeat fixed",
});
});
</script>
</body>