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.
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());
$('div[id^="slide-"]').css("height", $(window).height() + 'px');
Demo:
http://jsfiddle.net/463KU/1/
DEMO
$('div').filter(function() { return /^slide-[1-4]$/.test( this.id ); })
.height( $(window).height() );
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());
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);
Related
I've been trying some CSS tricks these days and I've got a problem.
for example:
<div class="parent" style="background-image: url("../x.jpg")">
<div class="child">
</div>
<div class="sec-child">
</div>
</div>
I've tried to make the background of .parent only show in the content-box of the child element, but failed. I know there are bunch of ways to clip .child and .sec-child to .parent;
But is it possible to clip.parent to .child and sec-child?
You are right. It can be done with a little jquery:
$(".parent div").css("background-image",$(".parent").css("background-image"));
$(".parent").css("background-image","none")
$(".parent div").each(function(){
var relativeY = $(this).parent().offset().top - $(this).offset().top;
var relativeX = $(this).parent().offset().left - $(this).offset().left;
console.log (relativeX+" "+relativeY)
$(this).css("background-position",relativeX+"px "+relativeY+"px")
})
https://jsfiddle.net/hpvl/4r3056zv/21/
I would like to match the height of class "project_region" each 4 elements,
<div class="grid_new inner_each_pr" onclick="location.href='/region/agroproject/33'">
<div class="inn_pr">
<p class="project_region"><b>Московская область</b><br>Животноводство, Строительство сельскохозяйственных объектов | Молочное скотоводство</p>
<p class="project_name">Строительство животноводческой фермы</p>
<div class="info_project_down">
<div class="block_rub inline">
<p>406 <span>млн. р.</span></p>
</div>
<div class="block_time">
<p>8<span>лет</span></p>
</div>
</div>
</div>
</div>
The HTML-Code above is inside a class="row", and all class="inner_each_pr" are set inline, I tried to do, but it get's me the max height of all elements, I need need to set max height each 4 element.
Any idea?
Try
$(document).ready(function() {
var maxHeight = -1;
$('.inner_each_pr').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.inner_each_pr').each(function() {
$(this).height(maxHeight);
});
});
check this link for details Div is mysteriously moving down after displaying first 3 rows properly
I have a div structure as follows:
<div id="showHide">
<div>Alarm</div>
<div>Alarmasdf</div>
<div>Alarmasdffasdff</div>
Is there any way that I can get the width of the content like (Alarmasdffasdff). This content is the largest.
I am able to get the length of the content, but not the width.
Please suggest.
Assuming the div elements have been changed to display: inline, the width of the element will match the content.
If this is not the case I would suggest wrapping the content in a span, or any other suitable inline element, and getting the width of that. For example:
<div id="showHide">
<div>
<span>Alarm</span>
</div>
<div>
<span>Alarmasdf</span>
</div>
<div>
<span>Alarmasdffasdff</span>
</div>
</div>
$('#showhide').find('div:last span').width();
The Width of all of your 'div's is 100% regardless of their content. This is how block level elements behave...
use :contains()
$( "#showhide div:contains('Alarmasdffasdff')").width();
As said by others, width of a block level element is 100% regardless of its content's width. So first you need to change the display of the div to inline-block
<style>
#showHide div
{
display:inline-block;
}
</style>
<div id="showHide">
<div>Alarm
</div>
<div>Alarmasdf
</div>
<div>Alarmasdffasdff
</div>
</div>
$('#showhide>div:contains("Alarmasdffasdff")').innerWidth();
Jquery makes it very easy.
$('#showHide').find('div:last').css('width');
css() returns the computed style of the element, which is the inline styling as well as default styling and any other css selector.
Without jquery it goes a little less "clean"
var mystyle = window.getComputedStyle ? window.getComputedStyle(myobject, null) : myobject.currentStyle;
mystyle.width shows the calculated width, where myobject is the element you want to check.
html :
<div id="showHide">
<div>Alarm</div>
<div>Alarmasdf</div>
<div>Alarmasdffasdff</div>
</div>
script :
var lastDiv = $('#showHide').find('div').last();
var lastDivWidth = lastDiv.width();
alert(lastDivWidth);
jsFiddle
<div id="showHide">
<div class="content" style="width:50px" >Alarm</div>
<div class="content" style="width:60px">Alarmasdf</div>
<div class="content" style="width:120px">Alarmasdffasdff</div>
</div>
Custom width is given so that u can understand the difference, else every div will be having same width, and class content is added for convinience of processing
findWidth("Alarmasdf"); // Calls the function below
function findWidth(value)
{
var width=0;
$(".content").each(function(e){
if($(this).text()==value)
{
width = $(this).width();
}
});
alert(width);
}
Check the fiddle here
http://jsfiddle.net/46LH9/
Let I've two divs on my page which I want to set the same width. Consider the following markup:
<div>
<div>
<!-- content -->
<div id="a">
</div>
</div>
</div>
<div id="b">
</div>
How can I set the width of div#b equal to the computed width of div#a
var width_a = document.getElementById("a").offsetWidth; //get the width of div#a;
document.getElementById("b").style.width = width_a + 'px' ; //set the width of div#b to width ofdiv#a
Just Simply do this
document.getElementById("a").offsetWidth=document.getElementById("b").offsetWidth;
this will work
$('#b').width($('#a').width());
By using jQuery you can set as below:
$('div#b').width($('div#a').width())
Working Example: JSFiddle Demo
Using Javascript:
document.getElementById('b').style.width = document.getElementById('a').offsetWidth + 'px';
Using jQuery:
$('div#b').css({
width: $('div#a').width()
});
Here is the problem site.
Let me explain in case I will solve it, so everyone can know about it.
I have two divs with the following html code
<div id="dataview" class="data-views" style="width:100%; height:580px; padding:0; border:solid; margin-bottom:10px;">
<div class="row-fluid">
<div class="col-md-8">
<div class="timeline"></div>
</div>
<div class="col-md-4">
<div id="map" class="map"></div>
</div>
</div>
</div>
The two divs I am talking about are the "col-md-8" and "col-md-4"
If you try to resize the window, then the second div will move on the bottom of the first one, but it covers everything else behind it. I try to play with css, but without a success. Any suggestion?
Edit:
Screenshots from the problem
How it is on full window: screen1
How it is after resize: screen2
Edit 2: I think something as a sollution but it is to complicated for me. Maybe someone could help. If the size of the screen is less than col-md-8 (so the second div will move to the bottom), I will change the height of the div (data-views) to 580+(height of map).
I tried this:
<script>
$(window).resize(resizemap);
function resizemap() {
var winWidth = $(window).width();
if (winWidth < 995) <--on 995px the map doesn't fit and move on the bottom.
{
var Hmap = $("#map").height();
$('#dataview').css("height", 580+Hmap);
}
}
</script>
The problem is that instead of change the size of the whole div, it changes the height only of the timeline. And the map moves again.
I figure how to do it. Here is the result:
HTML:
<div id= "dataview" style = "height:590px;border:solid;">
<div class="data-views" style="width:100%;height:580px;padding:0;margin-bottom: 10px;">
<div class="row-fluid">
<div class="col-md-8">
<div class="timeline"></div>
</div>
<div class="col-md-4">
<div id="map" class="map"></div>
</div>
</div>
</div>
</div>
And here is the javascript:
<script>
$(window).resize(resizemap);
window.onload = resizemap;
function resizemap() {
var winWidth = $(window).width();
if (winWidth < 995)
{
var Hmap = $("#map").height();
$('#dataview').css("height", 590+Hmap);
}
}
</script>
The only problem is that if I resize the window with the maximize button of the browser, the dataview height stay the same.