I am creating a xml file which will pull the description of the product (opencart). The problem is that it displays all the html inside the description. I want to get the plain text without any html tags, divs, styles etc.
For example the sting outputs the below html at the xml
<p><span style="font-weight: bold; font-family: Arial; color: rgb(0, 0, 0); font-size: 18px; font-style: italic;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed</span></p>
<p><span style="font-family: Arial; font-size: 14px; color: rgb(0, 0, 0);">diam nonummy nibh euismod tincidunt ut laoreet dolore magna.</span></p>
<p><span style="font-family: Arial; font-size: 14px; color: rgb(0, 0, 0);">aliquam erat volutpat. Ut wisi enim ad minim veniam, quis</span></p>
<p><span style="font-family: Arial; font-size: 14px; color: rgb(0, 0, 0);">nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip </span><span style="color: rgb(0, 0, 0); font-family: Arial; font-size: 14px;">nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</span><span style="color: rgb(0, 0, 0); font-family: Arial; font-size: 14px;">nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip</span><span style="color: rgb(0, 0, 0); font-family: Arial; font-size: 14px;"> nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip</span><span style="color: rgb(0, 0, 0); font-family: Arial; font-size: 14px;">nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</span><span style="color: rgb(0, 0, 0); font-family: Arial; font-size: 14px;">nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip</span></p>
<p><span style="font-family: Arial; font-size: 14px; color: rgb(0, 0, 0);"> </span></p>
<p><span style="font-family: Arial; color: rgb(0, 0, 0); font-size: 18px; font-weight: bold;">nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip</span></p>
<ul>
<li><span style="font-family: Arial; font-size: 14px; color: rgb(0, 0, 0);">nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip</span></li>
<li><span style="font-family: Arial; font-size: 14px; color: rgb(0, 0, 0);">nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip</span></li>
<li><span style="font-family: Arial; font-size: 14px; color: rgb(0, 0, 0);">nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip</span></li>
<li><span style="font-family: Arial; font-size: 14px; color: rgb(0, 0, 0);">nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip</span></li>
<li><span style="font-family: Arial; font-size: 14px; color: rgb(0, 0, 0);">nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip</span></li>
</ul>
<p><em><strong><span style="font-family: Arial; font-size: 14px; color: rgb(0, 0, 0);">nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip</span></strong></em></p>
<p><span style="font-family: Arial;"> </span></p>
<p> </p>
at
$product['description'] and I want to keep only the description without the html tags.
I tried
$proddescr= strip_tags(html_entity_decode($product['description'], ENT_QUOTES, 'UTF-8'));
but it gives me errors at the xml
I also tried
$proddescr = strip_tags($product['description'];
ehco $proddescr;
but also no luck
Can you please tell me a method to keep only the text of the string?
Thanks
<![CDATA['.strip_tags(htmlspecialchars_decode($product['description'])).']]
Related
I created cards for each product that i am trying to enlist in a page(similar to this https://testhtmlcode.w3spaces.com/saved-from-Tryit-2023-01-02.html). Now i am trying to show the long description when clicked on "see more" in the card. In HTML(which i i have tried here: https://testhtmlcode.w3spaces.com/saved-from-Tryit-2023-01-02.html) it's worked but in react i am finding it difficult. Can anyone help me here.
React code:
CSS:
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
z-index: 1;
display: flex;
justify-content: left;
align-items: left;
flex-wrap: wrap;
margin: 40px 0;
}
.container .card {
position: relative;
width: 300px;
height: 400px;
background: rgba(255, 255, 255, 0.05);
margin: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(10px);
}
.container .card .content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: 0.5s;
}
.container .card:hover .content {
transform: translateY(-20px);
}
.container .card .content .contentBx h2 {
color: #000000;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
font-size: 18px;
text-align: center;
margin: 20px 0 10px;
line-height: 1.1em;
}
.container .card .content .contentBx p {
color: #000000;
letter-spacing: 2px;
font-weight: 500;
font-size: 14px;
text-align: left;
margin: 20px 0 10px;
line-height: 1.1em;
padding-left: 15px;
}
.container .card .sci {
position: absolute;
bottom: 50px;
display: flex;
}
.container .card .sci li {
list-style: none;
margin: 0 10px;
transform: translateY(40px);
transition: 0.5s;
opacity: 0;
}
.container .card:hover .sci li {
transform: translateY(0px);
opacity: 1;
}
.container .card .sci li a {
color: #000000;
font-size: 20px;
}
React code:
function App() {
return(
<div>
<section>
<div class="container">
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
</div>
</div>
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
</div>
</div>
</div>
</section>
</div>
);
}
export default App;
I tried to do the same in html, which worked as expected using a script tag
https://testhtmlcode.w3spaces.com/saved-from-Tryit-2023-01-02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popoup in javascript</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
outline: none;
font-family: 'system-ui', 'sans-serif';
font-weight: 300;
transition: .3s linear 0s all;
}
.container {
position: relative;
z-index: 1;
display: flex;
justify-content: left;
align-items: left;
flex-wrap: wrap;
margin: 40px 0;
}
.container .card {
position: relative;
width: 300px;
height: 400px;
background: url(https://images.pexels.com/photos/3747155/pexels-photo-3747155.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load) no-repeat;
background-size: cover;
margin: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(10px);
overflow: hidden;
}
.container .card .content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: 0.5s;
}
.container .card:hover .contentBx {
transform: translateY(-20px);
}
.container .card .content .contentBx h2 {
color: #000000;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
font-size: 18px;
text-align: center;
margin: 20px 0 10px;
line-height: 1.1em;
}
.container .card .content .contentBx p {
color: #ffffff;
letter-spacing: 2px;
font-weight: 500;
font-size: 14px;
text-align: left;
margin: 20px 0 10px;
line-height: 1.1em;
padding-left: 15px;
}
.container .card .sci {
position: absolute;
bottom: 50px;
display: flex;
}
.container .card .sci li {
list-style: none;
margin: 0 10px;
transform: translateY(40px);
transition: 0.5s;
opacity: 0;
}
.container .card:hover .sci li {
transform: translateY(0px);
opacity: 1;
}
.container .card .sci li a {
color: #000000;
font-size: 20px;
}
.blur-filter {
filter: blur(2px);
}
</style>
<style>
[modal] {
opacity: 0;
position: fixed;
top: 120%;
bottom: 0;
left: 0;
right: 0;
color: white;
background: #ffffff38;
backdrop-filter: blur(10px);
overflow: hidden;
transition: 1s linear 0s all;
}
[modal="active"] {
opacity: 1;
top: 0%;
}
[modal] > .modal {
display: contents;
}
[modal] > .flexbox_column {
margin: 0;
}
[modal] > .modal > .modal_header {
display: grid;
grid-template-columns: auto 24px;
padding: 10px;
}
[modal] > .modal > .modal_header > h4 {
font-weight: 500;
}
[modal] > .modal > .modal_header > ._close {
cursor: pointer;
}
[modal] > .modal > .modal_content {
height: 100%;
padding: 10px;
border-radius: 16px;
overflow: scroll;
}
[modal] > .modal > .modal_content::-webkit-scrollbar {
width: 5px;
}
[modal] > .modal > .modal_content::-webkit-scrollbar-track {
background: #e2e2e2;
}
[modal] > .modal > .modal_content::-webkit-scrollbar-thumb {
background: #9a9a9a;
}
[modal] > .modal > .modal_content::-webkit-scrollbar-thumb:hover {
background: #b6b6b6;
}
[modal] > .modal > .modal_content > img {
max-width: 100%;
object-fit: cover;
filter: opacity(0.8);
}
[data-modal] {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<section>
<div class="container">
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
<!--MODAL START-->
<div modal>
<div class="modal flexbox_column">
<div class="modal_header"><h4>MEGA DISCOUNT</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
<div class="modal_content">
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
</div>
</div>
</div>
<!--MODAL END-->
</div>
</div>
<!--CARD END-->
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
</div>
<!--MODAL START-->
<div modal>
<div class="modal flexbox_column">
<div class="modal_header"><h4>DISCOUNT 50%</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
<div class="modal_content">
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
</div>
</div>
</div>
<!--MODAL END-->
</div>
<!--CARD END-->
</div>
</section>
</div>
</body>
<script>
let modalLinks = document.querySelectorAll('a[data-modal]');
modalLinks.forEach(link =>
link.addEventListener('click', function() {
openModal(link)
})
);
function openModal(e) {
const el = e.closest('.card');
const modal = el.querySelector('[modal]');
modal.setAttribute('modal', 'active');
}
function closeModal(e) {
const modal = e.closest('[modal]');
modal.setAttribute('modal', '');
}
</script>
</html>
you need to manage state inside your component, in order to do that
here's a basic example of how you can achieve that
import React, { useState, useRef } from "react";
export default function App() {
const [showMore, setShowMore] = useState(false);
return (
<div className="App">
<div>
<section>
<div className="container">
<div className="card">
<div className="content">
<div className="contentBx">
{!showMore ? (
<>
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a
href="s"
onClick={(e) => {
e.preventDefault();
setShowMore(true);
}}
>
See more
</a>
</p>
</> :
<>
// your modal data here
</>
)}
</div>
</div>
</div>
</div>
</section>
</div>
</div>
);
}
here's a codesandbox for working example. I used the CSSTransition library for CSS animation purposes. feel free to play and change acording to your preferances
I wrote a html code to display cards. Added a modal that open and closes when clicked on an event. I am trying to implement the same in react but not able to do it. I am very new to react stuff hence need your help here to make it compatible in react JS.
In HTML, the onclik event is done through the script but in react, i am trying to write a onclik event inside dev but mostly unsuccessful.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popoup in javascript</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD#48,400,0,0" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
outline: none;
font-family: 'system-ui', 'sans-serif';
font-weight: 300;
transition: .3s linear 0s all;
}
.container {
position: relative;
z-index: 1;
display: flex;
justify-content: left;
align-items: left;
flex-wrap: wrap;
margin: 40px 0;
}
.container .card {
position: relative;
width: 300px;
height: 400px;
background: url(https://images.pexels.com/photos/3747155/pexels-photo-3747155.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load) no-repeat;
background-size: cover;
margin: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(10px);
overflow: hidden;
}
.container .card .content {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: 0.5s;
}
.container .card:hover .contentBx {
transform: translateY(-20px);
}
.container .card .content .contentBx h2 {
color: #000000;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
font-size: 18px;
text-align: center;
margin: 20px 0 10px;
line-height: 1.1em;
}
.container .card .content .contentBx p {
color: #ffffff;
letter-spacing: 2px;
font-weight: 500;
font-size: 14px;
text-align: left;
margin: 20px 0 10px;
line-height: 1.1em;
padding-left: 15px;
}
.container .card .sci {
position: absolute;
bottom: 50px;
display: flex;
}
.container .card .sci li {
list-style: none;
margin: 0 10px;
transform: translateY(40px);
transition: 0.5s;
opacity: 0;
}
.container .card:hover .sci li {
transform: translateY(0px);
opacity: 1;
}
.container .card .sci li a {
color: #000000;
font-size: 20px;
}
.blur-filter {
filter: blur(2px);
}
</style>
<style>
[modal] {
opacity: 0;
position: fixed;
top: 120%;
bottom: 0;
left: 0;
right: 0;
color: white;
background: #ffffff38;
backdrop-filter: blur(10px);
overflow: hidden;
transition: 1s linear 0s all;
}
[modal="active"] {
opacity: 1;
top: 0%;
}
[modal] > .modal {
display: contents;
}
[modal] > .flexbox_column {
margin: 0;
}
[modal] > .modal > .modal_header {
display: grid;
grid-template-columns: auto 24px;
padding: 10px;
}
[modal] > .modal > .modal_header > h4 {
font-weight: 500;
}
[modal] > .modal > .modal_header > ._close {
cursor: pointer;
}
[modal] > .modal > .modal_content {
height: 100%;
padding: 10px;
border-radius: 16px;
overflow: scroll;
}
[modal] > .modal > .modal_content::-webkit-scrollbar {
width: 5px;
}
[modal] > .modal > .modal_content::-webkit-scrollbar-track {
background: #e2e2e2;
}
[modal] > .modal > .modal_content::-webkit-scrollbar-thumb {
background: #9a9a9a;
}
[modal] > .modal > .modal_content::-webkit-scrollbar-thumb:hover {
background: #b6b6b6;
}
[modal] > .modal > .modal_content > img {
max-width: 100%;
object-fit: cover;
filter: opacity(0.8);
}
[data-modal] {
cursor: pointer;
}
</style>
</head>
<body>
<div>
<section>
<div class="container">
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
<!--MODAL START-->
<div modal>
<div class="modal flexbox_column">
<div class="modal_header"><h4>MEGA DISCOUNT</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
<div class="modal_content">
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
</div>
</div>
</div>
<!--MODAL END-->
</div>
</div>
<!--CARD END-->
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
</div>
<!--MODAL START-->
<div modal>
<div class="modal flexbox_column">
<div class="modal_header"><h4>DISCOUNT 50%</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
<div class="modal_content">
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
</div>
</div>
</div>
<!--MODAL END-->
</div>
<!--CARD END-->
</div>
</section>
</div>
</body>
<script>
let modalLinks = document.querySelectorAll('a[data-modal]');
modalLinks.forEach(link =>
link.addEventListener('click', function() {
openModal(link)
})
);
function openModal(e) {
const el = e.closest('.card');
const modal = el.querySelector('[modal]');
modal.setAttribute('modal', 'active');
}
function closeModal(e) {
const modal = e.closest('[modal]');
modal.setAttribute('modal', '');
}
</script>
</html>
React:
function App() {
return(
<div>
<section>
<div class="container">
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
<!--MODAL START-->
<div modal>
<div class="modal flexbox_column">
<div class="modal_header"><h4>MEGA DISCOUNT</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
<div class="modal_content">
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
</div>
</div>
</div>
<!--MODAL END-->
</div>
</div>
<!--CARD END-->
<!--CARD START-->
<div class="card">
<div class="content">
<div class="contentBx">
<h2>PR1</h2>
<p>
PR1 is a health related tracker..
<a data-modal>See more</a>
</p>
</div>
</div>
<!--MODAL START-->
<div modal>
<div class="modal flexbox_column">
<div class="modal_header"><h4>DISCOUNT 50%</h4><span onclick="closeModal(this)" class="_close material-symbols-outlined">expand_more</span></div>
<div class="modal_content">
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<p>
Lorem ipsum dolor sit amet. Qui repudiandae omnis eos illo numquam sit doloremque officiis ut sint modi sit nulla praesentium? Ut sunt natus non galisum dolor est omnis quae qui voluptatem atque? Ex excepturi natus aut tempore ipsum ea quia rerum non dolores nihil sed exercitationem autem!
Est voluptas sint vel enim dolores ea voluptatem suscipit est dolorem ipsum sed recusandae corrupti. Cum perspiciatis nihil aut velit dignissimos aut temporibus itaque est molestias voluptatum qui sint voluptatem.
Aut deleniti galisum ut quia quia quo voluptatem soluta et fugit dolores hic consectetur beatae. Ut cupiditate ipsum et doloribus optio et nisi omnis!
</p>
<img src="https://images.pexels.com/photos/3756879/pexels-photo-3756879.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Free license from pexels" />
</div>
</div>
</div>
<!--MODAL END-->
</div>
<!--CARD END-->
</div>
</section>
</div>
);
}
export default App;
In React you can implement the Onclick function in a component, like this, <button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>. Or you can implement it like this and set up the function somewhere else and call it,
<button onClick={handleDelete}>Delete Row</button>. Refer to the React js documentation https://reactjs.org/docs/handling-events.html from the link. Also, post React your code also.
I've successfully pinned a screen in ScrollMagic and had a mask over the scene fade up in opacity. But the scene won't stay pinned while the next screen scrolls up. I want the first scene to do its animation and stay there, then the second scene scroll up over the first scene. Anyone know what I'm doing wrong? Is it because my purple-mask is absolutely positioned?
This jsfiddle doesn't have the animation working with the scroll, but for some reason, it does work on my local computer.
https://jsfiddle.net/LNMSchneiderman/rsbw3vka/27/
jquery:
var height = $(window).height();
$(document).ready(function() {
$('.mask, .load_p').delay( 1100 ).fadeOut(1000);
var fadeUp01 = TweenMax.to('#purple-mask', 1.5, {opacity: .9}); //fade in timestamp1
var scene = new ScrollMagic.Scene({
triggerElement: "#screen1",
duration: height,
triggerHook: 0,
reverse: true
})
.setPin("#screen1", {pushFollowers: true})
.setTween(fadeUp01)
.addTo(controller);
});
html:
<div class="screen" id="screen1">
<div id="purple-mask"></div>
<div class="date">October 16, 1915</div>
<hr/>
<div class="title">Seven thousand march for "Votes for Women"</div>
<div class="caption">About 7,000 people marched supporting women's right to vote. </div>
</div>
<div class="screen" id="screen2">
<h1>Getting women the vote</h1>
<div class="intro-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus, urna non bibendum imperdiet, turpis quam iaculis nibh, sit amet porttitor nisl metus eget augue. Phasellus bibendum, arcu a dignissim convallis, massa risus ultrices massa, dignissim aliquet quam nibh at eros. Sed congue mattis varius. Suspendisse ultrices non tellus in posuere. Morbi maximus a diam ac blandit. Pellentesque tristique ante id eleifend accumsan. Cras vitae aliquet orci. Cras dictum erat eget turpis placerat, ac vulputate urna luctus. Suspendisse sit amet fringilla turpis. Nulla tincidunt malesuada laoreet. Mauris et mi orci.</p>
</div>
</div>
css:
h1 {
font-family: 'Martel', serif;
font-size: 2.9rem;
font-weight: bold;
text-align: center;
padding: 0 20px;
margin-bottom: 20px;
margin-top: 5vh;
color:white;
}
.date {
font-family: 'Martel', serif;
font-size: 1.1rem;
text-align: center;
padding-bottom: 0px;
margin-top: 50px;
font-weight: 600;
}
hr {
width: 12vw;
text-align: center;
margin: 0 auto;
border: none;
color: black;
background-color: black;
height: 2px;
padding-top: 0;
margin-top: 5px !important;
margin-bottom: 0 !important;
}
.title {
font-family: 'Martel', serif;
color: #9b9b9b;
font-weight:600;
font-size: 1.8rem;
text-align: center;
margin-top: 10px;
}
.caption {
font-size: 1rem;
text-align: center;
line-height: 140%;
color: gray;
font-family: 'Martel', serif;
text-shadow: none;
width: 86%;
margin-left: 7%;
margin-top: 10px;
}
.screen {
position: relative;
width: 100%;
z-index: 100;
height: 100vh;
background-color: transparent;
}
#screen2 {
background-color: green;
opacity: 0.5;
}
#purple-mask {
position: absolute;
left: 0;
top: 0;
background-color: #3b253b;
opacity: 0;
width: 100%;
height: 100%;
z-index: 90;
}
Augh! OK, I have figured it out. I forgot about it. You have enclose all the content in screen1 in a div, say id="first", then pin that, not the enclosing screen. Then you pin and fade up the purple-mask.
So the html looks like this:
<div class="screen" id="screen1">
<div id="purple-mask"></div>
<div id="first">
<div class="date">October 16, 1915</div>
<hr/>
<div class="title">Seven thousand march for "Votes for Women"</div>
<div class="caption">About 7,000 people marched supporting women's right to vote</div>
<div><!-- end of first -->
</div>
<div class="screen"></div>
<div class="screen" id="screen2">
<h1>Getting women the vote</h1>
<div class="intro-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rhoncus, urna non bibendum imperdiet, turpis quam iaculis nibh, sit amet porttitor nisl metus eget augue. Phasellus bibendum, arcu a dignissim convallis, massa risus ultrices massa, dignissim aliquet quam nibh at eros. Sed congue mattis varius. Suspendisse ultrices non tellus in posuere. Morbi maximus a diam ac blandit. Pellentesque tristique ante id eleifend accumsan. Cras vitae aliquet orci. Cras dictum erat eget turpis placerat, ac vulputate urna luctus. Suspendisse sit amet fringilla turpis. Nulla tincidunt malesuada laoreet. Mauris et mi orci.</p>
</div>
</div>
And the code looks something like this:
var fadeUp01 = TweenMax.to('#purple-mask', 1.5, {opacity: .9}); //fade in timestamp1
var scene = new ScrollMagic.Scene({
triggerElement: "#screen1",
duration: height*3,
triggerHook: 0,
reverse: true
})
.setPin("#first", {pushFollowers: true})
.addTo(controller);
var scene = new ScrollMagic.Scene({
triggerElement: "#screen1",
duration: height*3,
triggerHook: 0,
reverse: true
})
.setPin("#purple-mask", {pushFollowers: true})
.setTween(fadeUp01)
.addTo(controller);
In the process of learning basic ReactJS I am trying to create the following layout but I have not been successful in finding solution which leads me to this particular layout which when open on a desktop will look as following (but since it is responsive it will hopefully readjust to screen):
This is the code I am trying but not sure how to take it to a responsive layout I desire.
import React from 'react';
function Header() {
return (
<div> I am the header</div>
)
}
// each footer is 50% wide
function Footer1() {
return (
<div> I am footer 1</div>
)
}
function Footer2() {
return (
<div> I am footer 2</div>
)
}
// left col has with 84%
function LeftCol() {
return (
<div>
<form>
<div>col1 width 84%</div>
<div>col1 row1</div>
</form>
</div>
)
}
function RightCol() {
return (
<div>
<form>
<div>col2 width 16%</div>
<div>col2 row1</div>
</form>
</div>
)
}
function App() {
return (
<div>
<Header />
<LeftCol />
<RightCol />
<Footer1 />
<Footer2 />
</div>
);
}
export default App;
Edit:
I am trying to achieve this using minimal html and CSS but through ReactJS and Material UI as learning exercise.
Something like this might help you.
See if that works for you:
NOTE: This is a very basic integration between React and CSS. If you don't have any experience with CSS I suggest you do the W3Schools CSS course. Once you get it done, I suggest you to look into Styled Components which, in my opinion is a much nicer way to handle CSS in React components. Also a priority to learn React basics in the official documentation and other tutorials.
SNIPPET:
function Header() {
return(
<div className="header">I am Header</div>
);
}
function Main() {
return(
<div className="main">
<LeftCol/>
<RightCol/>
</div>
);
}
function LeftCol() {
return (
<div className="leftCol">
<div>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>
);
}
function RightCol() {
return (
<div className="rightCol">
<div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
);
}
function Footer() {
return(
<div className="footer">I am Footer</div>
);
}
function App() {
return(
<div>
<Header/>
<Main/>
<Footer/>
</div>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));
.header {
width: 100%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
background-color: lightblue;
}
.main {
width: 100%;
/*height: 200px;*/
display: flex;
}
.leftCol {
flex: 0 0 84%;
background-color: lightgreen;
display: flex;
align-items: center;
justify-content: center;
}
.rightCol {
flex: 0 0 16%;
background-color: lightgray;
display: flex;
align-items: center;
justify-content: center;
}
.footer {
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background-color: salmon;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
How can I create a UI with a vertical timeline bar where on desktop it shows as timeline-bar in middle and event boxes on both sides. On smaller mobile screen, the timeline-bar on the left and all event boxes on the right.
Using JQuery in combination with responsive classes is okay, just need to show all event boxes, so hiding alternate boxes with xs-hidden won't do.
JS Fiddle: http://jsfiddle.net/n82ek/2/
Reduce expand size of result window to see responsive behavior.
What needs to happen? Move the bar left for xs display
Nice to have: Also add the timelineDot on line alongside the box.
Please Refer to a sample timeline ui pattern image attached.... and Thank you!
Current HTML:
<div class="container">
<div class="timelineBar"></div>
<div class="timelineDot"></div>
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<div class="shadowBox">right</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="shadowBox">left</div>
</div>
<div class="col-sm-6">
</div>
</div>
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<div class="shadowBox">right</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="shadowBox">left</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
Current CSS:
#import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');
.timelineBar {
width: 2px;
background-color: #BDBDBD;
display: inline-block;
position: absolute;
height: 100%;
left: 50%;
margin-left: 10px;
margin-right: 10px;
}
.shadowBox {
box-shadow: rgba(0, 0, 0, 0.796875) 0px 0px 2px;
-webkit-box-shadow: rgba(0, 0, 0, 0.796875) 0px 0px 2px;
border:2px solid white;
border-radius: 10px;
margin: 10px;
background-color: #FFFFFF;
}
.timelineDot{
width: 10px;
height: 10px;
background-color: #BDBDBD;
opacity: 1;
display: inline-block;
position: absolute;
left: 50%;
top: 15px;
margin-left: 6px;
border-radius: 10px;
}
"Timeline (responsive)" snippet:
This looks very, very close to what your example shows. The bootstrap snippet linked below covers all the bases you are looking for. I've been considering it myself, with the same requirements you have ( especially responsiveness ). This morphs well between screen sizes and devices.
You can fork this and use it as a great starting point for your specific expectations:
http://bootsnipp.com/snippets/featured/timeline-responsive
Here are two screenshots I took for you... wide and thin:
BootFlat
You can also try BootFlat, which has a section in their documentation specifically for crafting Timelines:
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 3px;
background-color: #eeeeee;
left: 50%;
margin-left: -1.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before,
.timeline > li:after {
content: " ";
display: table;
}
.timeline > li:after {
clear: both;
}
.timeline > li > .timeline-panel {
width: 46%;
float: left;
border: 1px solid #d4d4d4;
border-radius: 2px;
padding: 20px;
position: relative;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
position: absolute;
top: 26px;
right: -15px;
display: inline-block;
border-top: 15px solid transparent;
border-left: 15px solid #ccc;
border-right: 0 solid #ccc;
border-bottom: 15px solid transparent;
content: " ";
}
.timeline > li > .timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline > li > .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-badge.primary {
background-color: #2e6da4 !important;
}
.timeline-badge.success {
background-color: #3f903f !important;
}
.timeline-badge.warning {
background-color: #f0ad4e !important;
}
.timeline-badge.danger {
background-color: #d9534f !important;
}
.timeline-badge.info {
background-color: #5bc0de !important;
}
.timeline-title {
margin-top: 0;
color: inherit;
}
.timeline-body > p,
.timeline-body > ul {
margin-bottom: 0;
}
.timeline-body > p + p {
margin-top: 5px;
}
<div class="container">
<div class="page-header">
<h1 id="timeline">Timeline</h1>
</div>
<ul class="timeline">
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.
Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.
Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
<p>Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere
pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.
Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.
Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.
Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
<hr>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-cog"></i> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</div>
</li>
<li>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.
Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge success"><i class="glyphicon glyphicon-thumbs-up"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">Mussum ipsum cacilds</h4>
</div>
<div class="timeline-body">
<p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo.
Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
</div>
</div>
</li>
</ul>
</div>
http://codepen.io/bsngr/pen/Ifvbi/