How to get exact width and height of the div - javascript

here i am going to ask two questions...
how to get the exact width of the div
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Width of div: " + $("#a").width());
});
});
</script>
</head>
<body>
<div id="a" style="width:1000px;height:500px;">
<div style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;">
</div>
</div>
<br>
<button>Display the width of div</button>
</body>
</html>
here i am declared 2 .. parent div width is 1000 child div width is 300 if i use $("#a").width() function i will get 1000 which i mentioned on that div. but how can i get the exact used width(300) using $("#a") as well as same in height?

your "a" is 1000px - since you want the width of the div within the "a" you need to use:
$("#a div").width()
or if you can have multiple divs - then use :first (or some other selector)

Try with chaining in jquery
$("#a div").width()

You can use attr methods like
$("button").click(function(){
alert("Width of div: " + $("#a div").attr("width"));
});

Use can use this code to get the height and width div inside #a div
$(document).ready(function(){
$("button").click(function(){
alert("Width of div: " + $("#a div").width());
alert("Width of div: " + $("#a div").height());
});
});

If you would have only two divs, then why dont you just assign id to your second div also.
<div id="a" style="width:1000px;height:500px;">
<div id="b" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background- color:lightblue;">
</div>
</div>
Then you can just get the width and height as follows:
var width = $('#b').attr("width");
var height = $('#b').attr("height");

Related

Check if text exist in div using jquery

I would like to check if the text exist in the div element, so that if text matches the text in div it will alert "hello". May I know how am I able to achieve this result? Thank you.
<script type="text/javascript">
jQuery(document).ready(function(){
var text = "div[style*=\"width: 550px;\"]";
if (#content.indexOf(text) > -1){
alert("Hello");
}
});
</script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
Here you go with a solution https://jsfiddle.net/9kLnvyqm/
if($('#content').text().length > 0) { // Checking the text inside a div
// Condition to check the text match
if($('#content').text().indexOf('Amy')){
console.log('Hello');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
If you want only the text content from a container then use text(), if you are looking for html content then use html().
Hope this will help you.
It is possible to get the value of inline style of an element.
var wid = $("#content > div")[0].style.width;
if(wid === "550px"){
//correct width detected. you can use alert instead of console.log
console.log("hello");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
You have multiple elements inside #content. you may want to use the return value of
$('#content').children().length;
and loop the program to get inline width of all elements. Ping if you need some help with the loop

How to change Iframe height when clicked on button inside the iframe's content

Right now i want to make a simple jQuery function so when this function is called the iframe height is changing.
Here is my code:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function ChangeHeightF1()
{
$("#inneriframe").css({"height":"350px;"});
alert('The height was changed!');
}
</script>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
Here is the code of the button which is in the content of the iframe:
<button type="button" onclick="parent.ChangeHeightF1();">Click me to change Height!</button>
So my questions is how it's possible to change the iframe height on button click inside the content which is holding the iframe.
Also what CSS i have to place on "outerdiv" div element so when the iframe height is changing it will change the height of the div holding the iframe as well ?
Thanks in advance!
You can use window.parent.document as a context in jQuery selector, and then manipulate CSS values.
$(":button").click(function(){
$('#inneriframe, #outerdiv', window.parent.document).css({"height":"350px"});
})
This should work. If you want to re size back to previous height, let me know.
http://jsfiddle.net/ko3pyy8c
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('#more').click(function(){
$('#inneriframe').animate({height:'500px'}, 500);
$('#more').text('Go Back');
});
});
</script>
<style type = "text/css"/>
#inneriframe {
height: 350px;
overflow: hidden;
}
</style>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
<br/>
Change Height
it can help you
<a href='#'>click me</a>
<div id="outerdiv">
<iframe src="http://beta.sportsdirect.bg/checkout/onepage/" id="inneriframe" scrolling="no" target="_parent"></iframe>
by using jquery
$('a').click(function(){
$('iframe').css('height','600px');
});

Div Inner Content width

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/

How to set width of div#a equals to div#b

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()
});

Run script for each div with the same class

Well, I'm running ISOTOPE. So I have to set the DIV's height and width through jQuery. It's a photographer's portfolio, so I have thousand of photos with different sizes.
HTML
<div class="element metal cesco1 " data-symbol="Hg" data-category="transition">
<span>
<a class="fancybox" href="fotos/full/full01.png" data-fancybox-group="gallery">
<img src="fotos/thumbs/thumb01.png"/>
</a>
</span>
</div>
<div class="element metal cesco1 " data-symbol="Hg" data-category="transition">
<span>
<a class="fancybox" href="fotos/full/full03.png" data-fancybox-group="gallery">
<img src="fotos/thumbs/thumb03.png"/>
</a>
</span>
</div>
JavaScript:
<script type="text/javascript">
var width = 0;
$('.cesco1 img').each(function() {
width += $(this).outerWidth( true );
alert(width);
});
$('.cesco1').css('width', width + 0);
</script>
I'm using the same JavaScript for height as well.
The first thumb width is 300px and the second is 200px.
So I get the a 500px width div.it adds up.
I would like to set the width for each DIV at the time.
I'm a newbie, sorry if it's dumb.
Use the .closest() method to access the DIV that contains the image.
$('.cesco1 img').each(function() {
width += $(this).outerWidth( true );
alert(width);
$(this).closest('.cesco1').css('width', width);
});
If the image is always an immediate child of the DIV, you can use the more efficient selector .cesco1 > img and .parent() instead of .closest('.cesco1').
Try this:
<script type="text/javascript">
$(function(){
$('.cesco1').each(function() {
var width = 0;
$(this).children('img').each(function(){
width += $(this).outerWidth( true ); // reset the width
});
$(this).css('width', width);
});
});
</script>

Categories