I am trying to make THIS GRID responsive vertically.
Horizontally it is responsive, takes full width. But if the page is long, image grid doesn't take full height.
Any suggestions?
Please see attached the screen-shot of current result.Screenshot
You need to do it through JavaScript and resize the element to cover the window height, so use this function to retrieve the height and set that to your div height dynamically:
$(window).height(); // returns height of browser viewport
In case you need more information
$(document).height(); // returns height of HTML document
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
Related
I have enormous table to render on website. I need to make it scroll horizontally. Normally I would set fixed width and overflow: scroll but not in this case. The table is pretty tall so I don't see scroll at the bottom of web browser.
Demo: http://jsfiddle.net/cpmjng5b/1/embedded/result/
I could set fixed height but I have text before table that height is dynamic.
http://jsfiddle.net/cpmjng5b/5/embedded/result/
What should I do? Try to calculate div.container height in JS? I already tried floating scroll plugin for jQuery but it is relatively slow. Can I make it in pure css somehow?
This solution is using jquery, but you could also do it with javascript.
Calculate the height of your window and subtract the height of the dynamic text.
Take that number and make it the max-height of your div surrounding the table.
The height in the fiddle is a little off due to the jsfiddle "Result" header, but you can add/subtract any additional pixels if you have a top navigation.
var viewportHeight = $(window).height();
var topcontentHeight = $(".dynamicText").height();
$(".container").css("max-height", (viewportHeight - topcontentHeight) + 'px');
fiddle
I have a bunch of images that I want to display neatly in a grid.
Actually the images are near square (but some of them are off by some pix in height)
It would obviously be easy to just set them a fixed width and height via css,
but I want to scale them with the width of the container.
I arrange them in a table (or within inline divs -- does not matter for the problem)
img.width:100% does not help here. Since it also scales the height,
so we end up with some different heights for all the images.
setting img.height:100% does not help either, as they are not square any more.
I finally ended up in adjusting this via coffescript.
But my question is, if there really is no way to accomplish this with pure css.
My solution is to attach .square_all as a marker to the container,
and then retrieving the width of the first image of the container,
and setting that as height of all images in the container.
Not field tested, works for me
square_all.coffee:
#
# make all images in a group the same height as the first's width
#
$ ->
square_all = ->
size = $('.square_all').each (index, element) ->
imgs = $(element).find('img')
size = imgs.first().width()
imgs.height size
true
square_all()
$(window).bind 'resize', (event) -> square_all()
Sidenote:
It might be tempting to also set the width of the imgs to size,
but this does not work. Because your images will than have a fixed width,
instead of being width:100%, so they will no longer adjust to the width of the container.
In my environment we scale the images down by width,
so that they are all the same width, but we scale the height proportionally.
I don't care about the heights in this solution, I just scale the height.
In other contexts, cropping the height might be more apropriate.
I would do it in pure css with percentages and a div type row
DEMO http://jsfiddle.net/kevinPHPkevin/R8Rrf/
.row {
width:100%;
}
img {
width:18%;
max-width:100px;
}
I know how to do this is JavaScript but is it possible to-do using css and media queries only to achieve the same result.
If the the window scroll position is greater than 100
then resize "myDiv" height to 100px
and if window scroll position is less than 100px
then resize "myDiv" height to its default value
No you can't do this with CSS, if you want to manipulate the view based on the current viewport position/scroll bar you need JavaScript.
When I set a width of a <div> that wraps all page by 100%, whenever I resize the window the <div> resizes as well.
What I want to achieve is, for whatever browser and screen you open the page, I want the div to have the widh of the 100% of the full window and stay it as it was set, so that when you resize the window, the div size will still be the same.
Is it possible?
You can do this using jQuery as:
winW = $(window).width();
$('#container').css('width', winW);
You should set the width to be 100% in your css, and then use a JavaScript onLoad function to override it to pixels. Your users should not notice it.
You can find many examples of the JavaScript code.
Use jQuery's onload to retrieve the calculated width after loading, then set it as the div's defined width:
$(function() {
var width = $("#mydiv").width();
$("#mydiv").width(width);
});
I have a layout with the following requirements
An image on the left side, and content on the right side.
The image is pinned to the bottom left of the viewport
The image does not move when the user scrolls
The image resizes to 100% height of the viewport, up to it's max height. (I don't want the image to distort in it's attempts to be larger than it actually is)
The image retains it's aspect ratio, and resizes it's width according to the height resizing.
The content begins to the right of the image, and moves as the image resizes with the browser viewport.
Now, I've managed to achieve pretty much all but the last of these requirements.
Have a look here:
http://letteringmusic.com/
The image resizes quite nicely, but I can't get the content to float next to the image because image is position:fixed, and therefore out of the document flow.
I'm not opposed to a javascript solution if that's the only way to get the result I want.
Anybody know what I need to do to make this work?
Thank you!!
A quick (and perhaps only) solution is to restyle the content when the browser window resizes (using the window.onresize event). In that function you should read the width of the background image:
var bgWidth = getElementById('background-img').style.width;
getElementById('content').style.left = bgWidth;
and use #content { position: absolute }. I know this introduces another problems, but I think you can bypass them. It's not the most neat solution, as Javascript must be enabled (and the event will be fired a lot when someone resizes this window), but it should work.