Stop div element from auto resize with image - javascript

I have a div element that is say 500px that contains an image file that is say 490px. Every time I set the image from display:none to display:inline, the div resizes. How do I prevent this?
I'm using d3 to append the element. Could have anything to do with it?
Edit: This worked:
#your_div {
width: 500px;
min-width: 500px;
}
But my image only resizes from the bottom now.

Have you tried setting min-width: 500px on the div?
#your_div {
width: 500px;
min-width: 500px;
}

Or width: 500px if you don't want it to expand too

Related

My big images do not fit into my image slider

I have an image slider. It is 100% wide and it's height is 400px. I'd like my picture which are always bigger than the slider (f.e.: 2500*1250 etc...) to fit properly in my slider. How can I do that? with a jquery script dinamically?
My code:
#slider {
width: 100%;
height: 400px;
position: absolute;
overflow: hidden;
}
--My ID's for the images displayed in the slider.--
#first {
}
#second {
}
#third {
}
Try this way for img in slider :
#first img,#second img,#third img {
position :relative;
width:100%;
height:auto;
}
you no need to write jquery for that change your css like this
#first img {
width:2500px;
height:1250px;
position :relative;
overflow: hidden;
}
use same as the other image ID, but I think it's better use one class for all, because in a slider need all images are same size
Neither work. I've seen somewhere a guy who posted a js for this but I could not find that thread that's why I posted.

How to make a fixed div/nav resize with the div it's inside of?

I'm pretty fresh to web development and cannot figure this one out. Appreciate any help!
On re-size the fixed div moves out of the container instead of re-sizing. The site I'm working on has the nav as the fixed section and is inside of the main container.
Any help is appreciated. Thanks!
<div class="container">
<div class="fixed"></div>
</div>
.container {
border: 1px solid;
max-width: 600px;
width: 100%;
min-height: 1600px;
}
.fixed {
max-width: 600px;
width: 100%;
height: 50px;
border: 1px solid green;
position: fixed;
}
http://jsfiddle.net/KqvQr/
When you specify position as fixed the Element, even thought it is inside a parent container, It won't behave as a child of a parent container. It won't adjust his width according to the parent width. But I can give you a solution where when user resize the page the fixed element also get resize yet it is a position fixed
.fixed {
height: 50px;
border: 1px solid green;
position: fixed;
right:0;
left:0;
}
Don't specify widths for the container. instead of that specify left and right values. so then when page is resizing css only check for the left and right margin values. by keeping those values it will adjust its inner width always.
Here is the working fiddle http://jsfiddle.net/KqvQr/5/
I don't think you can achieve what you want if you stick with that constraints. Your width and max-width will work as expected if you change your position to relative instead of fixed..
Check out this Fiddle

How to increase the background size automatically

How to increase a background size automatically when a new item is added to its page dynamically.
#container1 {
background-image: url(wallpapers.jpg);
height: auto;
}
#mid {
background-image: url(scripts/white.png);
width: 950px;
margin-left: 210px;
height: 1700px;
}
HTML
<div id="container1">
<div id="mid">content goes here</div>
</div>
I am unable to increase the background size beyond the height it defines even if I define it as auto not able to increase the size automatically when a new item is added.
please help I am in a need of it for my college project.
Thanks in advance waiting for your replies.
The div #container takes up the height of its child element, i.e, #mid, which in this case has a height of 1700px. Thus your content is overflowing from that div element(#mid).
You can either remove the height property from #mid, or have an overflow-y: scroll;.
Use background-size property. It might be help you.
#container1 {
background-image: url(wallpapers.jpg);
height: auto;
background-size: 100% auto;
}
I believe a div if not styled to have definite height and width will grow and shrink according to the elements within the div.
add background-size: auto 100%; this value to #container1 div in css

Change height on div with javascript

I want to set the height on a div when the div is more than 100px in height.
For example, when the content of the div makes the div's height fill more than 100px, I want it automatically fit to 200 px.
One way you can do this is to make sure there is no "height" attribute in the elements CSS (inline styling is fine). Then, when the content is changed call this function:
if ($('#myDiv').height() > 100) {
// Div is larger than 100px so increase it to 200px
$('#myDiv').css('height', '200px');
}
I think that the min-height CSS property is what you are looking for:
div#myDiv {
min-height: 100px;
height: auto;
display: block; /* float won't work */
}
This should automatically resize your div to wrap its whole content dynamically.
You can just work with min-height and max-height with CSS.
div#myDiv {
min-height: 100px;
height: auto;
max-height: 200px;
}
you could also do something with javascript as said, but with this you can also have the possibility that the height is 150px, or 120px. if you don't want that, You should do it the javascript-way.
You can try
if($("divID").height() > 100){
$("divID").css("height","200px");
}

CSS to span column height to window height?

I want to make the left and right column span to the window height and give the user a scrollbar to independently scroll the two columns. How can I do this?
I've been trying min-height: 100% and height: 100% but it doesn't seem to work no matter where I use it.
I setup a JSFiddle here: http://jsfiddle.net/Legend/t5cUA/1/
EDIT: I don't want to add position: fixed. I still want the columns to align if the user reduces the width of his browser window.
You need to make sure all the previous wrappers are set to height: 100% and overflow: hidden. Something like this fiddle shows (may need some tweaks depending on what exactly you want):
html, body, .container-fluid, .container-fluid > .row-fluid {
height: 100%;
overflow: hidden;
}
.span-fixed-sidebar {
height: 100%;
overflow: auto;
}
Update from Clarification
You just need to continue the process deeper. The point is that you need to set the scroll on the actual column element(s) you want to scroll, and have everything else explicitly set to the height: 100% and overflow: hidden that wrap that column. Probably this for you:
html, body, .container-fluid, .container-fluid > .row-fluid, .span-fixed-sidebar {
height: 100%;
overflow: hidden;
}
.span-fixed-sidebar > div {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
It you want to scroll content of left and right column independently you have to add
overflow: auto;
to it's CSS. Also, note, that 100% height can be set to children of relative or absolute block, or to children of block with defined height.
I'm not sure if I understand the question but if you want to span to the window height and put a scroll if the column is higher than the window:
.column {
overflow: auto /* scroll */;
height: 100%;
}
EDIT: Yes, overflow: auto will be a better option if you don't want to show a scroll if the column is not high enough.

Categories

Resources