Change logo size on scroll events

Change logo size on scroll events - javascript

I am using JavaScript to shrink my logo on scroll down and grow on scroll up.
I am using the jQuery addClass and removeClass functions.
I am getting some troubles.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
$(function(){
var navStatesInPixelHeight = [65,90];
var changeNavState = function(nav, newStateIndex) {
nav.data('state', newStateIndex).stop().animate({
height : navStatesInPixelHeight[newStateIndex] + 'px'
}, 600);
};
var boolToStateIndex = function(bool) {
return bool * 1;
};
var maybeChangeNavState = function(nav, condState) {
var navState = nav.data('state');
if (navState === condState) {
changeNavState(nav, boolToStateIndex(!navState));
}
};
$('.top_nav').data('state', 1);
$(window).scroll(function(){
var $nav = $('.top_nav');
if ($(document).scrollTop() > 0) {
$('.contact_details').hide();
$nav.addClass('fixed-nav');
$('.top_nav').css('background-color','rgba(33,33,33,1.0)');
maybeChangeNavState($nav, 1);
} else {
$('.contact_details').show();
$nav.removeClass('fixed-nav');
$('.top_nav').css('background-color','rgba(0,0,0,.5)');
maybeChangeNavState($nav, 0);
}
});
});
<header>
<div class="top_nav">
<div class="logo">
<a id="site-logo" href="#"><img src="http://www.robinwhale.co.uk/pages/wisdom/sigs_files/google-logo.jpg" alt="LOGO"></a>
</div>
<div class="contact_details">
<p>Need Help, Call: +92 445676654 | Mail</p>
</div>
<div class="nav_bar">
<ul>
<li>Services</li>
<li>Solution</li>
<li>Support</li>
<li>Partners</li>
<li>Contacts</li>
</ul>
</div>
</div>
</header>
<div class="container">
</div>
*{
margin: 0;
padding: 0;
}
/* Top Menu Start Here */
.top_nav{
height: 90px;
width: 100%;
background: rgba(0,0,0,.5);
position: fixed;
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
-moz-transition:all 0.7s ease;
-o-transition:all 0.7s ease;
-ms-transition:all 0.7s ease;
}
.top_nav .logo{
margin-top: 2px;
margin-left: 20px;
height: 75px;
width: 200px;
float: left;
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
-moz-transition:all 0.7s ease;
-o-transition:all 0.7s ease;
-ms-transition:all 0.7s ease
}
.top_nav .logo a img{
height: 100%;
width: 100%;
}
.contact_details{
margin-top: 5px;
margin-left: 1115px;
min-height: 25px;
min-width: 230px;
float: right;
color: #fff;
position: absolute;
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
-moz-transition:all 0.7s ease;
-o-transition:all 0.7s ease;
-ms-transition:all 0.7s ease;
}
.contact_details p{
font-size: 14px;
text-align: center;
}
.contact_details p a{
text-decoration: none;
color: #fff;
}
.nav_bar{
margin-left: 700px;
margin-top: 55px;
position: absolute;
}
.nav_bar ul{
list-style-type: none;
}
.nav_bar ul li{
display: inline-block;
text-align: center;
float: left;
}
.nav_bar ul li a{
text-decoration: none;
padding: 12px;
margin: 8px;
font-size: 20px;
color: #fff;
position: relative;
}
.nav_bar ul li a::after{
content: '';
display: inline-block;
position:absolute;
width: 0px;
height: 5px;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #ff6600;
transition: width .4s;
}
.nav_bar ul li a:hover::after{
width: 100%;
}
/* After Scroll */
}
.fixed-nav .logo {
height: 40px;
width: 100px;
}
.fixed-nav .logo img {
width: 100%;
}

