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/
Related
I'm trying to add/remove a class to the sticky header, when this reaches a specific section with a class "dark-section", but i want to do it automaticly if there are 2 or more section with the same class.
jQuery(function ($) {
'use strict';
var Header = $('.header');
function HeaderDarkMode() {
var scrollTop = $(window).scrollTop(),
dark = $('.dark-section');
dark.length && dark.each(function () {
var top = $(this).position().top,
height = $(this).outerHeight(),
bottom = top + height;
scrollTop >= top - 45 && scrollTop < bottom - 45 ? Header.addClass('dark') : Header.removeClass('dark');
});
}
$(window).scroll(function() {
HeaderDarkMode();
});
});
body{
margin: 0;
padding: 0;
}
header{
background: gray;
opacity: .5;
min-height: 90px;
position: sticky;
top: 0;
width: 100%
}
header.dark{
background: red;
}
section{
min-height: 800px;
}
section.dark-section{
background: black;:
}
footer{
min-height: 300px;
backgroud-color: #f1f1f1;
}
<html>
<head>
<title>Dark Header Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header class="header"></header>
<section></section>
<section class="dark-section"></section>
<section></section>
<section class="dark-section"></section>
<section></section>
<section class="dark-section"></section>
<section></section>
<footer></footer>
</body>
</html>
This is my code i'm working on, but it seems that only work with the last selector founded.
Help.
The problem you are facing is that when you cycle over all .dark-sections in your code and add or remove .dark from the header, you always end up with the last iteration's result. If you are over the second dark section, it correctly adds the class, but then it has to calculate if you happen to be over the third dark section, which you are not because you are only over the second one, so it removes the class again. You need to change this calculation so that either it stop on match, or you use flags. Since your code uses jQuery, I will go with the later option:
// use a variable to keep track of state
var isOverAnyDarkSection = false
dark.each(function () {
var top = $(this).position().top,
height = $(this).outerHeight(),
bottom = top + height;
if (scrollTop >= top - 45 && scrollTop < bottom - 45) {
// set the flag to true the header is over any dark section
isOverAnyDarkSection = true
}
});
// finally, only now decide if the class should be added or removed
if (isOverAnyDarkSection) {
Header.addClass('dark')
} else {
Header.removeClass('dark')
}
This way, the class is only added or removed once based on the state.
Code ended like this
Thanks to #Jakub-Kotrs
jQuery(function ($) {
'use strict';
var Header = $('.header');
function HeaderDarkMode() {
var scrollTop = $(window).scrollTop(),
dark = $('.dark-section');
// use a variable to keep track of state
var isOverAnyDarkSection = false
dark.each(function () {
var top = $(this).position().top,
height = $(this).outerHeight(),
bottom = top + height;
if (scrollTop >= top - 45 && scrollTop < bottom - 45) {
// set the flag to true the header is over any dark section
isOverAnyDarkSection = true
}
});
// finally, only now decide if the class should be added or removed
if (isOverAnyDarkSection) {
Header.addClass('dark')
} else {
Header.removeClass('dark')
}
}
$(window).scroll(function() {
HeaderDarkMode();
});
});
body{
margin: 0;
padding: 0;
}
.header{
background: gray;
opacity: .5;
min-height: 90px;
position: sticky;
top: 0;
width: 100%
}
.header.dark{
background: red;
}
section{
min-height: 800px;
}
.dark-section{
background: black;:
}
<html>
<head>
<title>Dark Header Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header class="header"></header>
<section></section>
<section class="dark-section"></section>
<section></section>
<section class="dark-section"></section>
<section></section>
<section class="dark-section"></section>
<section></section>
<footer></footer>
</body>
</html>
Hey I am new in jquery and i am stuck, I have html like this
<section id="help">Help</section>
<section id="touch">Touch</section>
<section id="payment">Payment</section>
<section id="toys">Toys</section>
So now if touch section is in viewport then add class to body (body class name is "touch-active")
and i am trying this code but it is not working for me:
jQuery(document).ready(function(){
if (jQuery('section').is(':visible')){
jQuery('body').addClass(.attr('id + active'));;
}
});
Thanks in advance :)
To achieve this you can use an IntersectionObserver to detect when an element comes in to view. From there you can remove all classes from the body and replace it with a new class based on the visible section. Try this:
var targets = document.querySelectorAll('section')
var obsOptions = {
root: null, // measure against the viewport
threshold: .5 // how much of the element should be visible before handler is triggered
}
let handler = (entries, opts) => {
entries.forEach(entry => {
if (entry.intersectionRatio > opts.thresholds[0]) {
document.body.classList.remove(...document.body.classList);
document.body.classList.add(entry.target.id + '-active');
}
})
}
targets.forEach(el => {
var observer = new IntersectionObserver(handler, obsOptions);
observer.observe(el);
})
section {
height: 250px;
}
body.help-active { background-color: #FFFFFF; }
body.touch-active { background-color: #DDDDDD; }
body.payment-active { background-color: #BBBBBB; }
body.toys-active { background-color: #999999; }
<section id="help">Help</section>
<section id="touch">Touch</section>
<section id="payment">Payment</section>
<section id="toys">Toys</section>
How do I offset the boat from the anchor by a few pixels?
You can find a code pen where I have unsuccessfully tried to set an offset here
https://codepen.io/anon/pen/wXraLK?editors=1111
HTML
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<div class="anchor">Anchor</div>
<div class="boat">Boat</div>
CSS
.boat {
display: inline-block;
background-color: yellow;
}
.anchor {
display: inline-block;
background-color: gray;
}
JavaScript
var anchor = document.getElementsByClassName("anchor")[0];
var boat = document.getElementsByClassName("boat")[0];
var offsetTopModifier = function (data) {
data.offsets.popper.top += 50;
return data;
}
var popper = new Popper(
anchor,
boat,
{
placement: 'bottom-end',
modifiers: [offsetTopModifier]
}
);
This was the source that inspired my attempt:
https://github.com/FezVrasta/popper.js/issues/107
One work around was to set margins on the boat.
I have this code for making a nav bar. I am trying to add image buttons with text below them. The problem is that the images can be of different sizes and thus they are not centered properly in the output.
Also, the title for all images must come at same level but its not the case.
ul.nav-icon {
list-style: none;
display: block;
margin: auto;
width: 800px;
}
ul.nav-icon li {
float: left;
}
ul.nav-icon a {
display: inline-block;
text-decoration: none;
}
ul.nav-icon a:hover {
background: #4095A6;
}
ul.nav-icon img {
margin: 0px 0px 0px 0px;
padding-top: 16px;
padding-left: 30px;
}
.img-box {
width: 160px;
height: 138px;
}
h6 {
color: white;
text-align: center;
}
<ul class="nav-icon">
<li>
<a href="#" class="img-box">
<img src="http://imgur.com/Et4vXHk.png">
<h6>Families</h6>
</a>
</li>
<li>
<a href="#" class="img-box">
<img src="http://i.imgur.com/lubEbTP.png">
<h6>Families</h6>
</a>
</li>
<li>
<a href="#" class="img-box">
<img src="http://i.imgur.com/lubEbTP.png">
<h6>Families</h6>
</a>
</li>
</ul>
Here's a way to deal with your problem: https://github.com/smohadjer/sameHeight
Here's the .js file you'll need to include in your html. It's better if it's an external file. For any confusion, this file can also be found in the link above with both minified/unminified versions.
;(function ($, window, document, undefined) {
'use strict';
var pluginName = 'sameHeight',
defaults = {
oneHeightForAll: false,
useCSSHeight: false
};
//private method
var getHeightOfTallest = function(elms) {
var height = 0;
$.each(elms, function() {
var _h = $(this).outerHeight();
if (_h > height) {
height = _h;
}
});
return height;
};
// The actual plugin constructor
function Plugin(element, options) {
this.$element = $(element);
this.options = $.extend({}, defaults, options);
this.init();
}
// methods
var methods = {
init: function() {
var self = this;
self.index = 0;
self.$elms = self.$element.children();
self.cssProperty = self.options.useCSSHeight ? 'height' : 'min-height';
$(window).on('resize.' + pluginName, function() {
//remove previously set height or min-height
self.$elms.css(self.cssProperty, '');
initSameHeight();
});
//use setTimeout to make sure any code in stack is executed before
//calculating height
setTimeout(function() {
initSameHeight();
}, 0);
function initSameHeight() {
//if there are adjacent elements
if (self.getRow(0).length > 1) {
self.setMinHeight(0);
if (self.options.callback) {
self.options.callback();
}
}
}
},
setMinHeight: function(index){
var self = this;
var row = self.options.oneHeightForAll ? self.$elms : self.getRow(index);
var height = getHeightOfTallest(row);
$.each(row, function() {
$(this).css(self.cssProperty, height);
});
if (!self.options.oneHeightForAll && self.index < self.$elms.length - 1) {
self.setMinHeight(self.index);
}
},
getRow: function(index) {
var self = this;
var row = [];
var $first = self.$elms.eq(index);
var top = $first.position().top;
row.push($first);
self.$elms.slice(index + 1).each(function() {
var $elm = $(this);
if ($elm.position().top === top) {
row.push($elm);
self.index = $elm.index();
} else {
self.index = $elm.index();
return false;
}
});
return row;
},
destroy: function() {
var self = this;
//remove event handlers
$(window).off('resize.' + pluginName);
//remove dom changes
self.$elms.css(self.cssProperty, '');
self.$element.removeData('plugin_' + pluginName);
}
};
// build
$.extend(Plugin.prototype, methods);
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function(options) {
this.each(function() {
if(!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
});
return this;
};
})(jQuery, window, document);
After you include the above .js file, add this script to your current page:
$('.img-box').sameHeight();
This should make all of your boxes with image/text be the same size height wise.
Next in order to make sure the text is always at a certain point within your img-box, add some css inline, or make a class with the css as
h6 {
bottom:10px;
}
The amount of pixels can be anything you'd like it to be. To explain, the text will now always be 10 pixels from the bottom of the img-box.
Either this, or just make the images the background image for the container and set them all to predetermined sizes.
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;
}