CODEWITHSUNDEEP
javascriptjqueryhtml
theJava
theJava

Reputation: 15034

setting height of divs to window height

I have four divs with different IDs. How would I set height for all these divs?

<div id="slide-1">a</div>
<div id="slide-2">b</div>
<div id="slide-3">c</div>
<div id="slide-4">d</div>

I know we can do something like this below, but there are other divs too before this.

$('div').height($(window).height());

I want to set these four divs to window height alone. I can't hard-code here as the slides may vary.

Upvotes: 0

Views: 74

Answers (5)

PeterKA
PeterKA

Reputation: 24638

DEMO

    $('div').filter(function() { return /^slide-[1-4]$/.test( this.id ); })
    .height( $(window).height() );

Upvotes: 1

Amin Jafari
Amin Jafari

Reputation: 7207

this will select all the divs that their ids start with "slide-" and set the height to window height:

$('div[id^="slide-"]').height($(window).height());

Upvotes: 3

RGS
RGS

Reputation: 5211

$('div[id^="slide-"]').css("height", $(window).height() + 'px');

Demo:

http://jsfiddle.net/463KU/1/

Upvotes: 2

latiosaxe
latiosaxe

Reputation: 13

I also recommended you use this way to get window height:

var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

<div class="divHeight" id="slide-1">a</div>
<div class="divHeight" id="slide-2">b</div>
<div class="divHeight" id="slide-3">c</div>
<div class="divHeight" id="slide-4">d</div>

$('.divHeight').height(windowHeight);

Upvotes: 0

Muhammad Ali
Muhammad Ali

Reputation: 2014

if you like to increase the hieght of specific divs use class for multiple

<div class="divHeight" id="slide-1">a</div>
<div class="divHeight" id="slide-2">b</div>
<div class="divHeight" id="slide-3">c</div>
<div class="divHeight" id="slide-4">d</div>

$('.divHeight').height($(window).height());

Upvotes: 0

Related Questions