navbar help - flickering

navbar help - flickering - javascript

My nav-bar benefits from a function that, once you scroll slightly, the navbar becomes smaller. I have also added a logo that changes on scroll. But during the logo change animation when you scroll UP the page, there is some really bothersome flickering. I believe it's an issue with my JS. Could you please have a look and tell me what you are experiencing? Thanks.
$(document).on("scroll", function() {
if ($(document).scrollTop() > 2) {
$('.miniBanner').addClass('show')
$('.logoBanner').addClass('hide')
$("header").addClass("shrink")
$("header").removeClass("grow")
} else {
$('.miniBanner').removeClass('show')
$('.logoBanner').removeClass('hide')
$("header").removeClass("shrink");
$("header").addClass("grow")
}
});
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
header {
width: 100%;
padding: 30px 0px;
/* revert to 50px 0px if we want the scroll animation */
/*animation magic*/
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
z-index: 9999;
top: 0;
position: sticky;
margin: 0;
background-color: white;
box-shadow: 1px 1px 16px 2px red;
}
.shrink {
padding: 10px 0;
box-shadow: 1px 1px 16px 2px #0000a0;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
visibility: visible;
opacity: 1;
}
.grow {
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
header.shrink .logoBanner {
width: 8vw;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
header.grow .logoBanner {
width: 100vw;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
.miniBanner {
display: none;
visibility: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
.miniBanner.show {
display: flex;
transition: all 0.4s ease-in-out;
visibility: visible;
opacity: 1;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
width: 5vw
}
.logoBanner.hide {
visibility: hidden;
opacity: 0;
display: none;
transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
}
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
list-style: none;
width: 90%;
padding: 0;
margin: 0;
}
a {
width: 80px;
display: block;
margin: 5px;
border-radius: 15px;
padding-top: 5px;
}
li {
justify-content: center;
text-align: center;
}
li a {
background-color: white;
text-decoration: none;
color: #0000a0;
}
.logo {
/* brand guidelines */
display: flex;
justify-content: flex-start;
margin-right: 70%;
justify-content: center;
align-items: center;
}
.logoBanner {
width: 250vw;
background-color: white
}
.page {
height: 200vh;
width: 100vw;
}
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.1/d3.min.js"></script>
</script>
<body>
<header>
<ul>
<a href="#" class="logo">
<img class='logoBanner' src="https://2.bp.blogspot.com/_ORzF0-MDB50/TUI5aoTbDrI/AAAAAAAAEy0/kVSBqTuv1N0/s1600/bufforphington.jpg" alt="">
<img class='miniBanner' src="https://www.almanac.com/sites/default/files/users/AlmanacStaffArchive/hatching-raising-chicken-chicks_full_width.jpg" alt="">
</a>
<li>Portal</li>
<li>Feedback</li>
<li>Logout</li>
</ul>
</header>
<div class=page></div>
</body>

Related

How to increase/decrease width depending upon a class from another div?

I have designed a process timeline for my website.
Here's the code:
$('.pt-action-bar > .pt-action-bar-button').click(function () {
$(this).toggleClass('pt-action-bar-button--active').siblings().removeClass('pt-action-bar-button--active');
});
.process-timeline {
position: relative
}
.process-timeline .pt-timeline {
top: 57px;
left: 85px;
right: 85px;
position: absolute;
display: none;
height: 1px
}
#media (min-width: 768px) {
.process-timeline .pt-timeline {
display: block
}
}
.process-timeline .pt-timeline__backside-bar {
height: 1px;
background-color: #ebebeb
}
.process-timeline .pt-timeline__frontside-bar {
width: 0;
height: 1px;
top: 0;
left: 0;
position: absolute;
background-color: #00cdac;
-webkit-transition: width .4s ease;
transition: width .4s ease
}
.process-timeline .pt-action-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
#media (min-width: 768px) {
.process-timeline .pt-action-bar {
position: relative;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
}
.process-timeline .pt-action-bar-button {
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: none;
border: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin: 0;
outline: none;
padding: 0;
width: 170px;
cursor: pointer
}
.process-timeline .pt-action-bar-button__background-number {
top: 0;
left: 50%;
position: absolute;
color: #ebebeb;
font-family: CamphorBold;
font-weight: 800;
font-size: 100px;
line-height: 1em;
-webkit-transition: top .4s ease;
transition: top .4s ease;
opacity: .3;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.process-timeline .pt-action-bar-button-icon {
width: 114px;
height: 114px;
position: relative;
margin: 0 auto
}
.process-timeline .pt-action-bar-button-icon__inner-ring-1 {
width: 114px;
height: 114px;
top: 0;
left: 0;
position: absolute;
border: 1px solid #ebebeb;
border-radius: 100px;
opacity: .2;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .4s ease;
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease
}
.process-timeline .pt-action-bar-button-icon__inner-ring-2 {
width: 84px;
height: 84px;
left: 15px;
position: absolute;
top: 15px;
border: 1px solid #ebebeb;
border-radius: 100px;
opacity: .5;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .4s ease;
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease
}
.process-timeline .pt-action-bar-button-icon__inner-ring-3 {
width: 54px;
height: 54px;
left: 30px;
position: absolute;
top: 30px;
border: 1px solid #ebebeb;
border-radius: 100px;
opacity: .8;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .4s ease;
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease
}
.process-timeline .pt-action-bar-button-icon__inner-ring-4 {
-webkit-box-shadow: 0 4px 8px 0 rgba(0, 205, 172, 0.4);
box-shadow: 0 4px 8px 0 rgba(0, 205, 172, 0.4);
opacity: 0;
-webkit-transition: opacity .4s ease;
transition: opacity .4s ease
}
.process-timeline .pt-action-bar-button-icon__inner-ring-4,
.process-timeline .pt-action-bar-button-icon__inner-ring-5 {
width: 26px;
height: 26px;
left: 44px;
position: absolute;
top: 44px;
background-color: #00cdac;
border: 6px solid #00cdac;
border-radius: 100px
}
.process-timeline .pt-action-bar-button-icon__inner-ring-5 {
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: -webkit-transform .4s ease;
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease
}
.process-timeline .pt-action-bar-button-icon__inner-ring-6 {
width: 14px;
height: 14px;
left: 50px;
position: absolute;
top: 50px;
background-color: #fff;
border-radius: 100px;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform .2s ease;
transition: -webkit-transform .2s ease;
transition: transform .2s ease;
transition: transform .2s ease, -webkit-transform .2s ease
}
.process-timeline .pt-action-bar-button__title {
top: -20px;
position: relative;
font-family: CamphorRegular;
font-size: 18px;
line-height: 24px;
-webkit-transition: color .4s ease;
transition: color .4s ease;
color: #cfd7df
}
.process-timeline .pt-action-bar-button__text {
color: #6b7c93;
font-family: CamphorThin;
font-size: 14px;
line-height: 24px;
-webkit-transition: opacity .4s ease;
transition: opacity .4s ease
}
#media (min-width: 768px) {
.process-timeline .pt-action-bar-button--active .pt-action-bar-button__background-number {
top: -60px
}
.process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon__inner-ring-1 {
-webkit-transform: scale(1);
transform: scale(1)
}
.process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon__inner-ring-2 {
-webkit-transform: scale(1);
transform: scale(1)
}
.process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon__inner-ring-3 {
-webkit-transform: scale(1);
transform: scale(1)
}
.process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon__inner-ring-4 {
opacity: 1
}
.process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon__inner-ring-5 {
-webkit-transform: scale(1);
transform: scale(1)
}
.process-timeline .pt-action-bar-button--active .pt-action-bar-button-icon__inner-ring-6 {
-webkit-transform: scale(1);
transform: scale(1)
}
.process-timeline .pt-action-bar-button--active .pt-action-bar-button__title {
color: #0e2b5c
}
.process-timeline .pt-action-bar-button--active .pt-action-bar-button__text {
opacity: 1
}
.process-timeline .pt-action-bar-button__text {
opacity: 0
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="process-timeline">
<div class="pt-timeline">
<div class="pt-timeline__backside-bar">
<div class="pt-timeline__frontside-bar" style="width: 0%;"></div>
</div>
</div>
<div class="pt-action-bar"><button class="pt-action-bar-button pt-action-bar-button--active">
<div class="pt-action-bar-button__background-number">
01
</div>
<div class="pt-action-bar-button-icon">
<div class="pt-action-bar-button-icon__inner-ring-1"></div>
<div class="pt-action-bar-button-icon__inner-ring-2"></div>
<div class="pt-action-bar-button-icon__inner-ring-3"></div>
<div class="pt-action-bar-button-icon__inner-ring-4"></div>
<div class="pt-action-bar-button-icon__inner-ring-5"></div>
<div class="pt-action-bar-button-icon__inner-ring-6"></div>
</div>
<div class="pt-action-bar-button__title">Fast development</div>
<div class="pt-action-bar-button__text">Ruby on Rails is perfect for
producing high quality code very quickly. If you want your project to
be ready for a deadline or hit the market fast, Ruby is the way to go.</div>
</button><button class="pt-action-bar-button">
<div class="pt-action-bar-button__background-number">
02
</div>
<div class="pt-action-bar-button-icon">
<div class="pt-action-bar-button-icon__inner-ring-1"></div>
<div class="pt-action-bar-button-icon__inner-ring-2"></div>
<div class="pt-action-bar-button-icon__inner-ring-3"></div>
<div class="pt-action-bar-button-icon__inner-ring-4"></div>
<div class="pt-action-bar-button-icon__inner-ring-5"></div>
<div class="pt-action-bar-button-icon__inner-ring-6"></div>
</div>
<div class="pt-action-bar-button__title">Fast prototyping</div>
<div class="pt-action-bar-button__text">Developing a software project from
scratch can be a long process, but RoR allows for creating MVPs quickly
thanks to dozens of ready-made libraries.</div>
</button><button class="pt-action-bar-button">
<div class="pt-action-bar-button__background-number">
03
</div>
<div class="pt-action-bar-button-icon">
<div class="pt-action-bar-button-icon__inner-ring-1"></div>
<div class="pt-action-bar-button-icon__inner-ring-2"></div>
<div class="pt-action-bar-button-icon__inner-ring-3"></div>
<div class="pt-action-bar-button-icon__inner-ring-4"></div>
<div class="pt-action-bar-button-icon__inner-ring-5"></div>
<div class="pt-action-bar-button-icon__inner-ring-6"></div>
</div>
<div class="pt-action-bar-button__title">Libraries for every occasion</div>
<div class="pt-action-bar-button__text">The Ruby community has created a
rich repository of libraries, called gems. Gems are ready-made
solutions and make development much easier and faster.</div>
</button><button class="pt-action-bar-button">
<div class="pt-action-bar-button__background-number">
04
</div>
<div class="pt-action-bar-button-icon">
<div class="pt-action-bar-button-icon__inner-ring-1"></div>
<div class="pt-action-bar-button-icon__inner-ring-2"></div>
<div class="pt-action-bar-button-icon__inner-ring-3"></div>
<div class="pt-action-bar-button-icon__inner-ring-4"></div>
<div class="pt-action-bar-button-icon__inner-ring-5"></div>
<div class="pt-action-bar-button-icon__inner-ring-6"></div>
</div>
<div class="pt-action-bar-button__title">Highest standard of web
development</div>
<div class="pt-action-bar-button__text">RoR has been battle-tested by many
developers in commercial projects. At Netguru, we can deliver
high-quality large-scale projects successfully.</div>
</button></div>
</div>
Now here's what I want:
When ".pt-action-bar-button--active" is added to "pt-action-bar-button" the width of ".pt-timeline__frontside-bar" should get increased/ decreased by 33%.
So the line also gets the green color.
I am attaching a screenshot so that you can understand what I want:

Something like this perhaps? JSFiddle: http://jsfiddle.net/s7xvpa23/1/
$('.pt-action-bar > .pt-action-bar-button').click(function () {
$(this).toggleClass('pt-action-bar-button--active').siblings().removeClass('pt-action-bar-button--active');
let buttonsArr = Array.from($('.pt-action-bar').children('button'));
buttonsArr.forEach((button, index) => {
if(button.className.indexOf('active') !== -1){
if(index === 0){
$('.pt-timeline__frontside-bar').css('width', '0%');
}
else if(index === 1){
$('.pt-timeline__frontside-bar').css('width', '33%');
}
else if(index === 2){
$('.pt-timeline__frontside-bar').css('width', '66%');
}
else if(index === 3){
$('.pt-timeline__frontside-bar').css('width', '100%');
}
}
});
});

Adding another nav item using javascript and css

I have created a burger menu, and copied this code https://codepen.io/woodwoerk/pen/BoEGYZ?q=burger+menu&limit=all&type=type-pens. However in this example there is three items in the drop down menu and in my website I have four. I tried adding another item to the drop down and changing the css and js however now I have a blank space where the new item has been added.
Here is what the menu looks like in the browser
Not sure how I can fix this to show all four items in the drop down. Below is the code I have
var Menu = {
el: {
menu: $('.menu'),
menuTop: $('.menu-top'),
menuSecond: $('.menu-second'),
menuClose: $('.menu-close'),
menuMiddle: $('.menu-middle'),
menuBottom: $('.menu-bottom'),
menuText: $('.menu-text')
},
init: function() {
Menu.bindUIactions();
},
bindUIactions: function() {
Menu.el.menu.on('click', function(event) {
Menu.activateMenu(event);
event.preventDefault();
});
},
activateMenu: function() {
Menu.el.menuTop.toggleClass('menu-top-expand expand');
Menu.el.menuSecond.toggleClass('menu-second-expand expand');
Menu.el.menuMiddle.toggleClass('menu-middle-expand expand');
Menu.el.menuBottom.toggleClass('menu-bottom-expand expand');
Menu.el.menuText.toggleClass('menu-text-expand');
Menu.el.menuClose.toggleClass('menu-close-visible');
}
};
//Stop menu item click closing the menu
$(".menu .menu-global").click(function(e) {
e.stopPropagation();
});
Menu.init();
span {
display: inline-block;
vertical-align: middle;
color: white;
}
ul {
display: block;
list-style-type: none;
text-align: right;
}
a {
color: #FFF;
}
a:hover {
opacity: 0.7;
}
.menu {
margin: 0 20px 0 0;
padding-left: 1.25em;
cursor: pointer;
position: relative;
width: 30px;
height: 50px;
text-align: right;
float:right;
}
.menu-close {
font-size: 0em;
opacity: 0;
text-align: center;
font-weight: bold;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.menu-close-visible {
font-size: 2em;
opacity: 1;
-webkit-transition: 0.2s 0.4s;
transition: 0.2s 0.4s;
}
.menu-global {
z-index: -1;
position: absolute;
left: 0;
height: 10px;
width: 100%;
background-color: #ffffff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.menu-global:hover {
left: 10px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.menu-top {
top: 0;
}
.menu-second {
top: 18px;
}
.menu-middle {
top: 36px;
}
.menu-bottom {
top: 54px;
}
.menu-text{
opacity: 0;
font-size: 0em;
padding: 10px 0;
-webkit-transition: 0.1s;
transition: 0.1s;
}
.expand {
box-shadow: rgba(0, 0, 0, 0.1) -2.5px 5px 7.5px, rgba(0, 0, 0, 0.1) 2.5px 5px 7.5px;
width: 200px;
height: 50px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.menu-top-expand {
top: 50px;
background: #FFF8E1;
-webkit-transition: all 0.5s 0.3s, left 0.1s;
transition: all 0.5s 0.3s, left 0.1s;
}
.menu-second-expand {
top: 100px;
background: #FFF8E1;
-webkit-transition: all 0.5s 0.2s, left 0.1s;
transition: all 0.5s 0.2s, left 0.1s;
}
.menu-middle-expand {
top: 150px;
background: #FFECB3;
-webkit-transition: all 0.5s 0.1s, left 0.1s;
transition: all 0.5s 0.1s, left 0.1s;
}
.menu-bottom-expand {
top: 200px;
height: 150px;
background: #FFE082;
-webkit-transition: all 0.5s, left 0.1s;
transition: all 0.5s, left 0.1s;
}
.menu-text-expand{
color: #000000;
opacity: 0.8;
padding: 10px;
font-size: 1.3em;
-webkit-transition: all 0.2s 0.7s, font-size 0.1s;
transition: all 0.2s 0.7s, font-size 0.1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<div class="menu-close fa fa-close"></div>
<li class="menu-global menu-top"><span class="menu-text">Home</span></li>
<li class="menu-global menu-second"><span class="menu-text">View Holiday Gallery</span></li>
<li class="menu-global menu-middle"><span class="menu-text">View Itinerary</span></li>
<li class="menu-global menu-bottom"><span class="menu-text">Settings</span></li>
</ul>

If you are adding another menu element you need to make sure you add all the proper required additions in your code. From hacking through it i got this:
First add the item in the html, and refer to it as bottom2 from now on:
<li class="menu-global menu-bottom2"><span class="menu-text">My ExtraElement</span></li>
notice the class is now unique: menu-bottom2. That is so the the margin from top would be properly aggregated to display it below the first .menu-bottom element.
now for the css add this:
.menu-bottom2 {
top: 54px;
}
and this:
.menu-bottom2-expand {
top: 200px;
background: #FFECB3;
-webkit-transition: all 0.5s 0.1s, left 0.1s;
transition: all 0.5s 0.1s, left 0.1s;
}
and finally the javascript:
in the menu.el:
menuBottom2: $('.menu-bottom2'),
in the menu.activateMenu:
Menu.el.menuBottom2.toggleClass('menu-bottom2-expand expand');
and here is the full codepen:
https://codepen.io/anon/pen/vdKYxb

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.

sticky header transition is not smooth

I have created a sticky header. In which i am resizing the logo image also.
This is working fine. I just want to smothness when the logo image gets resized to smaller and bigger size.
Can i get any help in this.
https://jsfiddle.net/3v7aen3v/
<script>
function init() {
window.addEventListener('scroll', function(e) {
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector(".header-top");
if (distanceY > shrinkOn) {
classie.add(header, "smaller");
} else {
if (classie.has(header, "smaller")) {
classie.remove(header, "smaller");
}
}
});
}
window.onload = init();
</script>
<div class="header-top">
<div class="container clearfix">
<img src="http://must-munich.com/wp-content/uploads/Logo_MUST-header-subtitle-2-s.png" id="logo" alt="MUST 2016" />
<nav>
Lorem
Ipsum
Dolor
</nav>
</div>
</div>
<!-- /header -->
<div style="height:3000px"></div>
<style>
div.header-top {
width: 100%;
height: 150px;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #0683c9;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s;
}
div.header-top img#logo {
display: inline-block;
height: 150px;
/* line-height: 150px;*/
float: left;
/* font-family: "Oswald", sans-serif;
font-size: 60px;
color: white;*/
/* font-weight: 400;*/
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
div.header-top nav {
display: inline-block;
float: right;
}
div.header-top nav a {
line-height: 150px;
margin-left: 20px;
color: #9fdbfc;
font-weight: 700;
font-size: 18px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header nav a:hover {
color: white;
}
div.header-top.smaller {
height: 100px;
}
div.header-top.smaller img#logo {
font-size: 30px;
height: auto;
line-height: 75px;
width: 125px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
div.header-top.smaller nav a {
line-height: 75px;
}
</style>

div.header-top img#logo {
display: inline-block;
height: 150px;
width:200px;
float: left;
font-size: 60px;
color: white;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
Give a width to your image and give height to your smaller image
div.header-top.smaller img#logo {
font-size: 30px;
height: 100px;
line-height: 75px;
width: 125px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
https://jsfiddle.net/bc4p26e4/

Slide out text from behind navigation

Firstly let me say I'm starting to realize I need to learn jQuery, and while I'm here asking for help, this weekend I'm going to hit the Treehouse jQuery videos hard.
I'd like a little help with an effect I'm trying to create with a navigation menu please, if you take a look at the fiddle I've made:
http://jsfiddle.net/number8pie/kvMkF/4/
As you can see there's a list of navigation links and over them is the text corresponding to the link. What I'd like is for that text to initially not be view-able to anyone except screen readers, and when a user mouse-over's a link the corresponding text slides from behind the leftmost list item into visibility, and the text that says "NAVIGATE" disappears. I'd like all of the text to slide from where it is initially and to the same place, where the "NAVIGATE" text is.
I'm open to the solution being only CSS (don't think its possible with only CSS), jQuery or JavaScript.
Thanks in advance for any help, and I'll make sure to start learning jQuery as soon as I can.
Here's the code:
HTML:
<nav class="main-nav">
<p class="nav-hvr-init">Navigate</p>
<ul> <!-- no closing tag on <li> so that the whitespace between elements is removed-->
<li id="about-us">
<a class="nav-link" href="#"></a>
<span class="nav-text">about us</span>
<li id="products">
<a class="nav-link" href="#"></a>
<span class="nav-text">products</span>
<li id="the-team">
<a class="nav-link" href="#"></a>
<span class="nav-text">the team</span>
<li id="environment">
<a class="nav-link" href="#"></a>
<span class="nav-text">environment</span>
<li id="contact">
<a class="nav-link" href="#"></a>
<span class="nav-text">contact</span>
</ul>
</nav>
CSS:
#nav-row {
background-color: #CCFFCC;
}
#nav-col {
height: 56px;
padding-top: 0;
background-color: #336600;
}
.main-nav {
height: 56px;
margin: 0 auto;
background-color: #336600;
position: relative;
}
.main-nav ul li {
height: 56px;
width: 56px;
margin: 0;
font-size: 21px;
display: inline-block;
text-transform: uppercase;
}
#about-us {
background: #66CC66 url('http://s10.postimg.org/xqx00ofzp/about_us.png') no-repeat center;
}
#about-us:hover {
background: #66CC66 url('http://s10.postimg.org/9borzmh2t/about_us_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#about-us:active {
background: #66CC66 url('http://s10.postimg.org/ekjsxhzhx/about_us_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
#products {
background: #33CC33 url('http://s10.postimg.org/defsypb79/products.png') no-repeat center;
}
#products:hover {
background: #33CC33 url('http://s10.postimg.org/y2j1r6lth/products_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#products:active {
background: #33CC33 url('http://s10.postimg.org/6p99iopv9/products_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
#the-team {
background: #339900 url('http://s10.postimg.org/4sh4ruol1/the_team.png') no-repeat center;
}
#the-team:hover {
background: #339900 url('http://s10.postimg.org/buf2e1s6t/the_team_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#the-team:active {
background: #339900 url('http://s10.postimg.org/wd9yj4645/the_team_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
#environment {
background: #006600 url('http://s10.postimg.org/gb7fcq6et/environment.png') no-repeat center;
}
#environment:hover {
background: #006600 url('http://s10.postimg.org/n47s8zx85/environment_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#environment:active {
background: #006600 url('http://s10.postimg.org/6y6u8m2np/environment_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
#contact {
background: #003300 url('http://s10.postimg.org/9pq3z816d/contact.png') no-repeat center;
}
#contact:hover {
background: #003300 url('http://s10.postimg.org/udordymet/contact_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#contact:active {
background: #003300 url('http://s10.postimg.org/4scje3z79/contact_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
.main-nav > ul {
height: 56px;
line-height: 100%;
margin: 0;
position: relative;
float:right;
padding: 0;
}
li > svg {
margin: 9% 0 0 11%;
}
li > a {
display: block;
padding: 0;
margin: 0;
}
.nav-link {
margin: 0;
height: 56px;
}
.nav-text {
color: #FFFFFF;
font-family: 'Arial Black';
font-size: 21px;
position: absolute;
left: 0;
bottom: 0;
}
.nav-hvr-init {
color: #FFFFFF;
font-family: 'Arial Black';
font-size: 21px;
text-transform: uppercase;
line-height: 100%;
margin-right: 4px;
margin-bottom: 0;
position: absolute;
right: 280px;
bottom: 0px;
opacity: 0.2;
}
.txt-arrows {
font-family: 'Arrows';
font-size: 18px;
text-transform: none;
margin-bottom: 3px;
margin-left: 4px;
}

How about that? Is this what you wanted?
I also added sr-only class (from Bootstrap).
http://jsfiddle.net/kvMkF/8/
$( ".nav-link" ).hover(
function() {
var text = $( this ).siblings( "span" ).html();
$(".nav-hvr-init")
.stop()
.animate({right: '0px'},200,function() {
$(this).html(text).animate({right:'280px'},200);
});
}, function() {
$(".nav-hvr-init")
.stop()
.animate({right: '0px'},200,function() {
$(this).html('Navigate').animate({right:'280px'},200);
});
}
);

Quick and easy.
jQuery:
$( ".nav-link" ).hover(
function() {
var ntext = $( this ).siblings( "span" ).html();
$( ".nav-hvr-init" ).html( ntext );
}, function() {
$( ".nav-hvr-init" ).html( "Navigate" );
}
);
Also added display: none; to .nav-text
jsFiddle

$(".main-nav li").hover(function(){
$(".nav-hvr-init").fadeOut();
$(this).find('.nav-text').show().animate({left : '150px'});
}, function(){
$(".nav-hvr-init").fadeIn();
$(this).find('.nav-text').animate({left : '-100%'});
});
here is a fiddle

We Keep Coding

JavaScript is the programming language of the Web.

navbar help - flickering - javascript

Related

How to increase/decrease width depending upon a class from another div?

Adding another nav item using javascript and css

CSS link in overlay taking over a div

sticky header transition is not smooth

Slide out text from behind navigation

Categories

Resources