Hi I am trying to run this code that finds the width of div which is inside another div. but it is not running properly. How to do this?
i want the width of div mitem1
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#mydiv {
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script language="JavaScript">
$('.menubar').each(function(menu){
var len = $(this).find('.mitem').text().length;
alert(len);
});
</script>
</head>
<body>
<div class="menubar">
<table border="1"><tr>
<td><div class="mitem1">Home</div></td>
<td><div class="mitem1">Communities<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></div></td>
<td><div class="mitem1">Project Gallery</div></td>
<td><div class="mitem1">For Our Customer</div></td>
<td><div class="mitem1">Our Services</div></td>
</tr></table>
</div>
</body>
</html>
$('.menubar .mitem1').each(function() {
alert($(this).width());
});
Here's a fiddle
If you want to get the width, including the padding and border (and margin, optional), use outerWidth()
ISSUE 1
You forgot to add jQuery in your page. Add it:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
ISSUE 2
You must put your code in document ready:
$(function () {
});
ISSUE 3
Now you can iterate over your items, and for accessing the width of element, use .width() method in jQuery:
$(function () {
$('.menubar .mitem1').each(function() {
var width = $(this).width();
// now do anything you want with width
});
});
Related
I want to change top position of class bbb after 100 ms, but it took out that .css(top) does not work.
Please help.
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="ddd"><div class='bbb'>Bobobo</div></div>
</body>
<script>
$(function myFunction() {
setInterval(alertFunc, 100);
});
function alertFunc() {
var b = $('.bbb').first();
b.css('top', 100 + 'px');
}
</script>
</html>
You should use setTimeout() instead of setInterval() this way alertFun() will only run once.
let alertFunc = function() {
$('.bbb').css('top', 100 + 'px');
}
setTimeout(alertFunc, 100);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ddd">
<div class='bbb'>Bobobo</div>
</div>
Just like #jhpratt mentioned. You need to add position:relative to the .bbb class.
See below.
$(function myFunction() {
setTimeout(alertFunc, 500);
});
function alertFunc() {
var b = $('.bbb').first();
b.css('top', 100 + 'px');
}
.bbb {
position: relative;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="ddd">
<div class='bbb'>Bobobo</div>
</div>
As others have already said, if you want to use the top attribute you need to give
position:relative;
to the element. This way the element will be set relative to his position and this could be a little tricky. By the way i usually prefer to make a container box relative ad put the positionable element absolute in it, so it will be displayed relative to his container:
.container{
position:relative;
}
.element{
position:absolute;
}
This is the html:
<div class="container">
<div class="element"></div>
</div>
I'm trying to set an element's width equal to another element's width.
The problem is that when the 2nd element has a percentage width, jQuery's .width() function returns the incorrect width when the page is first loaded.
If I do the same after the page is loaded, such as in an onclick function, then .width() returns the correct size of the element.
It is just when the page is first loaded, as if css hasn't finished calculating the actual elements width from the percentage.
Here is some code :
CSS :
#first {
width:50%;
}
Javascript :
$(function(){
function resizeResults() {
$("#results").css("width", $("#first").width());
}
resizeResults();
});
So, that will not return the correct size of the #results element. If I call this function via an onclick method, then it sets it to the proper width. JavaScript/jQuery should account for css percentages being loaded before executing code, right?
You must change this:
function resizeResults() {
$("#results").css("width", $("#first").width());
}
to this:
function resizeResults() {
$("#results").css("width", $("#first").width() + 'px');
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<style>
div {
height: 100px;
background-color: #acacac;
margin: 10px;
}
</style>
<script>
$(function ()
{
function resizeResults()
{
$("#results").css("width", $("#first").width() + 'px');
}
resizeResults();
});
</script>
</head>
<body>
<div id="first" style="width:200px;">Div first</div>
<div id="results" style="width:400px">Div result</div>
</body>
</html>
I have assigned the 80% height of the viewport to my div as height. In Button click I have displayed the height of the div. This works fine in ie9, ie10. But in ie7, ie8 $("#divContainer").height() is 0. Am I doing anything wrong and how to get the height of the div in IE7, IE8(vml)
<html style="height:100%;">
<body style="height:100%;">
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<button id="button1"></button>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").height());
});
});
</script>
</body>
</html>
Thanks In Advance
For IE you may try pure javascript solution
var height = getElementById("divContainer").clientHeight;
Most importantly include jQuery Library in your Code's head section and use .css("height") instead of .height()
Modified code is as below
<html style="height:100%;">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body style="height:100%;">
<button id="button1" value="text"></button>
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").css("height"));
});
});
</script>
</body>
</html>
Note I have taken Button above the container.
you can use jquery - Height option
or
use jquery with css option of any properties of tag or id.
like
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").css("height"));
//also set the height too as
$("#divContainer").css("height", "80%");
});
});
If there an easy way to fix the width of the html table columns at the time the page is rendered. I DO NOT want to specify the pixel or percent width of the columns in my code. However, once the page is created and the widths determined based on the initial content in the table I do not want the widths to change, even if the size of the cell content changes.
Just so you understand what i'm trying to do, if I have the content of a cell change(from normal to bold for example), say when I hover over the row, the size of the columns will change. This looks quite odd.
To be honest I didn't understand the answer you gave to my comment, but I'll attempt at an answer anyway :-)
What you maybe need is to wrap the content of each cell in a div (or some other block element) and set it's width. That should limit the widening of the cells, however as I hinted at im my comment, the wider content will overflow, which most like look ugly. However you didn't really specify what you want the wider content to do...
<style type="text/css">
#the-table td .wrap {
overflow: hidden; /* try different values for different effects */
}
</style>
<script type="text/javascript">
$(function(){
$('#the-table th, #the-table td').wrapInner(function() {
return $("<div/>").css("width", $(this).width() + "px");
});
});
</script>
Live example: http://jsfiddle.net/Vx5Zq/
Notice how the letter F is cut off on hover.
I think this should do the trick (not checked though):
var w = $('#myTable td.leftCol').outerWidth();
$('#myTable td.leftCol').css({width: w+'px'});
[EDIT]
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("table td").each(
function() {
var w = $(this).outerWidth();
alert(w+'px');
w *= 2;
$(this).css({width: w+'px'});
alert(w+'px');
}
);
}
);
</script>
</head>
<body>
<table>
<tr>
<td>abc</td>
<td>def</td>
<td>ghi</td>
</tr>
</table>
</body>
</html>
Adding some width to your current tds will stop the resizing when the the text goes bold.
First set your table using css to fixed rendering:
<style type="text/css">
#mytable{ table-layout: fixed; }
</style>
Then you can use jquery to add 2px of width to your tds like so:
<script type="text/javascript">
$(function(){
$('#mytable td').each(function(){
var $this = $(this) // cache this td
// set style to 2px wider
$this.css({ width: $this.outerWidth() + 2, height: $this.outerHeight() + 2 });
})
});
</script>
I want to make the last/third div to be filled the whole remaining space. I given the 100% height but there is scroll bar is coming, which i dont want to show. I there any CSS solution for same. if not possible from css then the jQuery/JS solution will be fine.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="display:block;height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
In jQuery, you can try something like this:
$(function() {
$(window).resize(function() {
$('div:last').height($(window).height() - $('div:last').offset().top);
});
$(window).resize();
});
Whenever the window is resized, the last div's height is modified so that the div extends to the bottom of the page. Window's resize method is called on page load so that the div is resized immediately.
If you substract the top offset of the div from the height of the window, you are left with the maximum height available. If you have margins, borders of padding applied, you might have to adjust the value which is substracted, for example:
$('div:last').height($(window).height() - $('div:last').offset().top - 30);
Assuming you want the div 30px from the bottom of the window.
On modern browsers: set position: relative on the container div, position: absolute on the third div. Then you can position it to the top and bottom of the container the same time: top: 0px, bottom: 0px;
You could also use faux columns by adding a vertically repeating background image to the CSS making the columns appear toy the space - this gives the appear. You could add this image to the div that wraps the three columns or to the body tag.
If these columns a going to have content in them it's probably worth adding some as the columns will behave differently.
You can hide the overflow in the containing DIV:
<html>
<head>
<style>
*{margin:0;padding:0;}
html,body{height:100%;}
</style>
</head>
<body>
<div style="overflow:hidden;height:100%">
<div style="height:100px;background-color:#ddd"></div>
<div style="height:25px;background-color:#eee"></div>
<div style="height:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Note that content might dissapear when resizing the window using this technique.
You can use pure CSS height:100% (where 100% is the height of the visible area in the window) values in quirks mode by not using DOCTYPE at all or using IE-faulty HTML 4.0 DOCTYPE (without the .dtd url)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body style="margin:0; padding:0; overflow:hidden;">
<div style="height: 100%; background: red"></div>
</body>
</html>
You can ditch the <!DOCTYPE.. entirely, it still would have the same effect. overflow:hidden declaration in body style is to get rid of the empty scrollbar in IE. But remember - this is quirks mode which means that you are on unpredictable territory, CSS box model differs from browser to browser!
html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style="position:fixed;top:125px;height:100%;width:100%;background-color:#ccc"> </div>
</div>
</body>
</html>
Perhaps this could work?! But I don't know whats happens if there is to mutch text...
Simply don't worry about it if your goal is to have the colour fill the bottom.
Set the colour of the outer div, and let the third one resize its height however it wants as content goes in.
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%; height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="height:100%;width:100%;background-color:#ccc">
<div style="height:100px;background-color:#ddd"> </div>
<div style="height:25px;background-color:#eee"> </div>
<div style=""> </div>
</div>
</body>
</html>
The property 'height: 100%;' will instruct browsers to take the 100 per cent of the available screen space for that particular div, which means that your browser will check the browsing space size and return it to the CSS engine without checking whether there are any elements inside it.
The only workaround that I see to fit here is to use the solution provided by David to use 'position: absolute; bottom: 0;' for that div.
it a bit ugly, but it works..
<html style="height:100%">
<head>
<style type="css">
html , body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
</head>
<body style="height:100%;padding:0px;margin:0px;">
<div style="width:100%;height:100%;">
<div style="width:100%;height:100px;background-color:#ddd;"> </div>
<div style="width:100%;height:25px;background-color:#eee;"> </div>
<div style="width:100%;height:100%;background-color:#ccc;margin-bottom:-1000em;padding-bottom:1000em;"> </div>
</div>
</body>
</html>
Here's a litle jquery fix I have done:
<html>
<head>
<title>test</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
</script>
</head>
<body style="height: 100%; padding: 0px; margin: 0px;">
<div id="parentDiv" style="height: 100%; width: 100%; position:absolute;">
<div id="firstDiv" style="height: 100px; background-color: #ddd">
</div>
<div id="secondDiv" style="height: 25px; background-color: #eee">
</div>
<div id="thirdDiv" style="background-color: #ccc;">
a</div>
</div>
</body>
</html>
$(window).resize(function(){
$('.elastic').each(function(i,n){
var ph = $(this).parent().height();
var pw = $(this).parent().width();
var sh = 0;
var s = $(this).siblings().each(function(i,n){
sh += $(this).height();
})
$(this).height(ph-sh);
sh = 0, ph = 0, s=0;
});
});
put the following on on your script tag or external javascript.
then change
when you resize the window... it will automatically fit its height to available space on the bottom. you could have as many divs as you like however you can only have one elastic inside that parent. couldnt be bothered to calculate multiple elastics :) hope it helps
$(document).ready(function() {
var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
$(window).resize(function(){ var heightToFill = $("#parentDiv").height() - $("#firstDiv").height() - $("#secondDiv").height();
$("#thirdDiv").height(heightToFill);
});
This should be included in case the browser is resized....
window.onload = setHeight
window.onresize = setHeight
function setHeight() {
document.getElementById('app').style.height = window.innerHeight + "px"
}