I'm trying to set minimum and maximum width/height on left floated divs and have them expand to fill the parent element (body). I was wondering if there is a way to achieve this with css, and if not, maybe I could use some JS.
To imagine this effect, start resizing the window and you will notice that there will be an empty space on the right of the divs until the space is large enough for some of the divs to shift into it. What I would like to do is have all the divs expand to fill out the empty space until maximum is reached and it is time to pop in more divs there at which point the size of the divs will readjust based on how many are in the row.
In the end I want to have these divs never to be more than maximum width or less than minimum width but be self adjusting within those limits to fill entire width of the body
Here is the example code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
.imageitem {
background-color: blue;
margin: 0 5px 5px;
min-width: 200px;
min-height: 200px;
max-width: 250px;
max-height: 250px;
float: left;
}
</style>
</head>
<body>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
<div class="imageitem"></div>
</body>
</html>
What you're asking is actually a relatively complex layout, though it's basically just responsive. Essentially you want, say, two divs that expand to fill the screen (like two cells in a table would) but once the screen reaches a certain width for a third div to move up into the row.
You won't be able to get both the dimensions you specify and to fill the screen at all possibilities, as Clark says. At 505 pixels wide, two divs will fit (2x 250, with 5 pixels gap). Three won't fit until at least 610 pixels wide (3x 200, with 2x 5 pixels gap), meaning there are 105 pixels of width where your divs won't fill the screen.
Media Queries probably are the best bet for this, but your margin will probably have to be specified as a percentage, rather than 5 pixels (unless you want to do it in jQuery or similar).
Modified from Clark's answer is this fiddle http://jsfiddle.net/UHqWF/2/
body {
background:#edeee6;
}
.imageitem {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
float:left;
max-width:250px;
min-width:200px;
padding:5px;
width:100%;
}
.imageitem div {
background:#4e84a4;
max-height:250px;
min-height:200px;
}
#media all and (min-width:420px) {
.imageitem {
width:50%;
}
}
#media all and (min-width:630px) {
.imageitem {
width:33.33333%;
}
}
#media all and (min-width:840px) {
.imageitem {
width:25%;
}
}
#media all and (min-width:1050px) {
.imageitem {
width:20%;
}
}
However, it's jumpy, as explained above.
A better solution would be to not impose the width restrictions (and thus stop the occasional gaps to the right), such as http://jsfiddle.net/UHqWF/3/
body {
background:#edeee6;
}
.imageitem {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
float:left;
padding:5px;
width:100%;
}
.imageitem div {
background:#4e84a4;
min-height:200px;
text-align:center;
}
#media all and (min-width:420px) {
.imageitem {
width:50%;
}
}
#media all and (min-width:630px) {
.imageitem {
width:33.33333%;
}
}
#media all and (min-width:840px) {
.imageitem {
width:25%;
}
}
#media all and (min-width:1050px) {
.imageitem {
width:20%;
}
}
Or even have the extra space in the centre, rather than the edges, such as http://jsfiddle.net/UHqWF/4/
body {
background:#edeee6;
}
.imageitem {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
float:left;
padding:5px;
width:100%;
}
.imageitem div {
background:#4e84a4;
max-width:250px;
margin:0 auto;
min-height:200px;
text-align:center;
}
#media all and (min-width:420px) {
.imageitem {
width:50%;
}
}
#media all and (min-width:630px) {
.imageitem {
width:33.33333%;
}
}
#media all and (min-width:840px) {
.imageitem {
width:25%;
}
}
#media all and (min-width:1050px) {
.imageitem {
width:20%;
}
}
I created a jQuery plugin that uses CSS3 columns in browsers that support them, and wraps elements into floated columns in browsers that don't such as IE 9 and below.
A resize maintains aspect ratio of the items. It is virtually impossible to make the transition look 100% fluid to the eye, but it is reasonably fluid looking depending on browser.
There are a few settings that can be used, they are commented.
Code to initiate is :
$('#container').adjustColumns({/* options*/});
Since part of my motivation was to increase learning curve on CSS3 useage and fallback methods I will be happy to help support this more.
DEMO: http://jsfiddle.net/SbvGJ/show/
Firstly, with a minimum width of 200px and a maximum width of 250px:
when the screen size is between 750px and 800px, there will be a gap of up to 50px
when the screen size is between 500px and 600px, there will be a gap of up to 100px
when the screen size is between 250px and 400px, there will be a gap of up to 150px
Thats just how the maths of your layout works out to be.
As long as you're ok with that, perhaps you could try media queries.
So something like this:
.imageitem {
background-color: blue;
//For the sake of simplicity, i've set the margin to 0.
//You will need to redo the maths or restructure your HTML for margins to work
//Perhaps using an inner div with a margin
margin: 0px;
min-width:200px;
min-height:200px;
max-width:250px;
max-height:250px;
float:left;
}
#media all and (max-width:250px) and (min-width:200px) {
.imageitem {
width:100%;
}
}
#media all and (max-width:500px) and (min-width:400px) {
.imageitem {
width:50%;
}
}
#media all and (max-width:750px) and (min-width:600px) {
.imageitem {
width:33%;
}
}
#media all and (max-width:999px) and (min-width:800px) {
.imageitem {
width:25%;
}
}
#media all and (max-width:1249px) and (min-width:1000px) {
.imageitem {
width:20%;
}
}
If you need the height to resize as well, you could write a similar query for min-height and max-height. Just make sure you set the height on the html, body selector as well.
Related
What I want:
When on PC/MAC:
All content shall be shown.
When on Smartphone or Tablet: the content should be hidden.
I know I have to look at screen size, but how do I do that?
See my code:
$(document).ready(function() {
$("#button-opl").on('click',function(){
$("#views-exposed-form-attraktioner-block").slideToggle();
});
});
button{
background-color:grey;
border:none;
padding:15px 25px;
cursor:pointer;
width:100%;
color:white;
font-size:18px;
}
#views-exposed-form-attraktioner-block{
display:none;
background-color:orange;
width:100%;
color:white;
text-align:center;
padding:15px 25px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button-opl">
Click here!
</button>
<div id="views-exposed-form-attraktioner-block">
Hello World
</div>
Javascript way
If you want to do it with Javascript, you'll have to check your window size and act upon that.
I chose the breakpoint to be 480px wide, here.
I also added a $(window).on('resize') to update your page when the window is resized :
var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (vw <= 480) {
$('div').hide();
}
$(window).on('resize', function() {
vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (vw <= 480) {
$('div').hide();
}else{
$('div').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>I'm not visible on mobile !</div>
CSS way
You can do it really easily without any Javascript using CSS Mediaqueries :
#media screen and (max-width: 480px){
div{
display: none;
}
}
<div>I'm not visible on mobile !</div>
I have an image positioned next to a div with some text by using display: inline on the div.
When the browser window is resized to be more narrow, I would like the image to scale down instead of having the text wrap around it first.
Currently, the text will wrap under the image when the window is resized, and only then will the image scale thanks to its max-width.
The end goal is to have a horizontal logo next to a horizontal menu, and have the logo scale on window resize while the menu stays in place.
Would be great if this could be done with just CSS, but I'll take Javascript if that's not possible.
<style>
img { max-width: 100%; }
#textblock { display: inline}
</style>
<div id="container">
<img src="https://www.google.com/images/srpr/logo11w.png">
<div id="textblock">Some Random Text</div>
</div>
Fiddle: http://jsfiddle.net/uLc8dcsh/1/
try this :
<div id="container">
<div class="div1"> img tag should be here </div>
<div id="textblock"> </div>
</div>
and css
img {
max-width: 100%;
float:left;
}
.div1{width:80%; float:left;}
#textblock {
display: inline;
float:right;
width:20%;
}
#container{width:100%; float:left; }
Do you mean something like this http://jsfiddle.net/uLc8dcsh/3/ ?
Here the logo will grow max to width of 300px when you maximize the window.
The minimum width of the container is set to 300px so the word will not wrap
the logo's width is 50%, means 50% of the #container width
img {
width:50%;
max-width: 300px;
}
#textblock {
display: inline
}
#container {
min-width: 300px
}
This answer is probably overkill:
What is this:
1. Float image, overflow hidden
This if so the text does not overflow under the image
2. added clear-fix to containing div
This is so the image does not destroy the outside element (article)
Html
<article class="clearfix">
<img src="some image"></img>
<p>Some random text</p>
</article>
css
article p {
overflow:hidden;
}
article img {
float:left;
max-width:80%;
}
article {
border:1px solid;
}
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
And here is the Fiddle
I know that parent divs can't be expanded to the height of an absolutely-positioned child with pure CSS and I found one solution that addresses this with some js: http://jsfiddle.net/6csrV/7/
But what if you have multiple columns, each positioned absolutely, and you don't know which one will be tallest? For example:
<div class="parentWrapper">
<div class="column column1">This content may be 4 lines long</div>
<div class="column column2">This content may be 8 lines long</div>
<div class="column column3">This content may be 5 lines long</div>
</div>
To add yet another challenge, the number of columns may also differ, so it should be possible to target the generic "column" class rather than column1, column2, column3 etc...
And to make it even more of a challenge, is it possible to have this work only when the browser viewport is narrower than a specified number of pixels?
Use height:auto for the layer http://jsfiddle.net/saysiva/PuVvh/1/
#container {
width:500px;
position:absolute;
left:200px;
vertical-align:center;
}
#mainContainer {
border:0px solid red;
height:auto;
}
#menu {
background-color:#FFD700;
height:auto;
width:100px;
float:left;
}
#content {
background-color:#EEEEEE;
height:auto;
width:400px;
float:left;
}
HTML:
<div id="parent">
<div id="child">
<div id="child1"></div> <!-- UPDATE -->
</div>
</div>
CSS:
#parent{
float:left;
width:90%;
}
/* UPDATE*/ #parent #child{
float:left;
width:100%;
}
/* UPDATE*/
/* In a different file*/
#child1{
float:left;
width:100%;
}
jQuery:
Say the width of the window is 1000px. So the width of #parent should be 900px. If I try to get the width of the #child1 it should also be 900px. But the below jQuery code returns 1000px.
jQuery("#child").width(); //UPDATE: returns 900px as width
jQuery("#child1").width(); //UPDATE: returns 1000px as width
I need 900px as result of the above statement.
I have been working with a script by Scripterlative called CursorDivScroll, which scrolls the content of a div based on the cursor position. In my case, I want to scroll content vertically from the right side of the div; not a continuous scroll, but movement that goes a little and then stops so the user has some control. I'm having problems getting the script to work and wondered if anyone knew of a better solution? The script I have uses cursordivscroll.js and this script, which is placed just beneath my div.
<script type='text/javascript' >
$(document).ready(function() {
CursorDivScroll( 'repertoiredetails', 40, 10 ).noHorizontal();
});
</script>
Thanks for any help in advance.
<div id="repertoiredetails">
<p>content</p>
</div><!-- close repertoiredetails-->
#repertoiredetails {
background-color:#000;
width:400px;
opacity:0.7; filter:alpha(opacity=70);
margin-top:140px;
float:left;
height:auto;
display:none;
margin-left:-2px;
padding-top:5px;
border-radius:5px;
-moz-border-radius:5px; /* Firefox 3.6 and earlier */
z-index:999;
}
#repertoiredetails {
cursor: url(../images/arrow.png), auto;
position:relative;
}
#repertoiredetails p {
text-align:justify;
text-justify:inter-word;
color:#999;
font-family:'Arial Narrow', Arial, sans-serif;
font-size:13px;
width:400px;
padding:20px;
}
Don't know why the noHorizontal() is not working, but with a few changes in your CSS you can make it work.
a Fiddle example: http://jsfiddle.net/M4AXB/1/
Good Luck!