div height occupy remaining browser window with a non-fixed overall height - javascript

I can get Alvaro's fiddle: http://jsfiddle.net/S8g4E/955/ to work the way I want it to only for width but not height ... my lower component canvas is very large (5000px square) and I want it to scroll in both directions, but have the "viewport" grow to the full size of its containing lower window ...
If you look at my fiddle: http://jsfiddle.net/tconway556/4LCj2/
<div id="container">
<div id="up">Text<br />Text<br />Text<br /></div>
<div id="down" style="overflow:scroll; width: 100%;">
<canvas width="5000px" height="5000px">
</canvas>
</div>
</div>
#container { width: 100%; height: 300px; border:1px solid red;}
#up { background: green; height:80px}
#down { background:pink; height: calc(100% - 80px); }
the width is working as I want. but not the height. I can only hard code the height of the overall container to a fixed value.
If you resize the browser with my fiddle in it, the width of canvas viewport adapts to the containing window, but the height remains fixed. This makes sense since I fixed it at 300px .. but ...
If I replace the fixed 300px with 100% in the #container, the height grows to 5000px + .... what I wanted was the same behavior we see with width. ie. When you resize the outer browser window both width and height of the viewport adapt to the browser boundaries ...
Does anyone have a solution for this ?

Im just replying from a phone so can't look at your fiddle and resize etc but if I understand your problem correctly you could try removing the height value and instead using padding-bottom: with a percentage value.
You'll have to play around with the values for padding-bottom to see what works for your needs but this will allow the height to adjust dynamically and should scale with your resizing window. Its a bit of a trial a d error one but ive used it before to solve a similar issue

Related

Central div with margin, and ability to scroll out in all directions (using view width and view height)

So I want to have a central div that is full screen, and to make the width and height of the body 150 vw and vh, with a margin of 50% so when you load the page it holds the div central, but you can scroll up, down, left, right, outside of this central div a little bit.
If you do the div 100vw, 100vh, and then the body 200vw, 200vh, it only enables scrolling to the right and downwards.
This is my understanding of how to get towards what I'm trying to do:
HTML:
<div>
centered and full screen div?
</div>
</body>
CSS:
body{
width:150vw;
margin-left:50vw;
height:150vh;
margin-top:50vh;
}
div{
width: 100vw;
height: 100vh;
border: solid;
}
JAVA:
window.scrollTo(50 + 'vw', 50 + 'vh');
https://jsfiddle.net/dsLnzyxw/3/
But this doesnt work as the javascript doesn't accept vw in the scrollTo function.. but just to give a better idea of what I'm trying to do.
Also understand I might be going around on crazy route trying to achieve something that could be done quite simple in css?
How do I achieve this?
Thanks !
In order to get units relative to the viewport width and viewport height (vw and vh) you could do simple calculations:
window.scrollTo(0.5 * window.innerWidth, 0.5*window.innerHeight);
which would set the scroll position to 50% of the window width and 50% of the window height. window.innerWidth returns the width of the window, and this is multiplied by 50% to get 50% of the width of the window in pixels.
The same goes for height. Setting the scroll position is not possible without JavaScript unfortunately.

Div height to image height and image width to div width

I have a div I use as a container and an image I use as a "background" (not literally, I was told I couldn't do this with background attribute) and then a content div:
CSS
#container {
display:table;
width: 100%;
min-width:100%;
}
.img1 {
//DON'T KNOW WHAT TO PUT HERE;
}
#content {
//not important;
}
HTML
<div id="container">
<img class="img1" src="img.png"/>
<div id="content"> Content </div>
</div>
I need the container div to be 100% screen width, and so the contained image, while both of them must have the image's resulting height (after the resizing from taking 100% screen width) (no stretching).
Any way to do that? I tried a lot of min-height and width combination but nothing worked so far.
I prefer CSS and HTML only solutions, if possible.
Not exactly sure what you mean, but how does this look: https://jsfiddle.net/b76fjtcv/
basically it's
.img1 {width: 100%;}
This updated version of the fiddle also adds a max width to the img so it doesn't get too fuzzy. Just set the max-width of the .img1 to the image's full width.
What are both images? You only have one. look at this, you can use tables for formatting as well if you're not comfortable with div's.
Also, your image could be smaller or larger than the screen width, what then? Do you want scrolling or scaling?

