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.
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/
There is a DIV in my website and its height is not fixed. when user moves the mouse on an image this DIV will be appeared and will display some information about the image. there are several images in a grid format on page and every one has its own information. clearly some images are at bottom of the screen so by mouseover some section of its information DIV will be off the screen. I want to automatically control this situation and when any section of its DIV is off the screen then the scrollbar goes down until it reaches the bottom of the DIV.
this is my pseudo code but I could not implement it in jquery.
calculate screenHeight
calculate divHeight
calculate divDistanceFromTopOfScreen
if (screenHeight < divHeight + divDistanceFromTopOfScreen) then
scroll down to bottom of `DIV`
if you think this algorithm is right how can I implement such thing?
This should do it.
Javascript:
var top = $('.theDiv').offset().top; // the top of your div relative to the document
var div_height = $('.theDiv').height(); // the height of your div
window.scrollTo(0, top + div_height); // scroll to the bottom of your div
References:
jQuery Offset: http://api.jquery.com/offset/
Fiddle: http://jsfiddle.net/manishie/NGDBL/
I have a div. I've set the width of the div to auto. I want this div to be a square, so I've set the height of the div to 100%. Now if I set the width of the div to 100% it wouldn't be a square as most screens are rectangle, so I thought I could get the current height of the div in pixels and set the width as the height in landscape mode, and do the opposite in portrait mode, but I have no idea about how to go about this. Please assist me for the same. I'm using HTML and JavaScript
Without any extension like jQuery:
var div = document.getElementById("myDiv");
var height = div.clientHeight;
div.style.width = height + 'px';
I don't think JavaScript is necessary for that; if you are doing mobile/tablet design you could use media queries to change the width and height of your div; and if you want it to be square you could set the width and height to be the same with CSS. Experiment with percentages until you find which values produce equal width and height in web developer or firebug.
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/