I have this markup:
<body>
<img id="one" src="http://lorempixel.com/400/200/abstract" />
<p>Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla,
orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim.
Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.</p>
<img id="two" src="http://lorempixel.com/400/200/abstract" />
</body>
How can I make them to be in the beginning left-top (img id="one") and at the end right-bottom (img id="two") of the paragraph and nicely wrap around with its text?
See http://jsfiddle.net/ge15jLfg/
Thank you!
Align left for the top image and you can use divs for the bottom one. It is a bit tricky as you have to know the length of the text or play with a bit of javascript.
See here:http://jsfiddle.net/ge15jLfg/1/
<img id="one" src="http://lorempixel.com/400/200/abstract" align="left"/>
<div style="float: right; width: 0px; height: 200px"></div>
<div style="float: right; clear: right">
<img id="two" src="http://lorempixel.com/400/200/abstract"/>
</div>
<p>
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla,
orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim.
Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla,
orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim.
Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.
Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla,
orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim.
Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.
</p>
Related
I have the following text chunk here and would like to add a delimiter in front of the clause number (4.1 ... 4.2 ..., etcetera)
4.1 Use unique passwords (Manual)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu velit a libero convallis hendrerit. Nulla interdum fermentum viverra. Maecenas tincidunt sollicitudin odio. Aenean a erat sagittis, lacinia nulla eu, ornare velit. Suspendisse tempor at nisi eu mattis. Phasellus in ante magna. Quisque nisl lacus, fermentum pulvinar odio id, auctor sagittis nisl. Proin bibendum cursus orci vitae finibus.
4.2 Set password lifetime (Automated)
Quisque ut vehicula diam. Maecenas ac nulla cursus, dictum odio ac, lobortis dui. Nullam euismod, enim sed mollis elementum, tellus urna porttitor augue, ac venenatis tortor diam eget leo. In euismod dapibus tortor et vehicula. Aliquam erat volutpat. Quisque id rutrum libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam sollicitudin pellentesque magna sit amet malesuada. Aenean pulvinar metus sed justo tincidunt, et fermentum sem gravida. Aliquam varius lacus sit amet aliquam elementum. Pellentesque a varius magna, at euismod ligula. Praesent odio nunc, faucibus vel urna non, varius porta velit.
Such that the 'delimiter' would be present for every clause in the text:
'delimiter' 4.3 Set password expiry warning (Automated)
Quisque ut vehicula diam. Maecenas ac nulla cursus, dictum odio ac, lobortis dui. Nullam euismod, enim sed mollis elementum, tellus urna porttitor augue, ac venenatis tortor diam eget leo. In euismod dapibus tortor et vehicula. Aliquam erat volutpat. Quisque id rutrum libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
I am using re.sub to perform matching and replacement but I am not too sure how to do without removing the clause number entirely:
result = re.sub(r'[0-9\.]{3,}\s*[A-Z][\d\w\s/\-\,\(\)\\\"]{1,}\s*\(Automated|Manual\)', 'delimiter', text)
Any help would be appreciated!
You might use
^\d+(?:\.\d+)? .*\((?:Manual|Automated)\)
^ Start of string
\d+(?:\.\d+)? Match 1+ digits with an optional decimal part
.*\((?:Manual|Automated)\) Match a space and either (Manual) or (Automated) in the string
Regex demo
In the replacement, use the delimiter followed by the full match
delimiter \g<0>
For example
import re
regex = r"^\d+(?:\.\d+)? .*\((?:Manual|Automated)\)"
s = ("4.1 Use unique passwords (Manual)\n"
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu velit a libero convallis hendrerit. Nulla interdum fermentum viverra. Maecenas tincidunt sollicitudin odio. Aenean a erat sagittis, lacinia nulla eu, ornare velit. Suspendisse tempor at nisi eu mattis. Phasellus in ante magna. Quisque nisl lacus, fermentum pulvinar odio id, auctor sagittis nisl. Proin bibendum cursus orci vitae finibus.")
result = re.sub(regex, r"delimiter \g<0>", s, 0, re.MULTILINE)
if result:
print (result)
Output
delimiter 4.1 Use unique passwords (Manual) Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Praesent eu velit a libero
convallis hendrerit. Nulla interdum fermentum viverra. Maecenas
tincidunt sollicitudin odio. Aenean a erat sagittis, lacinia nulla eu,
ornare velit. Suspendisse tempor at nisi eu mattis. Phasellus in ante
magna. Quisque nisl lacus, fermentum pulvinar odio id, auctor sagittis
nisl. Proin bibendum cursus orci vitae finibus.
I am trying to create a blog archive with two different post layouts alternating vertically. For example the first has to be: picture left + content right; the second has to be: picture right + content left, and so on.
I got to display the posts like this:
{% for post in posts %}
{% endfor %}
Any way I can tell the function to alternate two layouts?
To answer your question in a twig-manner
{% for post in posts %}
<div class="{{ loop.index0 is even ? 'left' : 'right' }}">
<img src="{{ post.getImage() }}" alt="{{ post.getTitle() }}" />
<p>
{{ post.getContent() }}
</p>
</div>
{% endfor %}
note {{ loop.index0 is even ? 'left' : 'right' }} is just a shorthand for {% if loop.index0 is even %}left{% else %}right{% endif %}
note I used loop.index0 just because I find the test even more "logical" then odd and I wanted to start left, not right
In my opinion t's better to use pure CSS for this though
section div {
width: 45%;
float: left;
clear: both;
padding: 5px;
border: 1px solid #A2A2A2;
border-radius: 2px;
}
section div img {
width: 60%;
float: left;
margin: 0 10px 0 0;
}
section div:nth-child(even) {
float: right;
}
section div:nth-child(even) img {
float : right;
margin: 0 0 0 10px;
}
<section>
<div>
<img src="https://www.darkbee.be/images/itemholder.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.
</p>
</div>
<div>
<img src="https://www.darkbee.be/images/itemholder.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.
</p>
</div>
<div>
<img src="https://www.darkbee.be/images/itemholder.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.
</p>
</div>
<div>
<img src="https://www.darkbee.be/images/itemholder.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.
</p>
</div>
<div>
<img src="https://www.darkbee.be/images/itemholder.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.
</p>
</div><div>
<img src="https://www.darkbee.be/images/itemholder.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.
</p>
</div>
<div>
<img src="https://www.darkbee.be/images/itemholder.png" />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod ante volutpat mauris ultrices pharetra. Donec a nisi nec ex auctor bibendum. Fusce vestibulum venenatis leo, at fringilla lacus tincidunt sed. Morbi mattis sem risus, sed aliquet lorem blandit in. Cras non turpis felis. Donec sit amet tristique elit. Aenean id viverra orci. In at pulvinar lorem. Aliquam tempor nisi id nulla vulputate porta. Integer viverra interdum orci, ut viverra urna varius eget. Donec a eros et odio vehicula iaculis. Curabitur consequat aliquam erat, eu elementum neque aliquam vel.
<br />
Nullam dapibus porttitor tristique. Donec rutrum nisl in augue tincidunt pretium. Curabitur elementum lectus vel felis malesuada, ac lobortis metus cursus. Curabitur imperdiet mauris gravida odio auctor vulputate. Nullam vehicula scelerisque sapien, eu facilisis nisi scelerisque in. Praesent at dolor at velit efficitur pulvinar. Nam auctor tellus ut leo porttitor, nec convallis sem porttitor. Donec elementum erat ac quam porttitor interdum. Curabitur nec aliquam orci, eget pulvinar mi.
</p>
</div>
</section>
I need to apply scroll panel inside a notification bar of prime faces, content is visible but scroll is not working.
Can anyone help me?
The code is given below have a look. Thanks.
<p:notificationBar position="top" effect="slide" style="margin-left:30px;width:500px;margin-top:51px;height:300px" styleClass="top" widgetVar="bar">
<p:scrollPanel style="width:400px;height:280px">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean blandit tortor a ipsum vehicula, in semper sapien auctor. Nulla tempor eget est non consequat. Nulla sit amet lorem justo. Cras non tellus eros. Sed ultricies orci ut quam interdum fringilla. Nam vitae massa ac mi elementum mattis vel vitae sem. Ut eros ipsum, scelerisque a erat a, eleifend luctus nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Vivamus ac ullamcorper magna. Aenean felis ante, elementum sit amet urna at, eleifend aliquet velit. Morbi a convallis magna. In nec leo vel dolor hendrerit pharetra. Cras in iaculis enim. Aenean porta sapien dignissim turpis dapibus, eu dictum velit elementum. Aliquam sollicitudin gravida luctus.
</p>
<p>
Ut vel nulla sit amet erat laoreet eleifend nec sed lacus. Quisque placerat diam vitae justo eleifend, rutrum mollis mauris fringilla. Curabitur turpis odio, euismod id lorem a, ultricies suscipit ligula. Pellentesque ut erat a leo rhoncus porta ac sed velit. Nunc at erat ligula. Fusce vehicula posuere interdum. Curabitur tempus, tortor at sollicitudin dapibus, erat ante varius nisl, id dictum erat ipsum porttitor ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla id varius enim, sed rutrum orci.
</p>
</p:scrollPanel>
</p:notificationBar>
Set the mode attribute value to native of the <p:scrollPanel>:
<p:scrollPanel mode="native"...>
Unfortunately I don't know what it is mean and what the other enabled values. But when I set it to this value the scrollPanel got working in this component.
How i can set single long html page to multiple pdf pages in nodejs?i am new to nodejs,how i can do this?i want to create pdf phantomjs with expressjs
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>demo</title>
</head>
<body>
<div style="page-break-after: always;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
</div>
<div style="page-break-after: always;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
</div>
<div style="page-break-after: always;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
</div>
<div style="page-break-after: always;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.
</div>
</body>
</html>
Lorem ipsum dolor sit amet, hello consectetur adipiscing elit. Vivamus lorem mauris, dictum in ornare sit amet, vulputate at nibh. Integer volutpat justo vitae enim ultrices ultrices. In quis tortor id diam tincidunt feugiat at ut odio. Donec faucibus sapien vitae ante aliquam malesuada. Nam facilisis, metus in tincidunt posuere, hello massa nisi vulputate nunc, id rutrum mi enim non risus. Phasellus ac nisl non tortor pulvinar accumsan at eget leo. Nunc neque mauris, vehicula eget malesuada a, vestibulum non urna. Proin iaculis sem vel nulla porta tristique. Donec magna diam, eleifend quis vehicula in, aliquam in dolor. In et tellus nec metus volutpat dapibus. Duis hello purus dolor, aliquet in vehicula id, adipiscing id lorem. Vivamus elementum, mauris non vulputate tempus, risus elit tincidunt nunc, et posuere velit ligula sit amet purus. Integer pellentesque ultrices sodales. Donec in arcu eu est ullamcorper tincidunt placerat at sem.
I want select everything from the beginning until first occur of hello
I try this
/^.*hello
But it returns whole text until the last hello.
So how to do it?
You can use the visual mode and then search for hello to extend it
0v/hello<cr>
should do it
Otherwise to do a "non-greedy" search you can try {-}
/^.\{-\}hello
Just make the capture non-greedy:
/^.\{-}hello
This matches "as few as possible".