sticky header transition is not smooth

sticky header transition is not smooth - javascript

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/

Related

navbar help - flickering

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>

How to make a JavaScript 'getElementById' work on an HTML CSS Toggle Switch

I need to activate my HTML/ CSS 'Toggle Switch' using JavaScript.
I'd like the DIV with text to be hidden by default, and when the slider (switcher) is swiped to the left then it 'triggers' the DIV to be 'shown' using JavaScript.
I how that I am on the right path but there's just something not quite right with my action...
function toggleDiv() {
var triggeredDiv = document.querySelector('.triggeredDiv');
if (document.getElementById('flipswitch').checked) {
triggeredDiv.classList.remove('shown');
} else {
triggeredDiv.classList.add('shown');
}
}
document.getElementById('flipswitch').addEventListener("change", toggleDiv);
.flipswitch {
position: relative;
width: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.flipswitch input[type=checkbox] {
display: none;
}
.flipswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 50px;
}
.flipswitch-inner {
width: 200%;
margin-left: -100%;
-webkit-transition: margin 0.3s ease-in 0s;
-moz-transition: margin 0.3s ease-in 0s;
-ms-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.flipswitch-inner:before,
.flipswitch-inner:after {
float: left;
width: 50%;
height: 60px;
padding: 0;
line-height: 60px;
font-size: 18px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flipswitch-inner:before {
content: "MONTHLY";
padding-left: 12px;
background-color: #FFFFFF;
color: #888888;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.flipswitch-inner:after {
content: "BY COUNTRY";
padding-right: 12px;
background-color: #EBEBEB;
color: #888888;
text-align: right;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.flipswitch-switch {
width: 45px;
margin: 7.5px;
background: #FFFFFF;
border: 2px solid #999999;
border-radius: 50px;
position: absolute;
top: 0;
bottom: 0;
right: 139px;
-webkit-transition: all 0.3s ease-in 0s;
-moz-transition: all 0.3s ease-in 0s;
-ms-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.flipswitch-cb:checked+.flipswitch-label .flipswitch-inner {
margin-left: 0;
}
.flipswitch-cb:checked+.flipswitch-label .flipswitch-switch {
right: 0;
}
.triggeredDiv {
display: none;
}
.triggeredDiv.shown {
display: block;
}
<div class="flipswitch">
<input type="checkbox" name="flipswitch" class="flipswitch-cb" id="fs" checked>
<label class="flipswitch-label" for="fs">
<div class="flipswitch-inner"></div>
<div class="flipswitch-switch"></div>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>

The problem here is that you are trying to reference the flipswitch by an id of flipswitch while you gave the switch an id of fs. The references in the javascript just have to be changed to be:
document.getElementById('fs')
instead of
document.getElementById('flipswitch')

Instead of using document.getElementById you should be using something to get the elements by class, since that is what's defined in your markup.
Additionally, your input checkbox isn't toggling checked, it's simply toggling the state of the triggered div.
We can make this work by adjusting the code:
function toggleDiv() {
this.element || ( this.element = document.querySelector('.triggeredDiv') );
this.element.classList.toggle("shown");
}
With comments for better understanding:
function toggleDiv() {
/*
if we don't have a reference in `toggleDiv.element`
we use `document.querySelector` to retrieve
and save the reference to the element `.triggeredDiv`
this ensures that we only go through the DOM once to retrieve the element
no matter how many times the function is called
which is more performant.
*/
this.element || (this.element = document.querySelector('.triggeredDiv'));
/*
after we have the element, we simply toggle the `shown` class
using the `classList.toggle` method.
*/
this.element.classList.toggle("shown");
}
document.querySelector('.flipswitch').addEventListener("change", toggleDiv);
function toggleDiv() {
this.element || ( this.element = document.querySelector('.triggeredDiv') );
this.element.classList.toggle("shown");
}
document.querySelector('.flipswitch').addEventListener("change", toggleDiv);
.flipswitch {
position: relative;
width: 200px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.flipswitch input[type=checkbox] {
display: none;
}
.flipswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 50px;
}
.flipswitch-inner {
width: 200%;
margin-left: -100%;
-webkit-transition: margin 0.3s ease-in 0s;
-moz-transition: margin 0.3s ease-in 0s;
-ms-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.flipswitch-inner:before,
.flipswitch-inner:after {
float: left;
width: 50%;
height: 60px;
padding: 0;
line-height: 60px;
font-size: 18px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.flipswitch-inner:before {
content: "MONTHLY";
padding-left: 12px;
background-color: #FFFFFF;
color: #888888;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.flipswitch-inner:after {
content: "BY COUNTRY";
padding-right: 12px;
background-color: #EBEBEB;
color: #888888;
text-align: right;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
.flipswitch-switch {
width: 45px;
margin: 7.5px;
background: #FFFFFF;
border: 2px solid #999999;
border-radius: 50px;
position: absolute;
top: 0;
bottom: 0;
right: 139px;
-webkit-transition: all 0.3s ease-in 0s;
-moz-transition: all 0.3s ease-in 0s;
-ms-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.flipswitch-cb:checked+.flipswitch-label .flipswitch-inner {
margin-left: 0;
}
.flipswitch-cb:checked+.flipswitch-label .flipswitch-switch {
right: 0;
}
.triggeredDiv {
display: none;
}
.triggeredDiv.shown {
display: block;
}
<div class="flipswitch">
<input type="checkbox" name="flipswitch" class="flipswitch-cb" id="fs" checked>
<label class="flipswitch-label" for="fs">
<div class="flipswitch-inner"></div>
<div class="flipswitch-switch"></div>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>

I think if you just change the two instances of document.getElementById('flipswitch') to document.getElementById('fs') in your function your code works fine.
JSFiddle Example: https://jsfiddle.net/oq8wL2v4/

How do I get the following code to work on a Safari browser?

This code works on Chrome but does not work on Safari. The circle markers on the map are supposed to open up.
html {
background: #eaeaea;
color: #e5e5e5;
text-align: center;
font-family: "Open Sans", Helvetica, sans-serif;
}
body {
max-width: 1200px;
margin: 20px auto;
padding: 0 100px;
overflow-x: hidden;
}
.description {
max-width: 600px;
margin: 0 auto;
color: rgba(229, 229, 229, 0.7);
}
div, img, footer {
position: relative;
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
font-family: "Raleway", Helvetica, sans-serif;
font-weight: 300;
}
h1 {
font-size: 36pt;
}
h2 {
font-size: 24pt;
}
h3 {
font-size: 18pt;
}
h4 {
font-size: 16pt;
}
h5 {
font-size: 14pt;
}
h6 {
font-size: 12pt;
}
p {
font-size: 12pt;
margin-bottom: 12pt;
}
strong {
font-weight: 900;
font-family: "Raleway", Helvetica, sans-serif;
color: #e5e5e5;
}
a {
-webkit-transition: color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
font-family: "Raleway", Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #dff3fd;
}
a:visited {
color: #dff3fd;
}
li.active a, a:hover, a:active {
color: #e5e5e5;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.centered-y {
position: absolute;
width: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.distribution-map {
position: relative;
width: 100%;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
.distribution-map > img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 40px;
height: 40px;
border-radius: 20px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: #e69c53;
border: 4px solid #fff;
}
.distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active, .distribution-map .map-point:focus {
margin: 0;
padding: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 300px;
height: 220px;
color: #e5e5e5;
z-index: 1;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
-webkit-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;
}
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
color: #afe1fa;
}
<link href='//fonts.googleapis.com/css?family=Raleway:300,400,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:100,300,400,700,900' rel='stylesheet' type='text/css'>
<h1>Qualität die weltweit hörbar ist</h1>
<p class="description">This doesn’t look great at small sizes — in the original, I have an alternate rule for displaying on mobile devices. <strong>Click the points to expand them.</strong></p>
<div class="distribution-map">
<!-- This was broken for a while because imgur :( -->
<!-- I don't trust this host. Image here if it goes down: https://i.imgur.com/M7aUkuS.png -->
<img src="https://s24.postimg.org/jnd9wc0n9/M7a_Uku_S.png">
<!--In the original application, these points are injected with Javascript, but ideally, they'd be injected with a haml loop. Because I'm hardcoding content, I'm presenting this as prerendered HTML-->
<button class="map-point" style="top:15%;left:35%">
<div class="content">
<div class="centered-y">
<h2>Nordamerika</h2>
<p>You can put plenty of details in here. In the original, I listed contact information and linked phone numbers and email addresses.</p>
</div>
</div>
</button>
<button class="map-point" style="top:35%;left:50%">
<div class="content">
<div class="centered-y">
<h2>Another Place</h2>
<p>Lorem ipsum something something</p>
</div>
</div>
</button>
<button class="map-point" style="top:76%;left:82.5%">
<div class="content">
<div class="centered-y">
<h2>Marauder Town</h2>
<p>I solemnly swear that I am up to no good</p>
</div>
</div>
</button>
<button class="map-point" style="top:45%;left:16%">
<div class="content">
<div class="centered-y">
<h2>Nordamerika</h2>
<p>Englisch, Spanisch</p>
</div>
</div>
</button>
<button class="map-point" style="top:60%;left:53%">
<div class="content">
<div class="centered-y">
<h2>Toto</h2>
<p>I bless the rains</p>
</div>
</div>
</button>
<button class="map-point" style="top:45%;left:75%">
<div class="content">
<div class="centered-y">
<h2>Asiatisch</h2>
<p>Chinesische Sprecher</p>
</div>
</div>
</button>
</div>
<p class="description">It’s been brought to my attention that OSX/Safari doesn’t support :active for buttons with default settings, so you guys will have to resort to JS or hold down your mouse button to keep :focus triggered.</p>
I was wondering how to fix the codes so that they will work properly? I'm not sure if it needs javascript to work or not. Here is the original code I got this from if it helps:
https://codepen.io/tosa/pen/XjEOzJ?q=interactive+map&limit=all&type=type-pens

Replace the .map-point elements from button to a and add a tabindex attribute to each one.
Demo at https://codepen.io/gpetrioli/full/dZrgoM/

Touch (click) mobile device doesn't work

I have a problem close my drop down menu in mobile devices only. Is there a way how to remove classes i added before?
There is a Css hover for desktop and clickable for mobile devices.
Thank you for any answers.
$(document).ready(function(){
$('.drop_helper').on("click",function() {
$('.drop_nav').toggleClass('dropped');
$('.drop_helper').toggleClass('dropped_on').toggleClass('drop_down_btn');
});
});
li.drop_down_btn {
color:#a3a3a3;
}
li.drop_down_btn:after {
color:#a3a3a3;
font-family: 'FontAwesome';
content: "\f107";
font-size:16px;
padding-left: 9px;
}
li.drop_down_btn:hover {
cursor: pointer;
color:#1b2532;
}
li.drop_down_btn:hover:after {
font-family: 'FontAwesome';
content: "\f106";
color:#1b2532;
}
ul.drop_down {
position: relative;
display: inline-block;
list-style-type:none
}
ul.drop_nav {
list-style-type:none;
visibility: hidden;
opacity:0;
position: absolute;
text-align: left;
line-height: 26px;
/* background:url(bg_drop_down.png);*/
background-color:#FCFCFC;
padding:20px;
margin-left:-20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
khtml-border-radius: 10px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.drop_nav li a {
display: block;
}
ul.drop_down:hover ul.drop_nav {
visibility: visible;
opacity:1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 2000
}
ul.dropped {
visibility: visible;
opacity:1;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 2000;
}
.dropped_on:after {
color: #1b2532;
font-family: 'FontAwesome';
content: "\f106";
font-size: 16px;
padding-left: 9px;
}
.dropped_on:hover {
cursor:pointer
}
.drop_down:hover .drop_down_btn {
color: #1b2532;
}
.drop_down:hover .drop_down_btn:after {
color: #1b2532;
font-family: 'FontAwesome';
content: "\f106";
}
.drop_down .menu_btn a{
color: #a3a3a3;
}
.drop_down .menu_btn a:hover {
color: #1b2532;
text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="drop_down">
<li class="drop_helper drop_down_btn">Category</li>
<ul class="drop_nav">
<li><a title="Food" href="/posts/food/">Food</a></li>
<li><a title="Fashion" href="/posts/fashion/">Fashion</a></li>
<li><a title="Entertainment" href="/posts/entertainment/">Entertainment</a></li>
</ul>
</ul>

Your question is a bit unclear but yes with a little bit of jQuery it's easy to remove a class, for example:
$('.drop_nav').removeClass('dropped');
Will remove the dropped class from elements with the drop_nav class.
EDIT
To also trigger on mobile touch events add the touchstart event to your jQuery.on like so:
$('.drop_helper').on('click touchstart'), function() {
...

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.

sticky header transition is not smooth - javascript

Related

navbar help - flickering

How to make a JavaScript 'getElementById' work on an HTML CSS Toggle Switch

How do I get the following code to work on a Safari browser?

Touch (click) mobile device doesn't work

Slide out text from behind navigation

Categories

Resources