What is the easiest way to make responsive dynamic div-s square, like in memory game (image below).
I have problem that user need to scroll down to see whole bottom part of game. How can I calculate (easiest solution) that whole my game is always visible. And also I want that to be dynamic (on image we can see 4x4 game, there should work for any number, 7x7, 10x10 and so on...).
Snippet of my code is: http://jsbin.com/nucovakevu/edit?html,css,output.
Everything in is added dynamically by JavaScript.
It also does not work where I do zoom in.
I am beginner in front-end developing and I mixed here bootstrap and plain css, which is probably not good solution.
Also I used this css trick to make my div as responsive square:
width: 23%;
height: 15vw;
It supposed to be something like:
width: 23%;
height: 23vw;
but I get rectangle in this case, because I obviously do not understand very well how this work.
Just call the function size(); whenever you want to update the grid.
Look at the comments within the code to understand better how this functions.
https://jsfiddle.net/xn5j4rcf/
window.addEventListener('load', function() {
size();
});
function size() {
var container = document.getElementById('container');
container.innerHTML = '';//don't want any extra boxes when you call this function again
var x = Math.floor(window.innerWidth / 50);//width of boxes that can fit; remove any decimal places
var y = Math.floor(window.innerHeight / 50);//height of boxes that can fit; remove any decimal places
for (var i = 0; i < x * y; i++) {//multiply x*y to get total area of boxes that can fit
var box = document.createElement('div');//create a div
box.className = 'box';//assign class
container.appendChild(box);//append
}
}
window.addEventListener('resize', function() {
size();//call the function again when the window is resized
});
.box {
width: 50px;
height: 50px;
padding: 4px;
-o-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
border: 4px solid #fff;//border for margin but use border-box to make sure the width and height are still 50px
background-color: #ddd;
}
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
font-size: 0;//remove annoying margin from display:inline-block;
}
<div id="container">
</div>
This approach can be achieved, but a little odd kinky skills and compatibility is not good:
DEMO: response divs with full screen
Here is the use of a table-cell flexibility and writting-mode to change the direction of the flow
css code blow:
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wrap{
width: 100%;
height: 100%;
-webkit-writing-mode: vertical-lr;
display: table;
table-layout: fixed;
background-color: #000;
}
.row-wrap{
display: table-cell;
}
.row{
width: 100%;
height: 100%;
display: table;
table-layout: fixed;
-webkit-writing-mode: horizontal-tb;
}
.item{
display: table-cell;
height: 100%;
border: 1px solid #ffffff;
box-sizing: border-box;
}
Related
On my website, I am aligning a body of text precisely as exemplified in the following snippet.
html, body {
width: 100%;
height: 100%;
font-family: arial;
font-size: 48px;
text-transform: uppercase;
}
body {
margin: 0;
background: skyblue;
}
div {
width: 200px;
height: 100vh;
padding-top: calc(100vh - (1.5rem * 1.35));
box-sizing: border-box;
border: solid red 1px;
}
span {
line-height: 1.35;
display: inline-block;
border: solid black 1px;
}
<div><span>This</span> <span>is</span> <span>a</span><span>body</span><span>of</span> <span>text.</span></div>
However, I was hoping to take it one step further. For instance, I want to be able to place the top of the text as close as possible to, say, 60vh from the top of the page while still displaying half of the last line. Below is an example of what I mean in JS.
Note: Just noticed the second snippet does not display properly unless you open it to edit it. If you transfer it to codepen, it should work properly.
const
div = document.querySelector('div'),
span = document.querySelector('span'),
lineHeight = parseFloat(getComputedStyle(span).lineHeight),
target = innerHeight * 0.6,
remainder = (innerHeight - target) / lineHeight % 1 * lineHeight
div.style.paddingTop = target + remainder - lineHeight / 2 + 'px'
html, body {
width: 100%;
height: 100%;
font-family: arial;
font-size: 48px;
text-transform: uppercase;
}
body {
margin: 0;
background: skyblue;
}
div {
width: 200px;
height: 100vh;
position: absolute;
box-sizing: border-box;
border: solid red 1px;
}
span {
line-height: 1.5;
display: inline-block;
border: solid black 1px;
}
<div><span>This</span> <span>is</span> <span>a</span> <span>body</span> <span>of</span> <span>text.</span></div>
Notably, I know you can obviously find the "remainder" using calc, viewport units, and rem, but the rest is what is confusing because I am not great at math and also lacking sleep.
Hence I was hoping that somebody out there, who is better at math than me, would be able to tell me whether or not a pure CSS solution without preprocessors is possible (i.e. using only calc, viewport units, rem units, etc) before I waste any more time thinking about this. I know there are some nifty CSS formulas for fluid typography, but is something like this possible?
[ edit ] I thought about this some more while laying in bed. I do not believe it is possible without being able to calculate the "remainder." And there does not seem to be any way to calculate the "remainder" with only addition, subtraction, multiplication, and division. Please correct me if I am wrong.
The goal is to have the DIV tag be 100% of the document's height and then the text is offset a little bit within the DIV?
I think just adding another tag within the DIV to offset all the text can work. You said you want 60vh. Line Height should also be used when dealing with text height.
html, body {
width: 100%;
height: 100%;
font-family: arial;
font-size: 48px;
text-transform: uppercase;
}
body {
margin: 0;
background: skyblue;
}
div {
width: 200px;
height: 100vh;
box-sizing: border-box;
border: solid red 1px;
}
p
{ margin: 0;
padding-top: 60vh;
margin-top: -0.8em;
line-height: 1.6em;
}
span {
line-height: 1.35;
display: inline-block;
border: solid black 1px;
}
<html>
<body>
<div><p><span>This</span> <span>is</span> <span>a</span><span>body</span><span>of</span> <span>text.</span></p></div>
</body>
</html>
Or is this not quite it?
I want to create a website with a single fixed-width centered column and an additional fixed-width sidebar that is position: fixed on the left. When the window is large, this works perfectly, but when I resize the window, they begin to overlap when there's plenty of room left on the right side of the window. For example:
I'd like the center div to be positioned in the center until it runs into the sidebar, at which point I'd like it to have a more fluid responsive design, where the sidebar starts to push the div to the right as you resize the window. For example:
The only solution I'm aware of is something like this (using the jQuery resize event and adding a class to the center column when the window resizes small enough):
var SMALL_WINDOW_SIZE = 560;
function checkWindowSize() {
var $content = $("#content");
if ($(this).width() < SMALL_WINDOW_SIZE && !$content.hasClass("smallWindow")) {
$content.addClass("smallWindow");
} else if ($(this).width() >= SMALL_WINDOW_SIZE && $content.hasClass("smallWindow")) {
$content.removeClass("smallWindow");
}
}
$(document).ready(function() {
checkWindowSize();
});
$(window).resize(function() {
checkWindowSize();
});
#sidebar {
background: orange;
width: 100px;
height: 200px;
position: fixed;
top: 10px;
left: 10px;
}
#content {
background: blue;
width: 300px;
height: 350px;
margin: 0px auto;
}
.smallWindow {
float: left;
margin-left: 120px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='sidebar'></div>
<div id="content"></div>
I can't help but feel there should be a pure CSS solution or one that uses less or more elegant JavaScript. Is there such a thing?
This isn't by any means the best way of achieving the desired effect with CSS, but it's the methodology behind using CSS media queries to adapt layout that I want to convey.
Obviously if this meets your needs, you'll want to adjust the numbers/widths to suit your case.
*, :before, :after{
box-sizing: border-box;
}
body {
margin: 0;
}
.wrapper {
position: relative;
padding: 20px;
}
.sidebar, .main {
padding: 20px
}
.sidebar {
position: fixed;
top: 20px;
left: 20px;
width: 200px;
background: goldenrod;
color: white;
height: 50vh;
}
.main {
margin-left: 220px;
background: mediumblue;
color: white;
height: 200vh;
}
#media (min-width: 1050px){
.main{
margin: 0 220px 0 220px;
}
}
<div class="wrapper">
<div class="sidebar">
Sidebar
</div>
<div class="main">
Main
</div>
</div>
ยป JSBin
Please take a look at this jsfiddle:
http://jsfiddle.net/dd4g4re5/
This is the code:
HTML
<div class="a"></div>
CSS
div{
width: 200px;
height: 200px;
background: red;
}
.a {
padding-left: 6px;
}
.b {
position: relative;
background: blue;
}
JAVASCRIPT
var divA = document.getElementsByTagName("div")[0];
var divB = document.createElement("div");
divB.className="b";
divA.appendChild(divB);
I want to position the child div in top of the
container div, so it completely overlap the parent.
But as you can see, that is not possible because of the
left padding of the parent.
I guess I could do something like this:
divB.style.left = -(divA.leftPadding + divA.leftMargin)+"px";
But I hope there is a batter way to do that, like some native function in Javascript, so I don't
have to make that kind of calculations.
Also, I would like to avoid setting the child an absolute position.
Using border-box here will make sure they both fit the desired widths. And you'll want to give the child element a negative left margin the same value as it's parent left padding.
var divA = document.getElementsByTagName("div")[0];
var divB = document.createElement("div");
divB.className="b";
divA.appendChild(divB);
div{
width: 200px;
height: 200px;
background: red;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.a {
padding-left: 6px;
}
.b {
position: relative;
background: blue;
margin-left: -6px;
}
<div class="a"></div>
You could position the child absolutely within the (relative) parent, like so:
.parent {
position: relative;
padding: 10px;
}
.child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
http://jsfiddle.net/bvaughn/ouxsdmfc/
My Goal:
Here is what I'm trying to accomplish. We have an list of categories that appear on a page. The number of categories is unknown. The description can be pretty much any size... yet we want a uniform look. So, we are using the dotdotdot plugin to put ellipses on the paragraphs. When you hover over the item, it should expand the description and show the full text.
I want that hover to float or overlay whatever is below it. Due to some of my layout items (see my NOTE below) my sccontainer element doesn't have a set height. It's dynamic based on the content... with a max-height set.
When I change that height to AUTO in the hover event (which causes the text to flow down and displays all the content), I lose the background on the sccontainer element.
Some pertinent CSS:
.sccontainer { width: 280px; zoom: 1; float: left; margin: 5px 10px; padding: 0; border: 1px solid #8697a1; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 6px #777; -webkit-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777'); position: relative; background: #fff url(http://imagecss.com/images/background.jpg) repeat-x left top; }
.sccontainer .parent { position: absolute; width: 270px; }
.sccontainer .image { margin: 5px; float: left; }
.sccontainer .image img { width: 48px; }
.sccontainer .icon { margin: 0; }
.sccontainer p { margin: 8px; padding: 0; max-height: 145px; }
.sccontainer h1 { line-height: 24px; display: inline-block; vertical-align: middle; width: 200px; height: 48px; padding: 0; margin: 5px 0 0 0; overflow: hidden; }
.sccontainer h1 a { padding: 0; font-size: 24px; color: #fff; font-weight: normal; }
.sccontainer .content { position: relative; height: 210px; padding: 0 5px; font-size: 15px; line-height: 22px; width: 270px; }
.sccontainer a:hover { text-decoration: underline; }
.sccontainer.hover { height: 250px; }
.sccontainer.hover .content { height: auto; }
.sccontainer.hover .content p { min-height: 135px; max-height: none; }
jsFiddle:
Here is a jsFiddle version of what I have right now. You can see this in action, if you hover over the text in the blue box. It's a bit large, so I used jsFiddle instead of putting all the bits here code tags...
http://jsfiddle.net/ztMM5/1/
And here is a mockup of what I'd like to see. Method 5a expands slightly to show the full content.... yets overlaps the red line. None of the other items move around or are affected.
NOTE: Sorry for the size of things. I've trimmed it down about as much as I can. Also, I am modifying an existing intranet website... it's 3rd party, so I have limited control of the source code - hence the table usage. :(
What I've Tried/Researched:
I believe the issue stems from the fact that my sccontainer item is floating, and doesn't have a height specified. That's why the image disappears.
I had a version that kept the background... but the sccontainer box didn't resize like we need... the text just overflowed it... rather ugly.
I don't know enough CSS to make this all work right. I'm not adverse to using jQuery to do more if needed.
I did work on a version that handled most of the hover using the :hover stuff... but it didn't work quite as well as the jQuery approach.
This answer may not solve your specific problem but it may help others with a similar scenario (working with tables makes difficult to render a clean layout in most cases.)
I ran into this issue before and this is how I solved it. It basically relies in an html nested div structure to achieve the expandability of the content without affecting the floating layout of the near elements :
<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->
<div class="sccontainer"><!--position relative-->
<div class="inner"><!--position absolute-->
<div class="content"><!--position relative-->
<!-- my content here -->
</div>
</div>
</div>
<!-- more containers etc-->
</div><!--END wrapper-->
First, we are going to apply the infamous clear-fix hack to the #wrapper container (use your preferred method):
.cf:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0
}
* html .cf {
zoom:1
}
/* IE6 */
*:first-child+html .cf {
zoom:1
}
Then the style for the .sccontainer container :
.sccontainer {
width: 280px; /* or whatever - could be % for responsiveness */
padding-bottom:200px; /* any value to give height without using height ;) */
position: relative;
float: left;
margin: 5px 10px; /* or whatever */
overflow: hidden; /* this is important to keep all same height and big content out of sight */
z-index: 1; /* this is important too, see later */
background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}
Then the .inner container, which actually will help to keep the layout in order if we hover the elements
.inner {
position: absolute; /* please don't move */
width: 100%; /* to fill the whole parent container */
height: 100%; /* same */
}
And the content :
.content {
position: relative;
background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
width: 100%; /* helps to fill the gaps with small content */
height: 100%; /* same, specially if using image backgrounds */
/* other styles, etc */
}
NOTE: we should apply same border-radius properties to the three containers and box-shadow to .sccontainer and .content for consistency
Now, what happens when we hover ?
.sccontainer:hover {
overflow: visible; /* show the full content */
z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}
.sccontainer:hover .content {
height: auto; /* as it really is, including background image */
}
NOTES : this effect will happen regardless if the content's height is smaller than the parent container's height. You may not like the effect mostly if you are using borders and shadows (could be shown as smaller box inside the parent container) so we could add an extra class to .sccontainer like
<div class="sccontainer withhover">
and apply the hover effects only if that class exist like
.sccontainer.withhover:hover {
overflow: visible;
z-index: 999;
}
... and use a bit of jQuery to remove that class for shorter content, so it won't be affected :
jQuery(document).ready(function ($) {
$(".sccontainer").hover(function () {
var $contentHeight = $(this).find(".content").height();
if ($(this).innerHeight() > $contentHeight) {
$(this).removeClass("withhover");
}
});
});
See JSFIDDLE
I have the following HTML5 page (in a Windows Store App):
<div>
<textarea id="wideBox" class="wideInput"></textarea>
<textarea id="small1" class="narrowInput"></textarea>
<textarea id="small2" readonly class="narrowInput"></textarea>
</div>
And the following CSS:
.wideBox {
width: 100%;
box-sizing: border-box;
opacity: 80;
height: 200px;
background: -ms-linear-gradient(top, #213A4F, #1a82f7);
}
.narrowInput {
width: 50%;
box-sizing: border-box;
height: 200px;
float: left;
padding: 5px;
background: -ms-radial-gradient(bottom, #6BBEC7, #1a82f7);
}
The effect that I'm after is a single wide text box with two, equally sized smaller text areas beneath.
This does work, however, the smaller text boxes just merge together. To counteract this, I tried introducing a margin of 1px, however, this had the effect of pushing the second smaller text box to the next line.
I've also tried adding a border to the boxes, but to no avail.
How can I get the effect of a gap, or delineator, without changing the overall layout of the page?
You can simply wrap your second row textarea's into another div's which would have 50% and padding-right to emulate gap between textareas:
/* textareas are inside this .wrap and have 100% */
.wrap {
width: 50%;
box-sizing: border-box;
float: left;
}
.wrap-first {
padding-right: 1px;
}
http://jsfiddle.net/dfsq/RHYSL/
Width % sadly does not work as expected. It is calculated as a % of the parent width and does not take margin and padding into account. If the parent is 100px wide and you set 50% width, it will be the same as setting 50px width. Now add padding 5px to this and you got a total 55px width which will push down one of the boxes. It is with my knowledge impossible to combine width % and margin/padding to make pixel perfect scaling without javascript. The best I can think of is this setting a slightly lower width, 49.5% instead of 50% and floating the textboxes left and right to keep the symmetry.
The textboxes will scale with parent size, but the distance between the two boxes will also scale because that 0.5% will be larger if the parent is larger.
<div>
<textarea id="wideBox" class="wideBox"></textarea>
<textarea id="small1" class="narrowInput left"></textarea>
<textarea id="small2" readonly="readonly" class="narrowInput right"></textarea>
<div class="clear"></div>
</div>
.wideBox {
width: 100%;
box-sizing: border-box;
opacity: 80;
height: 200px;
background: -ms-linear-gradient(top, #213A4F, #1a82f7);
}
.narrowInput {
width: 49.5%; /* Note lower width */
box-sizing: border-box;
height: 200px;
padding: 5px;
background: -ms-radial-gradient(bottom, #6BBEC7, #1a82f7);
}
/* Float to keep symmetric layout */
.left {
float: left;
}
.right {
float: right;
}
/* clear after float */
.clear {
clear: both;
}
I'm not sure if I've got your question correctly;
by the way, can you use CSS3 Calc ?
Demo: http://jsfiddle.net/4uc3N/
HTML
<div>
<textarea id="wideBox" class="wideInput"></textarea>
<textarea id="small1" class="narrowInput"></textarea>
<textarea id="small2" class="narrowInput"></textarea>
</div>
CSS
#wideBox {
width: calc(100% - 4px); /* A Trick */
box-sizing: border-box;
opacity: 80;
height: 200px;
background: -ms-linear-gradient(top, #213A4F, #1a82f7);
}
.narrowInput {
width: calc(50% - 14px); /* Another Trick */
box-sizing: border-box;
height: 200px;
float: left;
padding: 5px;
background: -ms-radial-gradient(bottom, #6BBEC7, #1a82f7);
}