I need only some js to run during some parts of a php script, for testing purposes I mented 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.
I need only some js to run during some parts of a php script, for testing purposes I mented 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.
Share Improve this question edited Jul 8, 2013 at 15:58 Sparky 98.8k26 gold badges202 silver badges290 bronze badges asked Jul 8, 2013 at 15:51 recoup8063recoup8063 4,2806 gold badges38 silver badges60 bronze badges 4- 6 Why are you even doing this? – Styphon Commented Jul 8, 2013 at 15:53
- What does the rendered code look like? – j08691 Commented Jul 8, 2013 at 15:53
- 1 I’m not sure what you’re trying to acplish. Why are you using PHP to echo the script block in the first place; I can’t see any real reason for it as you’re not using variables or anything in it? – Martin Bean Commented Jul 8, 2013 at 15:53
-
4
You forgot
$(function() {})- document ready – Shaddow Commented Jul 8, 2013 at 15:53
4 Answers
Reset to default 2Your 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>
Wrap your code inside:
jQuery(function($) {
// Put your whole code here
});
If you are touching the DOM you should ever wrap your jQuery stuff inside that block; this is called: the .ready() event for Document Loading.
have you tried:
if($condition){
?>
<script>
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>
?>
<?php
}
Probably the problem is that you're not waiting for the DOM to be loaded, please try:
if($condition){
?>
<script>
$(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>
?>
<?php
}
But please note this has nothing to do with php.
I added "contenteditable" within the element i wish to manipulate. Example:
<span class="display" id="echotask" contenteditable>
Then then jquery function manipulated the html my php-script echoed into the Document. I do not know why this was necessary here, given that jquery manipulated other elements that did not have that keyword, and normal javascript also succeeded in manipulating the HTML element without the keyword.