Bootstrap navbar collapse on scroll - javascript

I'm using bootstrap grayscale theme for my project and It has a navbar that collapses on scroll, or if I go to a link that's on the same page (#download etc.)
The problem is when I go to anchor link from some other page, than navbar doesn't collapse until I scroll.
I guess the solution is in adding the line in java script, but I really don't know what to add since I don't know java. :-(
// jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
Please, help. :) :-*

You need to run the check when the page loads as well as when the window is scrolled, you can do that without duplicating any code by putting the logic that checks the offset of the page in a function and running it from both document ready and window scroll.
$(document).ready(function() {
// Put your offset checking in a function
function checkOffset() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
}
else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
}
// Run it when the page loads
checkOffset();
// Run function when scrolling
$(window).scroll(function() {
checkOffset();
});
});
Edit:
I believe you could shorten this even more by replace the checkOffset function with the following:
// Put your offset checking in a function
function checkOffset() {
$(".navbar-fixed-top").toggleClass("top-nav-collapse", $(".navbar").offset().top > 50);
}
I haven't tested this, but as long as the second parameter in toggleClass returns a boolean it'll either add or remove the class depending on the offset of the page without needing an if statement.

You can also use :
$(document).ready(function() {
function checkOffset() {
$(".navbar").removeClass("show");
}
// Run function when scrolling
$(window).scroll(function() {
checkOffset();
});
// Run function on Clicking
$(window).click(function() {
checkOffset();
});
});
This will help with navbar collapse on mobile devices.

You should be able to do something as simple as this..
$('.navbar-collapse ul li a').click(function() {
/* always close responsive nav after click */
$('.navbar-toggle:visible').click();
});
Here's an example of use
It's not Java, it's JavaScript which is easily added to your html page using script tags.

Related

GRT Fixed Responsive Menu - jQuery Plugin - problem with closing menu (after click the link)

Hi I have a problem with closing my mobile menu - which I implemented on my website using the jQuery plugin: https://www.jqueryscript.net/menu/Sticky-Mobile-Navigation-GRT-Responsive-Menu.html.
When I click on the links inside the menu it is still open - it's going to the section but the menu isn't close.
I need help with what JS function to use to be able to automatically close the menu after clicking the appropriate link.
Below my code:
(function( $ ){
$.fn.grtmobile = function () {
if ($(window).width() < 992) {
$('.grt-mobile-button').on('click', function(){
$(this).toggleClass("grt-mobile-button-open");
$("ul.grt-menu").toggleClass("open-grt-menu ");
});
}
}})( jQuery );
I would be grateful for any help what I should add to make it work
I was able to fix this problem after applying the code below - now it works but sometimes the "burger" disappears and not always the icon returns to the initial state
(function( $ ){
$.fn.grtmobile = function () {
if ($(window).width() < 992) {
$('.grt-mobile-button').on('click', function(){
$(this).toggleClass("grt-mobile-button-open");
$("ul.grt-menu").toggleClass("open-grt-menu ");
});
$('a').on('click', function(){
$('.grt-mobile-button').parent().removeClass("grt-mobile-button-open");
$("ul.grt-menu").removeClass("open-grt-menu");
});
}
}
})( jQuery )

Load more data - ScrollTop function not working

I am trying to load data on page scroll and for this I am trying to run the following function
$(window).scroll(function ()
{
if($(document).height() <= $(window).scrollTop() + $(window).height())
{
alert("done")
}
});
The problem is, as per my page setting I have done body overflow:hidden and made a container scrollable, the above code is not working in this case, however when I enable the body scroll then its working fine, can anybody please suggest how to handle this?
Here is the JSFiddle demo
You need to check the element with class scroller instead of window for scroll position.
$('.scroller').scroll(function ()
{
if($('.scroller').scrollTop() >= ($('.scroller')[0].scrollHeight - $(window).height()) )
{
alert("load more data")
}
});
JS Fiddle: https://jsfiddle.net/n0rramke/5/
This should work (if I correctly understand your question):
if ($(".scroller").height() <= $(".scroller").scrollTop()) {
alert("load more data")
}
Fiddle: https://jsfiddle.net/rhbmxssv/ ...

Remove Subnav Dropdown from WordPress Menu with Jquery

