Showing content by sliding left and up

Showing content by sliding left and up - javascript

I created a small box while slides to the left and then to the bottom to present the content after hovering the box: http://jsfiddle.net/7n9jxo9c/3/
Now I need to change it in a way, that the box slides to the left and the opens to the top. So the content should be placed above the X.
HTML:
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
Content
</div>
</div>
JS:
$(document).on('mouseenter', '.item', function( event ) {
var menue = $('#item_add');
var item = $(this);
menue.css({ "top": item.offset().top + 35 }).show();
});
CSS:
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
left: 5.5em;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
-webkit-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-moz-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-ms-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-o-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
}
#item_add:hover {
width: 7em;
left: .5em;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
#item_add:hover .body {
max-height: 100px;
visibility: visible;
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
#item_add .body {
max-height: 0;
overflow: hidden;
visibility: hidden;
-webkit-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-moz-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-ms-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-o-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
}
#item_add:after {
content: '';
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}

use Bottom on #item_add:after instead of Top : http://jsfiddle.net/7n9jxo9c/9/
#item_add:after {
content: '';
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
bottom: 5px;
right: -7px;
position: absolute;}

I am not sure if I fully understand your question, but I think you can use bottom attribute instead of top.
I mean something like this:
http://jsfiddle.net/7n9jxo9c/8/

Related

JavaScript - Popup Footnote Disappears if User starts to Scroll

