We Keep Coding

Bootstrap navbar collapse on scroll

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.

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.

jQuery script fires twice? Perhaps live event is firing twice?

I am building an application using the latest version of PhoneGap, jQM and jQuery 1.8.0. So far so good except for this tiny and annoying problem I came across.
I have my show.html linked from the index.html that contains the following code:
<div id="search"> contains search bar and submit button </div>
<div id="list" style="display:none;">
<ul data-role="listview" data-filter="true"> </ul>
</div>
The ul tag is empty because the list will be dynamically appended to it using ajax when the submit button is clicked. I didn't want to display the #list div at first so I set the display to none.
So this works fine, when the submit button is clicked, it will send an ajax request to the server and append the items to the list. It will also hide the search div. This works alright as well!
Now the problem comes in, I added a window.scroll function to detect when the bottom of the page is reached.
Here's my jQuery code:
$(document).on("pageshow", "#pageID", function() {
$("#submit").click(function() {
$.ajax({
success: function(data, status){
$('#search').hide();
$('#list').show();
//append to list div and refresh list here
}
});
});
//detects bottom of page
$(window).scroll(function () {
if ($(window).scrollTop()+200 >= ($(document).height() - ($(window).height()))) {
console.log('end of the page');
lastPostFunc(); //infinite scroll function
}
});
});
This prints 'end of the page' two times to the firebug console! This script exists in between the head tag.
Is there anyway to just make it print once? I need this because I implemented my own endless scroll function and the problem is causing my ajax request to post twice to the server. The function works great but is not the cause of the problem because even when I commented lastPostFunc() out, it still prints to the console twice!!
Edit: Personally, I don't think the answers given so far are wrong, they are correct but they do not help me solve the problem. Maybe I need to rephrase things better. I copied my code and pasted it on a standalone page, it prints only once, so my code actually has nothing wrong with it and it's working like it should be.
Therefore, I was wondering whether there's something else that's causing it to print twice after submitting the form. My form and my results page is ON the same page. Does this means it caused the live event to work twice? Thus, causing it to print to the console twice on pageshow? If I am correct, is there anyway to work around this and making it only print ONCE?
Any help is appreciated. Thank you!

Okay I finally solved it.
Apparently all I have to do is to add this line of code to it:
$(window).scroll(function (e) {
if (reach bottom) {
e.stopImmediatePropagation();
console.log('End of the Page');
}
});
And it works! Stopped printing twice for me.

Your function will actually write output to the console more than two times. The problem lies within your condition:
if ($(window).scrollTop()+200 >= ($(document).height() - ($(window).height())))
Because for every scroll within this area the condition will evaluate to true. You could change it to:
if ($(window).scrollTop() == ($(document).height() - ($(window).height())))

May this will solve your problem
jQuery(window).scroll(function() {
if( (jQuery(document).height() < (jQuery(window).scrollTop() + jQuery(window).height() + 200))&&(jQuery(document).height() > (jQuery(window).scrollTop() + jQuery(window).height() + 99))) {
console.log('test')
}
});
//Update
var lastlogtime= null;
jQuery(window).scroll(function() {
if( (jQuery(document).height() < (jQuery(window).scrollTop() + jQuery(window).height() + 200))&&(jQuery(document).height() > (jQuery(window).scrollTop() + jQuery(window).height() + 99))) {
if(((lastlogtime+600)<(+new Date())) || (lastlogtime== null)){
//your scroll logic
console.log('test') ;
lastlogtime= +new Date();
}
}
});

How to run jQuery code when user scrolls to end of specific element?

Here is my sample code:
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height()) {
// Run code here...
}
});
I use the above code to execute stuff when user scroll to bottom of page. Instead, how can I make the code executed when user scroll to bottom of specific element (e.g. #content) and not the whole document.
Thank you.

This should probably work.
$(window).scroll(function () {
if ($(window).scrollTop() >= $(elem).position().top + $(elem).height() /* add padding if needed. */) {
// Run code here...
}
});

width returning 0 in jquery

i have some jquery script which runs after the window has loaded
$(window).load( function() {
$('.picture a img').each(function(index) {
$(this).height(280);
if ($(this).width() > $(this).height()) {
alert("yes");
} else {
alert("no");
}
});
});
i always get a "no" from this when i know some of the images should be a "yes". When i trace the script in chrome i noticed that the $(this).width() always returns a 0. ive googled around and some suggestions were that the images havent loaded but here ive used the window.load method which i thought should run once everything has loaded. any ideas??
thanks for any help in advance

Chrome is weird about image widths. I noticed then when building a jQuery photo gallery. If your image width is not specifically set in the tag, chrome will return 0. FF, and IE will figure out the width, but chrome will not. Try actually setting the width and see if you get the desired result then.
<img width="200" src="..." />

You need to run your code when the image is loaded, the following code should work:
$(window).load( function() {
$('.picture a img').load( function() {
$(this).height(280);
if ($(this).width() > $(this).height()) {
alert("yes");
} else {
alert("no");
}
});
});
note that every DOM element that have some kind of web resource associated to (window, img, iframe) respond to .load() event.

try
if ($(this).attr("width") > $(this).attr("height")) {

try adding a load event on the image, so it will only execute when the image is fully loaded.
$(window).load( function() {
$('.picture a img').each(function(index) {
$(this).bind('load', function () {
$(this).height(280);
if ($(this).width() > $(this).height()) {
alert("yes");
} else {
alert("no");
}
})
});
});
you can also try checking this.complete on the image object

I just wanted to add that you should also ensure that your image is actually a visible element. I've had plenty of issues in the past trying to measure visible:hidden or display:none elements. If you are indeed attempting to measure a hidden element, you can get past it by doing something like
var width = $('img').show().width();
$('img').hide();
Now that code is incredibly vague, but it gives you my thought behind visibility flashing.

The correct method to use, to run your scripts after the dom has finished loading, is:
$(document).ready(function() { /*your code here*/ });