I've got a div element with some content (shown in the picture).
I want (for styling purposes) create a vertical line next to it with the exact same height (needs to be responsive so a static "height" value isnt working)
Does anybody have ideas?
Option #1 - Set Border of Outer Element
.content {
border-left: 2px solid #000;
padding: 0 0.5rem;
}
.content p {
max-width: 80%;
}
<div class="content">
<p>
Petierunt uti sibi concilium totius Galliae in diem certam indicere. Morbi fringilla convallis sapien, id pulvinar odio volutpat. A communi observantia non est recedendum.
Non equidem invideo, miror magis posuere velit aliquet. Quisque placerat facilisis egestas cillum dolore. Curabitur blandit tempus ardua ridiculus sed magna. Contra legem facit qui id facit quod lex prohibet. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
</p>
</div>
Option #2 - Create Element with Full Height
.content {
display: flex;
align-items: center;
flex-direction: row-reverse;
height: 10rem;
}
.content .line {
height: 100%;
width: 2px;
background: #000;
margin-right: 0.5rem;
}
<div class="content">
<p>
Petierunt uti sibi concilium totius Galliae in diem certam indicere. Morbi fringilla convallis sapien, id pulvinar odio volutpat. A communi observantia non est recedendum.
Non equidem invideo, miror magis posuere velit aliquet. Quisque placerat facilisis egestas cillum dolore. Curabitur blandit tempus ardua ridiculus sed magna. Contra legem facit qui id facit quod lex prohibet. Petierunt uti sibi concilium totius Galliae in diem certam indicere.
</p>
<div class="line"></div>
</div>
Put a div inside your container, make your container relative and make that div absolute with top and bottom as 0.
.container{
position: relative;
}
.line{
width: 4px;
background-color: red;
position:absolute;
top: 0;
bottom:0;
}
You can attain it using a simple border on the left.
.mytext {
border-left:3px solid red;
padding-left:15px;
}
<div class="mytext">
<h1>Head<h1>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
<p>text here</p>
</div>
Related
I want to display some text in 15 rows with full width and height regardless of which device or browser you view the page. How to achieve this using Html, CSS and JS ?
Please see screen shots
This is my screen shot which it has more than 15 rows and the last line is not full width.
.aya {
direction: rtl !important;
font-family: "uthmanic","Traditional Arabic", "Montserrat","sans-serif","Times New Roman";
font-weight: normal;
font-size:25px;
}
.ayaNumber {
font-size: 15px;
white-space: nowrap;
color: #050;
cursor: pointer;
font-weight: normal;
padding-left: 5px;
padding-right: 5px;
}
<div class="card h-100 card-body " dir="rtl" align="justify"
style="direction: rtl !important; background-color:#f7fce3;border-color: #f7fce3;">
<div class="card-body">
<!-- using 'text' class below -->
<p class="card-text text" align="justify" style="text-align-last: right;text-align: justify;" >
<span class="aya">
مَثَلُهُمْ كَمَثَلِ ٱلَّذِى ٱسْتَوْقَدَ نَارًا فَلَمَّآ أَضَآءَتْ مَا حَوْلَهُۥ ذَهَبَ ٱللَّهُ بِنُورِهِمْ وَتَرَكَهُمْ فِى ظُلُمَٰتٍ لَّا يُبْصِرُونَ﴿17﴾صُمٌّۢ بُكْمٌ عُمْىٌ فَهُمْ لَا يَرْجِعُونَ﴿18﴾أَوْ كَصَيِّبٍ مِّنَ ٱلسَّمَآءِ فِيهِ ظُلُمَٰتٌ وَرَعْدٌ وَبَرْقٌ يَجْعَلُونَ أَصَٰبِعَهُمْ فِىٓ ءَاذَانِهِم مِّنَ ٱلصَّوَٰعِقِ حَذَرَ ٱلْمَوْتِ ۚ وَٱللَّهُ مُحِيطٌۢ بِٱلْكَٰفِرِينَ﴿19﴾يَكَادُ ٱلْبَرْقُ يَخْطَفُ أَبْصَٰرَهُمْ ۖ كُلَّمَآ أَضَآءَ لَهُم مَّشَوْا۟ فِيهِ وَإِذَآ أَظْلَمَ عَلَيْهِمْ قَامُوا۟ ۚ وَلَوْ شَآءَ ٱللَّهُ لَذَهَبَ بِسَمْعِهِمْ وَأَبْصَٰرِهِمْ ۚ إِنَّ ٱللَّهَ عَلَىٰ كُلِّ شَىْءٍ قَدِيرٌ﴿20﴾يَٰٓأَيُّهَا ٱلنَّاسُ ٱعْبُدُوا۟ رَبَّكُمُ ٱلَّذِى خَلَقَكُمْ وَٱلَّذِينَ مِن قَبْلِكُمْ لَعَلَّكُمْ تَتَّقُونَ﴿21﴾ٱلَّذِى جَعَلَ لَكُمُ ٱلْأَرْضَ فِرَٰشًا وَٱلسَّمَآءَ بِنَآءً وَأَنزَلَ مِنَ ٱلسَّمَآءِ مَآءً فَأَخْرَجَ بِهِۦ مِنَ ٱلثَّمَرَٰتِ رِزْقًا لَّكُمْ ۖ فَلَا تَجْعَلُوا۟ لِلَّهِ أَندَادًا وَأَنتُمْ تَعْلَمُونَ﴿22﴾وَإِن كُنتُمْ فِى رَيْبٍ مِّمَّا نَزَّلْنَا عَلَىٰ عَبْدِنَا فَأْتُوا۟ بِسُورَةٍ مِّن مِّثْلِهِۦ وَٱدْعُوا۟ شُهَدَآءَكُم مِّن دُونِ ٱللَّهِ إِن كُنتُمْ صَٰدِقِينَ﴿23﴾فَإِن لَّمْ تَفْعَلُوا۟ وَلَن تَفْعَلُوا۟ فَٱتَّقُوا۟ ٱلنَّارَ ٱلَّتِى وَقُودُهَا ٱلنَّاسُ وَٱلْحِجَارَةُ ۖ أُعِدَّتْ لِلْكَٰفِرِينَ﴿24﴾
</span>
</p>
</div>
<footer style="text-align: center;">4</footer>
</div>
Below is what I want to achieve (15 rows, full width and height)
You can use a line clamp as well as vw in a font size to force it to 15 lines and also shrink the text size so it will fit in 15 lines or less. Please note though this is only good for so much text, you can't shrink the font size of an entire book to fit into 15 lines. But hopefully its good enough for what you're looking for.
here's the jsfiddle of an example so you can play with it by stretching and shrinking the output box: https://jsfiddle.net/drm6sqfx/
body {
margin: 20px;
}
.text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 15; /* number of lines to show */
-webkit-box-orient: vertical;
font-size: 5vw;
}
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
I have a layout like this,
<html>
<body>
<div class = 'parent'>
<div class = 'header'></div>
<div class = 'child'></div>
<div class = 'footer'></div>
</div>
<body>
<html>
The child content is variable, it might be 300px or 800px in height. Assuming the viewport is 600px, header and footer are 50px.
A : I require the parent height to become 600px i.e. the viewport height when child is 300px and the footer pushed to the bottom of the page.
B : I require the parent height to become 900px ( Header + Child + Footer ) and the content becoming scrollable when the child is 800px
I can accomplish A and B separately is variety of ways, but cannot come up with a way to combine both.
To do A :
html, body {
height : 100%
}
.parent {
height : 100%;
display : flex;
}
.header {
height : 50px;
}
.child {
flex-grow : 1;
}
.footer {
height : 50px;
}
To do B:
.header {
height : 50px;
}
.footer {
height : 50px;
}
The height of the viewport and the variable heights of the child are given only to clarify the question, in my case I would like to support all viewport heights and any child height.
Javascript solution, using along with method B : ( I have to use css )
var parent = document.getElementsByClassName('parent')[0];
if(parent.clientHeight < window.innerHeight) {
parent.style.height = window.innerHeight;
}
It sounds like you're trying to create a sticky footer, i.e. a footer that "sticks" to the bottom of the viewport when there isn't enough content to fill the viewport.
For that you're missing two things. First, your .parent element needs flex-direction: column; (row is the default), and second, it needs min-height: 100vh;. The vh unit is supported in all current browsers.
In the example below I've thrown in an expanding <summary>/<details> box just to demonstrate that it works.
html, body {
margin: 0;
}
.parent {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.header {
height: 50px;
background-color: blue;
}
.child {
flex-grow: 1;
}
.footer {
height: 50px;
background-color: red;
}
p { font-size: 32px; }
<div class='parent'>
<div class='header'></div>
<div class='child'>
<details>
<summary>Expand</summary>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum, sem quis viverra fermentum, velit libero vestibulum quam, in consectetur purus massa vel velit. Cras interdum massa lobortis diam malesuada posuere. Nunc sollicitudin massa at erat tristique iaculis. Mauris lacinia facilisis pulvinar. Donec congue sodales risus, vel fermentum urna ullamcorper in. Aenean a posuere augue. Cras a viverra arcu. Ut a lobortis mauris. Proin ac rutrum erat. Duis at tempus risus, id maximus magna. Maecenas tempor commodo lacus sed rhoncus. In scelerisque sem interdum elit sagittis sodales ut id elit. Curabitur porta, quam vitae iaculis rhoncus, metus ante commodo quam, vitae dictum lectus ex sed orci.</p>
</details>
</div>
<div class='footer'></div>
</div>
Just give parent a min-height: 100vh;:
body {
margin: 0;
}
.parent {
min-height: 100vh;
display: flex;
flex-direction: column;
align-content: stretch;
}
.child {
background-color: green;
flex-grow: 1;
}
.header,
.footer {
flex-grow: 0;
background-color: red;
}
<div class='parent'>
<div class='header'>Header</div>
<div class='child'>
<p>a line</p>
<p>a line</p>
<p>a line</p>
<p>a line</p>
<p>a line</p>
<p>a line</p>
<p>a line</p>
<p>a line</p>
<p>a line</p>
<p>a line</p>
<p>a line</p>
<p>a line</p>
<p>a line</p>
<p>a line</p>
<p>a line</p>
<p>a line</p>
</div>
<div class='footer'>Footer</div>
</div>
AVAVT's answer is correct, I am also posting this answer if someone doesn't wish to use vh because currently compatibility is poor.
html, body {
height : 100%
}
.parent {
min-height : 100%;
display : flex;
flex-direction : column;
}
.header {
height : 50px;
}
.child {
flex-grow : 1;
}
.footer {
height : 50px;
}
I am currently working on a website in Wordpress. I have reached a point that is outside my understanding. I am using Isotope to create and filter my work on the main side of my website. Now, I would like to show a quick preview of the work if the viewer clicks on it. I thought about to insert a new isotope item after the selected work, but my grid falls apart every time I try or the work appears behind the grid.
<h1>Isotope - packery layout mode</h1>
<div class="container">
<div class="thumbs masonry">
<div class="project small"></div>
<div class="project small "></div>
<div class="project small"></div>
<div class="project small second">
<div class="title">Project 02</div>
<div class="slide-show"><ul class="slides">
<li class="flex-active-slide" style="width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;"><img src="slide_01.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative;"><img src="slide_02.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative;"><img src="slide_03.jpg"></li>
<li style="width: 100%; float: left; margin-right: -100%; position: relative;"><img src="slide_04.jpg"></li>
</ul></div>
<div class="description">orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam</div>
</div>
<div class="project small"></div>
<div class="project small"></div>
<div class="project small"></div>
<div class="project small"></div>
<div class="project small"></div>
<div class="project small"></div>
<div class="project small">hello</div>
</div>
</div>
my css:
.thumbs.masonry:after {
content: '';
display: block;
clear: both;
}
#content .project.small{
width: 22.7%;
height: auto;
display: block;
margin: 0 2% 20px 0;
padding-bottom: 0;
cursor: pointer;
float: left;
}
#content .project.small.width2{
width: 100%;
height: 300px;
background-color: red;
position: absolute;
left: 0;
}
#content .project.small img{
width: 100%;
height: auto;
}
#content .project.small .title {
display: none;
color: #FFF;
position: absolute;
bottom: 0;
left: 0;
padding: 0;
font-size: 0.917em;
width: 100%;
font-size: 11px;
line-height: 1.1em;
background: transparent url(images/black_alpha_50.png);
}
#content .project.small.selected .title{
zoom: 1;
filter: alpha(opacity=100);
opacity: 1;
display: block;
visibility: visible;
}
#content .project.small .title span{
padding: 12px 17px 12px 17px;
display: block;
}
javascript:
var container = jQuery('.thumbs.masonry');
var colW = container.width() * 0.2475;
container.isotope({
animationEngine: 'jquery',
resizable: false,
layoutMode: 'packery',
packery: {
//columnWidth: colW
}
and
function gridResize() {
// update columnWidth on window resize
var container = jQuery('.thumbs.masonry');
var colW = container.width() * 0.2475;
container.isotope({
resizable: false,
packery: {
//columnWidth: colW
}
});
}
I already tried it out with codepen.io: http://codepen.io/anon/pen/ogwEJO
The red square would be the selected work in big. That one works.
I tried to do exactly the same in Wordpress but the red square always disappears.
What I would like help getting to work is implementing my idea. Maybe there is another solution.
Can anyone help me out with this ?
I am really grateful for any advice.
Thanks in advance.
brig
Use layout as an option after you click on an element and you apply a class with the new size, there is an example here: http://isotope.metafizzy.co/methods.html#layout
I'm trying to emulate this on my design: http://jsfiddle.net/AYRh6/26/
But it's not working, and I can't find anything in the code that may be stopping it.
Must say I'm using code for a toggle effect.
Any help is much appreciated.
Fiddle of my problem: http://jsfiddle.net/Gr8sw/
My HTML is:
<div id="category">
<section id="pushOne" class="slidebox">
<div class="toggle">
<a class="bot" href="#"><img src="01.png" alt="Category 1"/></a>
<a class="top" href="#pushOne"><img src="01.png" alt="Category 1"/></a>
</div>
<div class="box"><h2>Category 1</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis aliquet odio, dictum hendrerit metus egestas non. Ut quis est tellus. Duis luctus elit nec arcu bibendum lacinia. Quisque luctus orci lorem, sit amet consequat enim mollis quis. Nullam dui magna, aliquam non venenatis et, lobortis eget felis.
</div>
</section>
</div>
And my CSS is:
.toggle {
height:230px;
width:230px;
position:relative;
z-index:2;
background:#CECECE;
}
.toggle:hover, .toggle.clicked {background:#F05A24;}
.orange {background#F05A24;}
.toggle img {width:100%;}
#pushOne img {padding-top:20px;}
.toggle a { position: absolute; padding:40px;}
.box {
overflow:hidden;
display:hidden;
opacity:0;
transition: all .4s ease-out;
margin-top:0px;
margin-bottom:20px;
width:230px;
}
.slidebox:target .box {
min-height:100px;
opacity:1;
}
.slidebox {float:left; margin:0 50px 0 0; transition: all 0.2s ease;}
.slidebox:target .top { opacity:0; pointer-events: none;}
#category {margin:0 auto;width:80%;}
Javascript:
$(".toggle").click(function () {
$(this).toggleClass(".clicked");
});</script>
It's surely something that my eye is not catching :(
You havn't specified any css propertiies for the class clicked(the class you want to toggle into)
Remove the dot(.).
$(".toggle").click(function () {
$(this).toggleClass("clicked");
});
Include externel jquery source please
http://code.jquery.com/jquery-1.9.1.js
I'm trying to put a small animation on a page. I've got 2 divs side by side, the second of which has its content called via Ajax, so the div height varies without page refresh.
<div id="number1" style="float:left; padding-bottom:140px">Static content, 200px or so</div>
<div id="number2" style="float:left">AJAX content here</div>
<div style="clear:left"></div>
<img src="image" margin-top:-140px" />
This basically gives me a 2 column layout, and the image nests up underneath the left hand column no matter what the height. All good!
The thing I'm trying to do though is animate the transition of the image when the page height changes thanks to incoming Ajax content. At present the image jerks around up and down, I'd quite like to have it smoothly glide down the page.
Is this possible? I'm not really into my JavaScript, so I'm not sure how to do this. I'm using the jQuery library on the site, so could that be a way forward?
OK, I've just put together a very quick and dirty example.
Here's the HTML:
<body>
Add content
<div id="outerContainer">
<div id="left" class="col">
<p>Static content</p>
<img src="images/innovation.gif" width="111px" height="20px">
</div>
<div id="right" class="col">
<p>Ajax content</p>
</div>
</div>
</body>
The jQuery used is here
jQuery(function($){
var addedHTML = "<p class='added'>Lorem ipsum dolor sit amet, Nunc consectetur, magna quis auctor mattis, lorem neque lobortis massa, ac commodo massa sem sed nunc. Maecenas consequat consectetur dignissim. Aliquam placerat ullamcorper tristique. Sed cursus libero vel magna bibendum luctus. Nam eleifend volutpat neque, sed tincidunt odio blandit luctus. Morbi sit amet metus elit. Curabitur mollis rhoncus bibendum. Phasellus eget metus eget mi porttitor lacinia ac et augue. Nulla facilisi. Nam magna turpis, auctor vel vehicula vitae, tincidunt eget nisl. Duis posuere diam lacus.</p>";
$("#addContent").click(function(e){
$("#right").append(addedHTML);
var rightHeight = $("#right").height();
//Animate the left column to this height
$("#left").animate({
height: rightHeight
}, 1500);
});});
And CSS:
#outerContainer {
position: relative;
border: 1px solid red;
margin: 20px auto 0;
overflow: hidden;
width: 400px;}
.col {
width: 180px;
display: inline;
padding: 0 0 40px;}
#left {
float: left;
border: 1px solid cyan;
position: relative;}
#left img {
position: absolute;
bottom: 0;
left: 0;}
#right {
position: absolute;
top: 0;
left: 180px;
border: 1px solid green;}
#addContent {
text-align: center;
width: 100px;
margin: 20px auto 0;
display: block;}
I have added a button just to add some 'Ajax' content. When you do this it grabs the new height of the div and animates to that height. You could add some easing to the animation / change the speed to make it a little more polished.
I hope this helps.
Maybe you could use a container around the content divs (with overflow hidden) and resize that one according to the height of the contents, thus achieving what you're trying to do?
I agree with the answer above. You could apply the image as a background image to the container then animate the container. That way the background image will move down with the container (assuming you anchor it to the bottom that is!)