Indent a block of text from the second row - javascript

I want make format my text:
title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis urna. Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum mauris massa, venenatis non dignissim vestibulum,
to look like:
title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis urna.
Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum
mauris massa, venenatis non dignissim vestibulum,
I'm interesting in any solution without add change text manually.
Any help would be appreciated.

A fast and dirty solution:
<pre>
<!-- your text stuff -->
</pre>

HTML
<div class="title">title</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et turpis urna. Phasellus magna elit, tempus ut accumsan posuere, suscipit vel ligula. Vestibulum mauris massa, venenatis non dignissim vestibulum,
</div>​
CSS
​.title { float: left; }
.title:after { content: '-'; display: inline-block; margin: 0 5px; }
.text { overflow: hidden; }​
jsFiddle Demo
The title is floated left, and overflow: hidden; is used to establish a new block formatting context. You can do this with any overflow value other than the default visible.
The only thing in this that is not absolutely cross-browser is the :after pseudo-element (which works from IE8), but you can simply use a static - in your HTML instead. I have chosen to do it this way because it is cleaner and there is no unnecessary styling in the markup.
For the title you could use something more semantic like an appropriate header (h1, h2, etc.).

Playing with margin and text-indent along with the :first-line pseudoclass you could achieve the desired effect: here's the relevant CSS
p { text-indent: -2.35em ; margin-left: 2.35em }
p:first-line { margin-left: -2.35em }
Example fiddle: http://jsfiddle.net/nb88K/
Be aware that the chosen value is strictly dependent on the width of "title" word.
As a sidenote, If you could change the markup itself I would instead suggest to move that word from your text to a content property of a :before pseudoclass — the fact that your text is a title, from a semantic point of view, should be conveyed through the choice of the element (so I would chose a <hn> tag)

Related

Is there an way to use the viewport height to trigger classes on Gatsby?

