So I have a div that is positioned in the middle of my page(centered horizontally but not vertically), and it scales to fit the device width until the device becomes larger than 600px. After that the div remains at 600px wide and stays centered in the window no matter how much larger it becomes.
What I would like to do is position a background image so that it is always located at the bottom left of this scaling div (background of the page not background of the div). I believe I will need to use javascript to do this, but I'm not exactly sure. I think I might need to do something like:
var divWidth = document.getElementById('theScalingDiv').offsetWidth;
var pageWidth = document.clientWidth;
var xCoord = (pageWidth/2) - (divWidth/2);
Then I could use absolute positioning to position the background image according to the height of the scaling div and the calculated xCoord. Does this sound like it would work?
You could use fixed positioning on the div:
.divtoposition {
position:fixed;
left: 0;
bottom: 0;
}
http://jsfiddle.net/7v5L4/
Related
https://codepen.io/umbriel/pen/MxazRE
I have a slideshow that the user changes which slide to look at by swiping their mouse cursor horizontally over the slide container.
Because the children (slides) are absolutely positioned I need to dynamically update the height of the parent (slideshow container). Otherwise
Because I dont know the height of the individual slides I need to calculate the tallest div and give that to the parent
Code below to get tallest element below:
function getTallestSegment(element) {
let elementsHeight = [];
let height = 0;
element.forEach(child => {
elementsHeight.push(child.scrollHeight);
});
height = Math.max(...elementsHeight);
return height;
}
And the window resize snippet to update the parent height dynamically.
window.onresize = function(e){
Object.assign(item.style, {
height: getTallestSegment(getChildren) + "px"
});
};
Now it works, but only only when I downsize the window:
Please have a look in the gif. Notice the height value in the bottom right corner is in fact changing. But only when I downsize the window, I want it to work when I expand the window width as well!
Any takers to figure out to make the parent resize in both directions?
Thanks!
The problem with your code is that, when you expend the viewport, the elements are 100% height of it's container. When you expand, the elements are still 100% height of it's container because the container has a fixed height, that's whay it doesn't shrink.
But with CSS grids you can overlap elements and still make the container resize according to the tallest of them, no need for absolute position and no need for javascript to resize them.
First you make the container a grid:
.hover-slide {
display:grid;
}
Then, you put all elements on the same row and column (no need for absolute, left, right, width, height, etc):
.hover-slide > * {
grid-column: 1;
grid-row: 1;
}
And that's it, you can change the active element, but the height will just be the minimal to get all the elements inside.
Your code but using this idea https://codepen.io/anon/pen/PLPLpv (I've added a border to see the container's height easily)
I basically have one smaller div with overflow set to auto. Inside I have another, big div of the size of the grid and inside this div I have canvas element, that should have the size of the first smaller div.
What I want to achieve is to have the canvas always shown in the smaller div, no matter where I scrolled.
I set the position of canvas to relative and the top and left attributes are set as scrollTop and scrollLeft in javascript whenever I scroll. This way my canvas will have always fixed size ( no performance issues) and in javascript I can compute the position in which I am scrolled in.
var s=document.getElementById("scrollable");
var c=document.getElementById("canvas");
c.width=400;
c.height=400;
var maxw = s.scrollWidth;
var maxh = s.scrollHeight;
s.onscroll = function(){
c.style.top = s.scrollTop + "px";
c.style.left = s.scrollLeft + "px";
}
The problem I am having is that when I reach the end of scrolling, canvas seems to overflow the big div (thanks to size of the scrollbars I believe) and thus the big div's size is increasing and scrolling continues while it shouldn't.
Link to simple example: http://jsfiddle.net/kwynt/1/
I think you are right about the scrollbars causing the problem. they shrink the viewable area of your div, so the canvas is always overflowing over the right and bottom (since you keep moving the canvas down, you can never scroll all the way there). You can add this to your "wrap" div to fix:
overflow:hidden
http://jsfiddle.net/a3XPB/
I have a block that is of size 180x270 that I need to show images
The image sizes can vary, and I want to make sure it expands or shrink so that the smaller border (either height or width) matches the block, whereas the larger border gets cropped while preserving aspect ratio.
Examples are the following:
- An image of 360x600 gets resized to 180x300, and I crop the height from 300 to 270
- An image of 100x135 gets resized to 200x270, and I crop the width from 200 to 180
Basically I want to make sure there's no white space as I expand/shrink the image while preserving aspect ratio by cropping the section exceeding the block
Any suggestions on css or javascripts that can handle this?
It seems like you're looking for background-size:cover, which works when the image is a background-image
background:url(imgurl.jpg) /* Other background image properties */;
background-size:cover;
Demo
Zach's solution is best if you can use a bg-image for the task, but if you need to use an <img> tag (there are cases when this is advised), then you need javascript to calculate the image's aspect-ratio and determine whether it is more squat or more vertically stretched than the target frame. Then there's a little CSS as well:
JavaScript
//obtain a dom-reference for the image using getElementById
//or by some other means depending on what you know of its HTML
var img = document.getElementById('some-image-id')
var aspectRatio = img.clientWidth/img.clientHeight;
//if the img is more squat, set it's height equal to the target frame's height
if(aspectRatio > (270/180)){
img.style.height = 180 //image is
}
//otherwise the image is more vertically stretched
// so set the img width equal to the target frame's width
else{
img.style.width = 270;
}
This will set the
CSS
Finally, to center an over-sized image inside a wrapper vertically and horizontally, regardless of how the fit was made:
.wrapper{
position:relative;
display:inline-block;
}
.wrapper img{
position:absolute;
top:-9999px;
right:-9999px;
bottom:-9999px;
left:-9999px;
}
Is it possible to shrink both the height and the width of a div simultaneously while scrolling down a page? For example, as the user scrolls down, the div size goes from 400px by 400px to 200px by 200px while staying in the center of the page? I know it's possible to shrink the height OR the width using jQuery, but I haven't seen anything on shrinking both.
You can get the height and width, decrement both, and then reapply the new values inside of a scroll event.
var divToChange = $('#sizeShifter');
$(document).scroll(function(){
var divHeight = divToChange.height();
var divWidth = divToChange.width();
divHeight-=5;
divWidth-=5;
divToChange.css({width:divWidth, height:divHeight});
});
You can also reverse this effect when the user scrolls up. This is a little more involved, but here is a working fiddle to get you started.
I try to make an image's height to always be the 1/4 of the window's height, based on responsive design and fluid images
The image is a random image picked up by the database, so I dont know if its gonna be elongated or not.
This is what I got untill now
//after the path of the image is randomly collected with websockets
elem = document.createElement("img");
elem.id="frontimage";
elem.setAttribute("height", window.innerWidth/4+'px');
document.getElementById("icon").appendChild(elem);
//this is triggered after window.onresize (see below)-in case the browser window is scaled
function img_adjust( img ) {
var beholdItsTheNewHeight = window.innerWidth/4;
img.style.height = beholdItsTheNewHeight + 'px';
}
window.onresize = function() {
img_adjust( document.getElementById('frontimage') );
}
<div id="icon" ></div>
(based on the anser by migf1, from here , sorry its Greek)
And that's it. Works fine , if you just open a browser and the browser expands to the whole screen.
Problems
-I simply cannot align the image to the center of its container. I tried margin, padding, float, position:absolute. Nothing works
-If I start scaling the browser's window (simply dragging one corner) the image's height does not "follow". Resizes, but not actually in 1/4 of screen's height.
-If I open a browser and it's not expanding to the whole screen, the image's height not scale to the 1/4 of screen's height.
Any advise?
Thanks in advance
You can use css property #icon{ text-align: center;} on the container DIV to center the image horizontally within the DIV. Look at: http://jsfiddle.net/2vxmX/