I'm using a combination of jQuery and PHP to make a template for a full-width responsive picture with three sizes. What I did worked, but I soon understood that I needed to specify specific ID's to each Div in order to have a custom image for each Div. I suspect something is wrong with my PHP, since it worked correctly before I echoed ID's. Here is an example of how it SHOULD work (check the header picture.)
HTML:
<!-- template 1 -->
<?php
$imageregular = 'http://placekitten.com/1920/500'; //1920 x 500
$imagesmall = 'http://placekitten.com/1280/350'; //1280 x 350
$imagemobile = 'http://placekitten.com/630/250'; // 630 x 250
$id = 'aboutpic00';
include '../fullimage.php';
?>
<!-- template again with different ID --?
<?php
$imageregular = 'http://placekitten.com/1920/500'; //1920 x 500
$imagesmall = 'http://placekitten.com/1280/350'; //1280 x 350
$imagemobile = 'http://placekitten.com/630/250'; // 630 x 250
$id = 'aboutpic01';
include '../fullimage.php';
?>
CSS:
.bg
{
height: 350px;
background-color:#cccccc;
display:block;
background-position:center;
/* and so on for all the media widths. The CSS probably isn't important, it just establishes the background color and background position. */
}
PHP template (fullimage.php referenced in HTML)
<script type="text/javascript">
$(document).ready(function(){
//jQuery determines the width of my browser window and executes the following conditions
var width = $(window).width();
if(width<=630){
$("#<?php echo $id;?>").css("background-image", "url(<?php echo $imagemobile;?>)");
//if the width is a certain amount, jQuery will change the CSS on my specified #ID Div using the php echo $id
}else if(width>=630 && width<1280){
$("#<?php echo $id;?>").css("background-image", "url(<?php echo $imagesmall;?>)");
}else if(width>1280){
$("#<?php echo $id;?>").css("background-image", "url(<?php echo $imageregular;?>)");
}
//The following function is a repeat of the former, but while the window is resizing. I bet I can combine the two but this fix was easier at the time.
$(window).resize(function() {
var width = $(window).width();
if(width<=630){
$("#<?php echo $id;?>").css("background-image", "url(<?php echo $imagemobile;?>)");
}else if(width>=630 && width<1280){
$("#<?php echo $id;?>").css("background-image", "url(<?php echo $imagesmall;?>)");
}else if(width>1280){
$("#<?php echo $id;?>").css("background-image", "url(<?php echo $imageregular;?>)");
}
});
});
</script>
<div id="#<?php echo $id;?>" class="bg"></div> //This is the final HTML output of the PHP include that echoes out the div with the custom ID and "bg" class I specified in the CSS
Right now, I should be getting adorable kittens, but I'm just getting my grey background color. Where am I going wrong?
EDIT: My mistake was that in <div id="#<?php echo $id;?>" class="bg"> I included the "#" which is not supposed to be included in IDs. I'll delete this thread shortly.
