I have 3 css buttons, 1 on top of the post and 2 on bottom. I want to keep the bottom buttons hidden. If a user clicks on the top button he will be navigated to the bottom button and bottom button will become visible. But cant seem to make it work as expected.
Here's what I tried...
function showbtn() {
var x = document.getElementById("btn");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
/* Awesome button css Start */
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-highlight-color: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn-blue {
background-color: #0abced;
}
.btn-blue:hover {
background-color: #fff;
color: #0abced !important;
}
.btn:before,.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,.btn-green:after {
background: #1AAB8A;
}
.btn-blue:before,.btn-blue:after {
background: #0abced;
}
.btn:hover:before,.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
/* Awesome button css End */
<div class="btn-margin"><a class="btn btn-green" href="#btn" onclick="showbtn()">
Click Here To See
</a></div>
<br>
<br>
................Content................
<br>
<br>
<div id="btn">
<div class="btn-margin"><a class="btn btn-green" href="https://examplelink.com">
Click Here To See 1
</a></div>
<div class="btn-margin"><a class="btn btn-green" href="https://examplelink.com">
Click Here To See 2
</a></div>
</div>
Internal linking seems to work. But showing/hiding element isn't working for some reason. Any idea why?
You need to hide the second buttons group by default using display:none and just show it on click.
function showbtn() {
var x = document.getElementById("btn");
x.style.display = "block";
}
/* Awesome button css Start */
.btn-margin {
margin-top: 1.6rem;
box-sizing: inherit;
text-align: center;
}
.btn {
-webkit-tap-highlight-color: transparent;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.14) 0 3px 3px 0, rgba(0, 0, 0, 0.12) 0 1px 7px 0, rgba(0, 0, 0, 0.2) 0 3px 1px -1px;
box-sizing: inherit;
color: white !important;
cursor: pointer;
display: inline-block;
height: auto;
letter-spacing: 0.5px;
line-height: 42px;
pointer-events: all;
position: relative;
text-decoration-line: none;
vertical-align: middle;
font-size: 1.6em;
padding: 0 2em;
transition: 800ms ease all;
}
.btn-green {
background-color: #1AAB8A;
}
.btn-green:hover {
background-color: #fff;
color: #1AAB8A !important;
}
.btn-blue {
background-color: #0abced;
}
.btn-blue:hover {
background-color: #fff;
color: #0abced !important;
}
.btn:before,
.btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
.btn:after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
.btn-green:before,
.btn-green:after {
background: #1AAB8A;
}
.btn-blue:before,
.btn-blue:after {
background: #0abced;
}
.btn:hover:before,
.btn:hover:after {
width: 100%;
transition: 800ms ease all;
}
#btn {
display: none;
}
/* Awesome button css End */
<div class="btn-margin"><a class="btn btn-green" href="#btn" onclick="showbtn()">
Click Here To See
</a></div>
<br>
<br> ................Content................
<br>
<br>
<div id="btn">
<div class="btn-margin"><a class="btn btn-green" href="https://examplelink.com">
Click Here To See 1
</a></div>
<div class="btn-margin"><a class="btn btn-green" href="https://examplelink.com">
Click Here To See 2
</a></div>
</div>
Related
I'm really struggling to make my head around transitions. I've got a round button and I would like the div to show when the button is hovered. But I would like to have and "(un)fold" effect. Could you help me to add the animation to this css?
var btn = document.getElementById("open_feedback_form");
var x = document.getElementById("title");
btn.addEventListener("click", function() {
if (x.style.visibility === 'hidden') {
x.style.visibility = 'visible';
} else {
x.style.visibility = 'hidden';
}
});
.help_button {
position: fixed;
bottom: 10rem;
right: 10rem;
width: 5rem;
height: 5rem;
border-radius: 50%;
border: none;
box-shadow: 0 0 0 10px rgba(243, 147, 37, 0.4);
background-color: #F39325;
font-style: normal;
font-weight: 600;
font-size: 1.6rem;
line-height: 150%;
color: #ffffff;
}
.feedback-title {
position: fixed;
bottom: 10rem;
right: 12.5rem;
height: 5rem;
background-color: #F39325;
color: #ffffff;
font-size: 1.6rem;
line-height: 5rem;
padding-right:2.5rem;
padding-left:1rem;
visibility: hidden;
}
<div class="feedback-title" id="title">Feedback form</div>
<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">
?
</button>
I'm not even sure whether my approach here is correct.
Best practice for an unfold effect should be using the transform 3d properties. Wrap the feedback form in a container and transform the inner element from 100% from the x-as to 0%.
* {
margin: 0;
padding: 0;
}
.button-wrapper {
position: relative;
display: inline-block;
margin: 50px;
cursor: pointer;
}
.button-helper {
white-space: nowrap;
position: absolute;
right: 0;
top: 50%;
z-index: -1;
transform: translate3d(0, -50%, 0);
transition: .5s ease;
}
.button {
padding: 10px 30px;
}
.button-wrapper:hover .button-helper {
transform: translate3d(calc(100% + 15px), -50%, 0);
}
<button class="button-wrapper" type="button">
<p class="button-helper">Button info label</p>
<div class="button">
button text
</div>
</button>
Here is how could do it only with CSS and HTML:
body{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
}
.help_button {
display:block;
box-sizing:border-box;
position: relative;
width: 5rem;
height: 5rem;
border-radius: 50%;
border: none;
box-shadow: 0 0 0 10px rgba(243, 147, 37, 0.4);
background-color: #F39325;
font-style: normal;
font-weight: 600;
font-size: 1.6rem;
color: #ffffff;
}
.feedback-title {
position: absolute;
right:2.3rem;
top:0;
height: 100%
transform:translate(-5px, -5px);
background-color: #F39325;
color: #ffffff;
font-size: 1.6rem;
line-height: 5rem;
padding-right:2.5rem;
padding-left:1rem;
z-index:-1;
opacity:0;
transition : .5s ease;
width:12rem;
}
.help_button:hover .feedback-title {
opacity:1;
}
<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">
?
<span id="title" class="feedback-title">Feedback from</span>
</button>
I am working on a header navigation which has logo on the left and profile icon on the right in the middle there are some navigation links.
There is a left slide menu made which triggers in when window width is less than 700px. I have triggered slide left menu on window resize event as well. The main navigation has to shift to the responsive menu container on resizing the window width. However it is not working on window resize function.
Here is the codepen link i tried
$("#sidebarCollapse").on('click', function () {
$('#sidebar').toggleClass('active');
});
$(".main-nav li a").on('click', function(){
$(".main-nav li a").removeClass('active');
$(this).addClass('active');
});
// Menu Add Class Left
$(".hamburger-menu").click(function(){
$(".mob-menu").toggleClass("slide-left");
});
// Menu Add Class Close
$('.mdl-layout__obfuscator').click(function(){
$(".mob-menu").removeClass("slide-left");
});
var domWidth = $(window).width();
function moveElements() {
var mobMenu = $('.mob-menu'),
$mainNav = $('.main-nav'),
respNav = $('.resp-nav'),
mainHdr = $(".global-header");
if( domWidth < 700) {
//alert(domWidth);
$('.main-nav').appendTo('.resp-nav');
}
} .
$(window).on('load resize',function() {
// alert('hi');
moveElements();
$(window).resize(function() {
moveElements();
});
});
/* ---------------------------------------------------
GLOBAL HEADER PAGE
----------------------------------------------------- */
textarea,
input,
button {
outline: none;
}
.txtlabel {
font-size: 12px;
text-align: left;
color: #706e6b;
padding-bottom: 11px;
display: block;
}
.global-header {
width: 100%;
display: block;
height: 50px;
box-shadow: 0 2px 4px 0 #e8ebf3;
-moz-box-shadow: 0 2px 4px 0 #e8ebf3;
-webkit-box-shadow: 0 2px 4px 0 #e8ebf3;
position: relative;
background-color: #f1f1f1;
}
.g-logo {
padding: 7px 24px;
float: left;
}
.m-g-logo {
display: none;
padding: 7px 20px;
float: left;
}
.hamburger-menu {
display: none;
}
.resp-nav {
margin-top: 20px;
float: left;
}
.mob-menu {
display: none;
padding: 10px;
box-shadow: 2px 0 3px 0 #b5b7bd;
-moz-box-shadow: 2px 0 3px 0 #b5b7bd;
-webkit-box-shadow: 2px 0 3px 0 #b5b7bd;
/*position: fixed;*/
position: absolute;
-webkit-transform: translateX(-285px);
-ms-transform: translateX(-285px);
transform: translateX(-285px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
background: #fff;
top: 0;
bottom: 0;
color: #333;
z-index: 9999;
width: 240px;
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
}
.profile-info {
float: left;
width: 100%;
}
.profile-icon {
width: 23px;
height: 23px;
margin: 8px;
display: block;
}
.profpic {
width: 32px;
height: 32px;
border-radius: 50%;
color: #fff;
background-color: #394961;
float: left;
margin: 5px 0px 5px 5px;
}
.profile-info span {
color: #626579;
font-size: 16px;
margin: 3px 0 0 3px;
}
.prof-name {
float: left;
width: 68%;
margin: 0 0 0 20px;
}
.prof-name a.link {
float: left;
margin: 0 10px 0 3px;
}
.prof-name a.link:first-child {
position: relative;
}
.prof-name a.link:first-child:after {
content: "|";
position: absolute;
right: -10px;
color: #9ea6a9;
}
.icon-hamburger {
height: 5px;
background-color: black;
margin: 6px 0;
width: 20px;
float: left;
border: none;
cursor: pointer;
}
.main-nav {
list-style: none;
float: left;
margin-left: 30px;
}
.main-nav li {
list-style: none;
float: left;
}
.main-nav li a {
color: #626579;
padding: 14px 30px;
display: block;
}
.main-nav li a:hover {
color: #00a0e7;
}
.main-nav li a.active {
color: #00a0e7;
border-bottom: 3px solid #00a0e7;
background-color: #eef0f6;
}
.nav-icon {
float: left;
padding: 10px;
}
.pull-right i[class^='icon-'] {
width: 32px;
height: 32px;
display: block;
}
.icon-search {
background: url("../../imgs/global-header/icn-search.svg") no-repeat 4px 5px;
}
.icon-notification {
background: url("../../imgs/global-header/icn-notification.svg") no-repeat 8px 8px;
}
.icon-profile {
background: #394961 url("../../imgs/global-header/avatar.svg") no-repeat;
position: relative;
margin-right: 30px;
border-radius: 50%;
}
.icon-profile:after {
background: url("../../imgs/global-header/page-1.svg") no-repeat;
display: block;
width: 9px;
height: 6px;
position: absolute;
content: "";
top: 14px;
right: -20px;
}
.icon-profile:before {
background: url("../../imgs/global-header/avatar-icon.svg") no-repeat;
display: block;
width: 16px;
height: 16px;
position: absolute;
content: "";
top: 7px;
right: 8px;
}
.nav-icon:hover {
background-color: transparent;
}
.nav-icon:not(.active):hover {
background-color: #eef0f6;
cursor: pointer;
}
.usage {
list-style: none;
}
.usage ul {
list-style: disc;
list-style-position: outside;
}
/* search */
.srch {
position: relative;
display: inline-block;
margin-right: 30px;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
ul,
ol {
margin-top: 0;
margin-bottom: 10px;
}
.ui-front {
list-style: none!important;
background-color: #fff;
color: #626579;
font-size: 12px;
font-weight: 500;
width: 240px!important;
min-width: 110px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
border: 1px solid #F1F5F6;
border-radius: 4px;
padding: 10px 8px!important;
}
.ui-front li {
padding: 8px 8px!important;
cursor: pointer;
}
.slide-left {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
z-index: 99999;
}
.mdl-layout__obfuscator {
background-color: transparent;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
visibility: hidden;
-webkit-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.slide-left~.mdl-layout__obfuscator {
background-color: rgba(0, 0, 0, .5);
visibility: visible;
}
.slide-menu {
position: fixed;
-webkit-transform: translateX(-285px);
-ms-transform: translateX(-285px);
transform: translateX(-285px);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
will-change: transform;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
background: #fff;
top: 0;
bottom: 0;
color: #333;
z-index: 9999;
width: 250px;
-webkit-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
box-shadow: 3px 0px 7px 0px rgba(0, 0, 0, 0.25);
}
#media only screen and (max-width: 768px) {
.main-nav {
display: block;
width: 100%;
margin: 0;
}
.main-nav ul {
padding: 0;
}
.main-nav ul li {
width: 100%;
margin: 0;
}
.nav-icon:nth-child(3) {
display: none;
}
.g-logo {
display: none;
}
.m-g-logo {
display: block;
padding: 7px 24px;
float: left;
}
.hamburger-menu {
display: block;
}
.global-header .rightmenu {
position: absolute;
right: 12px;
}
.mob-menu {
display: block;
}
.global-header {
width: 100%;
display: block;
height: 500px;
}
}
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<div class="global-header">
<div class="mob-menu">
<div class="profile-info">
<div class="profpic"><i class="profile-icon"></i></div>
<div class="prof-name">
<span>Marvin Duncan</span>
Profile
Logout
</div>
</div>
<div class="resp-nav"></div>
</div>
<div class="pull-left">
Logo
</div>
<nav class="main-nav">
<ul>
<li>Label 1</li>
<li>Label 2</li>
</ul>
</nav>
<div class="pull-right rightmenu">
<div class="nav-icon" title="Profile"><i class="icon-profile">☺</i></div>
</div>
<div class="mob-view">
<span class="hamburger-menu">
<button class="icon-hamburger"></button>
Logo
</span>
</div>
<div class="mdl-layout__obfuscator"></div>
</div>
The problem is probably because this line only happens once:
var domWidth = $(window).width();
You need to place that line of code within your moveElements function, so that it continually checks the width of the window.
Additionally, I'd suggest not using 'appendTo' to move something. It is tricky to move pieces of the DOM around like this and you can get in a mess easily. Better to use CSS to move the display of something. Or, if you can't achieve it with CSS alone - maybe have two instances, and show/hide them as needed.
change $(window).width(); to $(document).width();
i tried and it worked
How can I make a greyed out overlay on a page, but have one element in that page not greyed out?
There are many questions like this asked but none of them work:
Hide all elements except one div for print view - This one does not work for my situation as I do not want to hide everything.
Disable everything except a DIV element - This one the second answer seems similar to mine. But even if I change z-index of my desired ungreyed out element the whole page stays greyed out. Also, I found no difference between using div and iframe.
Want to make the whole page in grayscale except specified div - This one just makes everything else greyscale but I do not want that.
From the example below I want everything greyed out except for <input class="edit-title" value="Site Title">. Right now my code greys out most of the page, I can grey out the whole page if I change
.overlay {
z-index: -1;
}
to
.overlay {
z-index: 0;
}
Is there a way to grey out everything except <input class="edit-title" value="Site Title">?
html {
box-sizing: border-box;
}
.overlay {
top: 0;
bottom: 0;
right: 0;
left: 0;
position: absolute;
background: rgba(0, 0, 0, .4);
z-index: -1;
}
edit-title {
z-index: 100;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body,
input,
optgroup,
select,
textarea {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
body {
font-size: 13px;
line-height: 1.4;
color: #555;
margin: 0;
padding: 0;
background: white;
overflow-x: hidden;
}
.button {
font-weight: bold;
color: #fff;
border: 1px solid #44aa76;
border-width: 0 0 3px 0;
background-color: #66cc98;
padding: 5px;
border-radius: 6px;
text-align: center;
}
.button:focus,
.button:hover,
.active {
cursor: pointer;
background-color: #44aa76;
color: #fff;
outline: none;
}
header {
width: 100%;
border-bottom: 1px solid #eee;
display: flex;
justify-content: center;
padding: 30px 0 10px;
margin-bottom: 10px;
}
input {
font-size: 13px;
border: 1px solid #eee;
border-radius: 4px;
padding: 8px;
}
input:focus {
outline: none;
border-color: #ddd;
}
[type="search"] {
-webkit-appearance: textfield;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.search {
display: flex;
align-items: center;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.search input[type="search"] {
width: 100%;
}
label {
font-size: 13px;
margin-right: 5px;
}
.save-button {
width: 30px;
height: 30px;
line-height: 27px;
padding: 0;
margin: 0 10px;
}
h1 {
margin: 0;
padding: 0;
line-height: 1;
font-size: 22px;
padding: 4px 0;
}
.container {
position: relative;
padding: 0 15px;
width: 360px;
max-width: 100%;
margin: 0;
}
.reading-list {
margin-bottom: 15px;
}
.reading-item {
border-radius: 3px;
padding: 0;
margin: 10px 0 0 0;
background-color: #f7f7f7;
position: relative;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.05);
transition: all 0.5s ease 0s;
}
.reading-item .item-link {
text-decoration: none;
display: block;
width: 100%;
color: #555;
padding: 10px 50px 10px 56px;
min-height: 56px;
}
.reading-item .item-link:focus,
.reading-item .item-link:hover {
color: #66cc98;
background-color: #fff;
}
.reading-item .item-link span {
display: block;
}
.reading-item .item-link span.title {
font-weight: bold;
}
.reading-item .favicon {
position: absolute;
top: 10px;
left: 10px;
width: 36px;
height: 36px;
border-radius: 4px;
border: 1px solid #ccc;
padding: 1px;
}
.reading-item .item-link:hover .favicon {
border-color: #66cc98;
}
.reading-item .delete-button {
position: absolute;
top: 5px;
right: 5px;
border-radius: 100%;
padding: 0;
width: 20px;
height: 20px;
border: 0;
background-color: transparent;
color: #ccc;
transform: rotateZ(0) scale(1);
transition: transform 0.3s ease, box-shadow 0.5s ease;
}
.reading-item .edit-button,
.reading-item .save-button {
position: absolute;
bottom: 10px;
right: 10px;
padding: 0;
width: 10px;
height: 10px;
border: 0;
background-color: transparent;
color: #ccc;
border-radius: 0;
margin: 0;
}
.reading-item .delete-button:hover {
background-color: #ccc;
color: #fff;
transform: rotateZ(90deg) scale(2);
box-shadow: 1px 0 1px rgba(0, 0, 0, 0.15);
}
<body class="popup-page">
<div class="container">
<header>
<h1 data-localize="appName">Reading List</h1>
<button class="button save-button" id="savepage">+</button>
</header>
<div class="search">
<label for="my-search" data-localize="search">Search</label>
<input type="search" id="my-search" name="search" autocomplete="off">
</div>
<div class="reading-list" id="reading-list">
<div class="reading-item read">
<a value="www.example.com" class="button delete-button">×</a>
<a class="item-link" href="www.example.com" alt="Reading List">
<input class="edit-title" value="Site Title">
<span class="host">example.com</span>
</a>
<img src="/icons/save.svg" class="button save-button"></div>
</div>
</div>
<div class="overlay" id="overlay"></div>
</body>
https://jsfiddle.net/qyca9489/
Can do it using css box-shadow.
.box{display:inline-block; width:100px; height:100px; margin-top:50px; text-align:center; padding-top:2em}
.box.selected{
box-shadow: 0 0 0 99999px rgba(0, 0, 0, .5);
}
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box selected">Box 3</div>
<div class="box">Box 4</div>
Alternate solution using 4 overlay elements
Overlays are positioned based on highlighted element position and dimensions.
The top and bottom overlays are 100% width. The top one just needs it's height set to value of top offset of highlighted element. Bottom one gets it's top set to bottom of the element.
Right and left are same height as highlighted element and reach to each edge of page to fill holes between the top and bottom overlays
var $el = $('.box.selected'),
$oLay = $('.overlay'),
elPos = $el.offset(),// coordinates of element within document
elH = $el.height(),
elW = $el.width();
$oLay.filter('.top').height(elPos.top);
$oLay.filter('.left').css({
top: elPos.top,
height: elH,
width: elPos.left
});
$oLay.filter('.right').css({
top: elPos.top,
height: elH,
left: elPos.left + elW
});
$oLay.filter('.bottom').css({
top: elPos.top + elH
});
.box {
display: inline-block;
width: 100px;
height: 100px;
margin-top: 50px;
text-align: center;
padding-top: 2em
}
.overlay {
position: absolute;
background: rgba(0, 0, 0, .5);
z-index: 100
}
.overlay.top {
top: 0;
left: 0;
width: 100%
}
.overlay.left {
left: 0
}
.overlay.right {
right: 0
}
.overlay.bottom {
width: 100%;
left: 0;
bottom: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box selected">Box 3</div>
<div class="box">Box 4</div>
<div class="overlay top"></div>
<div class="overlay left"></div>
<div class="overlay right"></div>
<div class="overlay bottom"></div>
You could put a second overlay inside <a class="item-link" href="www.example.com" alt="Reading List">. So:
<a class="item-link" href="www.example.com">
<div class="overlay"></div>
…
</a>
And in the CSS:
.item-link {
position: relative
}
Basically a href is going to the #popups div and generating a popup on codepen.
However, when I paste that code into a page. It goes to a link. Is there anyway to just trigger that popup event when A href is clicked? I have tried this
Edit: I just want the div popup triggered. I do not want the href to go to a new page.
Test
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: opacity 200ms;
visibility: hidden;
opacity: 0;
}
.overlay.light {
background: rgba(255, 255, 255, 0.5);
}
.overlay .cancel {
position: absolute;
width: 100%;
height: 100%;
cursor: default;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 75px auto;
padding: 20px;
background: #fff;
border: 1px solid #666;
width: 300px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
position: relative;
}
.light .popup {
border-color: #aaa;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.popup h2 {
margin-top: 0;
color: #666;
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
width: 20px;
height: 20px;
top: 20px;
right: 20px;
opacity: 0.8;
transition: all 200ms;
font-size: 24px;
font-weight: bold;
text-decoration: none;
color: #666;
}
.popup .close:hover {
opacity: 1;
}
.popup #content {
max-height: 400px;
overflow: auto;
}
.popup p {
margin: 0 0 1em;
}
.popup p:last-child {
margin: 0;
}
Test
<div id="popups" class="overlay">
<div class="popup">
<h2>Info box</h2>
<a class="close" href="#">×</a>
<div id="content">
Old Content
</div>
</div>
</div>
try this:
$('a').on('click',function(e){
e.preventDefault();
});
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.