DIV width and height wont resize when setting innerHTML? - javascript

When I set an image to the innerHTML of a DIV container, the width and height of the DIV is still not changed. The div has border:solid style and the border is like "outside" the image...
So the image is shown fully, but it streches outside the div borders, but still shows anyway. Is this a problem ?
Should I use the DOM method instead, will it be better ?
Thanks

have you set the overflow css property of your div ?
http://www.w3schools.com/Css/pr_pos_overflow.asp

Related

How to get the new size of a dynamically sized div?

I have a div that slides up from the bottom of my pagewhen a button is clicked. i do this using a css transition and changing the css "top" attribute of the div. works fine if the div size never changes. So for example if the div is 400px high, i just move it up 400px and it's now in position. cool.
BUT... what if the div has dynamically generated content and will be a different height every time? how can i figure out how much to move the div up in order to be 100% showing?
so in pseudo code i want something like
function movemydiv() {
var howMuchToMoveIt = ??? (somehow getting the dynamic containers height)
document.getelementbyId("mydiv").style.top = bottomOfScreen - howMuchToMoveIt
any tips on most straightforward way to do this??
You can use either clientHeight or offsetHeight to measure the height of your div.
Both clientHeight and offSetHeight include padding , but offsetHeight will also take into account borders and horizontal scrollbars (if rendered) - see MDN link.
So your js would be something like:
var howMuchToMoveIt = document.getElementById('mydiv').clientHeight;
The var will then contain the height of your element.
Hope this helps

How to make a div fit to screen without the other divs being visible

One of the divs which i want to display dynamically has to fit to screen. The problem is that if the earlier displayed div has height more than the screen height, when the dynamic div is displayed in the bottom of the page(after scrolling) there is some part of the earlier div still remaining. I dont want any trace of the earlier while displaying the dynamic div. Also i have to achieve this only by using javascript.
to place an div or any element one above another use position:absolute,top:0; left:0 and width and height to 100%
get the div out of your other divs, but still in the body and make it not visible "display:none;"
Give it some attributes, like Mardzis said, height : 100%; width : 100%; z-index:9999;
Then, when you want to display it, just do .show() or .hide() (with jquery if you use it) or .getElementById('#yourDivId').style.display = "none"; .... & so on...
I found a workaround for this.Put focus on the child div and disable scrolling.

Inline Block element with width auto doesn't update

I am having trouble with inline-block elements with
width: auto;
and programatically changing the height with javascript.
Here is a jsFiddle that demonstrates it;
http://jsfiddle.net/uJZjB/2/
The idea is that if you resize your window, the javascript sets the elements' height, and the inline-block element's width automatically adjusts to fit the content.
However, the width does not auto update and it remains at the original width rather than resizing to match the width of the content.
If you cause the dom to refresh by hiding and showing the element, or changing the display style e.t.c. the widths are updated!
Please see this modified jsfiddle;
http://jsfiddle.net/uJZjB/5/
This one on chrome, now forces the width:auto; to kick in and work, on Firefox it still appears not to update.
Is there a reason why the widths wont update when set this way?
Regards,
You can set the width of the elements alongside the height to what would be expected with width:auto by taking the width of the children:
$('#myul li').css('width',$('#myul li').children().width() + 2); // compensate for border
JSFiddle: http://jsfiddle.net/uJZjB/4/

get contents height of div that has oveflow:hidden style

I'm designing a vertical scroll-bar plugin for jquery. my plugin accepts a height value as option and if the div height exceeds the given height the scroll-bar will be visible. now the problem is I need to get the real height of the div content.
<div id="scroll">
Contents Here
</div>
jquery:
$.fn.vscrollbar = function (options) {
.
.
.
var contentHeight=this.contents().height() //that is not working correctly
if(contentHeight > options.height){
this.css({overflow : 'hidden'}).height(options.height);
}
.
.
.
})(jQuery);
I can get the height of div before applying 'overflow:hidden' but the problem is I want this to work even if it has overflow:hidden style from the begining.
You should have a hidden div on the page, of the same width but overflow auto. As soon as your plugin is called/instantiated, take the height of that hidden div and do what you want.
One way I know should work is having a content element inside of the overflow and get the height of that since it should retain its height value.
The .css() method should work
$(this).css('height');

Setting a paragraphs CSS width through Javascript doesn't work

In Javascript, I have a div with a paragraph inside it. I have made an effect where the div slowly expands in width & reveals the text in the paragraph below.
I set the divs width to zero, then every 10 milliseconds I increase the width by 10px. This works great because I have set the div to have overflow hidden.
My Problem: BUT the text in the paragraph wraps to the current width of the parent div, which means that the text jumps around & reformats as the width increases.
I want to remove/stop this from occuring so I explicity set the paragraphs width to 100px (the width of the div once it has completely expanded) but the problem is when I go check the CSS width of the paragraph element in Firebug, its not set, ie its not listed in the HTML elements inline CSS style?
It makes me think that a paragraph element by default has display block & ignores the width parameter, is that correct?
My ultimate question is: How can I get the paragraph element to be 100px wide? Do I need to change the display type to get the width to work?
This doesn't work:
pEle.style.width = "100px";
// maybe I need to change the display type before I set its width?
If I understand your question correctly you can do this just be explicitly setting a width for the paragraph in your CSS.
By default a paragraph element is block level and will take take any width you specify... Leads me to think somethings going wrong with how you're trying set the width.
Here's a quick fiddle - http://jsfiddle.net/MerlinMason/Sdq65/
Hope that helps!
I truly believe all your problems maybe fixed by adding this css property to your paragraph:
white-space: nowrap;

Categories