We Keep Coding

the header shakes/tremble when I scroll - jQuery Scrolling problem

I'm completely blocked, I don't understand why the header shakes/tremble when I scroll with this jquery script
$(window).scroll(function() {
if ($(this).scrollTop() >= 100) {
$(".logo").css({ "height": "0px" });
$(".logo img").hide();
};
if ($(this).scrollTop() <= 100) {
$(".logo").css({
"height": "95px",
"-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"
});
$(".logo img").fadeIn();
}
});
this is the html file content
<header class="d-flex justify-content-end sticky-top">
<div class="container">
<div class="row logo">
<div class="col-12 text-center mt-2">
<img src="/images/logo.png" alt="Logo">
</div>
</div>
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light">
</nav>
</div>
</div>
</div>
</header>
Can anyone help find why?

Already fixed!!!
As you can see I was using the sticky-top bootstrap class for header tag, this class apply position:sticky; property.
This cause the jquery detects that when the scrollTop was greater than 100 the div of the logo image changed its height therefore the scrollTop was again less than 100 and the div reappeared and remained in that game!
I just change to position:fixed; and the scrolling starts to work correctly.

Instead of adding the CSS transition using JS, create a class and use jquery functions addClass and removeClass
$(window).scroll(function() {
if ($(this).scrollTop() >= 100) {
$(".logo").removeClass('effect');
$(".logo img").fadeOut();
};
if ($(this).scrollTop() <= 100) {
$(".logo").addClass('effect');
$(".logo img").fadeIn();
}
});
* {
margin: 0;
padding: 0;
}
.container {
height: 1000px;
}
.logo {
top: 2px;
left: 5px;
position: sticky;
height: 95px;
width: 95px;
overflow: hidden;
}
.logo img {
height: 100%;
}
.effect {
height: 95px;
transition: linear 0.3s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
<div class="logo">
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" />
</div>
</div>

CSS Webkit transition doesn't work

I'm kind of new to programming in Web and I'm stuck with a problem. I want to add a transition in my dropdown menu so that the menu itself pop from the bottom and disappear to the bottom. I've added this code with a translateY of 50px and an ease-in-out transition but the dropdown seems to be static...
HTML:
<div class="right-menu list-inline no-margin-bottom">
<div class="list-inline-item dropdown">
<a id="settings" rel="nofollow" data-target="#" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link setting dropdown-toggle"><span class="d-none d-sm-inline-block"><i class="fa fa-user-circle-o"></i> Jean Dupont</span></a>
<div aria-labelledby="settings" class="dropdown-menu">
<a rel="nofollow" href="#" class="dropdown-item"> <span>Option 1</span></a>
<a rel="nofollow" href="#" class="dropdown-item"> <span>Option 2</span></a>
<a rel="nofollow" href="#" class="dropdown-item"> <span>Option 3</span></a>
<a rel="nofollow" id="logout" href="#" class="dropdown-item nav-link">Logout <i class="icon-logout"></i></a>
</div>
</div>
<div class="list-inline-item logout">
Logout <i class="icon-logout"></i>
</div>
</div>
CSS:
nav.navbar .dropdown .dropdown-menu {
-webkit-transform: translateY(50px);
transform: translateY(50px);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
nav.navbar .dropdown .dropdown-menu.active {
-webkit-transform: translateY(0);
transform: translateY(0);
}
nav.navbar .dropdown-item {
padding: 1rem !important;
border-bottom: 1px solid #393c43;
}
Error seems to be here but I 'm not sure:
-webkit-transform: translateY(50px);
transform: translateY(50px);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
What should I fix ? Thanks!

the problem is not with -webkit-transform or -webkit-transition , your animation works at first then stops working because bootstrap is modifying the style attribute in your html and it has more priority than the css in the class , so to overwrite the styling and the animation bootstrap provides you need to apply the styles in the style attribute of the dropdown ,
and modifying just the trabslateY won't work because you need to override the translate3D, those changes need to happen on the show and hide events of the dropdown and bootstrap uses display:none when hiding the dropdwon so you need to override that too and play with opacity
$('.dropdown').on('show.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().css({
'transform' : 'translate3d(5px, 40px , 0px)',
'visibility' : 'visible',
'opacity' : 1
});
});
$('.dropdown').on('hide.bs.dropdown', function() {
$(this).find('.dropdown-menu').first().css({
'transform' : 'translate3d(5px, 100px , 0px)',
'display' : 'block',
'visibility' : 'hidden',
'opacity' : 0
}, function(){ console.log('ended'); });
});
here's a fiddle : https://jsfiddle.net/xpvt214o/19338/

Inconsistent CSS being applied through JavaScript

