arrange element bottom to top using CSS - javascript

I am trying to arrange DOM elements display order bottom to top.But not able to find the way to do it. I am beginner in CSS. Please help me resolve this.It is a dynamic DOM generated by JS so can't change HTML.
e.g:
<div>
<img src='abc.jpg'>
<a href='google.com'>Google</a>
<p >It is google</p>
</div>
Expected Result:
<div>
<p >It is google</p>
<a href='google.com'>Google</a>
<img src='abc.jpg'>
</div>
or:
<div>
<a href='google.com'>Google</a>
<p >It is google</p>
<img src='abc.jpg'>
</div>

div {
display: flex;
flex-flow:wrap;
}
img{
order: 3;
flex-basis: 100%;
}
a {
order: 2;
flex-basis: 100%;
}
p {
order:1 ;
flex-basis: 100%;
}

Use flexbox:
http://jsbin.com/mesijerike
div {
width: 200px;
display: flex;
flex-direction: column-reverse;
}
img {
max-width: 100%
}

You can just put these flex box css in your parent div
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;

Related

Add space and keep elements on the right side

I have these 2 children elements and I want them on the right side(I have that working just fine), but now I want to add more space between them and having a hard time to get that to work. Can someone tell me what I'm missing, please? thanks
section {
background: yellow;
display: flex;
justify-content: flex-end;
}
<section>
<button>Cancel</button>
<button>Confirm</button>
</section>
gap property can help you
section {
background: yellow;
display: flex;
justify-content: flex-end;
gap: 5px;
}
dont create more containers if you can avoid this. This is my principle
You can assign a default class to your buttons, or set a new class to your elements, and specify (for example) a margin that will be applied.
consider the following example:
section {
background: yellow;
display: flex;
justify-content: flex-end;
}
.elementContainer{
margin: 5px;
}
<section>
<div class='elementContainer'>
<Button variant="secondary">Cancel</Button>
</div>
<div class='elementContainer'>
<Button variant="primary">Confirm</Button>
</div>
</section>
This will add a 5px margin around each item with the element class.
you may change this style according to your needs.
You can use column-gap
So try this:
HTML:
<section>
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Confirm</Button>
</section>
CSS:
section {
background: yellow;
display: flex;
justify-content: flex-end;
column-gap: 10px;
}

Flex only for two out of three elements

I have 3 seperate elements all in one container/wrapper.
I have flex applied so the image and Text are side by side. However i want the "Scroll Down" div to be placed underneath the other two elements while still using Flex.
Is there any flex property to somehow only apply Flex on the two first elements?
Image:
https://gyazo.com/a391508e26aff2486103579134c051e1
<section class="home-section">
<div class="home-wrapper">
<div class="home-column">
<div class="home-row">
<h1>Centuries Gaming</h1>
<h2>Roleplay on a different level</h2>
<p>From the aspirations and dreams of others, we stand tall, proud, and loyal
to our visions and project. We provide the best and most immersive...</p>
<div class="home-buttons">
<div class="home-button home-button-left">
Apply
</div>
<div class="home-button home-button-right">
Read More <i class="fas fa-arrow-right"></i>
</div>
</div>
</div>
<div class="home-row">
<div class="home-image">
<img src="images/home-image.png" alt="Vehicle Drifting">
</div>
</div>
</div>
</div>
<div class="home-scroll">
<button>
<span>Scroll Down</span>
<img src="icons/mouse.svg" alt="Mouse Scroll Icon">
</button>
</div>
</section>
/* Home Section */
.home-section {
height: 100vh;
display: flex;
align-items: center;
}
.home-column {
display: flex;
}
.home-row h1 {
font-size: 60px;
color: white;
font-weight: 700;
margin-bottom: 7x;
}
.home-row h2 {
font-weight: 500;
color: #ffffff80;
margin-bottom: 20px;
}
.home-row p {
color: #ffffff80;
font-size: 14px;
max-width:600px;
}
.home-row .home-buttons {
display: flex;
margin-top: 50px;
}
If you add flex-direction: column; to .home-section then the parent element will display its children vertically. And the scroll element will be below the order elements.
You can use flex-direction:column
.home-section {
height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
}
The default is row, but you can change that property to stack the elements vertically. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

Show/hide a div child on hover without javascript

i have a bunch of repeating cards:
<div id="container">
<div class="card">
<div class="card_img"><img src="/img.jpg"></div>
<div class="card_text">Title</div>
<div class="card_moreinfo">More info</div>
</div>
...
<div class="card">
<div class="card_img"><img src="/img.jgp"></div>
<div class="card_text">Title</div>
<div class="card_moreinfo">More info</div>
</div>
</div>
the container style is something like:
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
the card style is something like:
.card {
flex: 0 0 13em;
}
my goal is to have the more info text (div), appear when i hover the card; since the cards contain a product coming from the database i can surely add the product id as class both in card and in moreinfo and target it by name with a javascript, but im wondering if i can change the display of the div, targeting it as the child of the div im hovering
.card_moreinfo {
display: none;
}
.card_moreinfo:hover + card_moreinfo{
display: block;
}
source: Using only CSS, show div on hover over <a>
You need to use the :hover for displaying or hiding the child.
Example;
.card_moreinfo{
display: none;
}
.card:hover .card_moreinfo{
display:block;
}
.card {
flex: 0 0 13em;
}
.card:hover {
/*add your css*/
}