How do you increase element width as you decrease the window size?

I'm coding a website to fit both desktop and mobile, and of course the initial thought is to use a percentage width and then setup a mobile CSS stylesheet that changes the element width to 100% if the screen is under 700px.
The problem with that is the "clunk" that occurs when you cross the barrier.
So I thought, "Why not add a jQuery resize script that fluidly resizes the element to avoid the clunk?"
The problem was writing the equation.
I figured it out, but now I'm worried about how much processing power it's using up. I don't want this feature to lag the rest of the website.
Here's my jFiddle:
http://jsfiddle.net/jp685suz/1/
...and the equation:
var windowW = $(window).innerWidth();
var rangeMax = 1000; //Change occurs between 700px and 1000px
var rangeMin = 700;
var rangeDiff = 1000-700;
var minWidth = 50;
var dynWidth = Math.round(((1-(((rangeDiff-(rangeMax-windowW))/rangeDiff)/(100/(100-minWidth))))*100)*10)/10;
Try resizing the window to see what I mean. It's not laggy now, but add in a few high res photos in a slideshow and other jQuery functions and it isn't perfect. Of course this isn't a huge issue because most people don't resize their window very often, but I like to show off.
Can my equation be simplified? Maybe there's something built-in to jQuery that does this exact thing?
You want this:
100% width when window is less than 700px wide.
50% width when window is more than 1000px wide.
Then, you decided to reduce the percentage linearly between 700px and 1000px.
However, there is a problem: when the percentage is resolved, the used width becomes
As you can see, increasing the width of the window reduces the width of the section, producing a very weird effect.
Let me propose a different approach:
100% width when window is less than 700px wide.
100% = 700px width when window is 700px wide.
700px width when window is between 700px and 1400px wide.
50% = 700px width when window is 1400px wide.
50% width when window is more than 1400px wide.
That is, use a constant width of 700px, and clamp it with percentages:
width: 700px;
min-width: 50%;
max-width: 100%;
section {
width: 700px;
min-width: 50%;
max-width: 100%;
margin: 0 auto;
}
section:before {
content: '';
display: block;
height: 100px;
background-color: olivedrab;
}
<section>
<p>This olive green box will be a reasonable size on a big monitor (50% of the screen), and will fill the screen (100%) if it gets smaller than 700px (i.e. mobile).</p>
<p>The transition is smooth. Go ahead, try resizing the window and see how pretty!</p>
<p>This is not as "clunky" as setting a CSS mobile screen profile, but uses jQuery which isn't always a good idea.</p>
</section>
You can use CSS transitions for the effect you're after.
transition: width 1s ease;
See your amended fiddle http://jsfiddle.net/3wtfenk2/
No javascript used.

Image max-height

