As you can see in the picture, I have a problems with my container in my slideshow. The gap between content and slideshow gets bigger the smaller the window size gets, which is what I want to avoid.
On resizing the window width, the content container shall change the height automatically pixel for pixel. So it gives the website a nice flow and there is no big space between the slideshow and the content on different screen sizes.
I made a JSFiddle now: https://jsfiddle.net/joggal/fk3v7aau/2/
Hope it shows my problem: the container is absolute positioned but i want it to resize so the gap between the slideshow and the container with the rows isn't too big / small. I want the container to be directly below the slider.
I tried to fix it with #media in the CSS, but this isn't the best solution at all :(
I hope you can help me :D
First get the height of the slider in window resize function.
Then append it to the image.
$( window ).resize(function() {
var SliderHeight = $('.slide').height();
$( ".img" ).css('height',SliderHeight);
});
Related
I've made an example on paint
This might be overthinking this but I'm trying to have a div that always keeps its aspect ratio (9:16) and that is showing entirely on screen whatever the windows size. I tried searching for "div keep aspect ratio" but in these cases the div doesn't resize with the window. I thought using javascript to check when the height of the window is greater than its width (and vice versa) and change the css but I don't know if it's possible to run a javascript function upon resizing the page. Also, all my content is in this container and I just want black bars to fill the rest.
Thanks for helping.
There are lots of ways to do that.
use javascript resize function:
window.onresize = function() {
// resize your div according to window size
};
use Jquery resize function:
$(window).resize(function(){
// resize your div according to window size
});
use css #media https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
#media all and (min-height:640px) and (max-height:960px){
// resize your div according to window size
}
I have a webpage where I want a featured image that background scrolls with the speed of browser scroll. Here is my jsfiddle
$(window).scroll(function () {
$("#featured-image").css("background-position", "50%" + ($(this).scrollTop()) + "px");
});
The problem is that now the background scrolls, but element stays empty and I see white space. I want that element to decrease in size. I thought about many solutions, but then I thought about the idea to make the bottom of header element to scroll down till it passes the featured-image element and connects with top of #content element. The problem is that the height of header and height of featured-image are variable. Could someone point me to the right solution for this problem?
I need to keep the featured-image element without height because it now works perfectly on responsive design.
here is my jsfiddle, https://jsfiddle.net/Uncite/6stm31z4/
I need to adjust several elements in width and height in relation to window width. So I am using
window.onload = function() {
slideSizeUpdate();
};
$(window).resize(slideSizeUpdate);
to call my function.
After window resize everything is displayed correctly - but not onload. I guessed that this had something to do with the window-width-value.
So, I printed the width value of window and recognized that - onload - my window width had a value 'x' and when I resized for 1px left or right value 'x' of window width increased / decreased + / - 18px.
I assume that this causes the problems on my website onload. Does anybody know the reason for this and has anybody a solution how to fix it? That would be great!
EDIT
Its not that onload doesn't work at all. Its just the wrong values that it seems to get when it reads out the window width.
You can do like this:
$(window).on('load resize',function(){
slideSizeUpdate();
}).resize(); // trigger resize when page is loaded
Consider this scenario:
Some of the content is hidden via CSS. The resulting page is short and no horizontal scrollbar is required.
You calculate the window width on load event at which point scrollbars are not there.
You un-hide the content and now the page is tall and requires horizontal scrollbar.
The width of the window decreases by 17px (usual width of scrollbar) without you noticing.
If this is the case then one solution is to force the window horizontal scrollbar using CSS. You can use the following (although I recommend searching more on StackOverflow):
html {
overflow-y: scroll;
}
I want to get the height of the responsive image (width:100%) to adjust size of my DIV dynamically.. Following the post here
jQuery Get Height of Responsive Image
the code below shows the ACTUAL height of the image, not the height of the image in CURRENT state, I mean if the DIV width is 200px the image is automatically resized accordingly, so the height... but the code below reports the actual image height.. how can I get the height of the image in current height (automatically resized) of the image... thanks for your time..
var myImage= new Image();
myImage.onload=function() { alert(this.height);}
myImage.src= "your/image/url";
I am sorry guys, there was a typo in my code, the name of variable, I have fixed it, so please dont put any effort into this.. thanks for your time.. cheers
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/