I've currently got a functioning footnote popup. But I only want it to fade away only if the user starts to scroll. From a previously asked question it seems that using the onscroll event would be my best shot. I just need help for implementing this specifically to only trigger when the user hovers over the footnote and the span appears. I have pretty much no experience with js on HTML documents, any help would be appreciated.
Current code:
a.footnote span {
z-index: -1;
opacity: 0;
position: fixed;
left: 15px;
bottom: 20px;
margin-left: 0px;
margin-right: 18px;
padding:14px 20px;
border-radius:4px; box-shadow: 5px 5px 8px #CCC;
border:1px solid #DCA;
background-color: #FEF6BB;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
a.footnote:hover span {
z-index: 9;
opacity: 1;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
<a class="footnote" href="#fuente1"><sup id="texto1">[1]</sup><span>Popup footnote</span></a>

That would require javascript.
var footnotes = document.querySelectorAll("a.footnote");
function onMouseEnter(e)
{
for(let i = 0; i < footnotes.length; i++)
{
footnotes[i].classList.toggle("show", e.target === footnotes[i]);
}
}
function onScroll(e)
{
onMouseEnter({});
}
for(let i = 0; i < footnotes.length; i++)
{
footnotes[i].addEventListener("mouseenter", onMouseEnter, false);
}
document.addEventListener("wheel", onScroll, false); //detect mouse wheel
document.addEventListener("scroll", onScroll, false); //detect page scroll, this will not fire if there is nothing to scroll
a.footnote span {
z-index: -1;
opacity: 0;
position: fixed;
left: 15px;
bottom: 20px;
margin-left: 0px;
margin-right: 18px;
padding: 14px 20px;
border-radius: 4px;
box-shadow: 5px 5px 8px #CCC;
border: 1px solid #DCA;
background-color: #FEF6BB;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
a.footnote.show span {
z-index: 9;
opacity: 1;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
<a class="footnote" href="#fuente1"><sup id="texto1">[1]</sup><span>Popup footnote</span></a>
<a class="footnote" href="#fuente2"><sup id="texto2">[2]</sup><span>Popup footnote 2</span></a>
<a class="footnote" href="#fuente3"><sup id="texto3">[3]</sup><span>Popup footnote 3</span></a>

Hamburger menu sliding

I am trying to create a menu like the one on this website: http://sterling.it/en/
I want my menu to slide from the left to the right and then to also disappear sliding to the left. Below is the code that I have written so far but it is not working properly. The menu slides the first time but then never slides again. I would really appreciate it if anyone could help me. Thanks in advance!
$(document).ready(function() {
$(".menuTrigger").click(function() {
$(this).toggleClass("active");
/* Check if the icon does not have class active */
if (!$(this).hasClass("active")) {
/* Do something, for example add class color-icon that changes the color of the hamburguer,
show an alert... */
$(".menuTrigger .hamburger").addClass("non-active");
$("#hamburgerMenu").removeClass("active");
} else {
$("menuTrigger .hamburger").removeClass("non-active");
$("#hamburgerMenu").addClass("active");
if ($(this).hasClass("active")) {
$("#hamburgerMenu").animate({
width: "200"
});
}
}
});
});
body {
background: pink;
}
.hamburger {
width: 30px;
height: 3px;
background: black;
position: absolute;
top: 19px;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 15px;
height: 3px;
background: black;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 8px;
left: 50%;
}
.hamburger:before {
top: -8px;
left: 0%;
}
.menuTrigger:hover .hamburger:after {
left: 0%;
}
.menuTrigger:hover .hamburger:before {
left: 50%;
}
.menuTrigger.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.menuTrigger.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
-webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger {
position: relative;
transform: transition(-50%, -50%);
width: 60px;
height: 40px;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.hamburgerMenuTrigger {
height: 100vh;
}
#hamburgerMenu {
position: fixed;
top: 0;
height: 100%;
width: 0px;
padding: 60px;
background-color: white;
z-index: 1;
visibility: hidden;
opacity: 0;
}
#hamburgerMenu.active {
opacity: 1;
visibility: visible;
}
header nav a {
text-decoration: none;
color: rgb(88, 102, 110);
font-size: 20px;
font-weight: bold;
padding: 7px;
}
header nav li {
list-style-type: none;
padding: 20px 0;
}
header nav li span {
font-size: 16px;
padding-right: 30px;
}
header {
display: block;
}
header nav {
padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
<div class="menuTrigger" id="menuTriggerBtn">
<div class="hamburger" id="hamburgerBtn"></div>
</div>
<div id="hamburgerMenu">
<nav class="hamburgereMenu-Nav">
<ul class="hamburgerMenu-Ul">
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>01</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>02</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>03</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgereMenu-nav-link hamburgerMenu-menu" href=""><span>04</span></a></li>
</ul>
</nav>
</div>
</div>

What is happening here is animate was not called in first condition and when you call it after completion of that animation you should remove and add the active class.
I have changed your code a little bit,
$(document).ready(function() {
$(".menuTrigger").click(function() {
$(this).toggleClass("active");
/* Check if the icon does not have class active */
if (!$(this).hasClass("active")) {
/* Do something, for example add class color-icon that changes the color of the hamburguer,
show an alert... */
$("#hamburgerMenu").animate({
width: "0",
opacity: "0" // We are reducing opacity as it looks good. :)
},
// This is the callback when the animate is completed.
{
complete: function() {
$(".menuTrigger .hamburger").addClass("non-active");
$("#hamburgerMenu").removeClass("active");
}
});
} else {
$("menuTrigger .hamburger").removeClass("non-active");
$("#hamburgerMenu").addClass("active");
if ($(this).hasClass("active")) {
$("#hamburgerMenu").animate({
width: "200",
opacity: "1"
});
}
}
});
});
body {
background: pink;
}
.hamburger {
width: 30px;
height: 3px;
background: black;
position: absolute;
top: 19px;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 15px;
height: 3px;
background: black;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 8px;
left: 50%;
}
.hamburger:before {
top: -8px;
left: 0%;
}
.menuTrigger:hover .hamburger:after {
left: 0%;
}
.menuTrigger:hover .hamburger:before {
left: 50%;
}
.menuTrigger.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.menuTrigger.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
-webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger {
position: relative;
transform: transition(-50%, -50%);
width: 60px;
height: 40px;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.hamburgerMenuTrigger {
height: 100vh;
}
#hamburgerMenu {
position: fixed;
top: 0;
height: 100%;
width: 0px;
padding: 60px;
background-color: white;
z-index: 1;
visibility: hidden;
opacity: 0;
}
#hamburgerMenu.active {
opacity: 1;
visibility: visible;
}
header nav a {
text-decoration: none;
color: rgb(88, 102, 110);
font-size: 20px;
font-weight: bold;
padding: 7px;
}
header nav li {
list-style-type: none;
padding: 20px 0;
}
header nav li span {
font-size: 16px;
padding-right: 30px;
}
header {
display: block;
}
header nav {
padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
<div class="menuTrigger" id="menuTriggerBtn">
<div class="hamburger" id="hamburgerBtn"></div>
</div>
<div id="hamburgerMenu">
<nav class="hamburgereMenu-Nav">
<ul class="hamburgerMenu-Ul">
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgerMenu-nav-link hamburgerMenu-menu" href="">
<span>01</span>
</a>
</li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgerMenu-nav-link hamburgerMenu-menu" href="">
<span>02</span>
</a>
</li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgerMenu-nav-link hamburgerMenu-menu" href="">
<span>03</span>
</a>
</li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li">
<a class="hamburgereMenu-nav-link hamburgerMenu-menu" href="">
<span>04</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
Tell me if it works fine.

You are removing your active class too quickly thus setting opacity and visibilty to hide your menu. Adding an animation to the width and hiding the menu on the callback will reverse your appear-animation.
$(document).ready(function() {
$(".menuTrigger").click(function() {
$(this).toggleClass("active");
/* Check if the icon does not have class active */
if (!$(this).hasClass("active")) {
/* Do something, for example add class color-icon that changes the color of the hamburguer,
show an alert... */
$(".menuTrigger .hamburger").addClass("non-active");
$("#hamburgerMenu").animate({
width: "0"
}, function() {
$("#hamburgerMenu").removeClass("active");
});
} else {
$("menuTrigger .hamburger").removeClass("non-active");
$("#hamburgerMenu").addClass("active");
if ($(this).hasClass("active")) {
$("#hamburgerMenu").animate({
width: "200"
});
}
}
});
});
body {
background: pink;
}
.hamburger {
width: 30px;
height: 3px;
background: black;
position: absolute;
top: 19px;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:before,
.hamburger:after {
content: "";
position: absolute;
width: 15px;
height: 3px;
background: black;
box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
transition: .5s;
}
.hamburger:after {
top: 8px;
left: 50%;
}
.hamburger:before {
top: -8px;
left: 0%;
}
.menuTrigger:hover .hamburger:after {
left: 0%;
}
.menuTrigger:hover .hamburger:before {
left: 50%;
}
.menuTrigger.active .hamburger {
background: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}
.menuTrigger.active .hamburger:before {
top: 0px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
background-color: rgba(0, 0, 0, 0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
-webkit-transition: top .2s ease-in-out, background-color .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2, box-shadow .3s ease-in-out .2s;
transition: top .2s ease-in-out, background-color .3s ease-in-out .2s, -webkit-transform .3s ease-in-out .2s;
}
.menuTrigger.active .hamburger:after {
top: 0px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, -webkit-transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s;
transition: top .2s ease-in-out, transform .3s ease-in-out .2s, - webkit-transform .3s ease-in-out .2s;
}
.menuTrigger {
position: relative;
transform: transition(-50%, -50%);
width: 60px;
height: 40px;
align-items: center;
z-index: 1000;
cursor: pointer;
}
.hamburgerMenuTrigger {
height: 100vh;
}
#hamburgerMenu {
position: fixed;
top: 0;
height: 100%;
width: 0px;
padding: 60px;
background-color: white;
z-index: 1;
visibility: hidden;
opacity: 0;
}
#hamburgerMenu.active {
opacity: 1;
visibility: visible;
}
header nav a {
text-decoration: none;
color: rgb(88, 102, 110);
font-size: 20px;
font-weight: bold;
padding: 7px;
}
header nav li {
list-style-type: none;
padding: 20px 0;
}
header nav li span {
font-size: 16px;
padding-right: 30px;
}
header {
display: block;
}
header nav {
padding-top: 80px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hamburgerMenuTrigger">
<div class="menuTrigger" id="menuTriggerBtn">
<div class="hamburger" id="hamburgerBtn"></div>
</div>
<div id="hamburgerMenu">
<nav class="hamburgereMenu-Nav">
<ul class="hamburgerMenu-Ul">
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>01</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>02</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgerMenu-nav-link hamburgerMenu-menu" href=""><span>03</span></a></li>
<li class="hamburgerMenu-nav-item hamburgerMenu-right-li"><a class="hamburgereMenu-nav-link hamburgerMenu-menu" href=""><span>04</span></a></li>
</ul>
</nav>
</div>
</div>

CSS link in overlay taking over a div

I have a <div> that contains a link.
At the bottom right corner of this <div>, I have an overlay element which takes over the whole <div> when hovered.
This overlay element also contains a link.
My problem is that the link in the overlying element is not clickable.
The problem is because I use pointer-events: none; on class .overlay-content, but if I don't use it, both links become dead.
Please see code here:
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.amg-corner-button_wrap:hover~.overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Also, here is fiddle.
Is there any way that I can achieve this?

can't believe I actually found a pure CSS solution without any drawbacks.
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.wrap:hover .amg-corner-button_wrap {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.wrap:hover .amg-corner-button_wrap ~ .overlay-content {
pointer-events: auto;
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class="wrap">
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
</div> <!-- panel body -->
</div> <!-- panel default -->
JSFiddle
Instead of listening to the :hover event on the corner-button, listen to it on a parent element. Since the :hover will be dispatched regardless of the mouse interaction of the elements' children, it is possible to set pointer-events: auto to the children containing links (overlay-content), once the corner-button has been hovered. Now, that the overlay-content is hoverable and since it's a child of the wrapping div, it will cause the :hover to stay active over the whole wrapping div.

I would recommend using JS style swapping instead of CSS pointer events for this problem. You need to trigger one change to your css when you mouse over the bottom corner, and a separate event when you mouse out of the container. I do not believe CSS gives you that kind of conditional control.

Here is half a solution using animations instead of transitions. This works for when you hover on to the amg-corner-button_wrap but not when you move off it. I'm a bit new to animations so hopefully someone here who knows more maybe able to help you with the second half.
There is also a weird visual in here if you hover on the amg-corner-button_wrap and hover off mid transition. The reason for this is that I added a background color to overlay-content so when it's fading in and you mouse off amg-corner-button_wrap the swipe starts to reverse before the fade is complete.
Anyway, hope this 50% solution helps you or others drive this to 100%! Have to run to a meeting, good luck :-)
#keyframes example {
0% {
visibility: hidden;
opacity: 0;
}
1% {
visibility: visible;
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 200px;
width: 200px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -120px;
bottom: -120px;
width: 200px;
height: 200px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.overlay-content {
visibility: hidden;
opacity: 0;
background-color: #e8c63d;
bottom: 0;
color: #333;
left: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.overlay-content~.amg-corner-button_wrap,
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.amg-corner-button_wrap:hover~.overlay-content,
.overlay-content:hover {
animation-name: example;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-delay: 0.3s;
animation-fill-mode: both;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->

Here's a working fiddle for a css and html only change: https://jsfiddle.net/y2auh7gn/4/.
It separates the link from overlay-content and places it where it's supposed to be with position: absolute. We need to move the link out of overlay-content so that when we hover over it the overlay doesn't disappear.
There's a side-effect where the link pops out with the corner piece.

How to center gridster.js?

I have been playing with Gridster.js, but for the life of me, I can't seem to make the grid centered, its always left justified, I have tried and tried, but maybe I am missing something..
I have made a jsfiddle that has the basic of my grid, Im hoping someone can work it out and help me center it, please :)
.gridster {
background: #004756;
margin: 0 auto;
opacity: .8;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
-ms-transition: opacity .6s;
transition: opacity .6s;
text-align: center;
}
.gridster > * {
margin: 0 auto;
-webkit-transition: height .4s;
-moz-transition: height .4s;
-o-transition: height .4s;
-ms-transition: height .4s;
transition: height .4s;
}
.gridster .gs_w{
z-index: 2;
position: absolute;
background: #FFF;
cursor: pointer;
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.ready .gs_w:not(.preview-holder) {
-webkit-transition: opacity .3s, left .3s, top .3s;
-moz-transition: opacity .3s, left .3s, top .3s;
-o-transition: opacity .3s, left .3s, top .3s;
transition: opacity .3s, left .3s, top .3s;
}
.ready .gs_w:not(.preview-holder) {
-webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
-moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
-o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
}
.gridster .preview-holder {
z-index: 1;
position: absolute;
background-color: #fff;
border-color: #fff;
opacity: 0.3;
}
.gridster .player-revert {
z-index: 10!important;
-webkit-transition: left .3s, top .3s!important;
-moz-transition: left .3s, top .3s!important;
-o-transition: left .3s, top .3s!important;
transition: left .3s, top .3s!important;
}
.gridster .dragging {
z-index: 10!important;
-webkit-transition: all 0s !important;
-moz-transition: all 0s !important;
-o-transition: all 0s !important;
transition: all 0s !important;
}
.gridWrapper {
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
}
.gridAlignerWrapper {
display: table;
width: 100%;
height: 100%;
}
.gridAligner {
width: 100%;
display: table-cell;
}
body {
background-color: #EEEEEE;
font-family: 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: x-small;
color: #666666;
text-align: center;
vertical-align: middle;
}
ul, ol {
list-style: none;
margin:0 auto;
text-align: center;
vertical-align: middle;
}
h1 {
margin-bottom: 12px;
text-align: center;
font-size: 30px;
font-weight: 400;
}
h3 {
font-size: 25px;
font-weight: 600;
color: white;
}
/* Uncomment this if you set helper : "clone" in draggable options */
/*.gridster .player {
opacity:0;
}*/
https://jsfiddle.net/036qutd9/4/
Thanks

Thanks Paulie_D, I managed to work it out and get it centered :)
.gridster {
width: 730px;
background: #004756;
margin-left:auto;
margin-right:auto;
opacity: .8;
-webkit-transition: opacity .6s;
-moz-transition: opacity .6s;
-o-transition: opacity .6s;
-ms-transition: opacity .6s;
transition: opacity .6s;
text-align: center;
}
.gridster > * {
margin: 0 auto;
-webkit-transition: height .4s;
-moz-transition: height .4s;
-o-transition: height .4s;
-ms-transition: height .4s;
transition: height .4s;
}

Change css:hover effect to jquery.onclick()

I want to create a dropdown menu (for mobile: media queries are already working) but I want to change the :hover effect of my menu button (CSS) to jquery .onclick() function.
I know my code isn't far away of working but I am not beeing able to fix what's wrong.
Anyone could give me a tip?
Heres the Fiddle: http://jsfiddle.net/4G3gg/
HTML
<ul class="navigation">
<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>
<li class="n1">Home</li>
<li class="n2">Portfolio</li>
<li class="n3">Services</li>
<li class="n4">About</li>
<li class="n5">Contacts</li>
</ul>
CSS
#mobile:hover{background-color: rgba(255, 255, 255, 0.15);}
a{text-decoration: none;color: white; padding: 10px 50px; font-weight: bold}
a:hover { color: #777; font-weight: bold;}
/* NAVIGATION */
.navigation {
list-style: none;
padding: 0;
width: 50px;
height: 40px;
margin: 0 auto;
position: relative;
z-index: 100;
}
.navigation, .navigation a.main {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {
display: block;
height: 30px;
font: bold 15px/40px arial, sans-serif;
text-align: center;
text-decoration: none;
color: #FFF;
-webkit-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
position: relative;
z-index: 100;
}
.navigation:hover a.main {
color: rgba(255,255,255,0.6);
background: rgba(0,0,0,0.04);
}
.navigation li {
width: 200px;
height: 40px;
background: #131313;
font: normal 12px/40px arial, sans-serif !important;
color: #999;
text-align: center;
margin: 0;
-webkit-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-transform: perspective(350px) rotateX(-90deg);
-o-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
-moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.navigation li:nth-child(even) { background: #131313; }
.navigation li:nth-child(odd) { background: #1c1c1c; }
.navigation li.n1 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n2 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n3 {
-webkit-transition: 0.1s linear 0.1s;
-o-transition: 0.1s linear 0.1s;
transition: 0.1s linear 0.1s;
}
.navigation li.n4 {
-webkit-transition:0.1s linear 0.1s;
-o-transition:0.1s linear 0.1s;
transition:0.1s linear 0.1s;
}
.navigation li.n5 {
border-radius: 0px 0px 4px 4px;
-webkit-transition: 0.1s linear 0s;
-o-transition: 0.1s linear 0s;
transition: 0.1s linear 0s;
}
.navigation:hover li {
-webkit-transform: perspective(350px) rotateX(0deg);
-o-transform: perspective(350px) rotateX(0deg);
transform: perspective(350px) rotateX(0deg);
-webkit-transition:0.2s linear 0s;
-o-transition:0.2s linear 0s;
transition:0.2s linear 0s;
}
.navigation:hover .n2 {
-webkit-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.navigation:hover .n3 {
-webkit-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.navigation:hover .n4 {
transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.navigation:hover .n5 {
-webkit-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s;
}
JQUERY/JS
$(".navigation").addClass("js");
$(".navigation").addClass("js").before('<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>');
$("#mobile").click(function(){
$(".navigation").toggle();
});

Instead of the pseudo selector .navigation:hover use a new class like .navigation.open in css, then use .toggleClass() to toggle the menu visibility in the click() handler
jQuery(function ($) {
//$(".navigation").addClass("js");
//$(".navigation").addClass("js").before('<img src="img/menu.png" alt="mobile" width="50" height="50" id="mobile"/>');
$("#mobile").click(function () {
$(".navigation").toggleClass('open');
});
})
Demo: Fiddle
Note: In your fiddle, you forgot to add jQuery library

We Keep Coding

JavaScript is the programming language of the Web.

Showing content by sliding left and up - javascript

I am not sure if I fully understand your question, but I think you can use bottom attribute instead of top. I mean something like this: http://jsfiddle.net/7n9jxo9c/8/

Related

JavaScript - Popup Footnote Disappears if User starts to Scroll

Hamburger menu sliding

CSS link in overlay taking over a div

How to center gridster.js?

Change css:hover effect to jquery.onclick()

Categories

Resources