I have a strange problem, my data gets hidden when I change the height of my browser.
It also disappears in mobile browsers sizes... here is a screenshot:
I am following this tutorial
Here is the page with the issue.
From what I can tell your slide DIVs have height: 100%; as well as your html and body tags. html will inherit it's height from the view-port size. Your content is larger than the view-port as you change the vertical height. Content gets hidden under the elements that come after it. If you remove the background color from all your slides you will begin to see your content overlapping.
What you need to do is remove height: 100%; from your slides. This will cause your slider DIVs to contain/show your content as they will expand to fit the height they actually take up and will prevent element stacking.
What you need is to either have the slide be the view-port size or the content size, which ever is larger. Since you are using jQuery already you could try something like this:
http://jsfiddle.net/z6xrf/
function slideHeights() {
var viewportHeight = $(window).height();
$('.slide').each(function(){
var elem = $(this);
// reset so we can get the correct height of element each time
elem.css('height','auto');
var slideHeight = elem.height(); // height of content in slide
if ( viewportHeight > slideHeight ) {
height = viewportHeight;
} else {
height = slideHeight;
}
elem.css('height', height);
});
}
$(document).ready(function(){
slideHeights(); // for page load
$(window).resize(slideHeights); // for window resize
});
What we did above is create a function that monitors the current size of the view-port and compares it to the height of the slide (total height of slide's content). If the view-port height is larger than content height we use that, otherwise we use the content height for the slide. In the process we reset the min-height value so it is not reading a value we previously set.
We initially fire the function on page load simply by calling it. Then we pass it to the resize function so it gets called when appropriate. See http://api.jquery.com/resize/ for how browser apply the resize event.
It is a problem of height of-course.
Do one thing, set a minimum height of each slide, approx 800 or 900 px. And then test, it will surely work.
.slide {
background-attachment: fixed;
height: 100%;
min-height: 800px; /*set any height here*/
position: relative;
width: 100%;
}
Related
On our cover page we want to display a title on a big font but if the title is too long it overflows and isn't displayed properly.
I came up with this js solution to resize the font when it overflows:
/** Checks if an element overflows. **/
let isOverflown = e => e.offsetWidth < e.scrollWidth || e.offsetHeight < e.scrollHeight;
/** Resizes an element's font size until it no longer overflows. **/
let resizeFont = $e => {
let fontSize = parseInt($e.css('font-size'));
const parent = $e.parent()[0];
while (fontSize > 0 && isOverflown(parent)) $e.css('font-size', --fontSize + 'px');
}
resizeFont($('.title'));
And it does work for horizontal overflow, like in this case when you have a very long single word with no whitespaces. Just tweak the max width in the .container and you'll see the resize function at work.
However the same is not true for vertical overflow. Why isn't the overflow check function evaluating this case as no overflow when it obviously is overflowing?
edit: if I add $e.css({'height': '100%'}); after the resizing function is run it does work but for some obscure reason the text is no longer aligned to the bottom on mobile. I tried using flexbox with align-items: end on the parent but then that messes up the resize function. Plus, mobile seems to ignore the flex alignment rule.
Inspect element shows the font-size changing and the height and width are constant for .title. Please recheck.
I fixed it by adding height: 100%; width: 100%; to .title and then using flexbox after the font resizing is finished in order to align the text to the bottom:
$e.css({'display': 'flex', 'align-items': 'flex-end'});
So, I have an art website, with each work getting its own page. The works are mostly photos, meaning they have higher resolutions than most screens are capable of displaying - so they need to be resized down to scale, obviously.
To make works easier to look through, I display them such that they take up most of the screen (minus 100px in either dimension), scaling to fill whichever dimension is more limiting:
Work X is square-shaped, and on the average monitor it gets resized so that its height fills the entire vertical space, and its width scales accordingly - preserving the aspect ratio
Work Y is tapestry-shaped, and gets resized so that its width fills the entire horizontal space, and its vertical space gets resized to match that aspect ratio.
I'm currently using a straightforward Javascript script for this, calling a function on the img tag's onload (as well as whenever the window is resized) to calculate the desired width/height of the image and apply that. The problem with using Javascript for this is that there's a delay between when the image begins to load and when it resizes, which makes the page look really ugly for a while, especially when viewing the site on a poor internet connection.
Leading to my question: is there a way to resize images to a certain percentage of screen size, while preserving aspect ratio, in pure CSS?
This answer provides another Javascript solution, but I'd prefer to find a way to do this in pure CSS if possible.
My current script is this:
function setGoodHeight (element) {
if( on mobile ) {
...
}
else {
height_buffer = 100
width_buffer = 100
height_diff_pct = element.naturalHeight / window.innerHeight
width_diff_pct = element.naturalWidth / window.innerWidth
if(height_diff_pct > width_diff_pct) {
var h = element.naturalHeight;
var w = element.naturalWidth;
element.height = window.innerHeight - height_buffer;
element.width = w * element.height / h;
}
else {
var h = element.naturalHeight;
var w = element.naturalWidth;
element.width = window.innerWidth - width_buffer;
element.height = h * element.width / w;
}
if(element.width < 540) {
element.parentNode.setAttribute("style","width:" + 540 + "px");
}
else {
element.parentNode.setAttribute("style","width:" + (element.width + 40) + "px");
}
}
}
Using the vw and vh units in CSS allow you to size things based on the browser viewport rather than parent elements.
If you set the max-width and max-height for the image it should constrain the image to be no bigger than the browser viewport size for any browser size.
#image-id {
max-width: 80vw;
max-height: 80vh;
}
Tell your images to be at most 100% width of the container they are in, and height set to auto will maintain aspect ratio.
.my-image-class {
max-width: 100%;
height: auto;
}
How about using background-size: cover; for this?
Every image can be the background of a div, which in turn has the following properties set.
height
width
background-size: cover;
background: url('img.png') center center no-repeat;
JavaScript is the best answer but if you really want to only use css you can use percentages rather then px these will scale to a given container.
.img {
max-width:100%;
max-height:100%;
}
here is a similar question and answer: StackPost
I have an iframe that I want to allow to be as wide as the display requires. I have it inside of a section, and have the following in a sass file:
iframe
max-width: 100%
where the real width, otherwise is controlled by the section. Now, on very narrow displays, like a smartphone, this works fine. However, the height of the iframe goes crazy in this case. Is there a way to ensure that the height of the object cannot get become larger than it's width? That is, is there a way to access what 100% width actually is? I wish I could do something like this
iframe
max-width: 100%
max-height: max-width
Edit:
Please see here for a working example:
http://jsfiddle.net/ptzyjmb1/5/
Notice how the first embedded object is wider than square. The second is about square. and the last is taller than square. I just want some option for max-height that will result in the third object (the "tall" video) to be square. That is, I want to be able to set the width to whatever I (or the display) would like, and the height will not be allowed to exceed that value.
I do not want to enforce that height = width, just that height <= width
Use the vh and vw attributes (view-height and view-width):
iframe {
max-width: 100vw;
max-height: 100vw;
}
If, as #Anonymous pointed out, the iframe is the child of some parent element that is not 100vw across, you can just use the div's width as the width of the iframe:
div {
width: 50%
}
div iframe {
max-width: 50vw;
max-height: 50vw;
If the width of the parent div is constantly changing, there is probably some JS being used. If the width of the parent element is represented in a variable, as it should be, then JQuery can sort out the problem, as follows:
setInterval(function() {$("div iframe").css("max-width",String(divwidth)+"vw");, 10)
In a project I am working on, I am trying to get the page's header height to be 5% of the screen. Obviously this is done with height: 5%;, however, I need the header to stay at 5% of the whole screen at ALL times. This means that if I were to shrink the browser window, the header div does NOT shrink proportionally as well. I need it to stay the same size, but the size needs to be set with the initial percentage. A website that I used for reference was github.com, as their header stays one size even when the browser window is shrunk. Flickr.com is another example of what I am looking for in a header. I have tried to use min-height: XXpx; (replacing the 'x' with numbers) but that was not effective.
Use JavaScript once the page has loaded to calculate the 5% of the window height & assign it to the header as its CSS height value. It will overwrite any set CSS values.
var h = window.innerHeight * 0.05;
getElementById('your-element-id').style.height = h+'px';
did you tryed vh(vertical height) calculation?
example
navbar{
min-height: 5vh;
max-height: xx;}
I have two columns in an html page, one is floated right and the other is floated left.
I have set the height of both containers to 100% and the width of both containers to 50%. I want the two containers to fit the entre window. When the user re-sizes the window horizontally I don't want the content to resize. How can i achieve this?
Thanks
There is many way to achieve that. First of all, the easiest would be to put the css value min-width! So if you want it to resize but to stop at 960px (for example) you just have to do :
myCoolDiv{
width: 100%;
height: 50%;
min-width: 960px;
}
That would give you the best result. Else, if you dont want content to resize at all, and the selector to have a width equal to 100% of the initial screen, I would use jQuery that way:
$(document).ready(function() {
//Call a variable to know the width of the window
var screenWidth = $(window).width();
$('myCoolDiv').css('width', screenWidth + 'px');
});
Hope it helped! Tell me if my answer is not clear enough or if you don't understand a part of it!
Cheers!