Sticky navbar is bouncing - navbar

http://testsites.wz.cz/
(function($) {
//SCROLL
var menu = $(".menu"),
menuLinks = menu.find("a");
menuLinks.on("click", function(event) {
$("html,body").animate({
scrollTop: $(this.hash).offset().top
}, 1000);
event.preventDefault();
});
//BACK-TO-TOP
var backToTop = $("<a>", {
href: "#cover",
class: "back-to-top",
html: '<i class="fa fa-caret-up fa-5x"></i>'
});
backToTop
.hide()
.appendTo("body")
.on("click", function() {
$("body").animate({
scrollTop: 0
});
event.preventDefault();
});
var win = $(window);
win.on("scroll", function() {
if (win.scrollTop() >= 600) backToTop.fadeIn();
else backToTop.fadeOut();
});
//STICKY MENU
$(document).on("scroll", function() {
if ($(document).scrollTop() > 0) {
$("nav").removeClass("large").addClass("small");
$(".decor").removeClass("large").addClass("small");
$(".logo").removeClass("large").addClass("small");
} else {
$("nav").removeClass("small").addClass("large");
$(".decor").removeClass("small").addClass("large");
$(".logo").removeClass("small").addClass("large");
}
});
})(jQuery);
Hi I´m new here :)
I found many tuts for sticky navbar it is good looking but it has one problem. It is bouncing while changing height(padding). When at home click other section. When at other sections click home. IDK where is problem.
THX.

It seems to be a jquery class change, take a look in your script.
Change
<nav class="navbar navbar-default navbar-fixed-top large">
To :
<nav class="navbar navbar-default navbar-fixed-top small">
Final answer, change this in your CSS :
nav.small li a {
padding: 25px 0;
transition: all 1s;
}
Another way :
nav.small:AFTER li a {
padding: 16px 0;
transition: all 1s;
}
nav.large:AFTER li a {
padding: 25px 0;
transition: all 1s;
}

Related

Remove class at top of page isn't always working

I've got a header that I want to disappear (move above the top of the browser screen) when the user scrolls down, then when the user scrolls back up I want the header to reappear (move back down) and also to gain a solid white background behind it.
All of this is working fine, but then I want the white background to be removed if the user scrolls back up to the very top of the page again (so it's just the header visible but with no white background).
I've cobbled together the code for this, and it's pretty much working - but, for some reason, in certain circumstances, the white background isn't being removed?!
It seems to be if you've scrolled back up enough to make the header reappear with the white background, but not all the way top the top, and then scroll the rest of the way then the white background doesn't disappear for some reason.
Sorry, I've probably not explained that very well, but here's my code. If someone is able to replicate the bug I'm getting and offer an explanation I'd be very grateful!
Thanks
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 30;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 30);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('header-down').addClass('header-up').removeClass('header-solid');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('header-up').addClass('header-down').addClass('header-solid');
}
}
lastScrollTop = st;
};
$(function () {
$(window).scroll(function () {
var top_offset = $(window).scrollTop();
if (top_offset == 0) {
$('header').removeClass('header-solid');
}
})
});
body {
margin: 0;
background: url('https://images.unsplash.com/3/doctype-hi-res.jpg?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2246&q=80');
background-size: cover;
}
.wrapper {
width: 100%;
height: 3000px;
}
header {
display: flex;
width: 100%;
padding: 20px 50px;
position: fixed;
box-sizing: border-box;
transition: 300ms all ease-in-out;
margin-top: 0px;
}
.header-logo {
width: 200px;
}
.header-nav {
flex-grow: 1;
text-align: center;
}
.header-socials {
width: 200px;
text-align: right;
}
.header-up {
margin-top: -60px;
}
.header-down {
margin-top: 0px;
}
.header-solid {
background-color: #FFFFFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<header class="header-down">
<div class="header-logo">
<img src="#" class="img-header-logo"/>
</div>
<div class="header-nav">
One Two Three Four Five
</div>
<div class="header-socials">
Social Links
</div>
</header>
</div>

Bootstrap - elements in div separates into 2 lines when width changes

The elements in div separates into two lines of elements when width < 720px. I think this has to do with the fact that I'm using Bootstrap's grid system.
<nav id="navbar" class="navbar navbar-expand-md navbar-light bg-light">
This line of code uses navbar-expand-md, which means that the max container width is 720px according to the Bootstrap 4.2 documentation. But I can't find an way to fix this issue.
How can I fix this?
Here's the fiddle link: https://jsfiddle.net/17g6uqvt/
Add CSS Property inline-block for #search-box
#search-box {
width: 250px;
border: none;
height: 1.8rem;
display: inline-block;
}
Change some javascript function
var COLLAPSE_WIDTH = 768;
function init_navbar () {
$('.nav-link').on( {
mouseenter: function () {
$(this).addClass('hover');
},
mouseleave: function () {
$(this).removeClass('hover');
}
});
window.isCollapsed = true;
$('.btn-search').on('click', function () {
if (window.windowSize > COLLAPSE_WIDTH) {
$('#search-box').toggleClass('hidden');
$('.navbar-nav').toggleClass('hidden');
}
window.isCollapsed = !isCollapsed
});
}
function check_width() {
window.windowSize = $(window).width();
if (windowSize < COLLAPSE_WIDTH) {
$('#search-box').removeClass('hidden');
//$('#search-btn').addClass('hidden');
$('.navbar-nav').removeClass('hidden');
$('.nav-link').addClass('collapsed');
}
if (windowSize > COLLAPSE_WIDTH) {
$('#search-box').addClass('hidden');
//$('#search-btn').removeClass('hidden');
$('.navbar-nav').removeClass('hidden');
$('.nav-link').removeClass('collapsed');
}
}
$(document).ready(function() {
check_width();
$(window).resize(check_width);
init_navbar();
});
https://jsfiddle.net/lalji1051/3h9eawz7/1/

