I have written a html-css-js code for an animated button spinner which works fine in any other console after clicking (as you can see in the recording), but the js part is not working on the wordpress page. Does anybody happen to know the solution? Is there something I'm doing wrong?
Screen recording of the issue:
https://drive.google.com/file/d/1jFiKFy06a1P85Uh0HhJsB-RV9NoJbF8V/view?usp=share_link
console.log message shows in inspector, so the js code should be working!
I even tested it on another websites while all plugins were deactivated.
Source code:
const theButton = document.querySelector(".button-motion");
theButton.addEventListener("click", () => {
theButton.classList.add("button--loading");
});
.button-motion {
width: 80px;
text-align: center;
position: relative;
padding: 5px 20px;
background: #ffffff !important;
border: 1;
outline: none;
border-width: thin !important;
border-color: #ddc8a8 !important;
border-radius: 5px;
cursor: pointer;
}
.button-motion:hover {
background: #ffffff !important;
}
.button-motion:active {
background: #ffffff !important;
}
.button__text {
font: 13px "arial", sans;
color: #ad7d4e;
transition: all 0s;
background: #ffffff !important;
}
.button--loading .button__text {
background: #ffffff !important;
visibility: hidden;
opacity: 0;
}
.button--loading::after {
content: "";
background: #ffffff !important;
position: absolute;
width: 16px;
height: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 1.5px solid transparent;
border-top-color: #ad7d4e;
border-radius: 70%;
animation: button-loading-spinner 1s linear infinite;
}
#keyframes button-loading-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<body>
<center>
<button type="button" class="button-motion">
<span class="button__text">Boka</span>
</button>
</center>
</body>
Related
This question already has answers here:
jQuery $(this) keyword
(6 answers)
Closed 1 year ago.
I'm usually good with searching for my answer, but I can't seem to get this right. The setup I have for this pop-up is perfect (responsive, plays well with what's inside (shortcode) etc.) the problem I'm having is because I've retrofitted from a codepen, it's made for just 1 pop-up per page.
I'm trying to create a project gallery wherein they click an anchor and a container with a slider inside shows the project's work (it works perfectly, just for one popup) but with say potentially 15 project galleries (pop-ups) per page.
I'm a novice with regards to jQuery, so please be easy on me I am ALWAYS learning.
The HTML
jQuery(document).ready(function( $ ){
jQuery(document).ready(function($){
//open popup
$('.popup-trigger').on('click', function(event){
event.preventDefault();
$('.popup').addClass('is-visible');
});
//close popup
$('.popup').on('click', function(event){
if( $(event.target).is('.popup-close') || $(event.target).is('.popup') ) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});
//close popup when clicking the esc keyboard button
$(document).keyup(function(event){
if(event.which=='27'){
$('.popup').removeClass('is-visible');
}
});
});
});
#media(max-width:1150px) {
.popup-container{
top: 25% !important;
width: 90% !important;
height: 50%;
padding: 2rem !important;
}
}
.page-id-474 main#content{
margin: 0px !important
}
.popup-trigger {
width: 170px;
right: 2rem;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 18px;
padding:1rem 2rem;
text-decoration:none;
transition:300ms all;
}
.popup-trigger:hover {
opacity:.8;
}
.popup1 {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup1.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup-container {
transform:translateY(-50%);
transition:500ms all;
position: relative;
width: 60%;
margin: 2em auto;
top: 5%;
padding:5rem;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.is-visible .popup-container {
transform:translateY(0);
transition:500ms all;
}
.popup-container .popup-close {
position: absolute;
top: 8px;
font-size:0;
right: 8px;
width: 30px;
height: 30px;
}
.popup-container .popup-close::before,
.popup-container .popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.popup-container .popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.popup-container .popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.popup-container .popup-close:hover:before,
.popup-container .popup-close:hover:after {
background-color:#35a785;
transition:300ms all;
}
/*==========================================================================
Site grid
========================================================================== */
.grid-this {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
padding: 30px;
}
.grid-this.with-spacing {
gap: 30px;
}
.grid-this .block img {
width: 100%;
height: auto;
vertical-align: top;
}
/* Grid spacing in slick slider */
.grid-this.with-spacing .slick-slide {
margin-right: 30px;
}
.grid-this.with-spacing .slick-list {
margin-right: -30px;
}
#media(max-width:1150px) {
.grid-this.with-spacing .slick-slide {
margin-right: 0;
}
.grid-this.with-spacing .slick-list {
margin-right: 0;
}
.page-id-324 .site-container{
padding-left: 8px !important;
padding-right: 8px !important;
}
}
/* -------------------------------------------------------------
/
/ Main Cat Container
/
/ -------------------------------------------------------------*/
.main-cat-container{
Padding: 0px;
background-color: #fff;
border-style: solid;
border-width: 3px;
border-color:#e9ecf2;
transition:all 1s ease !important;
}
.main-cat-container:hover{
box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
transition:all 1s ease !important;
}
.main-cat-title{
padding-top: 12px;
font-size:22px;
color:#38507b;
text-align: center;
}
.main-cat-container:hover i{
color:#0e1932;
}
.mc-icons{
text-align: center;
}
.mc-icons i{
font-size:45px;
}
.choice-p{
color:#343a40;
font-size:22px;
font-weight: bold;
}
.custom-hr-spacing{
margin-top: 45px !important;
margin-bottom: 45px !important;
}
.faux-btn-container{
text-align: center !important;
margin-top: 20px !important;
}
.faux-btn{
background-color:#4cb150;
padding: 15px 35px;
color: #FFF;
transition:all 1s ease !important;
border-radius: 8px;
}
.faux-btn:hover{
background-color:#59cf5d;
transition:all 1s ease !important;
}
<div class="grid-this with-spacing margins-fix">
<div>
<a href="#0" id="info" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg" width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[metaslider id="2409"]
</div>
</div>
</div>
<div><a href="#0" id="info" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg" width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[metaslider id="2409"]
</div>
</div>
</div>
<div>.</div>
</div>
I've also created a code pen to visually show you the issue:
https://codepen.io/John_Barbagallo/pen/dyVXOvV
Any help is much appreciated!
Your html code has a syntax error. The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. See details
Why are you nesting these 2 pieces of code:
jQuery(document).ready(function( $ ){
jQuery(document).ready(function($){
})
})
I think you should remove the part of the code that is duplicated.
$('.popup').addClass('is-visible'); this code means that all html elements containing the class popup will be added an is-visible class. This is lead to your error.
You should Jquery traversing to find popup belong to project clicked
Change it like this:
$('.popup-trigger').on('click', function(event){
event.preventDefault();
$(this).parent().find('.popup').addClass('is-visible');
});
All code here:
$(document).ready(function(){
//open popup
$('.popup-trigger').on('click', function(event){
event.preventDefault();
$(this).parent().find('.popup').addClass('is-visible');
});
//close popup
$('.popup').on('click', function(event){
if( $(event.target).is('.popup-close') || $(event.target).is('.popup') ) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});
//close popup when clicking the esc keyboard button
$(document).keyup(function(event){
if(event.which=='27'){
$('.popup').removeClass('is-visible');
}
});
});
#media(max-width:1150px) {
.popup-container{
top: 25% !important;
width: 90% !important;
height: 50%;
padding: 2rem !important;
}
}
.page-id-474 main#content{
margin: 0px !important
}
.popup-trigger {
width: 170px;
right: 2rem;
margin: 3em auto;
text-align: center;
color: #FFF;
font-size: 18px;
padding:1rem 2rem;
text-decoration:none;
transition:300ms all;
}
.popup-trigger:hover {
opacity:.8;
}
.popup1 {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup1.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup {
position: fixed;
left: 0;
top: 0;
height: 100%;
z-index: 1000;
width: 100%;
background-color: rgba(56, 56, 55, 0.9);
opacity: 0;
visibility: hidden;
transition:500ms all;
}
.popup.is-visible {
opacity: 1;
visibility: visible;
transition:1s all;
}
.popup-container {
transform:translateY(-50%);
transition:500ms all;
position: relative;
width: 60%;
margin: 2em auto;
top: 5%;
padding:5rem;
background: #FFF;
border-radius: .25em .25em .4em .4em;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.is-visible .popup-container {
transform:translateY(0);
transition:500ms all;
}
.popup-container .popup-close {
position: absolute;
top: 8px;
font-size:0;
right: 8px;
width: 30px;
height: 30px;
}
.popup-container .popup-close::before,
.popup-container .popup-close::after {
content: '';
position: absolute;
top: 12px;
width: 14px;
height: 3px;
background-color: #8f9cb5;
}
.popup-container .popup-close::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
left: 8px;
}
.popup-container .popup-close::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
right: 8px;
}
.popup-container .popup-close:hover:before,
.popup-container .popup-close:hover:after {
background-color:#35a785;
transition:300ms all;
}
/*==========================================================================
Site grid
========================================================================== */
.grid-this {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
padding: 30px;
}
.grid-this.with-spacing {
gap: 30px;
}
.grid-this .block img {
width: 100%;
height: auto;
vertical-align: top;
}
/* Grid spacing in slick slider */
.grid-this.with-spacing .slick-slide {
margin-right: 30px;
}
.grid-this.with-spacing .slick-list {
margin-right: -30px;
}
#media(max-width:1150px) {
.grid-this.with-spacing .slick-slide {
margin-right: 0;
}
.grid-this.with-spacing .slick-list {
margin-right: 0;
}
.page-id-324 .site-container{
padding-left: 8px !important;
padding-right: 8px !important;
}
}
/* -------------------------------------------------------------
/
/ Main Cat Container
/
/ -------------------------------------------------------------*/
.main-cat-container{
Padding: 0px;
background-color: #fff;
border-style: solid;
border-width: 3px;
border-color:#e9ecf2;
transition:all 1s ease !important;
}
.main-cat-container:hover{
box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 10px 13px -4px rgba(0,0,0,0.3);
transition:all 1s ease !important;
}
.main-cat-title{
padding-top: 12px;
font-size:22px;
color:#38507b;
text-align: center;
}
.main-cat-container:hover i{
color:#0e1932;
}
.mc-icons{
text-align: center;
}
.mc-icons i{
font-size:45px;
}
.choice-p{
color:#343a40;
font-size:22px;
font-weight: bold;
}
.custom-hr-spacing{
margin-top: 45px !important;
margin-bottom: 45px !important;
}
.faux-btn-container{
text-align: center !important;
margin-top: 20px !important;
}
.faux-btn{
background-color:#4cb150;
padding: 15px 35px;
color: #FFF;
transition:all 1s ease !important;
border-radius: 8px;
}
.faux-btn:hover{
background-color:#59cf5d;
transition:all 1s ease !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid-this with-spacing margins-fix">
<div>
<a href="#0" id="project01" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img
src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg"
width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[project01]
</div>
</div>
</div>
<div>
<a href="#0" id="project02" class="info popup-trigger" title="info">
<div style="padding-bottom: 50px;" class="main-cat-container">
<div class="mc-icons" data-aos="flip-left" data-aos-delay="50" aos-duration="500"><img
src="https://gilbert.level10designdev.com/wp-content/uploads/2021/12/Gilbert-Design-Build-Before-After-Kitchen-Remodel-Bradenton-Florida.jpg"
width=100% height=auto></div>
<h3 class="main-cat-title">vEITH</h3>
<div class="faux-btn-container"><span class="faux-btn">See Project</span></div>
</div>
</a>
<div class="popup" role="alert">
<div class="popup-container">
Close
[project02]
</div>
</div>
</div>
<div>.</div>
</div>
Hi what you need is to get the clicker, then find the pop in the parent of the clicker see below:
//open popup
$('.popup-trigger').on('click', function(event){
event.preventDefault();
// Next line is what changed.
$(this).parent().find(".popup").addClass('is-visible');
});
I used this reference:
https://stackoverflow.com/a/53108600
to close an outer v-tooltip on an inner v-tooltip hover.
The problem is that this approach is only elegant when there is one container to deal with.
When you start to have many containers then you have to create a data variable in vue for each one.
Code sample:
https://jsfiddle.net/jyts1fug/6/
As shown in the fiddle I now have 2 variables, isOpen and isOpen2.
I would like to find a more elegant solution for this.
You need something to track which elements are open and which isn't. This will rely heavily on the existing data structure you are using.
In the case, in your code sample, I would do something like the following:
Note: index+'inner' is not a very clean way, it's just for demonstration. You can choose whatever variable inside the loop to track by. like user Id and user posts Ids for example.
console.clear()
new Vue({
el: '#app',
data: {
openId: null,
message: 'Outer Tooltip'
},
})
body {
font-family: sans-serif;
margin: 42px;
}
.tooltip {
display: block !important;
z-index: 10000;
}
.tooltip .tooltip-inner {
background: black;
color: white;
border-radius: 16px;
padding: 5px 10px 4px;
}
.tooltip .tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
}
.tooltip[x-placement^="top"] {
margin-bottom: 5px;
}
.tooltip[x-placement^="top"] .tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] {
margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent !important;
border-right-color: transparent !important;
border-top-color: transparent !important;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.tooltip[x-placement^="right"] {
margin-left: 5px;
}
.tooltip[x-placement^="right"] .tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent !important;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[x-placement^="left"] {
margin-right: 5px;
}
.tooltip[x-placement^="left"] .tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent !important;
border-right-color: transparent !important;
border-bottom-color: transparent !important;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.tooltip[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
.tooltip[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
.box{
border: 1px solid red;
border-radius: 2px;
padding: 15px;
margin: 20px;
text-align: center;
cursor: pointer;
}
.box:hover{
box-shadow: 0 0 4px;
}
<script src="https://unpkg.com/popper.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/v-tooltip"></script>
<div id="app">
<div v-for="index in 2"
v-tooltip="{content: message, show: openId === index}"
class="box"
#mouseover.stop="openId=index"
>
{{ message }}
<div v-tooltip="{content: 'Inner',
show: openId === index+'inner'}" #mouseover.stop="openId=index+'inner'" class="box">
okokok
</div>
</div>
</div>
I want to create a look that allows when a user press the "Scroll" button, the page will scroll with sliding effect. But it does not work on my page. I tried add with tag to my html file but it does not work too.
I found a script for that but it did not work.
Where is my mistake?
home.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{% static 'js/home.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
.
.
.
<section id="section01" class="demo">
<h1> Welcome to PHARSYS </h1>
<h2>Scroll for Login or Signup</h2>
<span></span>
</section>
<section id="section02" class="demo">
<h1>Login</h1><br>
<h2>Press the button to log in to the system.
<br><br>
</h2>
<span></span>Scroll
</section>
<section id="section03" class="demo">
<h1>Signup</h1>
<h2>Press the button to register to the system</h2>
</section>
home.js
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
home.css
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
section {
position: relative;
width: 100%;
height: 100%;
}
section::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 80%;
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
}
section h1 {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 64px/1 'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}
section h2 {
position: absolute;
top: 65%;
left: 50%;
z-index: 1;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 200 24px/1 'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}
#section01 { background: url(https://picsum.photos/1200/800?image=575) center center / cover no-repeat;}
#section02 { background: url(https://picsum.photos/1200/800?image=1016) center center / cover no-repeat;}
#section03 { background: url(https://picsum.photos/1200/800?image=869) center center / cover no-repeat;}
.demo a {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
.demo a:hover {
opacity: .5;
}
#section01 a {
padding-top: 60px;
}
#section01 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section01 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section01 a span::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255,255,255,.1);
border-radius: 100%;
opacity: 0;
-webkit-animation: sdb03 3s infinite;
animation: sdb03 3s infinite;
box-sizing: border-box;
}
#-webkit-keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
#section02 a {
padding-top: 60px;
}
#section02 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section02 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section03 a {
padding-top: 60px;
}
#section03 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section03 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section03 a span::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255,255,255,.1);
border-radius: 100%;
opacity: 0;
-webkit-animation: sdb03 3s infinite;
animation: sdb03 3s infinite;
box-sizing: border-box;
}
#-webkit-keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
Your problem was here
$('a[href*=#]').on('click', function(e) { ...
To target the anchor elements that have a href attribute which begin with the # character you would use ^ (instead of *), which means starts with, and you would also add some parentheses around the search character like this
$('a[href^="#"]').on('click', function(e) { ...
Check below:
Note: I purposefully gave the body a height of 1000px so we can test and run here.
$(function() {
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
body {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{% static 'js/home.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<section id="section01" class="demo">
<h1> Welcome to PHARSYS </h1>
<h2>Scroll for Login or Signup</h2>
<span></span>
</section>
<section id="section02" class="demo">
<h1>Login</h1><br>
<h2>Press the button to log in to the system.
<br><br>
</h2>
<span></span>Scroll
</section>
<section id="section03" class="demo">
<h1>Signup</h1>
<h2>Press the button to register to the system</h2>
</section>
You can also use the * as a wild card instead of ^, which will then match anchor elements that have a # character anywhere in their href attribute, and not just begin with #.
I have a div with a class called 'ball', each edge of the div has a border (border-top, border-left etc) I want to trigger different events with JavaScript when the user clicks on a border on each border.
ex: user clicks on border-top
console.log('top')
and so on
HMTL:
.ball {
border-radius: 50%;
width: 400px;
height: 400px;
margin: auto;
background-color: red;
border-top: 20px solid green;
border-left: 20px solid blue;
border-bottom: 20px solid orange;
border-right: 20px solid purple;
}
<div class="ball"></div>
I know I can trigger events when the user clicks on the div itself, but I would like to, somehow, select these borders with Javascript.
You can simulate this by adding extra elements.
Here is an exmaple (I used jQuery for simplicty but you can easily change to JS)
$('span').click(function(){
console.log($(this).data('value'));
})
.ball {
border-radius: 50%;
width: 200px;
height: 200px;
margin: auto;
background-color: blue;
position: relative;
font-size:0;
}
span:first-child {
position: absolute;
z-index: 3;
border-radius: 50%;
background: red;
top:20px;
left:20px;
bottom: 20px;
right: 20px;
}
span:nth-child(n+2) {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
border-radius: 50%;
background: green;
bottom: 0;
right: 0;
-webkit-clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
}
span:nth-child(3) {
transform:rotate(90deg);
background: purple;
}
span:nth-child(4) {
transform:rotate(180deg);
background: blue;
}
span:nth-child(5) {
transform:rotate(-90deg);
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ball">
<span data-value="center"></span>
<span data-value="bottom"></span>
<span data-value="left"></span>
<span data-value="top"></span>
<span data-value="right"></span>
</div>
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.