I have got a tiny problem, im creating a website and i want to give an image a max-height. The image may only have the same height of another div.
You can check the layout here: http://bit.ly/1OAGsLR
Its about the 1920x1080 image, and i needs to be the same height as the div with class box left to it. If right the image should scale well.
But im trying all i know but i dont get it working, can someone get this working with CSS or do i need to use Javascript for this?
Thanks in advance!
Your image is looking the way you want when the screen width is at or above 1400px. You should consider using css media queries to move or adjust the image at different screen widths. Your layout could easily be handled using a css framework like foundation or bootstrap which would take care of css media query breakpoints for you.
If you are intentionally trying to not use a css framework, I'd check out this css media queries tutorial to get you started.
You need to make your container div wider.
Your container is 1200px wide, and your boxes are 560 + 40 padding wide each.
That means that the max width of you image is 560px.
Now to conserve it's aspect ratio of 16:9, the max height of the image is 560 / 16 * 9 = 315 pixels.
Okay, your main problem is that heights don't like to be defined this way. I have a solution for you that will 'solve' this issue, but its not very pretty and you might want to look into doing this with javascript anyhow. Below is a very rough example mockup.
body > div {
width: 100%;
max-width: 500px;
background: green;
padding: 10px;
position: relative;
}
body > div > div {
width: 50%;
padding: 20px;
}
body > div > img {
position: absolute;
right: 20px;
top: 20px;
max-width: 50%;
/* make sure to fall back to 80% so theres at least some gutter for older browsers */
max-height: 80%;
/* use calc to make the image the height of the relative parent minus padding */
max-height: calc(100% - 40px);
}
<div>
<div>Push<br />Push<br />Push<br />Push<br />Push<br /></div>
<img src="http://placehold.it/350x150" />
</div>
In short, this will place your image to the right of your box, give it a max-height (because positioning can do that) and a max-width (so smaller screen sizes don't freak out).
Now you could easily translate this a more general system where .box + .boxget a absolute position, or you could define a class for the box that has to push content and add that to the first box, making all other boxes absolute.
I fixed it by using JS, im using the following script:
<script type="text/javascript">
function changeheight(){
var Height = document.getElementById('box').clientHeight;
document.getElementById('imagebox').style.height = Height+'px';
}
</script>

Responsively position an image at specific target over background image

I have a responsive background image with a smaller image positioned over it. I am trying to keep the smaller image at a specific location when the window is resized.
Both images scale properly, and the left position works so far, but not the top position.
img {
max-width:100%;
}
#dot {
position: absolute;
top: 17%;
left: 66.5%;
width: 10%;
height: 0;
padding-bottom: 10%;
}
I have found some questions with answers that suggest:
Vertical Alignment or Positioning with Javascript
I've also looked into .position() and .offset(), not sure if either would work.
I think my best solution would be to calculate the Y offset using the current window height as a reference but I am not sure what my JS or Jquery code should look like.
Here is my jsfiddle:
http://jsfiddle.net/melissadpelletier/xBu79/21/
I'm not sure exactly what you're trying to do with your images, but you could create a new smaller image (green dot) with the same aspect ratio as your background image, and have the dot placed where it needs to be within that aspect ratio. Then stretch the width of that to be 100% and the two images are basically overlapping, but the top image (smaller image) has a transparent background. Not sure if that all makes sense, but I made a new image and did the fiddle thing, which I'm new to: http://jsfiddle.net/ydack/
img
{
width:100%;
}
#dot
{
width: 100%;
position: absolute;
top:0;
left:0;
}
#dotImg
{
top: 0;
left: 0;
width: 100%;
}
I mistakenly placed the green dot's position based on the black outline, not the full background image, so the dot is slightly up and right of where it needs to be. BUT, the position is maintained while re-sizing the window. Hacky, but it could work!
You are definitely gonna need some javascript for this. What you can do is calculate the height and width of the image whenever you resize your browser window. Then simply use some math to calculate the position of the dot relative to those dimensions.
var height = $('#image').height();
var width = $('#image').width();
/* change the fractions here according to your desired percentages */
$('#dot').css({left: width/2, top: height/2});
$(window).resize(function() {
height = $('#image').height();
width = $('#image').width();
/* change the fractions here according to your desired percentages */
$('#dot').css({left: width/2, top: height/2});
});
Try this code: http://jsfiddle.net/LimitedWard/FFQt2/3/
Note that you will need to also resize the dot according to the height/width of the image if you want it to always fit inside that box.
Edit: after further investigation, it is possible to do this in CSS; however, it's a lot sloppier because the dot doesn't follow the image if the window is too wide. This jQuery solves that problem by using pixel-based positioning.
http://jsfiddle.net/sajrashid/xBu79/24/
plenty of errors mainly not closing tags
<div id='background'>
<img src='http://i.imgur.com/57fZEOt.png'/>
<div id='dot'>
<img src='http://i.imgur.com/yhngPvm.png'/>
</div>
</div>

Categories

Resources