Mofidy your css
You have to update logo height on fixed nav
.top_nav .logo{
margin-top: 2px;
margin-left: 20px;
height: 75px;
width: 200px;
float: left;
/* REMOVE transitions from here */
/*
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
-moz-transition:all 0.7s ease;
-o-transition:all 0.7s ease;
-ms-transition:all 0.7s ease;
*/
}
.top_nav .logo a img {
transition: all 0.9s ease 0.7s;
}
.fixed-nav .logo img {
height: 80% !important;
}

Related

Css3 animation glitch error Chrome and Firefox

I have this sidebar menu with css and bootstrap:
(please reduce size of the iframe to see the menu button)
http://jsfiddle.net/s8hts3v7/11/
If you toggle the sidebar menu you can detect some glitch and the sidebar is not smoothing in the animation.
This bad effect or glitch error it is even more detectable with Firefox.
The classes that I used for this menu are:
/*sidebar nav*/
.navbar-toggle {
background: #CFD8DC;
color: #666;
}
.navbar-toggle .icon-bar {
background: #666;
width: 17px;
height: 3px;
}
#sidebar-wrapper {
background: rgba(0,0,0,.5);
bottom: 0;
z-index: 500;
-webkit-transition-property: background,top,right,bottom,left;
transition-property: background,top,right,bottom,left;
-webkit-transition-duration: .5s,0,0,0,0;
transition-duration: .5s,0,0,0,0;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
#sidebar-wrapper.active {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#sidebar-menu {
margin-left: -250px;
left: 0;
width: 250px;
background: #f5f5f5;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.5s ease-in 0s;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-ms-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 50px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
line-height: 55px;
font-size: 18px;
background: white;
text-indent: initial;
padding-left: 12px;
}
.sidebar-brand img {
width: 134px;
}
.sidebar-brand #menu-close {
font-size: 26px;
font-weight: 200;
display: inline-block;
vertical-align: middle;
color: #9E9E9E;
cursor: pointer;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
display: inline-block;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#sidebar-wrapper.active #sidebar-menu {
left: 250px;
width: 250px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
How can i fix this?

Comment or remove background: rgba(0,0,0,.5); on #sidebar-wrapper (it is overlaying body when toggled):
Link to your JSFiddle
Firefox:
Chrome:
$(document).ready(function() {
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
});
html {
-webkit-font-smoothing: antialiased;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #737373;
font-size: 14px;
-webkit-font-smoothing: antialiased;
background: #E9E9E9 !important;
}
/*sidebar nav*/
.navbar-toggle {
background: #CFD8DC !important;
color: #666 !important;
}
.navbar-toggle .icon-bar {
background: #666 !important;
width: 17px !important;
height: 3px !important;
}
#sidebar-wrapper {
/* background: rgba(0,0,0,.5); */
bottom: 0;
z-index: 500;
-webkit-transition-property: background, top, right, bottom, left;
transition-property: background, top, right, bottom, left;
-webkit-transition-duration: .5s, 0, 0, 0, 0;
transition-duration: .5s, 0, 0, 0, 0;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
#sidebar-wrapper.active {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#sidebar-menu {
margin-left: -250px;
left: 0;
width: 250px;
background: #f5f5f5;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.5s ease-in 0s;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-ms-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 50px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 55px;
line-height: 55px;
font-size: 18px;
background: white;
text-indent: initial;
padding-left: 12px;
}
.sidebar-brand img {
width: 134px;
}
.sidebar-brand #menu-close {
font-size: 26px;
font-weight: 200;
display: inline-block;
vertical-align: middle;
color: #9E9E9E;
cursor: pointer;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
display: inline-block;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#sidebar-wrapper.active #sidebar-menu {
left: 250px;
width: 250px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body id="fotieditor">
<div class="container-fluid">
<button id="menu-toggle" type="button" class="navbar-toggle toggle pull-left" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="sidebar-wrapper">
<div id="sidebar-menu">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<i id="menu-close" class="fa fa-times-circle-o"></i>
<img src="https://rp-static.com/www_mantaspersonalizadas/svg/mantas-personalizadas.svg" alt="">
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</body>

