Develop Reference

Changing text content on scroll position

I found a solution that didn't work mainly that I want. Here it is:
topic url
and this solution works for me:
if(pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top)
{
$('#date').html($(this).find('.description').text());
return;
}
jsfiddle
but I want to change content description in gray box more smooth. I've tried to give animation in CSS for it, but it didn't work.

I modified your script a bit to detect when the text changes and when that happens I apply a small animation with jQuery. I set the opacity to a low value, e.g. opacity:0.4 and then make a quick animation back to opacity:1.
This will help your user to see easier the change in the text.
$(window).load(function () {
$(window).on('scroll resize', function () {
var pos = $('#date').offset();
$('.post').each(function () {
if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
var newDescr = $(this).find('.description').text();
var oldDescr = $('#date').html();
$('#date').html(newDescr);
if(newDescr !== oldDescr) {
$('#date').css('opacity', 0.4).animate({ 'opacity': '1',}, 200);
return;
}
}
});
});
$(document).ready(function () {
$(window).trigger('scroll'); // init the value
});
});
Demo here

query two events for on

I have a page with links on top. When a link is clicked it scrolls down to a particular section. For styling purposes, I had to write a small jQuery to have to land 100px above the actual section that it scrolls to. Now I need the pixel number to change depending on the media query. Is there something wrong about how this is written? The responsive part isn't working..
function offsetAnchor() {
if(jQuery(location.hash).length !== 0) {
if (jQuery(window).width() <= 350) {
window.scrollTo(window.scrollX, window.scrollY - 180);
}
else {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
}
// This will capture hash changes while you are on the same page
jQuery(window).on("hashchange", function () {
offsetAnchor();
});
window.setTimeout(function() {
offsetAnchor();
}, 1);

the syntax should be :
jQuery(window).on("hashchange resize", function () {}
you can read more about .on() function at jQuery API

part of jquery code that is not working in wordpress

I have developed a jquery code that should let the menu hide a bit when I scroll down, and reappear as soon as I start scrolling up.
I had this perfectly working on my static html website, but I soon as I migrated it to wordpress, it stopped working. All my other js code works perfectly.. here is the part of code:
$(document).ready(function(){
$(window).scroll(function () {
var prevScroll;
var hidden = false;
var currentScroll = $(this).scrollTop();
if($("body").scrollTop() > 492){
if (prevScroll) {
console.log(currentScroll + " " + prevScroll);
console.log(hidden);
if (currentScroll < prevScroll && hidden) {
console.log('show');
$("#header-wrap").animate({marginTop: '0px'}, 200);
$("#menu").fadeIn("fast");
hidden=false;
} else if (currentScroll > prevScroll && !hidden) {
console.log(hidden);
console.log('hiding');
$("#header-wrap").animate({marginTop: '-60px'}, 200);
$("#menu").fadeOut("fast");
hidden=true;
}
} else if(!hidden){
console.log('first time');
$("#header-wrap").animate({marginTop: '-60px'}, 200);
$("#menu").fadeOut("fast");
hidden= true;
}
prevScroll = currentScroll;
}
else{
if(hidden){
console.log('show');
$("#header-wrap").animate({marginTop: '0px'}, 200);
$("#menu").fadeIn("fast");
hidden=false;
}
}
});
});
What is the problem with my code? I have it alongside all my js code in a script.js page.
Thanks
EDIT: I forgot to say that the menu is hiding , which is good, but it is not reappearing as soon as I scroll up. So part of the code is working, the other is not!

There's probably happen a conflict here between jQuery and Wordpress since both of them are using $ sign, try to use jQuery instead of $ or wrap your jQuery code inside:
jQuery(document).ready(function($){
$(window).scroll(function () {
// Your code here
});
});

I did it, the problem was that I was declaring var prevScroll;and var hidden = false; after the beginning of the function$(window).scroll(function () {, and not before it. Thanks for the help anyway..

How to 'open' Bootstrap Dropdown menus on pageload on screens smaller than 600px

im trying to get my bootstrap dropdowns to be open by default at screens at or smaller than 600px (mobile).
this seems to get it to try but it looks like something overrides it and closes it again:
<script type="text/javascript">
$(window).load(function () {
var width = $(window).width();
if (width >= 0 && width <= 600) {
$('#openBrowseMobile').addClass('open');
}
else {
$('#openBrowseMobile').removeClass('open');
}
})
.load();
</script>
any ideas on how to make this work?
I can get it to work on resize with this, but i need it to work on pageload/doc ready..
<script type="text/javascript">
$(window).resize(function () {
console.log('resize called');
var width = $(window).width();
if (width >= 0 && width <= 600) {
$('#openBrowseMobile').addClass('open');
}
else {
$('#openBrowseMobile').removeClass('open');
}
})
.resize();
</script>

You can move them into the same handler, by triggering on multiple events.
<script type="text/javascript">
$(window).on('load resize',function () {
console.log('resize called');
var width = $(window).width();
if (width >= 0 && width <= 600) {
$('#openBrowseMobile').addClass('open');
}
else {
$('#openBrowseMobile').removeClass('open');
}
});
</script>

I had the same issue,
here is another approach using jquery that doesn't involve messing with less code or css.
I just added a trigger to open the dropdown menu inmediately after menu is opened.
There's a timeout that waits until the main menu is opened.
(there will be 100 ms delay until dropdown is opened), If you like it to don't wait I guess that can be changed in less.
$(".navbar-toggle").click(function() {
if (window.matchMedia("(max-width: 768px)").matches) {
// on mobile, dropdown default opened:
setTimeout(function() {
$(".dropdown-toggle").click();
}, 100);
}
});

Slide down and slide up events mixed up in a fast mouse wheel up and down

I'm using jquery slideDown() and slideUp() to show a fixed gototop link when the scroll bar height is more than 200px.
Problem:
Link slide action mixed up in a fast mouse wheel up and down. Because of 0.4 sec running time of slide functions. I tried to define a visible flag and complete functions to prevent mixing. But not successful.
JsFiddle
Scroll down in result block to view the link and try a fast wheel up and down. If the result block has big height on your screen, please decrease the height to see the action.
impress: function () {
if ($(window).scrollTop() > this.MIN_SCROLL_HEIGHT
&& !this.buttonVisibleFlag)
{
this.button.slideDown(400, function() {
Blue.buttonVisibleFlag = true;
});
}
else if ($(window).scrollTop() <= this.MIN_SCROLL_HEIGHT
&& this.buttonVisibleFlag)
{
this.button.slideUp(400, function() {
Blue.buttonVisibleFlag = false;
});
}
}
Any ideas or help would be greatly appreciated.

I think your best bet would be to perform the sliding actions only after the user has stopped scrolling for a certain (small) period of time. I found this method to detect when the user stops scrolling and implemented in your code, here's the result:
Updated fiddle
var Blue = {
MIN_SCROLL_HEIGHT: 200,
button: null,
buttonVisibleFlag: null,
init: function () {
this.button = $(".gototop");
this.buttonVisibleFlag = false;
this.setWindowBindings();
},
setWindowBindings: function () {
$(window).scroll(function () {
//perform actions only after the user stops scrolling
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function () {
Blue.impress();
}, 150));
});
},
impress: function () {
if ($(window).scrollTop() > this.MIN_SCROLL_HEIGHT) {
this.button.slideDown();
} else if ($(window).scrollTop() <= this.MIN_SCROLL_HEIGHT) {
this.button.slideUp();
}
}
}
$(document).ready(function () {
Blue.init();
});
Note: you may want to tweak the timeout interval to suit your needs