I am having an issue with a page I am developing; it seems the CSS that is being generated by my JavaScript file is inconsistent. It seems to be only the CSS regarding the placement of a div (using calculated values) and the height of a couple other divs (also using calculated values).
This was not an issue until I deployed to the hosting service for ongoing development testing. In other words, on my local machine, the issue is not reproducible.
I have had to refresh the page as many as 40 times to get reproduce the issue, but it happens...
The inconsistent behavior is regarding the placement of the <article class="betterThings">. The placement is calculated by JS, and it seems that JS is not always calculating the $('.header').outerHeight() correctly. Again, it works most of the time, but not always. I should also specify that I have only been able to reproduce in Chrome so far.
Website here
Code here:
var navTop;
var windowHeight;
var belowHeader;
var tallestHomeDiv;
var orientation = window.orientation;
$('document').ready(function() {
navTop = $('.header').outerHeight(true);
windowHeight = $(window).height();
belowHeader = ((windowHeight - (navTop + 50)));
tallestHomeDiv = $('.dislike').outerHeight(true);
placeElements();
stickyNav();
showBetterThings();
});
function stickyNav() {
$('.navbar').affix({offset: {top: navTop} });
}
function placeElements() {
$('article.betterThings').css('position', 'absolute');
$('article.betterThings').css('top', belowHeader / 2);
$('article.betterThings').css('transform', 'translateY(-50%)');
$('article.balance').css('margin-top', belowHeader);
$('article.balance').css('height', tallestHomeDiv);
$('article.busy').css('margin-top', belowHeader);
$('article.busy').css('height', tallestHomeDiv);
$('article.dislike').css('margin-top', belowHeader);
}
function showBetterThings() {
$('article.betterThings').addClass('show');
}
/****************************************
GLOBAL STYLES
****************************************/
/*=-=-=-=-=-=-= header =-=-=-=-=-=-=-=-=*/
.header {
background-color: #323232;
}
.fullLogo {
padding: 1%;
margin: 0 auto;
}
/*=-=-=-=-=-=-= navigation -=-=-=-=-=-=-=*/
.navCont {
min-height: 50px;
}
.navbar {
border-radius: 0;
margin: 0;
background-color: #316924;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1.5s ease-in;
-ms-transition: all 1.5s ease-in;
-o-transition: all 1.5s ease-in;
transition: all 1.5s ease-in;
}
.navbar.affix {
top: 0;
width: 100%;
z-index: 100;
background-color: #323232;
-webkit-transition: all 1.5s ease-in;
-moz-transition: all 1.5s ease-in;
-ms-transition: all 1.5s ease-in;
-o-transition: all 1.5s ease-in;
transition: all 1.5s ease-in;
}
.navbar > .container-fluid > .navbar-collapse > .navbar-nav > .active > a {
background-color: #323232;
}
.navbar.affix > .container-fluid > .navbar-collapse > .navbar-nav > .active > a {
background-color: #316924;
}
.houseLogo {
height: 45px;
margin-top: -13px;
}
/*=-=-=-=-=-=-=-=- body =-=-=-=-=-=-=-=-=*/
section.content {
}
h1.home, h2.home {
font-family: 'Kaushan Script', cursive;
color: #b30047;
text-align: center;
}
p.home {
color: #5dd9d5;
}
a.home.scroll {
color: #b30047;
font-size: .75em;
}
article.home {
background-color: rgba(0, 0, 0, .5);
font-size: 1.25em;
padding: 25px;
border-radius: 10px;
}
article.betterThings {
margin-right: 8.33333%;
text-align: center;
opacity: 0;
}
article.betterThings.show {
opacity: 1;
-webkit-transition: opacity 5s ease-in-out;
-moz-transition: opacity 5s ease-in-out;
-ms-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
transition: opacity 5s ease-in-out;
}
div.first {
padding-left: 0;
}
div.last {
padding-right: 0;
}
.homeBackVideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
opacity: 0.5;
}
.content {
height: 1000px;
}
.aside {
}
/*=-=-=-=-=-=-=-= footer -=-=-=-=-=-=-=-=*/
.footer {
background-color: black;
width: 100%;
margin-top: 50px;
padding: 0;
}
.footerContact {
margin: 15px;
height: 2em;
}
/*****************************************
MEDIA QUERIES
******************************************/
/*=-=-=-=-=-= for mobile only =-=-=-=-=-=*/
#media only screen and (max-width: 767px) {
.navbar > div.container-fluid > div.navbar-header > a.navbar-brand {
opacity: 0;
-webkit-transition: all 0.75s ease-in;
-moz-transition: all 0.75s ease-in;
-ms-transition: all 0.75s ease-in;
-o-transition: all 0.75s ease-in;
transition: all 0.75s ease-in;
}
.navbar.affix > div.container-fluid > div.navbar-header > a.navbar-brand {
opacity: 1;
-webkit-transition: all 0.75s ease-in;
-moz-transition: all 0.75s ease-in;
-ms-transition: all 0.75s ease-in;
-o-transition: all 0.75s ease-in;
transition: all 0.75s ease-in;
}
}
/*=-=-=-=-=-for tablet and below=-=-=-=-=*/
#media only screen and (max-width: 991px) {
div.first, div.middle, div.last {
padding: 0;
}
article.busy, article.dislike {
margin-top: 25px !important;
}
}
/*=-=-=-=-=-= for tablet only =-=-=-=-=-=*/
#media only screen and (min-width: 768px) and (max-width: 991px) {
}
/*=-=-=-=-= for tablet and above =-=-=-=-*/
#media only screen and (min-width: 768px) {
.navbar > div.container-fluid > div.navbar-header {
width: 0;
overflow: hidden;
-webkit-transition: all 0.75s ease-in-out;
-moz-transition: all 0.75s ease-in-out;
-ms-transition: all 0.75s ease-in-out;
-o-transition: all 0.75s ease-in-out;
transition: all 0.75s ease-in-out;
}
.navbar.affix > div.container-fluid > div.navbar-header {
padding: 0px;
width: 190px;
-webkit-transition: all 0.75s ease-in-out;
-moz-transition: all 0.75s ease-in-out;
-ms-transition: all 0.75s ease-in-out;
-o-transition: all 0.75s ease-in-out;
transition: all 0.75s ease-in-out;
}
}
/*=-=-=-=-=- for desktop only =-=-=-=-=-=*/
#media only screen and (min-width: 992px) {
h1.home {
font-size: 3em;
margin-bottom: .75em;
}
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
<link rel="stylesheet" href="./css/styles.css">
<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script defer src="./scripts/kelliKlean.js"></script>
</head>
<body>
<div class="container-fluid mainContainer">
<!--=-= HEADER =-==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
<div class="row">
<header class="header col-xs-12">
<img class="img-responsive fullLogo" src="./resources/fullLogo.png" alt="full logo"/>
</header>
</div>
<!--=-= NAV BAR -==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
<div class="row navCont">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img class="img-responsive houseLogo" src="./resources/navLogo.png" alt="full logo"/></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-usd"></span> Quote</li>
<li><span class="glyphicon glyphicon-map-marker"></span> Map</li>
</ul>
</div>
</div>
</nav>
</div>
<!--=-= CONTENT -==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
<div class="row">
<!---- backgroung video --------------------------------------------------------------------->
<video loop muted autoplay class="homeBackVideo">
<source src="./resources/beach.mp4" type="video/mp4">
</video>
<section class="content col-xs-12">
<div class="row">
<article class="home betterThings col-xs-10 col-xs-offset-1">
<h1 class="home">Because you have better things to do!</h1>
<p class="home">Wouldn't you rather drive to the beach and spend your Saturday basking in the warmth
of the sun and cooling off in the shallow, salty water of the Gulf instead of cleaning
your home? Life is short, enjoy it!</p>
<a class="home scroll btn btn-default" href="#">Scroll Down<br>
<span class="home glyphicon glyphicon-menu-down"></span>
</a>
</article>
</div>
<div class="row">
<div class="first col-xs-10 col-xs-offset-1 col-md-3">
<article class="home balance">
<img class="balance img-responsive" src="./resources/balance.jpg"/>
<h2 class="home balance">It's All About Balance</h2>
<p class="home">After a long day at work, the last thing you want to worry about is cleaning your
home, not to mention that it depletes valuable time that you could be enjoying other activities.
Even if you don't need a daily housekeeper, having a scheduled cleaning a couple times a month
will help balance the scales between work and life. Remember, we work to live, we don't live to
work!</p>
</article>
</div>
<div class="middle col-xs-10 col-xs-offset-1 col-md-offset-0 col-md-4">
<article class="home busy">
<img class="busy img-responsive" src="./resources/busy.jpg"/>
<h2 class="home busy">Who Has the Time?</h2>
<p class="home">If your schedule is already packed full, finding the time to clean is never easy.
Between dropping the kids off, driving to work, cooking dinner, and walking the dog, who has
the time to clean? Studies have shown conflict among busy families can often come from the
stress of finding (or spending) time to clean. Hiring a housekeeper can help lower your stress
level by allowing you to fit in everything else your busy days have to offer. </p>
</article>
</div>
<div class="last col-xs-10 col-xs-offset-1 col-md-offset-0 col-md-3">
<article class="home dislike">
<img class="balance img-responsive" src="./resources/dislike.jpg"/>
<h2 class="home balance">Please NO!</h2>
<p class="home">If you are like most people, in lieu of cleaning you would rather be doing... well,
anything! Let's face it: cleaning is not the most desirable way to spend your time. Also, some people
are just better at cleaning that others. If it takes you hours to clean your home and you hate every
minute of it, why not hire someone that would do it faster so you can devote your time to
whatever it is you would rather be doing?</p>
</article>
</div>
</div>
<!--=-= FOOTER =-==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-->
<div class="row">
<footer class="footer col-xs-12">
<img class="footerContact" src="./resources/facebook.png"/>
<img class="footerContact" src="./resources/email.png"/>
<img class="footerContact" src="./resources/call.png"/>
</footer>
</div>
</section>
</div>
</div>
</body>
</html>

