Getting width of a child div with width 100% gives windows width - javascript

HTML:
<div id="parent">
<div id="child">
<div id="child1"></div> <!-- UPDATE -->
</div>
</div>
CSS:
#parent{
float:left;
width:90%;
}
/* UPDATE*/ #parent #child{
float:left;
width:100%;
}
/* UPDATE*/
/* In a different file*/
#child1{
float:left;
width:100%;
}
jQuery:
Say the width of the window is 1000px. So the width of #parent should be 900px. If I try to get the width of the #child1 it should also be 900px. But the below jQuery code returns 1000px.
jQuery("#child").width(); //UPDATE: returns 900px as width
jQuery("#child1").width(); //UPDATE: returns 1000px as width
I need 900px as result of the above statement.

Related

How to shrink a from a max-height to a min-height over the size decrease of the viewport width?

If I have a body element and I decrease screen size, it is a 1:1 ratio.
If I have an body tag at width 50%. its a 1:1 ratio. Every pixel decrease of the viewport directly effects the width of element.
If I have 2 Elements side by side. I want to have the first element (.left) start at a width of 400px, at a screen width of 1300px, but increase a total of 100px over the course of the screen increase to 1920px.The second element (.right) will fill the rest of the space and decrease at the according rate of the screen +/- the current width of .left
.right
1300px -> 1920px
400px -> 500px
.left
width:100%
I know this doesnt work but this is the code I've got so far.
.full{
background-color: lightblue;
width:100%;
height:50px;
}
.half{
width:50%;
height:50px;
background-color:grey;
}
#flex{
display:flex;
}
.right{
max-width:500px;
min-width:400px;
height:50px;
background-color:lightgreen;
width:70%;
}
.left{
height:50px;
background-color:lightpink;
width:30%;
}
<div class="full"></div>
<div class="half"></div>
<div id="flex">
<div class="left"></div>
<div class="right"></div>
</div>
I'm assuming the wording in the question is what is required, i.e. the left element is to have a min value of 400px, a max value of 500px and is to increase in size from the min starting at body width 1300px and stopping at 1920px.
left therefore needs to be set to have a min-width: 400px and max-width: 500px
We need to calculate what the width will be to increase by 100px between the given start and end body width values. The formula for this is:
s + (i / d) * (a - b)
where
s = starting width of left element (400)
i = increase in left width (100)
d = difference between start and end body widths (1620)
a = actual body width now (100%)
b = starting body width (1300)
The right element is to take up the remaining space so needs to be given flex: auto;
In this snippet the various dimensions have been set using CSS variables so as to make it easier to change them.
.full{
background-color: lightblue;
width: 100%;
height: 50px;
}
.half{
width: 50%;
height: 50px;
background-color:grey;
}
#flex{
display: flex;
}
.right{
height: 50px;
background-color: lightgreen;
flex: auto;
}
.left{
height:50px;
background-color:lightpink;
/* SET THESE 4 VARIABLES TO WHAT YOU WANT */
--startb: 1300; /* width of the body after which left starts to get bigger */
--endb: 1920; /* width of the body after which left stops getting bigger */
--startleft: 400; /* the start (hence minimum) width of the left element */
--incw: 100; /* the increase in the left's width when have reached the end body width */
/* we calculate some interim values just to make it a bit easier to see what's happening */
--startbw: calc(var(--startb) * 1px);
--endbw: calc(var(--endb) * 1px);
--incb: calc(var(--endb) - var(--startb));
--startw: calc(var(--startleft) * 1px);
width: calc(var(--startw) + calc(calc(var(--incw) / var(--incb)) * calc(100% - var(--startbw))));
min-width: var(--startw);
max-width: calc(var(--startw) + calc(var(--incw) * 1px));
}
<div class="full"></div>
<div class="half"></div>
<div id="flex">
<div class="left"></div>
<div class="right"></div>
</div>

get the height of horizontal scrollbar

I encountered a problem where I need to know of the height of horizontal scrollbar.
This Q&A suggests that you should use clientHeight property and calculate difference. Unfortunately this does not work anymore as is evident here https://jsfiddle.net/fn8naww8/
So how can I get the height of scrollbar?
EDIT: OSX does not differentiate between offsetHeight and clientHeight.
html:
<div id="wrapper">
<div id="content"></div>
</div>
css:
#wrapper{
height:100px;
width:100%;
overflow-x:auto;
}
#content{
height:100%;
width:200%;
background:linear-gradient(to right, red , yellow);
}
Try with:
var horizontalScrollbarHeight = wrapper.offsetHeight - wrapper.clientHeight;
or like:
var horizontalScrollbarHeight = wrapper.offsetHeight - parseInt(window.getComputedStyle(wrapper, null).getPropertyValue("height"), 10);
Both will return ~17 if the scrollbar size was not altered by CSS like by using ::-webkit-scrollbar
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
console.log(window.getComputedStyle(document.querySelector("#wrapper")).height);
console.log(window.getComputedStyle(document.querySelector("#content")).height);
*{
box-sizing: border-box;
}
#wrapper{
height:100px;
width:100%;
overflow-x:auto;
}
#content{
height:100%;
width:200%;
background:linear-gradient(to right, red , yellow);
}
<div id="wrapper">
<div id="content"></div>
</div>
This will return 100px for wrapper and 83px for inner.
There is a magic number: “17px”.
Seems this height/width does not change even if you resize the browser window.
And it works on Chrome fine with my test.