Jquery drop down hover menu only applied to first <li>

I have been playing around with trying to get the drop down hover menu to slide down the screen. For some reason, it only works with the first menu item and the others then just appear.
What is it that I am doing wrong?
$('.nav-main li ul').hide().removeClass('.drop-down');
$('.nav-main li').hover(function() {
$('ul', this).stop().slideDown(1000);
}, function() {
$('ul', this).stop().slideUp(1000);
});
.nav-main {
position: absolute;
top: 0;
height: 65px;
width: 100%;
text-align: center;
}
.nav-main ul {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 22px;
line-height: 100%;
font-family: 'Futura W01 Bold', sans-serif;
text-align: center;
text-transform: uppercase;
display: inline-block;
width: 90%;
height: inherit;
}
.nav-top {
position: relative;
margin: 0;
padding: 0 66px 0 50px;
float: none;
display: inline-block;
list-style: none;
height: inherit;
}
.nav-top:first-child {
padding-left: 0;
}
.nav-top:last-child {
background-image: none;
padding-right: 0;
}
.nav-top:last-child:after {
content: none;
}
.nav-top > a {
position: relative;
display: block;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active a {
color: #454545;
border-bottom: 4px solid #00e9d9;
text-decoration: none;
}
.nav-top ul {
/*display: none;*/
position: absolute;
left: -8.75px;
width: 105%;
top: calc(100% - 1px);
}
.nav-top:hover ul {
/*display: inline;*/
position: absolute;
top: calc(100% - 1px);
left: -8.75px;
width: 105%;
/*-moz-transition: all 1.2s ease-in-out;
-webkit-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
transition: all 1.2s ease-in-out; */
}
.nav-top li {
float: center;
background-color: #e9e9e9;
padding-top: 16px;
padding-bottom: 16px;
}
.nav-top li > a {
position: relative;
display: inline;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top:after {
display: block;
position: absolute;
left: 100%;
top: -17px;
width: 22px;
z-index: 1;
transform: translateX(-50%);
height: 100%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav-main" role="navigation">
<ul>
<li class="nav-top">Welcome</li>
<li class="nav-top">About
<ul class="drop-down">
<li>Services</li>
<li>Clients</li>
<li>Press</li>
<li>Leadership</li>
<li>Twitter</li>
</ul>
</li>
<li class="nav-top">Contact</li>
</ul>
<span class="nav-arrow"></span>
</nav>
JSfiddle

Remove the height:inherit; from .nav-main ul and it will solve the problem. The problem exists because the dropdown .drop-down inherits the height of the parent li, causing the slide animation to animate just the height of the parent li. I hope it makes sense.
Updated FIDDLE.
$('.nav-main li ul').hide().removeClass('.drop-down');
$('.nav-main li').hover(
function() {
$('ul', this).slideDown(1000);
},
function() {
$('ul', this).slideUp(1000);
}
);
.nav-main {
position: absolute;
top: 0;
height: 65px;
width: 100%;
text-align: center;
}
.nav-main ul {
position: relative;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 22px;
line-height: 100%;
font-family: 'Futura W01 Bold', sans-serif;
text-align: center;
text-transform: uppercase;
display: inline-block;
width: 90%;
}
.nav-top {
position: relative;
margin: 0;
padding: 0 66px 0 50px;
float: none;
display: inline-block;
list-style: none;
height: inherit;
/*background: transparent url(../images/nav-divide.png) no-repeat right center;*/
}
.nav-top:first-child {
padding-left: 0;
}
.nav-top:last-child {
background-image: none;
padding-right: 0;
}
.nav-top:last-child:after {
content: none;
}
.nav-top > a {
position: relative;
display: block;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top a:hover,
.nav-top.active a {
color: #454545;
border-bottom: 4px solid #00e9d9;
text-decoration: none;
}
.nav-top ul {
display: none;
position: absolute;
}
.nav-top:hover ul {
display: inline;
position: absolute;
top: calc(100% - 1px);
left: -8.75px;
width: 105%;
/*-moz-transition: all 1.2s ease-in-out;
-webkit-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
transition: all 1.2s ease-in-out; */
}
.nav-top li {
float: center;
background-color: #e9e9e9;
padding-top: 16px;
padding-bottom: 16px;
/*
background: transparent url(../images/nav-divide.png) no-repeat right center;
background: transparent url(../images/nav-divide.png) no-repeat left center;*/
}
.nav-top li > a {
position: relative;
display: inline;
margin: 0;
color: #6f6f6f;
text-decoration: none;
padding-top: 20px;
padding-bottom: 5px;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-top:after {
content: url(../images/nav-divide.png);
display: block;
position: absolute;
left: 100%;
top: -17px;
width: 22px;
z-index: 1;
transform: translateX(-50%);
height: 100%;
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav-main" role="navigation">
<ul>
<li class="nav-top">Welcome
</li>
<li class="nav-top">About
<ul class="drop-down">
<li>Services
</li>
<li>Clients
</li>
<li>Press
</li>
<li>Leadership
</li>
<li>Twitter
</li>
</ul>
</li>
<li class="nav-top">Contact
</li>
</ul>
<span class="nav-arrow"></span>
</nav>

Images adapting to window re-size too early

I have this divider that has inside it images. When i re-size horizontally the window starting from the right to the left, the images starts going down before the right-end of the browser reach it. Any help to make the images move down each other when the right-end of the browser reach it?
JSFIDDLE: https://jsfiddle.net/prtdaay1/2/
CSS:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
ol, ul {
list-style: none;
}
html {
background-color: #FFFFFF;
-webkit-font-smoothing: antialiased;
}
body {
background-color: #ffffff;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
background-color: #ffffff;
text-align: center;
max-width:1600px;
overflow: hidden;
overflow-y: scroll;
}
h1, h2, h3, h4, h5, h6 {
color: #222;
font-weight: 600;
line-height: 1.3em;
}
h2 {
margin-top: 1.3em;
}
.custom-class {
text-align: right;
margin-top:-130px;
margin-right: 20px;
}
a {
color: #000000;
text-decoration: none;
}
b, strong {
font-weight: 600;
}
samp {
display: none;
}
img {
-webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1;
background: transparent;
border-style:none;
border-radius: 4px;
display: block;
margin: 1.3em auto;
max-width: 95%;
}
.logo {
text-align: center;
margin-top:40px;
}
li {
list-style-type: none;
font-size: 1.5em;
padding-top: 8px;
text-align:center;
border-style: none;
}
.menu li {
position: relative;
top: 180px;
left: 0px;
}
#item7 {
transition: opacity .8s, left .8s ease-out;
-moz-transition: opacity .8s, left .8s ease-out;
-webkit-transition: opacity .8s, left .8s ease-out;
-o-transition: opacity .8s, left .8s ease-out;
margin-left:105px
}
#item6 {
transition: opacity 1s, left 1s ease-out;
-moz-transition: opacity 1s, left 1s ease-out;
-webkit-transition: opacity 1s, left 1s ease-out;
-o-transition: opacity 1s, left 1s ease-out;
margin-left: 95px;
}
#item5 {
transition: opacity 1.2s, left 1.2s ease-out;
-moz-transition: opacity 1.2s, left 1.2s ease-out;
-webkit-transition: opacity 1.2s, left 1.2s ease-out;
-o-transition: opacity 1.2s, left 1.2s ease-out;
margin-left: 60px;
}
#item4 {
transition: opacity 1.4s, left 1.4s ease-out;
-moz-transition: opacity 1.4s, left 1.4s ease-out;
-webkit-transition: opacity 1.4s, left 1.4s ease-out;
-o-transition: opacity 1.4s, left 1.4s ease-out;
margin-left: 123px;
}
#item3 {
transition: opacity 1.6s, left 1.6s ease-out;
-moz-transition: opacity 1.6s, left 1.6s ease-out;
-webkit-transition: opacity 1.6s, left 1.6s ease-out;
-o-transition: opacity 1.6s, left 1.6s ease-out;
margin-left: 113px;
}
#item2 {
transition: opacity 1.8s, left 1.8s ease-out;
-moz-transition: opacity 1.8s, left 1.8s ease-out;
-webkit-transition: opacity 1.8s, left 1.8s ease-out;
-o-transition: opacity 1.8s, left 1.8s ease-out;
margin-left: 130px;
}
#item1 {
transition: opacity 2s, left 2s ease-out;
-moz-transition: opacity 2s, left 2s ease-out;
-webkit-transition: opacity 2s, left 2s ease-out;
-o-transition: opacity 2s, left 2s ease-out;
margin-left: 117px;
}
#item1>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item2>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item3>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item4>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item5>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item6>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
#item7>button{background:none;border:none;outline:none;cursor:pointer;font-size: 1em;}
.permahover li {
opacity: 1;
left: -33%;
}
.headlines li {
font-size:1.5em;
color:#000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li, .headlines.active li {
/* PARENT HOVER */
opacity:0.4;
cursor: pointer;
/* Dim all */
}
.headlines li:hover, .headlines li.active {
/* SINGLE HOVER */
opacity: 1;
/* Max one */
color:#000000;
cursor: pointer;
}
#first
{ display: none;
width: 50%;
height: 220px;
top: 20%;
margin: auto;
position: relative;
}
#first img
{
height: 100px;
width: 100px;
float:left;
margin-right: 5%;
cursor: pointer;
}
#second
{
width: 50%;
height: 220px;
margin:auto;
padding-left: 170px;
margin-top: -215px;
}
#second img
{
height: 100px;
width: 100px;
float:left;
margin-right: 5%;
cursor: pointer;
}
#third
{
display: none;
width: 50%;
height: 220px;
margin:auto;
padding-left: 150px;
margin-top: -215px;
}
#third img
{
height: 100px;
width: 100px;
float:left;
margin-right: 5%;
cursor: pointer;
}
#-webkit-keyframes colorize {
0% {
-webkit-filter: grayscale(100%);
}
100% {
-webkit-filter: grayscale(0%);
}
}
#keyframes colorize {
0% {
filter: grayscale(100%);
}
100% {
filter: grayscale(0%);
}
}
}
<!-- slider css-->
#wrapper {
width: 10%;
padding: px 0;
}
#slider-container {
padding: 20px 50px;
height: 300px;
top:-18%;
left: 50px;
width: 700px;
overflow: hidden;
position: relative;
}
.slider-view-area {
overflow: hidden;
max-height: 300px;
}
#nav p {
position: absolute;
top: 40px;
left: 0px;
cursor:pointer;
color:grey;
}
#prev {
margin-left: 520px;
font-size: 30px;
}
#next {
right: -440px;
font-size: 30px;
}
#mask {
width: 5000px;
height: 100%;
}
.item {
width: 1200px;
height: 100%;
float: left;
}
.content img {
height: 100px;
width: 17%;
float:left;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.content {
width: 50%;
height: 220px;
top: 30px;
left:
margin: auto;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
.hidden {
display: none;
}

Try to fix these id's style
#second {
height: 220px;
margin: -215px auto auto;
padding-left: 170px;
width: 50%;
}
#third {
display: none;
height: 220px;
margin: -215px auto auto;
padding-left: 150px;
width: 50%;
}
Instead of that use max width and and avoid padding you can use margin: auto to show in center.