Scenario
I'm working on this Gatsby site using Tailwind CSS and there is different types of content. Within the blog, the whole viewport is taken and there's overflow with scrolling options, but in some pages, there's not this much of content so it would need to be scrolled, and I'd like the footer to be fixed on the bottom of the page. Much like an slide on a presentation. The header is always fixed on top.
"Simple solution"
The simple solution I got was to make two kinds of footers, a fixed and a loose one, that I could simply select while coding the pages, like <Layout footer="loose">...</Layout>
The Issue
Thing is I wasn't really taking account of the viewport size and resolution for the user. In some tests over some browsers, these "kind-of-a-slide-pages" went under the header.
You can try it on here, but here's a couple screenshots of it.
This page have a fixed footer and a "single slide look", but # Opera the heading is going under the header
In this case, dummy content was inserted so we could test the behavior with longer content and fixed footer
Same as above, but with a "loose footer".
Reaching for a solution
So I'm wondering if I could improve the responsiveness of my website by fetching the rendered height of a page and comparing it to the viewport, so a fixed class would be activated on the footer, making it automated and "smarter". This feature would probably be used for other components as well, but this is the main problem right now.
I've found this article on how to use breakpoints with no CSS, but the target is a fixed width. Anyway, it got me thinking on how I could make a hook that would fetch the rendered height of a page (the container div), compare it to the viewport size and trigger a class that would fix that problem and maybe it would reload that value with screen resizing.
I'm not aware of any approach for this kind of issue, so any thoughts or comments on this would be very appreciated.
html,
body {
margin: 0;
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<header class="flex-initial bg-gray-700 text-gray-200 p-6">
my header
</header>
<main class="flex-1 bg-gray-400 text-gray-800 p-6">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
</main>
<footer class="flex-initial bg-gray-200 text-gray-700 p-6">
my footer
</footer>

Accessing updated CSS values from previously animated elements in a Greensock timeline

I have a TimelineLite() which performs a series of .to() tweens in sequential order. I'd like to be able to use the value that results from one of the early tweens in the construction of one of the later tweens.
Is there anyway to access the values of elements that have previously completed their animation in a timeline?
UPDATED:
The example that I provided originally was quite crude. I've updated it to more accurately reflect what I'm running into.
The size of the colored div are dependent on the viewport, and the content within them flows based on that size. Clicking on one of them begins an animation which expands the clicked div to fill the viewport and removes the non-clicked divs. This resizing causes the text to reflow to adjust for the new space.
Then div.status (that was previously absolutely positioned off the bottom of the page) animates up to be below the selected colored div. Unfortunately, the height that is used to calculate its new top value is what the selected colored div's height was prior to the animation and subsequent reflow of it's content.
var timeline = new TimelineLite();
$('.clickable').click(function(){
var $selected = $(this);
var $notSelected = $('.clickable').not($(this));
$selected.addClass('selected');
$notSelected.addClass('not-selected');
timeline
.add("optionSelected")
.to(
$selected,
0.5,
{ "width":"96%" },
"optionSelected"
)
.to(
$notSelected,
0.5,
{
"width":"0%",
"padding":"0"
},
"optionSelected"
)
.to(
$(".status"),
0.5,
{
"top":$('.selected').height()
}
)
})
body{
position:relative;
height:100vh;
overflow:hidden;
background-color:cornsilk;
}
section{
background-color:#ddd;
display:flex;
align-items: flex-start;
}
div{
width: 30%;
padding:2%;
color: #FFF;
display:inline-block;
}
.clickable{cursor:pointer;}
.status{
width:96%;
position:absolute;
top:100%;
left:0;
background-color:#FFF;
color:black;
border:1px solid black;
}
.blue{background-color:blue;}
.green{background-color:green;}
.purple{background-color:purple;}
.not-selected{
white-space: nowrap;
overflow:hidden;
}
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
<div class="blue clickable"><strong>Clickable</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim tortor, sit amet vulputate augue lectus vel felis. Cras ac ex vel ligula porta laoreet.
</div>
<div class="green clickable"><strong>Clickable</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices, est ut sollicitudin gravida, velit erat dignissim tortor, sit amet vulputate augue lectus vel felis. Cras ac ex vel ligula porta laoreet. Mauris lorem tellus, convallis ac tincidunt eu, efficitur consequat turpis.</div>
<div class="purple clickable"><strong>Clickable</strong> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices, est ut sollicitudin gravida, velit erat dignissim tortor, sit amet vulputate augue lectus vel felis. Cras ac ex vel ligula porta laoreet.</div>
<div class="status">Status</div>
</section>
</body>
Try returning the desired height from a function as a callback. I think then it won't be executed until after the animation of the .selected element has reached that to() in the chain.
Also height() does not include padding or margins, so you end up with the .status overlapping, try .outerHeight() instead.
Working example:
http://codepen.io/jonwheeler/pen/jAvRZZ?editors=0110

text overflow inside a html tag

I am searching for a solution for text overflow inside a html.
in my project I am using angularjs, so basicly I tried to make a directive without any success.
for example lets say i have the following html tag:
<div style="height=10px;witdh=5px"> text text
sLorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis quis iaculis tellus, et feugiat orci. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Vestibulum id condimentum neque. Vivamus nec
bibendum tortor. Donec mi sapien, rutrum sit amet sagittis eu, consectetur non lectus.
Cras vitae porttitor assa. Phasellus odio mauris, placerat in luctus nec, malesuada et
mauris. Donec neque dui, gravida sit amet iaculis vitae, ultrices a enim. Sed mi mauris,
pharetra eget facilisis id, vestibulum laoreet quam. Etiam interdum nisi non massa
pellentesque
</div>
i am looking to get some text from the innerHTML text and then 3 point such as ... if there is a height overflow
Here's a quick snippet I just wrote up.
JSFiddle
This allows for multi-line ellipsis checking by using the width and height of the box and continuing to remove characters until the contents fit inside the box.
$(function(){
$(".overflow-box").each(function(){
$("body").append("<div class='overflow-hidden'/>");
$(".overflow-hidden").css("width", $(this).width()+"px");
var i = $(this).html().length;
while($(".overflow-hidden").html($(this).html().substring(0, i--)+"...").height() > $(this).height())
{}
$(this).html($(".overflow-hidden").html());
$(".overflow-hidden").remove();
});
});
To accomplish this for your <div> above you'll need the following:
height: 10px;
width: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
On a slightly different note, your inline CSS is incorrect. CSS property-value pairs are separated by a colon like so:
<div style="height: 10px, width: 5px, white-space: nowrap, overflow: hidden, text-overflow: ellipsis;">

Jade syntax indent error with bootstrap

I got this code in my index.jade where I use bootstrap :
block content
.container
.row
.col-lg-12
h1.page-header 1 Col Portfolio
small Showcase Your Work One Column at a Time
.row
.col-lg-7.col-md-7
a(href='#')
img.img-responsive(src='http://placehold.it/700x300', alt='')
.col-lg-5.col-md-5
h3 Project One
h4 Subheading
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim.
a.btn.btn-primary(href='#') View Project
span.glyphicon.glyphicon-chevron-right
hr //**<- problem with this**
.row
.col-lg-7.col-md-7
a(href='#')
img.img-responsive(src='http://placehold.it/700x300', alt='')
.col-lg-5.col-md-5
h3 Project Two
h4 Subheading
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim.
a.btn.btn-primary(href='#') View Project
span.glyphicon.glyphicon-chevron-right
Everytime I try to add a hr tag like I would do in HTML between rows I got a 500 ReferenceError from Express.
I found a solution which consist in including the hr in a row.
.row
hr
Don't know if it's the best thing to do but works for now !

How can I get these paragraphs to vertically align?

I'm using jquery cycle to fade between a few slides. These slides are of a fixed height but they contain p tags that contain text of varying lengths. I've created this jsfiddle to show you what I mean.
The problem I'm having is that I want the p tags within these slides to be vertically aligned - I want the copy to sit nicely in the center of the div. Usually when working with dynamic content like this, I'd put the p tags in a wrapper, then calculate the height of the wrapper on page load using js and position accordingly (which is why I've tagged this as javascript - I may need to use it for the solution if I can't use css).
Anyway the reason I can't seem to use js is because the p tags are within hidden panels. I can only access the size of the elements once the parent becomes visible which means I'd no doubt have to set up a callback just after a slide is made visible to do the positioning then. The downside of that is the content will jump while the js calculates the position.
One solution would be to use a table with vertical-align in the table cell, but I'm not sure it'd be semantically correct to put p tags within a td? (someone correct me if I'm wrong). Is there a purely css solution I can use here, that'll also work in ie7?
Here is the html I have:
<script src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.js"></script>
<div id="cycle-wrapper">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
</div>
</div>
The css:
#cycle-wrapper { width: 340px; height: 300px; border: 2px solid red; }
#cycle-wrapper div { width: 340px; height: 300px; text-align: center; }
The script:
$(function() {
$('#cycle-wrapper').cycle();
});
Thanks
EDIT: I have got it working with tables here but I'd love to find a purely css solution if possible!
You can make your <p> visible only after the alignment has been calculated, so there is no "jumping" paragraph.
If you don't mind use the css display property and add separating elements,
Check my perfect version on http://jsfiddle.net/m29uu/3/
#cycle-wrapper {
width: 340px;
height: 300px;
border: 2px solid red;
display:table;
}
#cycle-wrapper p {
width: 340px;
height: 150px;
display:table-row;
}
#cycle-wrapper span {
text-align: center;
display:table-cell;
vertical-align:middle;
}
PURE CSS WAY
Not sure i understand your req. but i think this achieves what you want, one way of doing it would be to push the upper-most div using margin-top to the middle of parent div, which will automatically push the other div below it!
DEMO : http://jsfiddle.net/logintomyk/YTZYQ/
HTML
<div class="divCent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem
CSS
#cycle-wrapper .divCent { width: 340px; height: 300px; text-align: center;
margin-top:25% /* this is what i added **/
}
EDIT
After comments from Onimusha, here is another fiddle, implemented on his link http://jsfiddle.net/logintomyk/7AJy5/1/
Quick CSS Solution
Add the following css
#cycle-wrapper div > div {
display: table-cell;
vertical-align: middle;
}
and add a second div wrapper around the paragraph tags for the new css to apply to. It worked on the fiddle.
See this link http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
It is possible to vertically center without the jQuery cycle element.
But when the plugin is added the alignment was not proper.
I am not very much aware of this plugin but try changing the default options as mentioned in jQuery Cycle Plugin's option reference.
your Div have id "cycle-wrapper". and all the paragraph within this Div..
use
$("#cycle-wrapper").css("vertical-align:middle");
you can apply any css like the following way
$("element").css("propertyname","value");
Set multiple properties and values:
$(selector).css({property:value, property:value, ...})

Categories

Resources