I made a modal popup that reveals coupon code on my website, and the button is linked to the offer page. I want the offer page to open in background tab without losing focus on my page. is there any way to do it? here is the working link for my modal popup on button reveal coupon code and buy, thank you.
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
alert("Text Copied");
}
.coup-button {
font-size: 1.25em;
padding: 15px;
background: #dc3545;
color:#fff;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.coup-button:hover {
border: #dc3545 solid;
color:#dc3545;
background: #fff;
}
.coup-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.coup-overlay:target {
visibility: visible;
opacity: 1;
}
.coup-popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.coup-popup h4 {
margin-top: 0;
color: #333;
}
.coup-popup .coup-close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.coup-popup .coup-close:hover {
color: #dc3545;
}
.coup-popup .coup-content {
max-height: 30%;
overflow: auto;
}
.coup-copybutton{width: auto; height: auto; background: #dc3545; color: white; border: none;cursor: pointer; border-radius: 8px; outline: none; padding:10px; box-sizing: border-box;}
#media screen and (max-width: 700px){
.coup-popup{
width: 70%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="coup-button" href="https://www.pmbypm.com/best-pmp-exam-simulator/" target="_blank" onclick="location.href='#popup1'">Reveal Coupon Code</a>
<div id="popup1" class="coup-overlay">
<div class="coup-popup">
<h4>Here is your Coupon Code</h4>
<a class="coup-close" href="#">×</a>
<div class="coup-content" style="text-align: center;">
<p id="p1"><strong>UDEMYPM30</strong></p>
<button class="coup-copybutton" onclick="copyToClipboard('#p1')">Copy Text</button>
</div>
</div>
</div>
Try window.open('link', 'name');
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
alert("Text Copied");
}
function openView() {
location.href='#popup1';
window.open('https://stackoverflow.com/questions/60432716/', 'name');
}
.coup-button {
font-size: 1.25em;
padding: 15px;
background: #dc3545;
color:#fff;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.coup-button:hover {
border: #dc3545 solid;
color:#dc3545;
background: #fff;
}
.coup-overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.coup-overlay:target {
visibility: visible;
opacity: 1;
}
.coup-popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.coup-popup h4 {
margin-top: 0;
color: #333;
}
.coup-popup .coup-close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.coup-popup .coup-close:hover {
color: #dc3545;
}
.coup-popup .coup-content {
max-height: 30%;
overflow: auto;
}
.coup-copybutton{width: auto; height: auto; background: #dc3545; color: white; border: none;cursor: pointer; border-radius: 8px; outline: none; padding:10px; box-sizing: border-box;}
#media screen and (max-width: 700px){
.coup-popup{
width: 70%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="coup-button" href="https://www.pmbypm.com/best-pmp-exam-simulator/" target="_blank" onclick="openView()">Reveal Coupon Code</a>
<div id="popup1" class="coup-overlay">
<div class="coup-popup">
<h4>Here is your Coupon Code</h4>
<a class="coup-close" href="#">×</a>
<div class="coup-content" style="text-align: center;">
<p id="p1"><strong>UDEMYPM30</strong></p>
<button class="coup-copybutton" onclick="copyToClipboard('#p1')">Copy Text</button>
</div>
</div>
</div>
Related
So i'm making a website, and i have a sort of a slider menu from top, and when i hover over a button everything appears, but when i hover out it doesn't disappear. In my js code i had to delay the disappearance with setTimeout() because there's a small gap between the button and the menu. So if someone would know how to make it disappear while keeping the timer thing so it doesn't disappear when going from button to the menu i'd be insanely grateful. Thanks in advance. Here's the code:
var timeout;
function mouseOver(){
document.getElementById('menu-roll').style.display = 'block';
timeout = setTimeout(function(){document.getElementById('menu-roll').style.display = 'none';}, 3000);
}
function mouseOut(){
clearTimeout(timeout);
}
:root{
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper{
height: 100vh;
width: 100%;
}
#navbar{
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a{
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover{
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper{
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup{
0%{
top: 150px;
}
100%{
top: 0;
}
}
#menu-wrapper{
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img{
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video{
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll{
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll{
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a{
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover{
text-decoration: underline;
}
ul{
list-style-type: none;
}
#h1-menu-tandoor{
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#h1-menu-restaurace{
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo{
0%, 90%{
opacity: 0.0;
}
100%{
opacity: 1.0;
}
}
#information-section{
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction{
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1{
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3{
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p{
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider{
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos{
position: relative;
z-index: 6;
height: 10px;
}
.first-photo{
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info{
height: 407px;
}
#services-photo{
top: 50px;
}
#media screen and (max-width: 700px){
.first-photo{
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction{
width: 60%;
margin: 0 auto;
}
#divider{
margin-bottom: 10px;
}
#services-info{
height: 800px;
}
#services-photo{
top: 470px;
position: relative;
}
}
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
I'm not sure that I understand everything but take a look at this code.
var timeout;
function mouseOver() {
document.getElementById('menu-roll').style.display = 'block';
clearTimeout(timeout);
}
function mouseOut() {
timeout = setTimeout(function() {
document.getElementById('menu-roll').style.display = 'none';
}, 1000);
}
:root {
--backg-primary: #ffeaa7;
--backg-islands: #2d3436;
--nav-wrapper: #4d0404;
--nav-wrapper-hover: #F79F1F;
--menu-roll: rgba(247, 159, 31, 0.95);
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Geneva, Tahoma;
scroll-behavior: smooth;
}
#video-wrapper {
height: 100vh;
width: 100%;
}
#navbar {
background-color: var(--nav-wrapper);
position: fixed;
width: 100%;
transition: top 0.3s;
top: 0;
overflow: visible;
z-index: 7;
}
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
letter-spacing: 1.5px;
}
#navbar a:hover {
transition: background-color .25s ease, color .25s ease;
background-color: var(--nav-wrapper-hover);
color: var(--nav-wrapper);
}
#logo-wrapper {
background: white;
margin: 0 auto;
border: 3.85px solid var(--nav-wrapper);
box-shadow: 0 0 10px #333;
position: relative;
animation: slideup 3s;
width: 200px;
height: 200px;
border-radius: 45%;
}
#keyframes slideup {
0% {
top: 150px;
}
100% {
top: 0;
}
}
#menu-wrapper {
width: 700px;
height: 103px;
background: var(--nav-wrapper);
margin: 0 auto;
border-radius: 50px;
position: relative;
z-index: 8;
}
#logo-wrapper img {
border-radius: 45%;
width: 190px;
height: 190px;
margin: 0 auto;
padding-left: 4px;
}
#video {
position: fixed;
min-width: 100%;
min-height: auto;
}
#menu-roll {
position: absolute;
z-index: 4;
background: var(--nav-wrapper-hover);
width: 150px;
top: 60px;
padding: 15px;
left: 2%;
display: none;
}
#menu-roll #design-line-menu-roll {
height: 4px;
width: 90%;
margin: 0 auto;
background: var(--nav-wrapper);
margin-bottom: 10px;
}
#menu-roll a {
text-decoration: none;
font-size: 1.35em;
text-align: left;
color: var(--nav-wrapper);
font-family: 'Poppins', sans-serif;
}
#menu-roll a:hover {
text-decoration: underline;
}
ul {
list-style-type: none;
}
#h1-menu-tandoor {
color: white;
left: -100%;
top: 12%;
font-size: 1.5em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacity 3.2s;
}
#keyframes textopacity {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#h1-menu-restaurace {
color: white;
left: 110%;
top: 14.5%;
font-size: 1.4em;
z-index: 1;
position: absolute;
opacity: 1.0;
animation: textopacitytwo 3.2s;
}
#keyframes textopacitytwo {
0%,
90% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#information-section {
background: var(--backg-primary);
z-index: 5;
position: relative;
}
#introduction {
padding-top: 50px;
z-index: 5;
position: relative;
text-align: left;
overflow: hidden;
width: 45%;
padding: 50px;
background: #444;
margin: 10px;
box-shadow: 0 0 10px #333;
}
#introduction h1 {
font-size: 3em;
padding-bottom: 10px;
color: #edf3f8;
}
#introduction h3 {
font-size: 1.75em;
border-bottom: 2px solid var(--nav-wrapper);
padding-bottom: 15px;
color: var(--blend-in-text);
}
#introduction p {
color: #edf3f8;
font-size: 1.25em;
padding: 15px 0;
letter-spacing: 1px;
}
#divider {
width: 100%;
height: 40px;
background: var(--nav-wrapper);
position: relative;
z-index: 6;
}
#intro-photos {
position: relative;
z-index: 6;
height: 10px;
}
.first-photo {
width: 36.5%;
height: auto;
left: 62%;
position: relative;
top: -400px;
z-index: 4;
box-shadow: 0 0 10px #333;
border-radius: 50%;
align-items: center;
border: 1px solid rgb(255, 218, 104);
background: rgb(255, 218, 104);
}
#services-info {
height: 407px;
}
#services-photo {
top: 50px;
}
#media screen and (max-width: 700px) {
.first-photo {
left: 12%;
margin: 0 auto;
top: 40px;
width: 76.5%;
padding-top: 15px;
border-radius: 0;
}
#introduction {
width: 60%;
margin: 0 auto;
}
#divider {
margin-bottom: 10px;
}
#services-info {
height: 800px;
}
#services-photo {
top: 470px;
position: relative;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/index.css">
<link rel="shortcut icon" href="styles/favicon.ico.png" />
<title>Tandoor</title>
</head>
<body>
<section id="video-wrapper">
<ul id="navbar">
<li id="menu-hover-roll" onmouseover="mouseOver()" onmouseout="mouseOut()">
Menu
<ul id="menu-roll">
<div id="design-line-menu-roll"></div>
<li>Polední menu</li>
<li>Jídelní lístek</li>
<li>Nápoje</li>
</ul>
</li>
</ul>
<video id="video" autoplay muted loop>
<source src="styles/720p.mp4" type="video/mp4">
</video>
<div id="menu-wrapper">
<div id="logo-wrapper">
<div id="h1-menu-tandoor">
<h1>Tandoor</h1>
</div>
<div id="h1-menu-restaurace">
<h1>Restaurace</h1>
</div>
<img src="styles/tndrlogo.jpg">
</div>
</div>
<div id="menu-roll">
<div id="design-line-menu-roll"></div>
<ul>
<li>
Polední menu
</li>
<li>
Menu
</li>
<li>
Nápojový lístek
</li>
</ul>
</div>
</section>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am having a little problem with my code.
I want when the user clicks on any button it changes its color to the hover color and text color to white.
And when the user click the next button the previous one will come back to its previous state. Is it possible?
#charset "utf-8";
/* CSS Document */
.button {
display: inline-flex;
height: 40px;
width: 90px;
border: 2px solid #1A6893;
margin-top:20px;
color: #1A6893;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
letter-spacing: 1.5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
a {
color: #1A6893;
text-decoration: none;
letter-spacing: 1px;
}
#button-3 {
position: relative;
overflow: hidden;
cursor: pointer;
}
#button-3 a {
position: relative;
transition: all .45s ease-Out;
}
#circle {
width: 0%;
height: 0%;
opacity: 0;
line-height: 40px;
border-radius: 50%;
background: #1A6893;
position: absolute;
transition: all .5s ease-Out;
top: 20px;
left: 70px;
color:#FFF;
}
#button-3:hover #circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
#button-3:hover a {
color: #FFF;
}
.abc{
margin-top:20px;
}
.boxes {
margin: auto;
padding: 50px;
background: #484848;
}
/*Checkboxes styles*/
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
color: #1a6893;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #1a6893;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:active{
color:#039;
background-color:#396;
}
<div class="row" style="padding:0px;">
<div class="col-1"><div class="button" id="button-3" onClick="changeColor();"><div id="circle"></div>Day</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Week</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Month</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Day Sheet</div></div>
</div>
Just add some rules for the "active" state.
Also, I changed all your IDs to classes. You should only provided unique identifiers in the ID attribute.
Furthermore, I changed the button-3:hover .circle rule to button-3:not(.active):hover .circle. This hides the animation of the circle when hovering over "active" buttons.
.button.active {
background-color: #396;
}
.button.active a {
color: #FFF;
}
.button-3:not(.active):hover .circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
Then listen for the click, toggle the "active" class from all buttons:
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.classList.toggle('active', button === e.currentTarget);
}
Example
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.addEventListener('click', handleButtonClick);
});
function handleButtonClick(e) {
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.classList.toggle('active', button === e.currentTarget);
});
}
#charset "utf-8";
/* CSS Document */
.button {
display: inline-flex;
height: 40px;
width: 90px;
border: 2px solid #1A6893;
margin-top: 20px;
color: #1A6893;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
letter-spacing: 1.5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
.button.active {
background-color: #396;
}
.button.active a {
color: #FFF;
}
a {
color: #1A6893;
text-decoration: none;
letter-spacing: 1px;
}
.button-3 {
position: relative;
overflow: hidden;
cursor: pointer;
}
.button-3 a {
position: relative;
transition: all .45s ease-Out;
}
.circle {
width: 0%;
height: 0%;
opacity: 0;
line-height: 40px;
border-radius: 50%;
background: #1A6893;
position: absolute;
transition: all .5s ease-Out;
top: 20px;
left: 70px;
color: #FFF;
}
.button-3:not(.active):hover .circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
.button-3:hover a {
color: #FFF;
}
.abc {
margin-top: 20px;
}
.boxes {
margin: auto;
padding: 50px;
background: #484848;
}
/*Checkboxes styles*/
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
color: #1a6893;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"]+label:last-child {
margin-bottom: 0;
}
input[type="checkbox"]+label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #1a6893;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked+label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:active {
color: #039;
background-color: #396;
}
<div class="row" style="padding:0px;">
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Day</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Week</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Month</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Day Sheet</div>
</div>
</div>
I have a chatbox that shows and hides on click of the button.
As example I have some pages with some buttons that are behind the chatbox.
In this example the button is not clickable.
How do I fix this?
The chatbox isn't even open and still the button is not clickable.
I want the button to be clickable when my chat is closed.
I tried to do this:
.wrap {
bottom: 1em;
display: flex;
flex-direction: column;
position: fixed;
right: 1em;
z-index: -99; //////// doesn't work
}
How is it even in front of my button?
Here you got my chat example with an example button.
const btn = document.querySelector(".js-chat");
const chatBox = document.querySelector(".js-chatbox");
$("#chat-circle").click(function() {
$("#chat-circle").toggle('scale');
$(".chat-box").toggle('scale');
});
$(".chat-box-toggle").click(function() {
$("#chat-circle").toggle('scale');
$(".chat-box").toggle('scale');
});
btn.addEventListener("click", () => {
chatBox.classList.toggle("chatbox--is-visible");
if (chatBox.classList.contains("chatbox--is-visible")) {
btn.innerHTML = '<i class="fa fa-times"></i>';
} else {
btn.innerHTML = '<i class="fa fa-comments"></i>';
}
});
.wrap {
bottom: 1em;
display: flex;
flex-direction: column;
position: fixed;
right: 1em;
}
button{
float: right;
margin-top: 70px;
margin-right: 20px;
}
.btn--chat {
align-self: flex-end;
background: #46A7B3;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.15);
color: #fff !important;
display: block;
font-size: 1.8em;
margin-top: 0.5em;
transition: all 300ms ease;
text-align: center;
height: 60px;
width: 60px;
border-radius: 50%;
}
.btn--chat:hover {
background: #37848e;
}
.chatbox {
border-radius: 0.5em;
opacity: 0;
order: -1;
transition: all 300ms ease;
transform-origin: 100% 100%;
transform: scale(0);
visibility: hidden;
width: 300px;
box-shadow: -2px 2px 15px 4px #222d32;
}
.chatbox__input {
border-radius: 0.5em;
border: 0;
color: #555;
font-size: 0.9rem;
padding: 2em 1em;
position: relative;
resize: none;
}
.chatbox__input:required {
box-shadow: none;
}
.chatbox__submit {
background: none;
border: 0;
bottom: 0.75em;
cursor: pointer;
color: #3e54a4;
font-size: 0.85rem;
position: absolute;
right: 0.5em;
}
.chatbox--is-visible {
opacity: 1;
transform: scale(1);
visibility: visible;
}
.chat-box-header {
background: #46A7B3;
height:30px;
border-top-left-radius:5px;
border-top-right-radius:5px;
color:white;
text-align:center;
font-size:20px;
padding-top:17px;
}
.chat-box-body {
position: relative;
height:300px;
height:auto;
border:1px solid #ccc;
overflow: hidden;
}
.chat-box-body:after {
content: "";
background: blue;
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
height:100%;
position: absolute;
z-index: -1;
}
#chat-input {
background: #f4f7f9;
width:77%;
position:relative;
height:47px;
padding-top:10px;
padding-right:50px;
padding-bottom:10px;
padding-left:15px;
border:none;
resize:none;
outline:none;
border:1px solid #ccc;
color:#888;
border-top:none;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
overflow:hidden;
}
.chat-input > form {
margin-bottom: 0;
}
#chat-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #ccc;
}
#chat-input::-moz-placeholder { /* Firefox 19+ */
color: #ccc;
}
#chat-input:-ms-input-placeholder { /* IE 10+ */
color: #ccc;
}
#chat-input:-moz-placeholder { /* Firefox 18- */
color: #ccc;
}
.chat-submit {
position:absolute;
bottom:5px;
right:10px;
background: transparent;
box-shadow:none;
border:none;
border-radius:50%;
color:#46a7b3;
width:35px;
height:35px;
}
.chat-logs {
padding:15px;
height:170px;
overflow-y:scroll;
background: #939393;
}
.chat-logs::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.chat-logs::-webkit-scrollbar
{
width: 5px;
background-color: #F5F5F5;
}
.chat-logs::-webkit-scrollbar-thumb
{
background-color: #5A5EB9;
}
#media only screen and (max-width: 500px) {
.chat-logs {
height:20vh;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> click me (doesnt work) </button>
<!-- Button trigger modal -->
<div class="wrap">
<button class=" btn btn--chat js-chat"><i class="fa fa-comments"></i></button>
<div class="chatbox js-chatbox">
<div class="chat-box" style="display: block;">
<div class="chat-box-header">
Chat
</div>
<div class="chat-box-body">
<div class="chat-box-overlay">
</div>
<div class="chat-logs">
</div>
</div>
<div class="chat-input">
<input type="text" id="chat-input" placeholder="message" DISABLED AUTOFOCUS>
<button class="chat-submit" id="chat-submit" DISABLED><i class="fa fa-paper-plane"></i></button>
</div>
</div>
<!-- End of .chatbox__form -->
</div>
<!-- End of .chatbox.js-chatbox -->
</div>
<!-- End of .wrapper -->
Scale function is doing that, because it holds its position even if its set to 0 it still has full width and height.. Opacity makes it only invisible but still holds the position.
If you want cool efect, dont use css class and use jquery funcion .fadeToggle().
Using display:none and display:block instead of using opacity should fix the issue.
The problem is with visibility(and opacity) the div is still above the button and prevents the event from reaching the button. with display property the div is completely removed from the DOM!
const btn = document.querySelector(".js-chat");
const chatBox = document.querySelector(".js-chatbox");
$("#chat-circle").click(function() {
$("#chat-circle").toggle('scale');
$(".chat-box").toggle('scale');
});
$(".chat-box-toggle").click(function() {
$("#chat-circle").toggle('scale');
$(".chat-box").toggle('scale');
});
btn.addEventListener("click", () => {
chatBox.classList.toggle("chatbox--is-visible");
if (chatBox.classList.contains("chatbox--is-visible")) {
btn.innerHTML = '<i class="fa fa-times"></i>';
} else {
btn.innerHTML = '<i class="fa fa-comments"></i>';
}
});
.wrap {
bottom: 1em;
display: flex;
flex-direction: column;
position: fixed;
right: 1em;
}
button{
float: right;
margin-top: 70px;
margin-right: 20px;
}
.btn--chat {
align-self: flex-end;
background: #46A7B3;
box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.15);
color: #fff !important;
display: block;
font-size: 1.8em;
margin-top: 0.5em;
transition: all 300ms ease;
text-align: center;
height: 60px;
width: 60px;
border-radius: 50%;
}
.btn--chat:hover {
background: #37848e;
}
.chatbox {
border-radius: 0.5em;
opacity: 0;
order: -1;
transition: all 300ms ease;
transform-origin: 100% 100%;
transform: scale(0);
visibility: hidden;
width: 300px;
box-shadow: -2px 2px 15px 4px #222d32;
display: none;
}
.chatbox__input {
border-radius: 0.5em;
border: 0;
color: #555;
font-size: 0.9rem;
padding: 2em 1em;
position: relative;
resize: none;
}
.chatbox__input:required {
box-shadow: none;
}
.chatbox__submit {
background: none;
border: 0;
bottom: 0.75em;
cursor: pointer;
color: #3e54a4;
font-size: 0.85rem;
position: absolute;
right: 0.5em;
}
.chatbox--is-visible {
opacity: 1;
transform: scale(1);
visibility: visible;
display: block;
}
.chat-box-header {
background: #46A7B3;
height:30px;
border-top-left-radius:5px;
border-top-right-radius:5px;
color:white;
text-align:center;
font-size:20px;
padding-top:17px;
}
.chat-box-body {
position: relative;
height:300px;
height:auto;
border:1px solid #ccc;
overflow: hidden;
}
.chat-box-body:after {
content: "";
background: blue;
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
height:100%;
position: absolute;
z-index: -1;
}
#chat-input {
background: #f4f7f9;
width:77%;
position:relative;
height:47px;
padding-top:10px;
padding-right:50px;
padding-bottom:10px;
padding-left:15px;
border:none;
resize:none;
outline:none;
border:1px solid #ccc;
color:#888;
border-top:none;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
overflow:hidden;
}
.chat-input > form {
margin-bottom: 0;
}
#chat-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #ccc;
}
#chat-input::-moz-placeholder { /* Firefox 19+ */
color: #ccc;
}
#chat-input:-ms-input-placeholder { /* IE 10+ */
color: #ccc;
}
#chat-input:-moz-placeholder { /* Firefox 18- */
color: #ccc;
}
.chat-submit {
position:absolute;
bottom:5px;
right:10px;
background: transparent;
box-shadow:none;
border:none;
border-radius:50%;
color:#46a7b3;
width:35px;
height:35px;
}
.chat-logs {
padding:15px;
height:170px;
overflow-y:scroll;
background: #939393;
}
.chat-logs::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.chat-logs::-webkit-scrollbar
{
width: 5px;
background-color: #F5F5F5;
}
.chat-logs::-webkit-scrollbar-thumb
{
background-color: #5A5EB9;
}
#media only screen and (max-width: 500px) {
.chat-logs {
height:20vh;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button> click me (doesnt work) </button>
<!-- Button trigger modal -->
<div class="wrap">
<button class=" btn btn--chat js-chat"><i class="fa fa-comments"></i></button>
<div class="chatbox js-chatbox">
<div class="chat-box" style="display: block;">
<div class="chat-box-header">
Chat
</div>
<div class="chat-box-body">
<div class="chat-box-overlay">
</div>
<div class="chat-logs">
</div>
</div>
<div class="chat-input">
<input type="text" id="chat-input" placeholder="message" DISABLED AUTOFOCUS >
<button class="chat-submit" id="chat-submit" DISABLED><i class="fa fa-paper-plane"></i></button>
</div>
</div>
<!-- End of .chatbox__form -->
</div>
<!-- End of .chatbox.js-chatbox -->
</div>
<!-- End of .wrapper -->
I generate dynamic span elements on "Link", "FistName", "LastName" buttons thanks to onclick event. The problem is that I would like to create these spans based on cursor position. I found a script on Internet and changed it to adapt in my function editTag() but no success. Did I miss something in this script or?
Edit: I just founded a similar question, tried to adapt my code, but I still get the problem, impossible to add the span based on cursor position! :/
Inserting a text where cursor is using Javascript/jquery
var area = document.getElementById("template");
var message = document.getElementById("message");
var maxLength = 160;
var re = new RegExp("ô|â|ê|ç");
var myTags = new Object();
var cursorPosition = 0;
var smsNode = null;
myTags['company'] = '#ENTREPRISE#';
myTags['city'] = '#VILLE#';
myTags['link'] = '#LIEN#';
myTags['firstname'] = '#PRENOM#';
myTags['lastname'] = '#NOM#';
myTags['title'] = '#TITRE#';
$("#smsArea").on('keyup mouseup',function(e)
{
//console.log(window.getSelection().anchorOffset);
/*if(this.hasChildNodes())
{
var node = this.childNodes;
console.log(node);
}*/
/*smsNode = this.textContent;
console.log(smsNode);*/
/*if($(window.getSelection().anchorNode).is($(this)))
{
cursorPosition = 0;
}
else
{*/
cursorPosition = window.getSelection().getRangeAt(0);
var smsNode = cursorPosition;
console.log(cursorPosition);
//}
});
function insertAfter(referenceNode, newNode)
{
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function editTag(zoneId,tag,button)
{
var btnSms = document.getElementById(button.id);
var zoneDiv = document.getElementById(zoneId + 'Area');
var myButton = document.getElementById(zoneId + tag.ucfirst());
var myLabel = document.createElement('span');
var labels = zoneDiv.getElementsByTagName('span');
var spanSize = labels.length;
var delflag = 0;
var delIndex = 0;
var textNode = document.createTextNode('\u00A0');
//var spanSpace = " ";
/*if(btnSms)
{
btnSms.classList.toggle("btn-danger");
}
else
{
btnSms.classList.toggle("btn-success");
}*/
if(spanSize != 0)
{
for (myLabId = 0; myLabId < spanSize; myLabId++)
{
var currentLabel = labels[myLabId];
if(currentLabel.innerHTML === myButton.innerHTML)
{
delflag = 1;
delIndex = myLabId;
}
}
}
if(delflag == 1)
{
btnSms.classList.remove("btn-danger");
btnSms.classList.add("btn-default");
zoneDiv.removeChild(labels[delIndex]);
}
else
{
myLabel.setAttribute('class', 'label label-info');
myLabel.setAttribute('data-effect', 'pop');
myLabel.setAttribute('contentEditable', 'false');
myLabel.setAttribute('style','cursor:move;font-size:100%;');
myLabel.setAttribute('name', tag);
myLabel.setAttribute('id', 'tag');
myLabel.setAttribute('draggable', 'true');
myLabel.innerHTML = myButton.innerHTML;
zoneDiv.appendChild(myLabel);
//zoneDiv.appendChild(textNode);
//document.getElementById(myLabel).insertAfter(textNode);
insertAfter(myLabel, textNode);
btnSms.classList.add("btn-danger");
}
//Clean breaklines;
var bks = zoneDiv.getElementsByTagName('br');
var brSize = bks.length;
if(brSize != 0)
{
zoneDiv.removeChild(bks[0]);
}
//Event keyboard on deleted elements
$("span").dblclick(function(handler)
{
myLabel.remove(labels[delIndex]);
btnSms.classList.remove("btn-danger");
btnSms.classList.add("btn-default");
});
}
String.prototype.ucfirst = function() {
return this.charAt(0).toUpperCase() + this.substr(1);
}
#smsArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 150px;
overflow: auto;
padding: 5px;
resize: both;
width: 100%;
}
.smstext {
/* margin-top: 100px;*/
margin-left: 60px;
margin-right: 20px;
padding-top: 30px;
font-family: verdana, sans-serif;
}
#mailArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
.mailInput {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
overflow: auto;
padding: 5px;
resize: both;
font-size: 12px;
margin-top: 5px;
width: 300px;
height: 85px;
margin-left: 100px;
margin-top: -20px;
}
.mailtext {
/* margin-top: 100px;*/
margin-left: 60px;
margin-right: 20px;
padding-top: 30px;
font-family: verdana, sans-serif;
}
#webtag {
margin-top: -392px;
margin-left: 555px;
width: 569px;
}
#result {
display: none;
}
#interaction {
margin-top: 30px;
visibility: hidden;
}
#cd-popup {
background-color: rgba(94, 110, 141, 0.9);
opacity: 1;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
position: relative;
width: 100%;
max-width: 800px;
height: 350px;
margin: 4em auto;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
z-index: 1;
}
#cd-popup.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
#cd-popup p {
padding: 3em 1em;
margin-left: -250px;
height: 100px;
}
#cd-popup div {
float: left;
width: 30%;
list-style: none;
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #FFF;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
#object {
background: #fc7169;
border-radius: 0 0 0 .25em;
width: 175px;
margin-left: -400px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
}
#object:hover {
background-color: #fc8982;
}
#body {
background: #6495ED;
border-radius: 0 0 0 .25em;
width: 175px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
margin-left: -150px;
}
#body:hover {
background-color: #fc8982;
}
#titre {
background: #A52A2A;
border-radius: 0 0 0 .25em;
width: 175px;
margin-left: 10px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
}
#titre:hover {
background-color: #fc8982;
}
#note {
background: #006400;
border-radius: 0 0 0 .25em;
width: 175px;
margin-left: 10px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
}
#cd-popup #note:hover {
background-color: lightsteelblue;
}
#cd-popup .cd-popup-close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
}
#cd-popup .cd-popup-close::before,
#cd-popup .cd-popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
#cd-popup .cd-popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
#cd-popup .cd-popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
#media only screen and (min-width: 1170px) {
#cd-popup {
margin: 8em auto;
}
}
.webArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 520px;
/*overflow: auto;*/
padding: 5px;
/*resize: both;*/
width: 630px;
font-size: 12px;
/*margin-top: 55px;*/
border: 2px dashed #D9D9D9;
border-radius: 5px;
text-align: center;
margin-top: 12%;
}
.webArea>div {
background-color: #FAEBD7;
border: 3px dashed #D9D9D9;
margin-bottom: 15px;
height: 120px;
width: 612px;
overflow: auto;
overflow-x: hidden;
/* margin-left: -1.5%;*/
}
.webArea>div>div {
transition: all .5s;
text-align: center;
float: left;
padding: 1em;
margin: 0 1em 1em 0;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-radius: 5px;
border: 2px solid black;
/*background: #F7F7F7;*/
transition: all .5s ease;
width: 582px;
/*background-color: #F8F8FF;*/
height: 110px;
}
.dropTarget>div>div>span {
font-style: italic;
margin-right: 5%;
font-size: 16px;
}
.webArea>div>div>input {
margin-right: 25%;
width: 250px;
height: 40px;
background-color: white;
}
.webArea>div>div:active {
/*-webkit-animation: wiggle 0.3s 0s infinite ease-in;
animation: wiggle 0.3s 0s infinite ease-in;*/
opacity: .6;
border: 2px solid #000;
}
#mailArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
#containerZone {
border: 1px solid;
border-radius: 25px;
*/ margin: 3%;
width: 70%;
height: 40px;
text-align: center;
font-weight: bold;
color: #000000;
margin: auto;
margin-top: 8%;
margin-left: -450px;
}
#containerZone2 {
border: 1px solid;
border-radius: 25px;
width: 70%;
height: 40px;
text-align: center;
font-weight: bold;
color: #000000;
margin: auto;
margin-top: 100%;
margin-left: -450px;
}
#webtags {
margin-top: -40px;
}
#webtags>div {
margin-left: 20px;
}
#modalTagBody {
height: 120px;
}
#btnTag {
margin-top: 20px;
margin-right: 15px;
}
<html>
<head>
<meta charset="utf-8">
<title>Drag & drop Tag</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
</head>
<body>
<div class="container mtb">
<div class="row">
<TMPL_IF NAME="PROFILE">
<form role="form" action="<TMPL_VAR NAME=MYURL>?rm=saveTemplate" method="POST" enctype="application/x-www-form-urlencoded">
<TMPL_LOOP NAME="DATA">
<input type="hidden" id='id' name="id" value="<TMPL_VAR NAME=ID>" />
<TMPL_IF NAME="TEMPLATE">
<div class="panel panel-primary" id="panels" data-effect="helix">
<div class="panel-heading">SMS Message</div>
<div class="panel-body">
<div class="col-lg-6">
<div class="form-group">
</div>
<input type="hidden" name="rm" value="saveTemplate" />
<div id="smsArea" class="form-control" contenteditable="true">
<p id="smsDraft">
<TMPL_VAR NAME=TEMPLATE>
</p>
</div><br />
<div>position: <span id="position"></span></div>
Save
Preview
SMS Costs
<br>
</div>
<div class="col-lg-6" id='smsTags'>
<h4 for="template">Personnalization</h4>
<span class="btn btn-default" onClick="editTag('sms','link', this)" id="smsLink" title="link of your website" draggable="true">Link</span>
<span class="btn btn-default" onClick="editTag('sms','firstname',this)" id="smsFirstname" title="your firstname" draggable="true">Firstname</span>
<span class="btn btn-default" onClick="editTag('sms','lastname',this)" id="smsLastname" title="your lastname" draggable="true">Lastname</span>
</div>
<div class="col-lg-6" style="margin-top: 30px">
</div>
</div>
</TMPL_LOOP>
</div>
<! --/row -->
</div>
<! --/container -->
</div>
</body>
</html>
Get cursor position with pageX, pageY.
Here is the demo:
stage = document.querySelector('.stage')
stage.addEventListener('click', e => {
let spanEl = document.createElement('span')
spanEl.style.top = e.pageY + 'px'
spanEl.style.left = e.pageX + 'px'
spanEl.style.background = '#'+(Math.random()*0xFFFFFF<<0).toString(16)
stage.appendChild(spanEl)
e.preventDefault()
})
body {
margin: 0;
}
div.stage {
background: yellow;
width: 100%;
min-height: 300px;
padding: 0;
overflow: hidden;
position: relative;
}
span {
position: absolute;
width: 30px;
height: 20px;
background-color:teal;
}
<div class="stage">
click to add
</div>
Finally, I have found a solution to my problem !
I have to replace the method window.getSelection().anchorOffset by window.getSelection().getRangeAt(0) to get the cursor position when entering text in the area and to get also the node on which I was working on, to save these results into cursorPosition variable.
And after, I had to use again this variable in editTag() function to insert the span tag according to the cursor position, by doing : cursorPosition.insertNode(myLabel);
var area = document.getElementById("template");
var message = document.getElementById("message");
var maxLength = 160;
var re = new RegExp("ô|â|ê|ç");
var myTags = new Object();
var cursorPosition = 0;
var smsNode = null;
myTags['company'] = '#ENTREPRISE#';
myTags['city'] = '#VILLE#';
myTags['link'] = '#LIEN#';
myTags['firstname'] = '#PRENOM#';
myTags['lastname'] = '#NOM#';
myTags['title'] = '#TITRE#';
$("#smsArea").on('keyup mouseup',function(e)
{
//console.log(window.getSelection().anchorOffset);
/*if(this.hasChildNodes())
{
var node = this.childNodes;
console.log(node);
}*/
/*smsNode = this.textContent;
console.log(smsNode);*/
/*if($(window.getSelection().anchorNode).is($(this)))
{
cursorPosition = 0;
}
else
{*/
cursorPosition = window.getSelection().getRangeAt(0);
//console.log(cursorPosition);
//}
});
function insertAfter(referenceNode, newNode)
{
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
function editTag(zoneId,tag,button)
{
var btnSms = document.getElementById(button.id);
var zoneDiv = document.getElementById(zoneId + 'Area');
var myButton = document.getElementById(zoneId + tag.ucfirst());
var myLabel = document.createElement('span');
var labels = zoneDiv.getElementsByTagName('span');
var spanSize = labels.length;
var delflag = 0;
var delIndex = 0;
var textNode = document.createTextNode('\u00A0');
/*if(btnSms)
{
btnSms.classList.toggle("btn-danger");
}
else
{
btnSms.classList.toggle("btn-success");
}*/
if(spanSize != 0)
{
for (myLabId = 0; myLabId < spanSize; myLabId++)
{
var currentLabel = labels[myLabId];
if(currentLabel.innerHTML === myButton.innerHTML)
{
delflag = 1;
delIndex = myLabId;
}
}
}
if(delflag == 1)
{
btnSms.classList.remove("btn-danger");
btnSms.classList.add("btn-default");
zoneDiv.removeChild(labels[delIndex]);
}
else
{
myLabel.setAttribute('class', 'label label-info');
myLabel.setAttribute('data-effect', 'pop');
myLabel.setAttribute('contentEditable', 'false');
myLabel.setAttribute('style','cursor:move;font-size:100%;');
myLabel.setAttribute('name', tag);
myLabel.setAttribute('id', 'tag');
myLabel.setAttribute('draggable', 'true');
myLabel.innerHTML = myButton.innerHTML;
//zoneDiv.appendChild(myLabel);
cursorPosition.insertNode(myLabel);
console.log(cursorPosition);
//zoneDiv.appendChild(textNode);
//document.getElementById(myLabel).insertAfter(textNode);
insertAfter(myLabel, textNode);
btnSms.classList.add("btn-danger");
}
//Clean breaklines;
var bks = zoneDiv.getElementsByTagName('br');
var brSize = bks.length;
if(brSize != 0)
{
zoneDiv.removeChild(bks[0]);
}
//Event keyboard on deleted elements
$("span").dblclick(function(handler)
{
myLabel.remove(labels[delIndex]);
btnSms.classList.remove("btn-danger");
btnSms.classList.add("btn-default");
});
}
String.prototype.ucfirst = function() {
return this.charAt(0).toUpperCase() + this.substr(1);
}
#smsArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 150px;
overflow: auto;
padding: 5px;
resize: both;
width: 100%;
}
.smstext {
/* margin-top: 100px;*/
margin-left: 60px;
margin-right: 20px;
padding-top: 30px;
font-family: verdana, sans-serif;
}
#mailArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
.mailInput {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
overflow: auto;
padding: 5px;
resize: both;
font-size: 12px;
margin-top: 5px;
width: 300px;
height: 85px;
margin-left: 100px;
margin-top: -20px;
}
.mailtext {
/* margin-top: 100px;*/
margin-left: 60px;
margin-right: 20px;
padding-top: 30px;
font-family: verdana, sans-serif;
}
#webtag {
margin-top: -392px;
margin-left: 555px;
width: 569px;
}
#result {
display: none;
}
#interaction {
margin-top: 30px;
visibility: hidden;
}
#cd-popup {
background-color: rgba(94, 110, 141, 0.9);
opacity: 1;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
position: relative;
width: 100%;
max-width: 800px;
height: 350px;
margin: 4em auto;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
/* Force Hardware Acceleration in WebKit */
-webkit-backface-visibility: hidden;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
z-index: 1;
}
#cd-popup.is-visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0s;
transition: opacity 0.3s 0s, visibility 0s 0s;
}
#cd-popup p {
padding: 3em 1em;
margin-left: -250px;
height: 100px;
}
#cd-popup div {
float: left;
width: 30%;
list-style: none;
display: block;
height: 60px;
line-height: 60px;
text-transform: uppercase;
color: #FFF;
-webkit-transition: background-color 0.2s;
-moz-transition: background-color 0.2s;
transition: background-color 0.2s;
}
#object {
background: #fc7169;
border-radius: 0 0 0 .25em;
width: 175px;
margin-left: -400px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
}
#object:hover {
background-color: #fc8982;
}
#body {
background: #6495ED;
border-radius: 0 0 0 .25em;
width: 175px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
margin-left: -150px;
}
#body:hover {
background-color: #fc8982;
}
#titre {
background: #A52A2A;
border-radius: 0 0 0 .25em;
width: 175px;
margin-left: 10px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
}
#titre:hover {
background-color: #fc8982;
}
#note {
background: #006400;
border-radius: 0 0 0 .25em;
width: 175px;
margin-left: 10px;
cursor: pointer;
padding: 3px 6px;
display: inline-block;
}
#cd-popup #note:hover {
background-color: lightsteelblue;
}
#cd-popup .cd-popup-close {
position: absolute;
top: 8px;
right: 8px;
width: 30px;
height: 30px;
}
#cd-popup .cd-popup-close::before,
#cd-popup .cd-popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
#cd-popup .cd-popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
#cd-popup .cd-popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
#media only screen and (min-width: 1170px) {
#cd-popup {
margin: 8em auto;
}
}
.webArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 520px;
/*overflow: auto;*/
padding: 5px;
/*resize: both;*/
width: 630px;
font-size: 12px;
/*margin-top: 55px;*/
border: 2px dashed #D9D9D9;
border-radius: 5px;
text-align: center;
margin-top: 12%;
}
.webArea>div {
background-color: #FAEBD7;
border: 3px dashed #D9D9D9;
margin-bottom: 15px;
height: 120px;
width: 612px;
overflow: auto;
overflow-x: hidden;
/* margin-left: -1.5%;*/
}
.webArea>div>div {
transition: all .5s;
text-align: center;
float: left;
padding: 1em;
margin: 0 1em 1em 0;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border-radius: 5px;
border: 2px solid black;
/*background: #F7F7F7;*/
transition: all .5s ease;
width: 582px;
/*background-color: #F8F8FF;*/
height: 110px;
}
.dropTarget>div>div>span {
font-style: italic;
margin-right: 5%;
font-size: 16px;
}
.webArea>div>div>input {
margin-right: 25%;
width: 250px;
height: 40px;
background-color: white;
}
.webArea>div>div:active {
/*-webkit-animation: wiggle 0.3s 0s infinite ease-in;
animation: wiggle 0.3s 0s infinite ease-in;*/
opacity: .6;
border: 2px solid #000;
}
#mailArea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
height: 200px;
overflow: auto;
padding: 5px;
resize: both;
width: 500px;
font-size: 12px;
margin-top: 5px;
}
#containerZone {
border: 1px solid;
border-radius: 25px;
*/ margin: 3%;
width: 70%;
height: 40px;
text-align: center;
font-weight: bold;
color: #000000;
margin: auto;
margin-top: 8%;
margin-left: -450px;
}
#containerZone2 {
border: 1px solid;
border-radius: 25px;
width: 70%;
height: 40px;
text-align: center;
font-weight: bold;
color: #000000;
margin: auto;
margin-top: 100%;
margin-left: -450px;
}
#webtags {
margin-top: -40px;
}
#webtags>div {
margin-left: 20px;
}
#modalTagBody {
height: 120px;
}
#btnTag {
margin-top: 20px;
margin-right: 15px;
}
<html>
<head>
<meta charset="utf-8">
<title>Drag & drop Tag</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
</head>
<body>
<div class="container mtb">
<div class="row">
<TMPL_IF NAME="PROFILE">
<form role="form" action="<TMPL_VAR NAME=MYURL>?rm=saveTemplate" method="POST" enctype="application/x-www-form-urlencoded">
<TMPL_LOOP NAME="DATA">
<input type="hidden" id='id' name="id" value="<TMPL_VAR NAME=ID>" />
<TMPL_IF NAME="TEMPLATE">
<div class="panel panel-primary" id="panels" data-effect="helix">
<div class="panel-heading">SMS Message</div>
<div class="panel-body">
<div class="col-lg-6">
<div class="form-group">
</div>
<input type="hidden" name="rm" value="saveTemplate" />
<div id="smsArea" class="form-control" contenteditable="true">
<p id="smsDraft">
<TMPL_VAR NAME=TEMPLATE>
</p>
</div><br />
<div>position: <span id="position"></span></div>
Save
Preview
SMS Costs
<br>
</div>
<div class="col-lg-6" id='smsTags'>
<h4 for="template">Personnalization</h4>
<span class="btn btn-default" onClick="editTag('sms','link', this)" id="smsLink" title="link of your website" draggable="true">Link</span>
<span class="btn btn-default" onClick="editTag('sms','firstname',this)" id="smsFirstname" title="your firstname" draggable="true">Firstname</span>
<span class="btn btn-default" onClick="editTag('sms','lastname',this)" id="smsLastname" title="your lastname" draggable="true">Lastname</span>
</div>
<div class="col-lg-6" style="margin-top: 30px">
</div>
</div>
</TMPL_LOOP>
</div>
<! --/row -->
</div>
<! --/container -->
</div>
</body>
</html>
I am currently building a Rails app. In my app, I show flash message using Bootstrap's CSS on alert. I am not fully using Bootstrap's CSS but adding only related to alert in my app due to overlap in CSS.
CSS for flash works fine for normal desktop screen. It's position is centered and fixed. Image below:
However, when I populate the flash on mobile screen (lesser than 500px), then it is off-centered to left no matter what I do. Image below:
I am confused why this is happening. Just like the descktop screen, I would like to fix the position of flash in mobile screen and always populate on a same place.
Following is the view code I have for the flash
<div id="flash-message-wrapper">
<% flash.each do |type, message| %>
<div class="alert <%= alert_class_for(type) %> alert-dismissible fade in">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<%= message %>
<% end %>
</div>
The CSS for this code is :
.alert {
padding: 15px;
margin-bottom: 20px;
border: 1px solid transparent;
border-radius: 4px;
}
.alert h4 {
margin-top: 0;
color: inherit;
}
.alert .alert-link {
font-weight: bold;
}
.alert > p,
.alert > ul {
margin-bottom: 0;
}
.alert > p + p {
margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-success hr {
border-top-color: #c9e2b3;
}
.alert-success .alert-link {
color: #2b542c;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-info hr {
border-top-color: #a6e1ec;
}
.alert-info .alert-link {
color: #245269;
}
.alert-warning {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
}
.alert-warning hr {
border-top-color: #f7e1b5;
}
.alert-warning .alert-link {
color: #66512c;
}
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
}
.alert-danger hr {
border-top-color: #e4b9c0;
}
.alert-danger .alert-link {
color: #843534;
}
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.fade.in {
opacity: 1;
}
.close {
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}
button.close {
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip: auto;
}
#flash-message-wrapper {
position: fixed;
top: 50px;
left: 50%;
margin-left: -250px;
width: 600px;
}
#media (max-width: 500px) {
#flash-message-wrapper {
position: fixed;
top: 50px;
right: 50%;
margin-right: -250px;
width: 300px;
}
}
Any help would be appreciated!
You need to change the style of #flash-message-wrapper to this
#flash-message-wrapper {
width: 600px;
margin: 10px auto 0 auto;
}
#media (max-width: 500px) {
#flash-message-wrapper {
width: 300px;
margin: 10px auto 0 auto;
}
}
Here is a working fiddle. Hope this helps.
Update
If you want to hover your notification you need to add these following properties to your existing styles.
position: absolute;
left: 0;
right: 0;
Updated fiddle.