Creating a moving bar (inside the nav bar) which moves to the element the user hovers on?

I'm trying to create a nav bar which consists of the regular navigation elements and an indication bar which is located below the current page. My goal is to make this bar move under whichever element the user hovers on and automatically resize itself according to a pre-defined size (according to the word length maybe?). I built the nav bar itself, but I'm kind of clueless how to achieve this effect. Should I always calculate the current position of the mouse and add the difference between the current location and the hover location? Regarding to the resizability, this is a secondary goal, less significant.
This is what I've done so far:
Html:
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples</li>
<li>bananas</li>
<li>tomatos</li>
<li>onions</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
CSS:
#nav_ul a{
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul{
display: inline-block;
list-style-type: none;
}
#nav_ul li{
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover{
color: #4ad1fd;
}
#container{
position: relative;
left: 167px;
height: auto;
width: 530px;
top: 5px;
}
#bar{
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
JSfiddle
Something like in this image:

You're trying to create a lavalamp menu, checkout the example below...
/* ---- reset ------*/
html, body, div, a {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }
html {
line-height: 1; }
/* --- basic styles ----*/
body {
font-family: "Unica One";
font-size: 1.5em;
background: #f2f2f2;
text-shadow: 0 1px 0 white; }
/* --- for this example ----*/
.nav {
text-align: center;
overflow: hidden;
margin: 2em auto;
width: 480px;
position: relative; }
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s; }
.nav a:hover {
color: #c6342e; }
.effect {
position: absolute;
left: -12.5%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out; }
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%; }
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%; }
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%; }
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%; }
/* ----- line example -----*/
.ph-line-nav .effect {
width: 90px;
height: 2px;
bottom: 36px;
background: #c6342e;
box-shadow: 0 1px 0 white;
margin-left:-45px;
}
<div class="ph-line-nav nav">
Home
About
Gallery
Contact
<div class="effect"></div>
</div>
Find more here http://pepsized.com/css-only-lavalamp-like-fancy-menu-effect/

