Forums

GoldenRatio1618

I have a Div that has a height set in my CSS at 600px. I want to control that height dynamically so that it changes based on the viewport size when a user resizes his browser. I assume this can be done using jquery/JS but can not figure out how. Any help is appreciated.

Paulie_D

Is it the main content div of the site because it sounds like you need the 100% div markup.

Senff

I'm not sure if this is the proper way of doing it, but I always end up using this jQuery script:

  $(document).ready(function(){
      resizeDiv();
  });

  window.onresize = function(event) {
      resizeDiv();
  }

  function resizeDiv() {
      vpw = $(window).width(); 
      vph = $(window).height(); 
      $('#somediv').css({'height': vph + 'px'});
  }

Paulie_D

I don't see the point in having a 'div' the same height as the viewport as it will immediately push any footer/header off the page.

I can see having a sticky footer type of affair to that the 'main content' will always be the 'right' height but otherwise....nope, I don't see it.

mmoustafa

With jQuery
$(window).resize(function() {
$('#my-div').css('height', window.innerHeight+'px');
});

JoniGiuro

you don't need to add " +'px' " with jquery. default is pixels

Hompimpa

Pure CSS:

div {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
}

GoldenRatio1618

It is for this project. http://www.plusen.com/projects/slider.php?projectID=useralbum:113587842881438128205/Project6BluestemPond

You will see how the slideshow has a defined height when what I really want is for it to adjust to the viewport size and fill the frame. The div the slideshow sits in is set at 600px in the CSS and I want it to be set dynamically based on the viewport size

GoldenRatio1618

Does anyone have any other ideas because I tried all of these options and they did not work. Here is a sample page. I want the #test div to span 100% of the height and adjust as the window size changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Untitled Document

test {

background-color:#ccc;
height:600px;

}

// insert code here to dynamically control height of #test div

This is a test page

Paulie_D

Did the jQuery solution not work?

Frankly, I'm not seeing what it is you are trying to do. What you have is fine.

GoldenRatio1618

it did not work, and what I have is not fine because it has a static height. I want it to adjust based on viewport size to span 100% of the height.

Paulie_D

So you want the image to scale up heightwise...what about the width? What should that do, break out of the page?

Basically from what I can see, what you are after is not possible.

GoldenRatio1618

the width would scale to the proper aspect ratio for the image

Paulie_D

So you have a couple of full width images there...should they grow taller too?

It seems you want it both ways and you can't do that...AFAIK.

wpg4665

@Hompimpa Thank you so much for your CSS solution, worked perfectly for me! Perhaps a bit different than what GoldenRatio was looking for, but great for me...thanks!

TreeRoot

It seems to me you're looking for something like a responsive, fullscreen background slideshow. Something like this:

demo: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html

info: http://buildinternet.com/project/supersized/

or this: demo: http://www.pixedelic.com/plugins/camera/development/camera_1.0.6/demo/fullscreen.htm

info: http://www.pixedelic.com/plugins/camera/

Just google some combination of the words "fullscreen, background, slideshow, responsive" to find a bunch more.

tylerhq

Something like Senff's JS can work for you. There's a couple things we need to do:

Find the window height on resize
Refresh the slideshow to fit this new size.

Acquiring the dimensions of a window is pretty straightforward, but refreshing the slideshow is typically done within your slider plugin's API.

A great answer is on StackOverflow.

treehouse : what would you like to learn today?

Forums

Setting a Div height to the window viewport size

test {