It seems to me that the problem is that your code for retrieving the height of the highest div happens before the images on the page are loaded, making the highest div quite low.
It could be solved by executing the code on window.load rather than document.ready, but please consider a more elegant solution (I would try to look up if bootstrap does not support this)

As Jakub suggested, I looked into boostrap functionality to support what I was trying to accomplish. It turns out using the built in .card class in bootstrap will achieve what I wanted. I can create a deck of card that will all have the same height and eliminate the need for the dynamically calculated values in javascript.

Double Bootstrap Simple Sidebar

The source I am using is: http://startbootstrap.com/template-overviews/simple-sidebar/
I am having trouble making it so that I can have two of these simple sidebars. I am trying to make it so there is one on each side of the page (one on the left and one on the right). Right now, the default is for the sidebar to be on the left side. Each sidebar will be activated by 2 separate buttons.
**Note in < div id="wrapper" > -- change to < div id="wrapper" class="toggled">

You can add another sidebar to the right by adding the menu in html page and its corresponding styles in the CSS.
HTML:
<!-- Right - Sidebar -->
<div id="sidebar-wrapper-right">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Right toggle
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
CSS:
#sidebar-wrapper-right {
z-index: 1000;
position: fixed;
right: 250px;
width: 0;
height: 100%;
margin-right: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Look at the working JS fiddle here: DEMO

