On my website, after loading a page, CSS height is adding to the DOM and I am unable to find from where it was modified. Is there any way to debug it?
Below is the demo example.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.div { border: 1px solid; }
</style>
</head>
<body>
<div class="div"> <b>hello</b> </div>
<script>
$(document).ready(function(){
$('.div').css("height", "200px");
$('body > div').css("height", "200px");
});
</script>
</body>
</html>
DOM can modify from any file and in any way. How can I debug it on a large website?
Thank you.
You can observe all changes in the DIV element by using MutationObserver.
let observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.attributeName);
});
});
observer.observe($('#test')[0], {childList:true, attributes:true});
//test
$('#test').height("50px")
setTimeout(function(){$('#test').height("100px")},3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">
https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord
You can listen to any resize on your element by ResizeObserver
$(document).ready(function () {
$('.div').css("height", "200px");
$('body > div').css("height", "200px");
});
new ResizeObserver((e) => {
console.log("cahnged");
}).observe($('.div')[0])
.div {
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="div"> <b>hello</b> </div>
I'm working on a simple HTML/jQuery script.
Right now when i click on the button which is inside the iframe it is changing the iframe's height that is calling the content with the button.
Take a look at the code:
<div id="outerdiv" style="padding:20px;border:2px solid red;">
<iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
Here is the iframe.php content:
<HTML>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<div style="display:block;height:300px;">
<h3>The iframe content</h3>
<button type="button" id="SuperWebF1">Click me to resize the holding Iframe!</button>
</div>
<script type="text/javascript">
$("#SuperWebF1").click(function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
})
</script>
The problem is coming when i try to add this:
<style>
#outerdiv
{
width:400px;
height:300px;
overflow:hidden;
position:relative;
border:2px solid #fff;
}
#inneriframe
{
position:absolute;
width:400px;
height:700px;
border:0px;
}
</style>
<div id="outerdiv" style="padding:20px;border:2px solid red;">
<iframe src="http://beta.sportsdirect.bg/test/iframe.php" id="inneriframe" scrolling="no" target="_parent"></iframe>
</div>
As you can see i've added a <style> tag where i added CSS for the elements outerdiv and the iframe inerriframe and now when i click on the button it's not chaning the iframe's height.
When i remove the <style>....</style> tags and all the content inside them the script is starting to work again.
Here is the demo: http://beta.sportsdirect.bg/test/
This is the working demo when i have not added the <style></style> tags.
Can you help me set up the CSS for these elements and make the jQuery script works as well ?
Thanks in advance!
The event will not trigger it's function when the document is not fully loaded inside the iframe page.
Instead of:
<script type="text/javascript">
$("#SuperWebF1").click(function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
});
</script>
Use:
<script type="text/javascript">
$(document).ready(function(){
$("#SuperWebF1").on('click',function(){
$('#inneriframe', window.parent.document).animate({height:'900px'}, 500);
});
});
</script>
For it to listen to the click event when all the .css,.js and whole documents in the page are completely ready.
I hope this will help?
i want to make the map'e height is auto with the device's screen...
but when i change the style.height to auto, 100%, screen.height, the map is disappear...
how to make the height is auto?
this is my code...
script.js
$('#home').live('pagecreate',function(){
document.getElementById('map_canvas').style.width=screen.width;
document.getElementById('map_canvas').style.height="20em";
});
in index.html i just called
<div id="home" data-role="page">
<div data-role="header">
*my header*
</div>
<div data-role="content">
<div id="map_canvas"></div>
</div>
</div>
if you use jquery you can do as below:
instead of this:
document.getElementById('map_canvas').style.width=screen.width;
document.getElementById('map_canvas').style.height="20em";
you can use:
$("#map_canvas").css({
'width':screen.width,
'height':"20em"
});
Please check this example:
I think your problem is related to css not to javascript.
The % height you want to set will be based on the parent height, so if the parent is empty, the 100% of 0 will be 0: check this
code example:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<style>
#map_canvas{
background-color:#00F;
}
#cont{
background:#F00;
height:200px;
}
</style>
<button onClick="doit1()">Click me to put something in map_canvas</button>
<button onClick="doit()">Click me to make the height 100%</button>
<div id="home" data-role="page">
<div data-role="header">
*my header*
</div>
<div id="cont" data-role="content">
<div id="map_canvas"></div>
</div>
</div>
</body>
<script>
$('#home').live('pagecreate',function(){
$('#map_canvas').css('height','auto');
});
function doit(){
$('#map_canvas').css('height','100%');
}
function doit1(){
$('#map_canvas').html('a')
}
</script>
</html>
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"
}
Please consider this code:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<div id="dlgDiv" style="width:202px; height:72px; border: solid 1px grey"></div>
<iframe id="iView" style="width: 200px; height:70px; border: dotted 1px red" frameborder="0"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
var doc = document.getElementById("iView").contentWindow.document;
doc.designMode = "On"
doc.open()
doc.write("<html><head></head><body class='some-class'>Some test text</body></html>");
doc.close();
jQuery("#iView").appendTo("#dlgDiv")
})
</script>
</body>
</html>
In IE it works fine and preserves test in the frame ("Some test text") as well as it keeps it in design mode.
In FF/Chrome/Opera it wipes out all content of the iframe - if you inspect it's DOM with FireBug you can see that iframe.body lost it's class "some-class" as well as all text and it's not in design mode.
Any ideas how to overcome this problem? The original problem is that all rich text editors fail to work in a jQuery.dialog in those browsers and I tracked the problem down to the above-mentioned fact...
It's a real show stopper for me, any help would he highly appreciated!
Thank you,
Andrey
Takes to refresh the movement (appendTo) and does not locate either the iframe:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<div id="dlgDiv" style="width:202px;height:72px;border:solid 1px grey"></div>
<iframe id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#iView").appendTo("#dlgDiv");
setTimeout(function(){
var iBody = $("#dlgDiv").find('#iView').contents().find("body"); // <-----
iBody.append("<div>my bad html</div>"); // old container
iBody.empty(); // empty body in iframe
iBody.append("Some test text"); //add container
iBody.append("<div>or something right</div>"); //add container
iBody.attr("class", "some-class"); //add class to body
}, 100);
})
</script>
</body>
</html>
Edition: for it is understood