Calculate row height in CSS grid with JavaScript - javascript

I made a small CSS grid framework for my new project but soon after, I have realized it has some shortcomings. Problem is, columns don't occupy whole height of a row which in turn prevents me from creating "blocky" layout and with current setup I can't achieve this with CSS.
I have solved this with some JavaScript, but what troubles me is that this peace of code needs to be executed after the page loads. Which means layout will be a bit messy if there's a lot of content to load.
Also, I'm not great with JavaScript so I'm not sure if I did this properly.
Here's link to source code on CodePen
[NOTE]
I don't want to use any JavaScript libraries

You can try using css table display property stack and use javascript as a fallback to unsupported browsers if required.
display: table;
display: table-cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;
http://codepen.io/anon/pen/LEniv
Browser compatibility

http://jsfiddle.net/cDZpA/
.container {
position: relative;
font-size: 0px;
overflow: hidden;
}
.col {
display: inline-block;
width: 33.333%;
font-size: 14px;
vertical-align: top;
height: 100%;
position: relative;
margin-bottom: -10000px;
padding-bottom: 10000px;
}
.c1 { background: yellow; }
.c2 { background: purple; }
.c3 { background: red; }
Don't ask me how, but this code I've put down works.
Here your CodePen fixed:
http://codepen.io/anon/pen/wkbrj

Related

Changing the values of object.style.alignSelf

Let's say I have a function that changes the Align Self css property via JS.
HTML
<img id= "arrow" src="/images/leftarrow.svg">
CSS
.container {
background-color: $white;
box-shadow: 2px 0px 4px 1px black;
width: 400px;
height: 100vh;
display: flex;
flex-direction: column;
visibility: visible;
position: relative;
z-index: 2;
}
#arrow {
height: 25px;
width: 25px;
position: absolute;
align-self: flex-end;
top: 50vh;
cursor: pointer;
background-color: $white;
border-radius: 50%;
}
JS
function reverseIcon () {
arrow.style.alignSelf = "flex-start";
}
arrow.addEventListener("click", reverseIcon);
Javascript doesn't seem to change the align self property straight away. When I click, it does not change. I jumped into devTools to see what was wrong and it was applied when there was a change in the screen(?). I have no media queries. I tried this on 3 different browsers but AlignSelf doesn't seem to show up on the screen right away. It only actually changes as soon as I jump into devtools or like change the size of the screen. Anyone know why?
**Nevermind, Seems like only Chrome isn't responding to it. Still don't understand what part of this code isn't compatible with Chrome then
Are you sure the alignSelf property gets applied when you change your screen size?
Or is it just the default bahavior? In Dev-Tools, if you inspect, do you see the style-attribute at your image element? If yes, than it could be that your #arrow selector overrides it. If that's the case, I would try to toggle between a class where you can use the !important rule to override the property. Like so:
.flex-start{
align-self: flex-start !important;
}

centering images by HTML / JS

I'm trying to center an image on Qualtrics. I tried a lot of codes I found, but nothing works.
Examples of what I already tried:
<style>
.img-container {
text-align: center;
display: block;
}
</style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
<style>
.ChoiceStructure {
text-align: center;
}
</style>
The preference is to use HTML or JavaScript rather than CSS because the center is for a specific question.
In the question, the URL of the images appears in LOOP & MERGE so I do not have the specific name of the image to write in the code.
Any suggestions?
Thanks a lot!
The simplified example below uses flex and justify-content.
In your case, it's not div but .img-container that you probably need to use for the container.
The span style rule is just a simple example and you don't need that at all.
div {
display: flex;
justify-content: center;
}
span {
background-color: aqua;
width: 300px;
height: 300px;
}
<div>
<span></span>
</div>
So, in your case it should be:
.img-container {
display: flex;
justify-content: center;
}

Making vertical legend in datamaps

I'm using DataMaps to make a choropleth, but am having problems modifying the legend. I would like to make the legend vertical and to the right of the map. The documentation is unclear on how to do this. How can I create a stacked/vertical legend?
I used the following code to create the legend:
var legend_params = {
legendTitle: "Some Test Data",
};
map.legend(legend_params);
And here's the css that attempts to modify it:
.datamaps {
position: relative;
display: inline-block;
text-align: center;
}
.datamaps-legend {
color: white;
right: -100px;
top: 0;
position: relative;
display: inline-block;
text-align: center;
}
.datamaps-legend dl {
text-align: center;
display: inline-block;
position: static;
}
Here's my jsfiddle example.
I don't think there is an option for a horizontal legend in datamaps. I used it for a project and ended up rewriting the legend function to make it meet requirements. I was able to get the legend stacked/vertical and to the right of the map with CSS. The colors and values aren't lined up. If the values are static, you can line them up by targeting specific dt/dd (:nth-child or :nth-of-type) elements and adding padding as needed. If the values are dynamic, you will need a more clever solution. I added css for .datamaps-legend dt and modified top in .datamaps-legend. Example in fiddle
.datamaps-legend dt{
clear:both;
}
.datamaps-legend {
color: white;
right: -100px;
top: 128px;
position: relative;
display: inline-block;
text-align: center;
}

Vertical align text dynamically