Here's a jQuery solution: (JSFiddle for if the code snippet doesn't work)
function BarMove(el) {
var bar = $('#bar');
var width = el.outerWidth();
var left = el.offset().left;
bar.animate({
width: width,
left: left
});
}
var Current = $('#nav_ul li a.current'); // Set the current page
BarMove(Current);
$('#nav_ul li a').hover(function () {
BarMove($(this));
}, function () {
BarMove(Current);
});
#nav_ul a {
color: #685e6d;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.4s ease-in-out;
-moz-transition: color 0.4s ease-in-out;
-ms-transition: color 0.4s ease-in-out;
-o-transition: color 0.4s ease-in-out;
transition: color 0.4s ease-in-out;
}
#nav_ul {
display: inline-block;
list-style-type: none;
}
#nav_ul li {
display: inline-block;
position: relative;
left: 90px;
bottom: 30px;
font-size: 19px;
margin-left: 40px;
font-weight: 100;
font-size: 16px;
}
#nav_ul a:hover {
color: #4ad1fd;
}
#container {
position: relative;
left: 0;
height: auto;
width: 530px;
top: 5px;
}
#bar {
position: absolute;
left: 0;
bottom: 0;
height: 7px;
width: 107px;
background-color: #ffcc00;
border-radius: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">
<div class="logo">
<nav id="nav_bar">
<ul id="nav_ul">
<li>apples
</li>
<li>bananas
</li>
<li>tomatos
</li>
<li>onions
</li>
</ul>
<div id="container">
<div id="bar"></div>
</div>
</nav>
</div>
</header>
It's not exact, so you'll need to tweak the numbers but functionality is what you're after as far as I'm aware.

