Question

EDIT:
I wanted to make this clearer before reading what I originally wrote below…
I am creating a website using three sections that float left of one another. I use links to scroll from one section to the other. When scrolling to that section, I want the background of that section to fit to the browser screen size. If the browser is THEN resized when still viewing that section of the page, I want the background to “snap” to the window and continue to fill the screen.
At the moment, this only happens with the section that is all the way on the left.

I’m not sure if this is possible, but I figured I’d see. I’ve been working off of the one-page strategy on this website tutorial:
http://jqueryheaven.com/2012/08/building-a-one-page-portfolio-with-jquery-slide/

While this tutorial uses many different sections, I’m only making my website use 3 or 4. Either way, I’m trying to figure out how to get each section to fit the browser window regardless of how big or small you resize the window. So far, on the tutorial, and on the site that I’ve made, only the section furthest to the left fits with the window. The rest of the sections do not resize to fit.

Here is the code that I have so far:

HTML (I’ve omitted the contents that were inside the containers:

<div id="main">

<section id="artwork" class="box">
</section>


<section id="home" class="box">
</section>


<section id="contact" class="box">
</section>

</div>

CSS (tried using 100% widths and heights for the sections, as well as background-size:cover, but nothing has worked):

.box {
float:left;
}

#artwork {
background: #b4c620;
width:100%;
height:100%;
background-size:cover;
}

#home {
background: #58267a;
with:100%;
height:100%;
background-size:cover;
}

#contact{
background: #b4c620;
width:100%;
height:100%;
background-size:cover;
}

Scripts (taken from the tutorial as well, which, as I mentioned, only adjusts the size on the first section box, (#artwork,) and not the rest. Although, if you link to that section AFTER resizing the browser, the section will fit.):

<script type="text/javascript">
function resizeBoxes() {

var browserWidth = $(window).width();
var browserHeight = $(window).height();

$('#main').css({
width: browserWidth*3,
});


$('.box').css({
width: browserWidth,
height: browserHeight,
});

}

resizeBoxes();

$(window).resize(function() {
resizeBoxes();
});


$('nav ul li a').click(function(){
return false;
});
</script>

<script type="text/javascript">
function goTo(horizontal,vertical) {

var browserWidth = $(window).width();
var browserHeight = $(window).height();

$('#main').animate({
    marginLeft: '-'+browserWidth*horizontal,
    marginTop: '-'+browserHeight*vertical,
}, 1000);

}
</script>

I hope you understand what I’m trying to accomplish. I’m new to this, so this so if my coding is a mess, I apologize. I’d really appreciate if you could help me find a solution! Thanks.

Answer 1

I believe I understand what you are asking. I just finished doing this on my website michaelagarrison.com(You can view my JS file at http://www.michaelagarrison.com/assets/js/main.js). On my site it changes the height of each section tag to fix the height of the browser window height. All you have to do is use this modified version of my jQuery script:

$(document).ready(function(){
  function resizeSection(tag) {
    var docHeight = $(window).height();  // Get the height of the browser window
    var docWidth = $(window).width();    // Get the width of the browser window
    // Now set the height / width to the browser height / width in css
    $(tag).css({'height': docHeight + 'px', 'width': docWidth + 'px', 'display': 'block'});
  }
  // Replace TagNameHERE with the correct tag you want resized
  $('TagNameHERE').each(function(){  
    resizeSection(this);  // Call the function and make sure to pass 'this'
  });
  // This will handle the resize
  $(window).resize(function() {
    $('TagNameHERE').each(function(){
      resizeSection(this);
    });
  });
});

It’s weird that the width / height at 100% didn’t work. In my original script I just used padding to get the height correct. Note you will need the following code for my script to work:

// Put this line in the head.  You can also use a local jQuery file if you wish
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Let me know if I understood correctly.