Call fullcalendar function from another file - javascript

Am using full-calendar V.5, I need to call full-calendar function from another page. But encountering error of calendar.______ is not a function
I have checked this Calling a fullcalendar method/callback from another file , but not working for version 5.
Press the sidebar toggle button,to see error
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay'
},
events: 'https://fullcalendar.io/demo-events.json'
});
calendar.render();
});
$('.icon').click(function(){
$('.sidebar').toggleClass('in');
calendar.render();
});
.sidebar{
background:#eeeeee;
height:100vh;
width:200px;
}
.h-100{
height:100vh!important;
}
.main{
flex:1;
padding:20px
}
.icon{
cursor: pointer;
}
.in{
width:25px!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.7.0/main.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.7.0/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex h-100">
<div class="sidebar in">
<div class="icon text-right px-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
</div>
<div class="main">
<div id='calendar'></div>
</div>
</div>


calendar variable is not in the scope of the $(".icon") function that may encounter the error. Try using this.
let calendar;
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay'
},
events: 'https://fullcalendar.io/demo-events.json'
});
calendar.render();
});
$('.icon').click(function(){
$('.sidebar').toggleClass('in');
calendar.render();
});
.sidebar{
background:#eeeeee;
height:100vh;
width:200px;
}
.h-100{
height:100vh!important;
}
.main{
flex:1;
padding:20px
}
.icon{
cursor: pointer;
}
.in{
width:25px!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.7.0/main.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.7.0/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex h-100">
<div class="sidebar in">
<div class="icon text-right px-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
</div>
<div class="main">
<div id='calendar'></div>
</div>
</div>

Related

Button hover animation bug, when hovering over icon

When hovering over the arrow-icon of the button, for one moment, the text on the right side appears and the arrow-icon changes back to the chevron-icon. It seems like the "mouseout" event fires, even though I'm still hovering over the button. How do I prevent this?
const inviteButton = document.querySelector("#invite-btn button");
const inviteSpanOut = document.getElementById("span-out")
//Changes icon to arrow
inviteButton.addEventListener("mouseover", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>`
inviteSpanOut.style.display = "none";
});
//Changes icon to chevron
inviteButton.addEventListener("mouseout", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>`
inviteSpanOut.style.display = "inline";
});
#invite-btn {
text-decoration: none;
font-size: 1rem;
}
#invite-btn button {
border-radius: 3rem;
width: 50px;
height: 50px;
border: 0;
background-color: hsla(0, 0%, 10%, 1);
transition: 0.3s ease-out;
}
#invite-btn button:hover {
width: 200px;
}
#invite-btn span {
padding-left: 10px;
font-weight: 600;
letter-spacing: 1px;
transition: 0.3s ease-out;
}
<a id="invite-btn">
<button> <!-- Chevron-Icon-->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
<span id="span-out">INVITE NOW</span>
</a>

Easily countered by using pointer-events: none on the SVG itself. See updated example below.
Good luck!
const inviteButton = document.querySelector("#invite-btn button");
const inviteSpanOut = document.getElementById("span-out")
inviteButton.addEventListener("mouseover", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>`
inviteSpanOut.style.display = "none";
});
inviteButton.addEventListener("mouseout", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>`
inviteSpanOut.style.display = "inline";
});
#invite-btn {
text-decoration: none;
font-size: 1rem;
}
#invite-btn button {
border-radius: 3rem;
width: 50px;
height: 50px;
border: 0;
background-color: hsla(0, 0%, 10%, 1);
transition: 0.3s ease-out;
}
#invite-btn button svg {
pointer-events: none;
}
#invite-btn button:hover {
width: 200px;
}
#invite-btn span {
padding-left: 10px;
font-weight: 600;
letter-spacing: 1px;
transition: 0.3s ease-out;
}
<a id="invite-btn">
<button> <!-- Chevron-Icon-->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
<span id="span-out">INVITE NOW</span>
</a>