you need to add different style to your side bar in a the sidebar-wrapper class, something like this.
#sidebar-wrapper{
margin-left: 80%;// change this for your own properties
left: 20%
}

Toggle button is not working, menu does not slide down properly

I have quiz menu when i click on it ,it slide down showing four divs on a single div.
Here is the fiddle: fiddle link.
Here is the html:
toggle button quizes
<ul>
<li id="togglebtn"class="quizli">Quizes</li>
</ul>
<div id="quizmenu" class="bubble">
<div id="subdiv1" class="subdiv">
<h5><img src="image/earth.png" alt="earth">WorldGK</h5>
<a>gffdfd</a>
<a>gfdddd</a>
<a>gfddddd</a>
</div>
<div id="subdiv2"class="subdiv">
<h5><img src="image/computer.png" alt="earth">Computer</h5>
<a>gfdddddd</a>
<a>gfddddddd</a>
<a>gfddddddd</a>
</div>
<div id="subdiv3" class="subdiv">
<h5><img src="image/dictionary.png" alt="earth">English</h5>
<a>gfgdfdfdfd</a>
<a>gfdfdfd</a>
<a>gfdfdfdfdd</a>
</div>
<div id="subdiv4" class="subdiv">
<h5><img src="image/code.png" alt="earth">Programming</h5>
<a>C#</a>
<a>gfgfdgfdgfgfd</a>
<a>gfdffgfgf</a>
</div>
<div id="subdiv5" class="subdiv">
<h5><img src="image/inter2.png" alt="earth">Interview</h5>
<a>ggdfgfdgfd</a>
<a>gfgfdgfdgfgfd</a>
<a>gfdffgfgf</a>
</div>
</div>
This is the css:

.scrollup :hover should be .scrollup:hover

You are setting the opacity to 1 but the opacity is already 1.
maybe you can set the opacity of 0.5 for the normal state, then at hover 1.
try this:
.scrollup {
height:50px;
width:50px;
right:50px;
bottom:50px;
position:fixed;
opacity: 0.5;
filter: alpha(opacity=50);
-webkit-transition: all .3s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
background: url('http://s29.postimg.org/59qiyrlab/freeiconmaker_1.png?noCache=1447752779');
background-repeat:no-repeat;
background-size:contain
}
.scrollup:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
I have added an additional
-webkit-transition: all .3s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
to smooth things a little.