Title of of the album is dynamically generated from admin panel.
So the problem is when titles are not the same length.
They are used for navigating (prev and next) below actual album...
Code:
<div class="album-box">
<div class="prev-album pull-left">
Dynamically generated title
</div>
<div class="next-album pull-right">
<a href="">Dynamically generated title in
Dynamically generated title 3
Dynamically generated title rows</a>
</div>
</div>
Live:
jsfiddle
Not sure how can I position it to be in the middle vertically no matter how long the title is.
Any idea?
Thanks.
EDIT:
I would like to move elements on the left and right border.
Image:
You got plenty of good answers.
Here's one more using display:table
Non-flexbox Demo
.prev-album, .next-album {
font-size: 12pt;
padding: 20px 0;
color: red;
display: table;
}
.album-box a{
display: table-cell;
vertical-align: middle;
}
Use flex: https://jsfiddle.net/58eh0r2g/1/
Add the following code to the parent containers.
display: flex;
align-items: center;
justify-content: center;
In your case these would be .prev-album and .next-album
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
This solution will lose support for some IE versions, but flex is so powerful it's worth using it.
If you are wanting to grasp a new and awesome css...thing, then I would use flexbox. Flexbox has a property called align-items that will vertically align flex items (children).
Read here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Browser support is growing, but mobile and IE10 will need -ms- or -webkit- prefix.
Give the next-album and prev-album display: table;
Then add display: table-cell; vertical-align: middle; to the anchor tags inside of those divs.
I also updated your jsfiddle to show my answer.
https://jsfiddle.net/58eh0r2g/7/
You can set css display attribute of the album-box class to table, and child to table-cell, then you can use vertical-align: middle;
Or you could try display flex, but it's not supported by some browsers.
Here's a solution different from the ones posted so far:
jsFiddle Demo
Using a combination of transform and top/left with absolute positioning on the a tags (absolute relative to parent):
.prev-album, .next-album {
font-size: 12pt;
padding: 20px 0;
color: red;
// added this
position: relative;
}
// and these
.prev-album a, .next-album a {
padding: 10px 40px;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
Since you want to align the text dynamically in the center of vertical axis, try using the follows:
HTML:
Content here
CSS:
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
I have modified your code s per above in this plunk : http://plnkr.co/edit/PdK9YWGUvbuGAW7S00x9?p=preview
This has been asked in various forms all over Stack Overflow but here you go, Simply add this to your CSS:
.prev-album a, .next-album a {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Then change display: inline-block to display: table on both .prev-album and .next-album.
Simple update of your existing code on JSFiddle
Several improvements to your existing code on JSFiddle
You could even opt to use flex box method however older browsers will not support it, especially internet explorer. You can view the browser support for Flex Box on caniuse.com.
You could simplify your CSS by sharing properties as it will reduce code and be easier to manage:
.album-box, .prev-album, .next-album {
border-color: green;
border-style: solid;
border-width: 0;
}
.album-box {
display: block;
width: 100%;
float: left;
border-bottom-width: 2px;
}
.prev-album, .next-album {
font-size: 12pt;
height: 82px;
display: table;
padding: 10px 40px;
width: 50%;
text-align: center;
}
.prev-album {
border-right-width: 1px;
}
.next-album {
border-left-width: 1px;
}
.prev-album a, .next-album a {
display: table-cell;
vertical-align: middle;
}

Small shift on HTML replace with jQuery

I have a server-side created HTML structure, which needs to be recreated and exchanged by jQuery (please don't ask why..).
But the strange thing is, when it gets replaced, also I has the exact same HTML structure, there is a tiny shift of some elements to the left.
I don't have any idea why this happens. Especially after extracted it and could recreate it in a fiddle..
JSFiddle
Do you see any potential solution?
I don't think it will be helpful if I post all the code here in the question. Therefore I just post the CSS. But if you want to see it, please let me know.
.article_overview {
background-color: #f6f6f6;
width: 465px;
}
.article_overview .summaryRow {
padding: 15px 10px 0;
color: #838383;
}
.article_overview .articleRow {
padding-bottom: 20px;
border-bottom: 1px dotted #d9d9d9;
}
.article_overview .counter {
padding-bottom: 8px;
}
.article_overview .articleRow img {
max-width: 60px;
}
.article_overview .image {
float: left;
margin-right: 10px;
overflow: hidden;
}
.article_overview .text {
width: 84%;
display: inline-block;
position: relative;
min-height: 60px;
}
.article_overview .information {
width: 60%;
display: inline-block;
}
.article_overview .articleAmount,
.article_overview .priceTotal {
display: inline-block;
vertical-align: top;
}
.article_overview .articleAmount {
width: 18%;
text-align: center;
}
.article_overview .priceTotal {
width: 19%;
text-align: right;
}
.article_overview .articleNr {
position: absolute;
bottom: 0;
left: 0;
}
The problem is this
<span>Lorem ipsum</span>
<span>Lorem ipsum</span>
is not equal to this
<span>Lorem ipsum</span><span>Lorem ipsum</span>
The browser will add space between spans if you break the line.
With jQuery, you appended it, so it didn't break the line between spans.
Haha !
To solve your problem, in your initial HTML code (Html, not jQuery), remove spaces between inline elements such as span
You are changing the structure. You add an empty <div> just before .summaryRow div. I think this is produced by this line:
var sAllProducts = jQuery('<div>');
To avoid this, try to unwrap() all the content after append it. See more:
https://api.jquery.com/unwrap/

Categories