Remove pointer events from the SVG and it seems to work well.
Also, anchors and buttons have distinct purposes and should never be combined.
Finally, use classes for CSS to make it reusable. I didn't fully convert your script for reusability, but it wouldn't be too difficult.
const inviteButton = document.querySelector(".invite-btn");
const inviteSpanOut = document.querySelector(".span-out")
inviteButton.addEventListener("mouseover", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
</svg>`
inviteSpanOut.style.display = "none";
});
inviteButton.addEventListener("mouseout", function() {
inviteButton.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>`
inviteSpanOut.style.display = "inline";
});
.invite-btn {
border-radius: 3rem;
width: 50px;
height: 50px;
border: 0;
background-color: hsla(0, 0%, 10%, 1);
transition: 0.3s ease-out;
}
.invite-btn:hover {
width: 200px;
}
.invite-btn:hover + .span-out {
padding-left: 10px;
font-weight: 600;
letter-spacing: 1px;
transition: 0.3s ease-out;
}
.invite-btn svg {
pointer-events: none;
}
<button class="invite-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
<span class="span-out">INVITE NOW</span>

Put a GIF inside a Bootstrap header?

Example: last.fm
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.b-example-divider {
height: 3rem;
background-color: rgba(0, 0, 0, 0.1);
border: solid rgba(0, 0, 0, 0.15);
border-width: 1px 0;
box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1), inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}
.b-example-vr {
flex-shrink: 0;
width: 1.5rem;
height: 100vh;
}
.bi {
vertical-align: -0.125em;
fill: currentColor;
}
.nav-scroller {
position: relative;
z-index: 2;
height: 2.75rem;
overflow-y: hidden;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
padding-bottom: 1rem;
margin-top: -1px;
overflow-x: auto;
text-align: center;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
body {
font-family: "Nunito", sans-serif;
background-color: #151b29;
}
a {
text-decoration: none;
}
.container {
max-width: 960px;
}
.navLinks {
color: white;
transition: color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.navLinks:hover {
color: #ffa260;
transform: translateY(-0.25em);
}
.osquinnHeader {}
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
<symbol id="home" viewBox="0 0 16 16">
<path
d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z"
/>
</symbol>
<symbol id="speedometer2" viewBox="0 0 16 16">
<path
d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"
/>
<path
fill-rule="evenodd"
d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"
/>
</symbol>
<symbol id="table" viewBox="0 0 16 16">
<path
d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"
/>
</symbol>
<symbol id="people-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" />
<path
fill-rule="evenodd"
d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"
/>
</symbol>
<symbol id="grid" viewBox="0 0 16 16">
<path
d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"
/>
</symbol>
</svg>
<header>
<div class="px-3 py-2 text-bg-dark osquinnHeader">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<h4 class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
Osquinn Fan Club
</h4>
<ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
<li>
<a href="#" class="nav-link navLinks">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#home" />
</svg> Home
</a>
</li>
<li>
<a href="#" class="nav-link navLinks">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#speedometer2" />
</svg> Dashboard
</a>
</li>
<li>
<a href="#" class="nav-link navLinks">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#table" />
</svg> Orders
</a>
</li>
<li>
<a href="#" class="nav-link navLinks">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#grid" />
</svg> Products
</a>
</li>
<li>
<a href="#" class="nav-link navLinks">
<svg class="bi d-block mx-auto mb-1" width="24" height="24">
<use xlink:href="#people-circle" />
</svg> Customers
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
I've tried adding the <img> tag after the osquinnHeader class but the image just was too big and it didn't contain itself inside the header. It only made the header larger. I only want to contain a gif inside the header like the one in the example. I also tried checking the website's code but to no avail.

Close menu when click detected outside

I'm trying to close a menu when the user clicks outside of the element. I have tried many solutions from Stack overflow but none of them work for me. The user should be able to click on the menu button (3 dots), which then shows the menu. Then if they click outside of this, it should close each time.
https://jsfiddle.net/Lzeukhcj/1/
Here is my code and what I have tried:
Javascript
const dots = document.querySelector(".dot-wrap");
const popup = document.querySelector(".popup");
dots.onclick = () => {
popup.style.display = "block";
}
document.onclick = (event) => {
let isClickInside = popup.contains(event.target);
if (!isClickInside) {
console.log("outside box");
popup.style.display = 'none';
}
}
SCSS
.tweet-container {
max-width: 100%;
display: flex;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5%;
padding-right: 5%;
border-bottom: solid 1px #f1f1f1;
}
.tweet-container-right {
width: 100%;
margin-left: 10px;
}
.tweet-header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.icon-container {
display: flex;
font-size: 0.8em;
}
.user-info {
display: flex;
align-items: center;
.tweet-name {
font-size: 15px;
margin-right: 3px;
color: #0f1419;
}
.tweet-username {
font-size:15px;
color: #526470;
}
.middle-dot{
margin-left: 3px;
margin-right: 3px;
}
.time {
font-size: 15px;
color: #526470;
}
}
.tweet-text {
font-size: 0.8em;
}
.verified-tick{
margin-right: 3px;
}
.dots-popup-container {
position: relative;
.dots {
width: 18px;
fill: red;
}
.popup {
background-color: white;
position: absolute;
right: 0;
top: 0;
width: 250px;
display: none;
/*height: 0px;*/
transition: 2s ease;
box-shadow: 0 0.5px 4px 0 rgba(0, 0, 0, 0.2);
padding-top: 14px;
.popup-option {
display: flex;
margin-bottom: 20px;
p {
color: #526470;
}
.popup-icon {
width: 20px;
margin-left: 10px;
margin-right: 10px;
fill: #526470;
}
}
}
}
HTML
<div class="tweet-container-right">
<div class="tweet-header">
<div class="user-info">
<h3 class="tweet-name">Title </h3>
<span class="middle-dot">·</span>
<p class="time">2d</p>
</div>
<div class="dots-popup-container">
<div class="dot-wrap">
<svg viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi dots">
<g>
<circle cx="5" cy="12" r="2"></circle>
<circle cx="12" cy="12" r="2"></circle>
<circle cx="19" cy="12" r="2"></circle>
</g>
</svg>
</div>
<div class="popup">
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
<path d="M12 13.415c1.892 0 3.633.95 4.656 2.544.224.348.123.81-.226 1.035-.348.226-.812.124-1.036-.226-.747-1.162-2.016-1.855-3.395-1.855s-2.648.693-3.396 1.854c-.224.35-.688.45-1.036.225-.35-.224-.45-.688-.226-1.036 1.025-1.594 2.766-2.545 4.658-2.545zm4.216-3.957c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478s1.478.66 1.478 1.478zm-5.476 0c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478.817 0 1.478.66 1.478 1.478z"></path>
</g>
</svg></div>
<p>Not interested in this tweet</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Unfollow whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M1.75 22.354c-.192 0-.384-.073-.53-.22-.293-.293-.293-.768 0-1.06L20.395 1.898c.293-.294.768-.294 1.06 0s.294.767 0 1.06L2.28 22.135c-.146.146-.338.22-.53.22zm1.716-5.577c-.134 0-.27-.036-.392-.11-.67-.413-1.07-1.13-1.07-1.917v-5.5c0-1.24 1.01-2.25 2.25-2.25H6.74l7.047-5.588c.225-.18.533-.215.792-.087.258.125.423.387.423.675v3.28c0 .415-.336.75-.75.75s-.75-.335-.75-.75V3.553L7.47 8.338c-.134.104-.298.162-.467.162h-2.75c-.413 0-.75.337-.75.75v5.5c0 .263.134.5.356.64.353.216.462.678.245 1.03-.14.23-.387.357-.64.357zm10.787 5.973c-.166 0-.33-.055-.466-.162l-4.795-3.803c-.325-.258-.38-.73-.122-1.054.258-.322.73-.38 1.054-.12l3.58 2.838v-7.013c0-.414.335-.75.75-.75s.75.336.75.75V22c0 .288-.166.55-.425.675-.104.05-.216.075-.327.075z"></path>
</g>
</svg> </div>
<p>Mute whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 1.25C6.072 1.25 1.25 6.072 1.25 12S6.072 22.75 12 22.75 22.75 17.928 22.75 12 17.928 1.25 12 1.25zm0 1.5c2.28 0 4.368.834 5.982 2.207L4.957 17.982C3.584 16.368 2.75 14.282 2.75 12c0-5.1 4.15-9.25 9.25-9.25zm0 18.5c-2.28 0-4.368-.834-5.982-2.207L19.043 6.018c1.373 1.614 2.207 3.7 2.207 5.982 0 5.1-4.15 9.25-9.25 9.25z"></path>
</g>
</svg>
</div>
<p>Block whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Mark as spoiler</p>
</div>
</div>
</div>
</div>

When you click the dots to open the popup, your document click event listener is checking whether the target is a child of the popup. Since the toggle is not, the modal is opened, then closed.
You can fix this by using Event.stopPropagation() to prevent this click event from being captured by the document click event listener when the dots are clicked.
Your JS should be:
window.onload = () => {
const dots = document.querySelector(".dot-wrap");
const popup = document.querySelector(".popup");
dots.onclick = (e) => {
popup.style.display = "block";
e.stopPropagation();
}
document.onclick = (event) => {
let isClickInside = popup.contains(event.target);
if (!isClickInside) {
console.log("outside box");
popup.style.display = 'none';
}
}
}
Demo:
window.onload = () => {
const dots = document.querySelector(".dot-wrap");
const popup = document.querySelector(".popup");
dots.onclick = (e) => {
popup.style.display = "block";
e.stopPropagation();
}
document.onclick = (event) => {
let isClickInside = popup.contains(event.target);
if (!isClickInside) {
console.log("outside box");
popup.style.display = 'none';
}
}
}
/* compiled from scss */
.tweet-container {
max-width: 100%;
display: flex;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5%;
padding-right: 5%;
border-bottom: solid 1px #f1f1f1;
}
.tweet-container-right {
width: 100%;
margin-left: 10px;
}
.tweet-header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.icon-container {
display: flex;
font-size: 0.8em;
}
.user-info {
display: flex;
align-items: center;
}
.user-info .tweet-name {
font-size: 15px;
margin-right: 3px;
color: #0f1419;
}
.user-info .tweet-username {
font-size: 15px;
color: #526470;
}
.user-info .middle-dot {
margin-left: 3px;
margin-right: 3px;
}
.user-info .time {
font-size: 15px;
color: #526470;
}
.tweet-text {
font-size: 0.8em;
}
.verified-tick {
margin-right: 3px;
}
.dots-popup-container {
position: relative;
}
.dots-popup-container .dots {
width: 18px;
fill: red;
}
.dots-popup-container .popup {
background-color: white;
position: absolute;
right: 0;
top: 0;
width: 250px;
display: none;
/*height: 0px;*/
transition: 2s ease;
box-shadow: 0 0.5px 4px 0 rgba(0, 0, 0, 0.2);
padding-top: 14px;
}
.dots-popup-container .popup .popup-option {
display: flex;
margin-bottom: 20px;
}
.dots-popup-container .popup .popup-option p {
color: #526470;
}
.dots-popup-container .popup .popup-option .popup-icon {
width: 20px;
margin-left: 10px;
margin-right: 10px;
fill: #526470;
}
<div class="tweet-container">
<div class="tweet-container-right">
<div class="tweet-header">
<div class="user-info">
<h3 class="tweet-name">Title </h3>
<span class="middle-dot">·</span>
<p class="time">2d</p>
</div>
<div class="dots-popup-container">
<div class="dot-wrap">
<svg viewBox="0 0 24 24" aria-hidden="true" class="r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-1hdv0qi dots">
<g>
<circle cx="5" cy="12" r="2"></circle>
<circle cx="12" cy="12" r="2"></circle>
<circle cx="19" cy="12" r="2"></circle>
</g>
</svg>
</div>
<div class="popup">
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
<path d="M12 13.415c1.892 0 3.633.95 4.656 2.544.224.348.123.81-.226 1.035-.348.226-.812.124-1.036-.226-.747-1.162-2.016-1.855-3.395-1.855s-2.648.693-3.396 1.854c-.224.35-.688.45-1.036.225-.35-.224-.45-.688-.226-1.036 1.025-1.594 2.766-2.545 4.658-2.545zm4.216-3.957c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478s1.478.66 1.478 1.478zm-5.476 0c0 .816-.662 1.478-1.478 1.478s-1.478-.66-1.478-1.478c0-.817.662-1.478 1.478-1.478.817 0 1.478.66 1.478 1.478z"></path>
</g>
</svg></div>
<p>Not interested in this tweet</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Unfollow whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M1.75 22.354c-.192 0-.384-.073-.53-.22-.293-.293-.293-.768 0-1.06L20.395 1.898c.293-.294.768-.294 1.06 0s.294.767 0 1.06L2.28 22.135c-.146.146-.338.22-.53.22zm1.716-5.577c-.134 0-.27-.036-.392-.11-.67-.413-1.07-1.13-1.07-1.917v-5.5c0-1.24 1.01-2.25 2.25-2.25H6.74l7.047-5.588c.225-.18.533-.215.792-.087.258.125.423.387.423.675v3.28c0 .415-.336.75-.75.75s-.75-.335-.75-.75V3.553L7.47 8.338c-.134.104-.298.162-.467.162h-2.75c-.413 0-.75.337-.75.75v5.5c0 .263.134.5.356.64.353.216.462.678.245 1.03-.14.23-.387.357-.64.357zm10.787 5.973c-.166 0-.33-.055-.466-.162l-4.795-3.803c-.325-.258-.38-.73-.122-1.054.258-.322.73-.38 1.054-.12l3.58 2.838v-7.013c0-.414.335-.75.75-.75s.75.336.75.75V22c0 .288-.166.55-.425.675-.104.05-.216.075-.327.075z"></path>
</g>
</svg> </div>
<p>Mute whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M12 1.25C6.072 1.25 1.25 6.072 1.25 12S6.072 22.75 12 22.75 22.75 17.928 22.75 12 17.928 1.25 12 1.25zm0 1.5c2.28 0 4.368.834 5.982 2.207L4.957 17.982C3.584 16.368 2.75 14.282 2.75 12c0-5.1 4.15-9.25 9.25-9.25zm0 18.5c-2.28 0-4.368-.834-5.982-2.207L19.043 6.018c1.373 1.614 2.207 3.7 2.207 5.982 0 5.1-4.15 9.25-9.25 9.25z"></path>
</g>
</svg>
</div>
<p>Block whoever</p>
</div>
<div class="popup-option">
<div>
<svg viewBox="0 0 24 24" aria-hidden="true" class="popup-icon">
<g>
<path d="M20.083 6.173l2.323 2.323c.293.293.768.293 1.06 0s.294-.768 0-1.06l-2.32-2.326 2.322-2.323c.293-.294.293-.77 0-1.062s-.768-.293-1.06 0L20.082 4.05 17.76 1.73c-.293-.293-.768-.293-1.06 0-.147.146-.22.338-.22.53s.072.384.22.53l2.32 2.32-2.32 2.325c-.147.146-.22.338-.22.53s.072.384.22.53c.292.293.767.293 1.06 0l2.323-2.32zM8.417 11.816c1.355 0 2.872-.15 3.84-1.256.813-.93 1.077-2.367.806-4.392-.38-2.826-2.116-4.513-4.645-4.513-2.53 0-4.267 1.687-4.646 4.513-.273 2.025-.01 3.462.805 4.393.968 1.108 2.485 1.257 3.84 1.257zm-3.16-5.448c.16-1.2.786-3.212 3.16-3.212 2.373 0 2.998 2.013 3.16 3.212.207 1.55.056 2.627-.45 3.205-.455.52-1.266.743-2.71.743s-2.256-.223-2.71-.743c-.507-.578-.658-1.656-.45-3.205zm11.44 12.867c-.88-3.525-4.283-5.988-8.28-5.988-3.998 0-7.403 2.463-8.28 5.988-.172.693-.03 1.4.395 1.94.408.522 1.04.822 1.733.822H14.57c.69 0 1.323-.3 1.73-.82.425-.54.568-1.247.396-1.942zm-1.577 1.018c-.126.16-.316.245-.55.245H2.264c-.235 0-.426-.085-.552-.246-.137-.174-.18-.412-.12-.654.71-2.855 3.517-4.85 6.824-4.85s6.113 1.994 6.824 4.85c.06.24.017.48-.12.655z"></path>
</g>
</svg>
</div>
<p>Mark as spoiler</p>
</div>
</div>
</div>
</div>

Full Calender V.5 Width not Autoadjusting when sidebar is toggle is used

When the the sidebars toggle is used .main div's width get expanded, but a gap is occurred on right side of calendar.
View Example in fullscreen
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay'
},
events: 'https://fullcalendar.io/demo-events.json'
});
calendar.render();
$('.icon').click(function(){
$('.sidebar').toggleClass('in');
});
});
.sidebar{
background:#eeeeee;
height:100vh;
width:200px;
}
.h-100{
height:100vh!important;
}
.main{
flex:1;
padding:20px
}
.icon{
cursor: pointer;
}
.in{
width:25px!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.7.0/main.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.7.0/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex h-100">
<div class="sidebar">
<div class="icon text-right px-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
</div>
<div class="main">
<div id='calendar'></div>
</div>
</div>
Is there any full calendar function which can be called when toggle button is pressed to readjust the width. Or any other work around.

You can just call
calendar.render();
again each time the sidebar button is clicked.
Demo:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
timeZone: 'UTC',
initialView: 'timeGridWeek',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay'
},
events: 'https://fullcalendar.io/demo-events.json'
});
calendar.render();
$('.icon').click(function(){
$('.sidebar').toggleClass('in');
calendar.render();
});
});
.sidebar{
background:#eeeeee;
height:100vh;
width:200px;
}
.h-100{
height:100vh!important;
}
.main{
flex:1;
padding:20px
}
.icon{
cursor: pointer;
}
.in{
width:25px!important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.7.0/main.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar-scheduler#5.7.0/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex h-100">
<div class="sidebar">
<div class="icon text-right px-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
</svg>
</div>
</div>
<div class="main">
<div id='calendar'></div>
</div>
</div>

I am trying to make a slider for svg slides with jquery only without using any plugins

here I am trying to make a svg slider without any plugins
I have some complicated html/css which I can not implement into the code I am trying to use
here's the code in code pen
https://codepen.io/j-tap/pen/EeyRrV
whenever I try to put an svg slide inside an 'li' I end up with a very big photo that doesn't relate to the original slide
link to screenshot here
that's the complicated html/css I am trying to implement in the slider:
<!--
Task 1
Final output should be a simple slider like the one in the image here
https://drive.google.com/file/d/1PEK5pR9kdN8rHQto2xm-vVZQ9qjPdAIA/view?usp=sharing
- slider is triggered by the dots at the bottom
- slider is switching between different Quotes evey 3s
- don't use any ready slider plugin or script.
- you can use JS and jQuery only
- you can preview the changes by openning Preview link top right menu, in a new tap.
- you all customization code should be here, <style> ur css </style> and <script> your magic scripts </script>
--->
<style type="text/css">
/* Styles for testemolials section */
.testemolials-sec {
margin-top: 80px;
}
.item-wrap {
/*max-width: 270px;*/
display: inline-block;
position: relative;
margin-bottom: 35px;
padding: 0px 24px;
}
.testi-item-paragraph {
font-family: 'Myanmar MN';
color: #6c7b93;
font-size: 18px;
position: relative;
margin-bottom: 5px;
min-height: 132px;
}
.testemolials-sec h4 + hr {
width: 350px;
text-align: center;
display: inline-block;
margin-top: 0px;
margin-bottom: 50px;
}
.testemolials-sec .testi-item-paragraph + span + hr {
width: 75%;
display: block;
margin-top: 0px;
margin-bottom: 5px;
text-align: left;
position: relative;
left: -2px;
bottom: 22px
}
.testemolials-sec svg {
width: 30px;
height: 100%;
}
.testemolials-sec .dquate-before svg {
transform: rotate(-180deg);
}
.dquate-before {
color: #0074b6;
display: block;
/* transform: rotate(-45deg);*/
text-align: left;
position: relative;
right: 38px;
}
.dquate-after {
color: #0074b6;
display: block;
/* transform: rotate(-45deg);*/
text-align: right;
}
.cus-title {
color: #0074b6;
font-family: 'Myriad Pro';
font-size: 16px;
display: block;
}
</style>
<div class="testemolials-sec text-center page-width">
<div class="page-width">
<div class="section-header text-center">
<h2> (Task 1 ) WAS TEILNEHMER ÜBER UNSERE KURSE SAGEN</h2>
</div>
</div>
<div class="grid page-width">
<div class="grid__item medium-up--one-half text-center testi-item">
<div class="item-wrap">
<span class="dquate-before">
<?xml version="1.0" encoding="iso-8859-1"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="512px" height="512px"><g><g id="right_x5F_quote"><g><path d="M0,4v12h8c0,4.41-3.586,8-8,8v4c6.617,0,12-5.383,12-12V4H0z" fill="#0074b6"/><path d="M20,4v12h8c0,4.41-3.586,8-8,8v4c6.617,0,12-5.383,12-12V4H20z" fill="#0074b6"/></g></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
</span>
<p class="testi-item-paragraph text-left">{{section.settings.testi1_content}}</p>
<span class="dquate-after">
<?xml version="1.0" encoding="iso-8859-1"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="512px" height="512px"><g><g id="right_x5F_quote"><g><path d="M0,4v12h8c0,4.41-3.586,8-8,8v4c6.617,0,12-5.383,12-12V4H0z" fill="#0074b6"/><path d="M20,4v12h8c0,4.41-3.586,8-8,8v4c6.617,0,12-5.383,12-12V4H20z" fill="#0074b6"/></g></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
</span>
<hr>
<strong class="cus-title text-left">{{section.settings.testi1_title}}</strong>
</div>
</div>
<div class="grid__item medium-up--one-half text-center testi-item">
<div class="item-wrap">
<span class="dquate-before">
<?xml version="1.0" encoding="iso-8859-1"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="512px" height="512px"><g><g id="right_x5F_quote"><g><path d="M0,4v12h8c0,4.41-3.586,8-8,8v4c6.617,0,12-5.383,12-12V4H0z" fill="#0074b6"/><path d="M20,4v12h8c0,4.41-3.586,8-8,8v4c6.617,0,12-5.383,12-12V4H20z" fill="#0074b6"/></g></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
</span>
<p class="testi-item-paragraph text-left">{{section.settings.testi2_content}}</p>
<span class="dquate-after">
<?xml version="1.0" encoding="iso-8859-1"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="512px" height="512px"><g><g id="right_x5F_quote"><g><path d="M0,4v12h8c0,4.41-3.586,8-8,8v4c6.617,0,12-5.383,12-12V4H0z" fill="#0074b6"/><path d="M20,4v12h8c0,4.41-3.586,8-8,8v4c6.617,0,12-5.383,12-12V4H20z" fill="#0074b6"/></g></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
</span>
<hr>
<strong class="cus-title text-left">{{section.settings.testi2_title}}</strong>
</div>
</div>
<div class="grid__item text-center testi-item">
<div class="item-wrap centered-testi">
<span class="dquate-before">
<?xml version="1.0" encoding="iso-8859-1"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="512px" height="512px"><g><g id="right_x5F_quote"><g><path d="M0,4v12h8c0,4.41-3.586,8-8,8v4c6.617,0,12-5.383,12-12V4H0z" fill="#0074b6"/><path d="M20,4v12h8c0,4.41-3.586,8-8,8v4c6.617,0,12-5.383,12-12V4H20z" fill="#0074b6"/></g></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
</span>
<p class="testi-item-paragraph text-left">{{section.settings.testi3_content}}</p>
<span class="dquate-after">
<?xml version="1.0" encoding="iso-8859-1"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="512px" height="512px"><g><g id="right_x5F_quote"><g><path d="M0,4v12h8c0,4.41-3.586,8-8,8v4c6.617,0,12-5.383,12-12V4H0z" fill="#0074b6"/><path d="M20,4v12h8c0,4.41-3.586,8-8,8v4c6.617,0,12-5.383,12-12V4H20z" fill="#0074b6"/></g></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
</span>
<hr>
<strong class="cus-title text-left">{{section.settings.testi3_title}}</strong>
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "Task 1",
"class": "index-section",
"settings": [
{
"type": "header",
"content": "testimonials section"
},
{
"type": "text",
"id": "testi1_content",
"label": "testimonial1 text"
},
{
"type": "text",
"id": "testi1_title",
"label": "testimonial1 teller"
},
{
"type": "text",
"id": "testi2_content",
"label": "testimonial2 text"
},
{
"type": "text",
"id": "testi2_title",
"label": "testimonial2 teller"
},
{
"type": "text",
"id": "testi3_content",
"label": "testimonial3 text"
},
{
"type": "text",
"id": "testi3_title",
"label": "testimonial3 teller"
}
],
"presets": [
{
"name": "TAsk 1",
"category": "Tasks"
}
]
}
{% endschema %}
any idea how to make it into a slider?

Categories

Resources