Develop Reference

Windows resize event not properly detected

I have a navigation menu that should stay fixed at the top of the page using the sticky.js plugin for window-widths equal or larger than 992 px. For smaller windows, it should just go with the flow of the site. Now, as this is a responsive website, I would like to implement a dynamic window width detection when the window is resized.
The following code does not seem to correctly detect the resize event. I have to reload the page to stick / unstick the navbar at the correct width:
$(document).ready(function() {
var currentWindow = $(window);
function checkWidth() {
var windowSize = currentWindow.width();
if (windowSize >= 992) {
// Sticky.js
$('.navbar').sticky({
topSpacing: 0,
getWidthFrom: '.upper-header',
responsiveWidth: true
});
} else {
alert('Window is smaller');
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
Would appreciate your guidance.

You need to unstick the navbar when the window shrinks.
$(document).ready(function() {
var currentWindow = $(window);
var stuck = false; // So we only call the plugin when necessary
function checkWidth() {
var windowSize = currentWindow.width();
if (windowSize >= 992 && !stuck) {
// Sticky.js
$('.navbar').sticky({
topSpacing: 0,
getWidthFrom: '.upper-header',
responsiveWidth: true
});
stuck = true;
} else if (windowSize < 992 && stuck) {
alert('Window is smaller');
$('.navbar').unstick();
stuck = false;
}
}
// Execute on load
checkWidth();
// Bind event listener
currentWindow.resize(checkWidth);
});

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

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..

Disable script after certain scrolling

I've posted it before but none got it what I need. I need to disable this script after certain scrolling page, let's say page is scrolled 30% this script is disabled.
The reason I need to disable this script is that after certain scrolling div used in script is showed over some other div elements when page is scrolled, so I need to disable script after certain scrolling.
<script>
$(window).load(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 60) {
$('.additional').css('position', 'fixed');
$('.additional').css('top', 70);
} else {
$('.additional').css('position', 'relative');
$('.additional').css('top', 0);
}
});
});
</script>

I've created a working function in this fiddle with a dummy outcome, as you didn't provide any code of your page structure.
It calculates the scroll percentage using $(window).scrollTop() and $(document).height() and then uses an if/else statement to toggle two outcomes based on the result of the calculation.
function moveScroller() {
var move = function () {
var calc = $(window).scrollTop() / $(document).height();
if (calc > 0.3) {
/*EG:*/ $('#content').css('backgroundColor', '#f00');
/*$('.additional').css('position', 'fixed');
$('.additional').css('top', 70);*/
} else {
/*EG:*/ $('#content').css('backgroundColor', '#f0f');
/*$('.additional').css('position', 'relative');
$('.additional').css('top', 0);*/
}
};
$(window).scroll(move);
move();
}
$(function () {
moveScroller();
});

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);
}
});