Create a Mosiac image gallary inside a set Div

I am trying to create a pinterest style board for mobile my web application which is going to be just html, css and javascript/jquery (at the moment i'm just coding them as static pages) No frameworks such as bootstrap. It needs to work on different screen dimensions therefore need to be responsive, to achieve this I tried to use flexbox however this didnt work either
I have made an initial attempt however i'm relatively new to web development and cannot get the images stay within the "board-inner" div. As the images will be different sizes, I need them to fit
/* CSS for Login-image-holder */
.main-column-holder {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(350px, 1fr));
justify-items: center;
align-items: center;
}
.column-holder {
display: flex;
flex-direction: column;
width: calc(100% - 50px);
align-items: center;
justify-content: center;
}
/* CSS for collection-holder */
.board-holder {
display: flex;
width: 100%;
border: #b2b2b2 1px solid;
height: 310px;
flex-direction: column;
}
.board {
height: 100%;
}
.board-inner {
height: 100%;
display: flex;
flex-flow: column wrap;
align-items: center;
}
.board-image {
width: 32%;
height: auto;
}
.detailer {
display: flex;
flex-direction: column;
background: white;
}
.board-inline {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
.counter {
align-self: flex-start;
}
.board-author {
align-self: flex-end;
}
}
<div class="main">
<div class="main-column-holder">
<div class="column-holder">
<div class="board-holder">
<!-- Board -->
<div class="board">
<div class="board-inner">
<img class="board-image" src="https://source.unsplash.com/HtHrjExpddA" alt="">
<img class="board-image" src="https://source.unsplash.com/Y--zr3CPaPs" alt="">
<img class="board-image" src="https://source.unsplash.com/W7QkaUbYEmg" alt="">
<img class="board-image" src="https://source.unsplash.com/4dhlFpZ0dDw" alt="">
<img class="board-image" src="https://source.unsplash.com/QMRN_GX7p4I" alt="">
</div>
</div>
<!-- detail Holder-->
<div class="detailer">
<div class="board-header">
<h3 class="header">Animals</h3>
</div>
<div class="board-inline">
<div class="counter">
<p class="count_text"><span class="counter">73</span> Photos</p>
</div>
<div class="board-author">
<p class="author_text"><span class="author">Jon Bucket</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
inside the board-inner div and resize if required.
https://codepen.io/humzaysf/pen/WNvrjGJ

Rendering a list of divs from left to right in a row, then rendering rows bottom to top (via CSS/jQuery)

I have a situation where I have a list of divs with a specific order that need to be rendered in quite a complex way. In simple terms, this is my HTML:
<div>
<div class="box">1 (first in list)</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9 (last in list)</div>
</div>
The way in which I want to display the divs is in rows of 4 from left to right, with each row stacked from bottom to top, like this:
9
5 6 7 8
1 2 3 4
I have created a fiddle of the result that shows what I'm after: http://jsfiddle.net/mpcjs/ - However, I would like a solution that doesn't require re-ordering of the divs in the HTML. Also note that the number of divs is variable.
Is this even possible? CSS3/jQuery solutions are welcome!
This is possible using the jQuery Plugin jQuery Masonry.
Replace this (starting at line 287)
var position = {
top: minimumY + this.offset.y
};
with
var position = (this.options.fromBottom) ? {
bottom: minimumY + this.offset.y
} : {
top: minimumY + this.offset.y
};
jsFiddle: http://jsfiddle.net/fnexE/
You should look into flexbox. Here's a fiddle demonstrating how it would work, with the caveat that I have only tested it in Chrome.
.flex{
width:400px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;}
This is not a viable solution, yet, but with chrome and safari you can use writing-mode in CSS3. Check out the w3-dev section on vertical text.
.row {
writing-mode: bt-rl;
}
.box {
display: inline-block;
vertical-align: top;
}
http://jsfiddle.net/mpcjs/4/
I am unsure how to stack the DIVs from the bottom, but this will reverse them:
HTML:
<div>
<div>
<div class='box'>1</div>
<div class='box'>2</div>
<div class='box'>3</div>
<div class='box'>4</div>
<div class='box'>5</div>
<div class='box'>6</div>
<div class='box'>7</div>
<div class='box'>8</div>
<div class='box'>9</div>
</div>
</div>
CSS:
.box{
float:left;
border:1px solid #000;
width:22%;
margin:1%;
}
jQUERY:
$('div > .box').each(function() {
$(this).prependTo(this.parentNode);
});
If you want a pure CSS solution, it would like that:
the basic HTML
<div class="container">HOVER ME!
<div class="inner">one</div>
<div class="inner">two</div>
<div class="inner">three</div>
<div class="inner">four</div>
<div class="inner">five</div>
<div class="inner">six</div>
<div class="inner">seven</div>
</div>
and we float the inner to the right:
.inner {
float: right;
width: 100px;
height: 100px;
background-color: lightsalmon;
margin: 5px;
font-size: 20px;
}
That's all !
Well, not all, you still need to hover
.container:hover,
.container:hover div {
-webkit-transform: rotate(180deg);
-webkit-transition: all 3s;
}
Well, that was only to make it a little fun, but the efect is nice, isn't it ?
test it

Categories