Ive wrote some Jquery to work on tables & Desktop which drops down with a hover or a click - it almost works great except it doesn't return (go back up) once dropped down.
Would it be correct to use a mouse leave on the following code to change display to hidden?
Here is the code I have wrote:
jQuery(function($) {
$("#menu-main-menu").find('li').hover(
function(){$(this).click();
}).click(
function(){
var visibleMenu = $("ul.sub-menu:visible");
if (visibleMenu) {
$(visibleMenu).hide();
}
$('ul.sub-menu', this).show();
}
);
})
I also have this in Codepen to show better:
http://codepen.io/anon/pen/jPbJMJ
Thank you
I managed to do this by changing the following:
jQuery(function($) {
$("#menu-main-menu").find('li').hover(function(){$(this).click();}).click(
function(){
var visibleMenu = $("ul.sub-menu:visible");
if (visibleMenu) {
$(visibleMenu).hide(); }
$('ul.sub-menu', this).show();
$("#menu-main-menu").mouseleave(function(){
$("ul.sub-menu").hide();
});
}
);
})
As you can see I used the mouseleave function in Jquery to remove the ul.sub-menu if the #menu-main-menu div was not selected with the mouse.
I hope this helps anyone trying to write a WordPress dropdown Sub navigation menu

Trouble with Javascript in Wordpress

I'm trying to create an element in a Wordpress site where a piece of content begins partway down the screen, and sticks to the top of the screen when the user scrolls down.
I've tried various things, and none of them have worked. The most recent attempt uses Javascript to give and take away a class to the content I'm trying to move/fix.
The code is
jQuery( document ).ready(function($) {
alert( "test1!" );
var wrap = $("#wrap");
wrap.on("scroll", function(e) {
if (this.scrollTop > 147) {
wrap.addClass("fix-search");
alert("test2");
} else {
wrap.removeClass("fix-search");
}
});
});
The file is enqueuing properly since the first test alert ("test1" fires, but "test2" doesn't fire as I scroll down the screen. I've had that same piece of code working in a modified version of the original code on codepen (http://codepen.io/anon/pen/NqKKVN) so I can only assume this is something weird with Wordpress interacting with Javascript.
So yeah, anyone know a way to either do that I'm wanting to do in a way that will work with wordpress, or to get the above piece of code working properly?
EDIT: This has been solved. For the reference of anyone else with the same problem the piece of code that eventually worked was
jQuery( document ).ready(function($) {
var scrollTop = $(window).scrollTop();
function scrollUpdate() {
var scrollTop = $(window).scrollTop();
var wrap = $("#menu-all-pages");
if (scrollTop > 147) {
wrap.addClass("fix-search");
console.log("Menu at top");
} else {
wrap.removeClass("fix-search");
console.log("Menu at set point");
}
console.log(scrollTop);
}
window.onscroll = scrollUpdate;
});
I have implemented a similar solution in my blog a few years ago. I got it working by scripting this way:
Add a variable scrollTop which would contain the value in pixels
scrolled from the window top.
var scrollTop = $(window).scrollTop();
See, I use jquery function scrollTop applied to the selected object "window". It would return the value scrolled from the very top of the browser. It does work on Wordpress, I have tried it on my blog.
Put this code in a function scrollUpdate. We'll call it later to update
the scroll value from top
function scrollUpdate() {
var scrollTop = $(window).scrollTop();
}
The function should also contain all the logic checking the scrollTop value and thus applying styles and etc.
Let's make this function be called on every scroll.
window.onscroll = scrollUpdate;
Try it yourself!
P.S. I got a weird feeling, but you should better use hide / show instead of adding a whole css class to the page.

Trigger Back to Top Function from within iFrame

I've been searching a lot for the solution to this and can't figure it out. Tried a lot of methods I've seen but none seen to work.
Here is what I wanna do:
I have a main page with a navigation menu on its side, and all the content is loaded on iFrame. I wan't to know when the iFrame content was scrolled down to enable or disable Back to Top Button and also send the iFrame content back to top when clicking the button.
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
I've found this code but it is made to work on the current page you're on. I've tried a lot with document.parent, parent, trigger(), but nothing seen to work. I could paste this code on all pages that will load on the iFrame but what I want is to place the back to top button on a static button menu that I have on the top of the content so it can be seen from wherever part of the text you are.
Thanks!
Have you tried inserting this script in the iframe head? btw its parent.document not document.parent.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
button = document.getElementById('topButton');
button.style.display = "block";
}
});
function toTop(){
document.getElementById('iframeContainer').scrollTop = 0;
}
and just hide the button. once the bottom is reached it should change the style to block and make it visible. Call the toTop() function with your newly visible button.

Categories