Scale an image instead of wrapping text around it when the browser window is resized

I have an image positioned next to a div with some text by using display: inline on the div.
When the browser window is resized to be more narrow, I would like the image to scale down instead of having the text wrap around it first.
Currently, the text will wrap under the image when the window is resized, and only then will the image scale thanks to its max-width.
The end goal is to have a horizontal logo next to a horizontal menu, and have the logo scale on window resize while the menu stays in place.
Would be great if this could be done with just CSS, but I'll take Javascript if that's not possible.
<style>
img { max-width: 100%; }
#textblock { display: inline}
</style>
<div id="container">
<img src="https://www.google.com/images/srpr/logo11w.png">
<div id="textblock">Some Random Text</div>
</div>
Fiddle: http://jsfiddle.net/uLc8dcsh/1/
try this :
<div id="container">
<div class="div1"> img tag should be here </div>
<div id="textblock"> </div>
</div>
and css
img {
max-width: 100%;
float:left;
}
.div1{width:80%; float:left;}
#textblock {
display: inline;
float:right;
width:20%;
}
#container{width:100%; float:left; }
Do you mean something like this http://jsfiddle.net/uLc8dcsh/3/ ?
Here the logo will grow max to width of 300px when you maximize the window.
The minimum width of the container is set to 300px so the word will not wrap
the logo's width is 50%, means 50% of the #container width
img {
width:50%;
max-width: 300px;
}
#textblock {
display: inline
}
#container {
min-width: 300px
}
This answer is probably overkill:
What is this:
1. Float image, overflow hidden
This if so the text does not overflow under the image
2. added clear-fix to containing div
This is so the image does not destroy the outside element (article)
Html
<article class="clearfix">
<img src="some image"></img>
<p>Some random text</p>
</article>
css
article p {
overflow:hidden;
}
article img {
float:left;
max-width:80%;
}
article {
border:1px solid;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
And here is the Fiddle

how to force an image background to fit smaller div center

<div id="img-frame">
<img src="mypathimg.png"/>
</div>
use img 100% will work but it unlike Facebook, it shrink but show the centre of the image.
Since none of the other answers are complete, change the markup to:
<div id="img-frame">
<div style="background-image:url(yoururl.png)" class="img"></div>
</div>
Now add CSS:
.img-frame > .img {
background-size:cover; /* Scale to fit optimistically */
background-position:center; /* Scale from center */
width:100%; /* Same width as parent */
height:100%; /* Same height as parent */
}
Have you tried:
<div id="img-frame">
<div style="background:url(mypathimg.png) 100% 100%;" />
</div>
You could also set the width and height of the image to 100% if you don't want it as a background image. You might need to provide an example of what you have so far and be more specific though.
#img-frame{
width:100px;
height:100px;
}
#img-frame img{
width:100%;
height:100%;
}
You could try:
<div id="img-frame">
<div style="background-size: cover;" />
</div>
you could use css3 rule: background-size as
<div id="img-frame">
<div style='background:url(mypathimg.png) ;background-size:contain;' ></div>

div at bottom of the page?

How to show a div.bottom of some 100px height at the bottom of the page. If the content height is less than window's height, div.bottom will be shown at the bottom of the window. If the height of the content is greater than window's height it will be shown at the bottom of the page.
Do you need something like this?
<div style="position:absolute; bottom:0;">Hi</div>
http://jsbin.com/ayaqo4
What you're talking about is called a sticky footer, and it can be done with just html and css. The basic idea is to use a wrapper with heights: 100% and a negative margin to move it above the very bottom. Stole the code snippet from here and here:
<body>
<div class="wrapper">content here!
<div class="push"></div>
</div>
<div class="footer">footer content</div>
</body>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
This is my personal favorite for sticky footers:
http://www.cssstickyfooter.com/
You need to use css,
div.pos_fixed_footer{
position:fixed;
bottom:0%;
right:0px;
background:transparent url(../img/bg_header.png) repeat scroll center top;
width:100%;
height:40px;
}
and then call in your script like this
<div id="pos_fixed_footer"><?php include "footer.html"; ?></div>
I think you mean a footer that is in the bottom of the window only if the content doesn't overflow the window, otherwise it has to go down on the page.
Just implement the code from here http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Categories

Resources