Change Navbar-brand color on certain page

Is it possible to change the color of .navbar-brand when it reaches a certain page of the website?
I currently have this code which changes its color when scrolled:
.navbar-brand.scrolled {
color: yellow !important;
transition: 200ms linear;
}
and the script:
<script>
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-brand");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
</script>
Put class="articles" on < body > maybe of page articles, then use that selector with CSS.
nav {
width: 100%;
height: 100px;
background-color: tomato;
}
.articles nav {
background-color: orange;
}
<body class="articles">
<nav>
</nav>
</body>

how to get code alignment in popup window

This code copy code functionality.when am click on copycode then it displayed code in the popup window it displayed code but align is in only one line...i have the proper alignment....enter image description here
my code displays bellow with output screens please anyone suggest me for popup alignment ..
php code
<?php
$editorDesc = '<pre class="prettyprint tryit linenums">'. htmlspecialchars(isset($outTryEditorTableInfo[$s]['editor_description']) ? $outTryEditorTableInfo[$s]['editor_description'] : '').'</pre>';
$finalResult = '<div class="ccsp-example" id="contentdiv" itemprop="articleBody" >'.$editorDesc.$tryItHereBtn.'</div><br/>'.$tryittask;
?>
css
<style>
ol li {
list-style-type: none;
counter-increment: list;
position: relative;
}
ol li:after {
content: counter(list)"\00a0 \00a0 " ;
border-right:1px solid #aeaeae;
position: absolute;
left: -2.5em;
width:4%;
text-align: right;
}
</style>
js
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css" defer="defer"></script>
<script type="text/javascript" language="Javascript">//<![CDATA[
$(document).ready(function () { processCodeBlocks.Initialise('#contentdiv'); });
$(function (){
$('.oauth').click(function () {
$this = $(this);
href = $this.attr('href');
var myWindow = window.open(href, 'popup',
'width=800,height=600,location=0,menubar=0,resizeable=0,scrollbars=0,toolbar=0');
myWindow.focus();
var timer = setInterval(function () {
if (myWindow.closed) {
clearInterval(timer);
// window.location.reload(); // May do a POST reload, shows a warning
window.location = window.location; // force a GET reload
}
}, 200);
return false;
});
});
</script>

cannot hover with new div of fancybox 2

I've made it work by these codes for an addtional title (a new div inside fancybox):
beforeShow: function(){
this.title=$(this.element).data('caption');
this.title2="<div class='photo_exif'>"+$(this.element).data('exif')+"</div>";
$(this.title2)
.bind("contextmenu", function (e) {
return false; /* Disables right click */
})
.prependTo( $.fancybox.inner );
}
and the html is :
<a href='PhotoURL' class='fancybox' data-fancybox-group='gallery' data-caption='PhotoTitle' data-exif='photoTitle2'>pic</a>
now i want this div (div.photo_exif) hover to show or hide, so i added these codes:
afterShow:function() {
$("#fancybox-wrap").hover(function() {
$(".photo_exif").show();
}, function() {
$(".photo_exif").hide();
});
}
but it doesnt work. The div is always show on fancybox. My css is :
.photo_exif {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
width:100%;
height:30px;
background: #000;
background: rgba(0, 0, 0, .8);
}
and my whole fancybox code (with ie6 crack) is :
$('.fancybox').fancybox({
fitToView: false,
mouseWheel: false,
beforeShow: function(){
this.title=$(this.element).data('caption');
this.title2="<div class='photo_exif'>"+$(this.element).data('exif')+"</div>";
$(this.title2)
.bind("contextmenu", function (e) {
return false; /* Disables right click */
})
.prependTo( $.fancybox.inner );
},
afterShow: function(){
if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) <= 6) {
$("div#fancybox-buttons").css("top", $("html").scrollTop());
$(window).scroll(function () {
$("div#fancybox-buttons").css("top", $("html").scrollTop());
});
}
$("#fancybox-wrap").hover(function() {
$(".photo_exif").show();
}, function() {
$(".photo_exif").hide();
});
}
});
Is there anything wrong?
This one was easy. This line of your code :
$("#fancybox-wrap").hover(function() {
... should be :
$(".fancybox-wrap").hover(function() {
The fancybox selector is a class not an ID