In your CSS, you have #nav_ul a:hover so you could add border-bottom-style: solid; border-color:<color> and you would have a bar appear under your items. It wouldn't slide, or be animated. It will, however, put a colored bar under what ever they are hovering over.

Get confused with Responsive menu with jQuery

My responsove menu works well in mobile menu, but I have one problem that when I resize browser back to large screen size. the mobile menu still appear. Does anybody know why?
Here is my code :
CSS
.main-navigation ul {
z-index: 999;
float: right;
font-size: 1rem;
}
.main-navigation ul>li {
float: left;
position: relative;
}
.main-navigation ul>li a {
color: #555;
height: 42px;
line-height: 42px;
margin-left: .5em;
padding-right: 1em;
position: relative;
}
.main-navigation ul>li ul {
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
position: absolute;
background: white;
left: -1em;
}
.main-navigation ul>li ul li {
float: none;
white-space: nowrap;
border-bottom: 1px solid rgba(0,0,0,0.2);
background: #f9f9f9;
}
.main-navigation ul>li ul li a {
padding: 0 1em;
margin-right: 0;
font-weight: normal;
}
.main-navigation ul>li ul li a::before {
content: '';
}
.main-navigation ul>li ul li ul {
border-top: 1px solid #fff;
position: absolute;
left: 100%;
top: -1px;
height: 21px;
line-height: 21px;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
}
.main-navigation ul>li:hover>ul {
opacity: 10;
filter: alpha(opacity=100);
visibility: visible;
}
.main-navigation ul>li:hover>a {
color: #e74c3c;
}
#media only screen and (max-width:479px) {
.main-navigation ul {
z-index: 999;
float: right;
font-size: 1rem;
}
.main-navigation ul>li {
float: left;
position: relative;
}
.main-navigation ul>li a {
color: #555;
height: 42px;
line-height: 42px;
margin-left: .5em;
padding-right: 1em;
position: relative;
}
.main-navigation ul>li ul {
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
position: absolute;
background: white;
left: -1em;
}
.main-navigation ul>li ul li {
float: none;
white-space: nowrap;
border-bottom: 1px solid rgba(0,0,0,0.2);
background: #f9f9f9;
}
.main-navigation ul>li ul li a {
padding: 0 1em;
margin-right: 0;
font-weight: normal;
}
.main-navigation ul>li ul li a::before {
content: '';
}
.main-navigation ul>li ul li ul {
border-top: 1px solid #fff;
position: absolute;
left: 100%;
top: -1px;
height: 21px;
line-height: 21px;
opacity: 0;
filter: alpha(opacity=0);
visibility: hidden;
-webkit-transition: opacity .1s ease-in;
-moz-transition: opacity .1s ease-in;
-o-transition: opacity .1s ease-in;
transition: opacity .1s ease-in;
}
.main-navigation ul>li:hover ul {
opacity: 10;
filter: alpha(opacity=100);
visibility: visible;
}
.main-navigation ul>li:hover>a {
color: #e74c3c;
}
}
HTML :
<a href="#" id="rwd-nav-btn" >☰</a>
<div class="rwd-nav"></div> <!-- end rwd-nav -->
<nav class="main-navigation">
<ul class="fr">
<li>home</li>
<li>articles</li>
<li>portfolio</li>
<li>
dropdown
<ul>
<li>home</li>
<li>articles</li>
<li>portfolio</li>
<li>
dropdown
<ul>
<li>home</li>
<li>articles</li>
<li>portfolio</li>
<li>
dropdown
</li>
<li>about</li>
<li>contact</li>
</ul>
</li>
<li>about</li>
<li>contact</li>
</ul>
</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
jQuery :
jQuery(document).ready(function(){
jQuery('.main-navigation ul:first-child').clone().appendTo('.rwd-nav');
jQuery('#rwd-nav-btn').click(function(event){
event.preventDefault();
jQuery('.rwd-nav').slideToggle();
});

There is no code which hides the menu. Instead of slideToggle, I suggest to add/remove a class like "closed" and "open" and set mymenu.closed to display:none and inside the media query set mymenu.open to display:block

We Keep Coding

JavaScript is the programming language of the Web.

Change logo size on scroll events - javascript

Related

Css3 animation glitch error Chrome and Firefox

Jquery drop down hover menu only applied to first <li>

Images adapting to window re-size too early

Creating a moving bar (inside the nav bar) which moves to the element the user hovers on?

Get confused with Responsive menu with jQuery

Categories

Resources