We Keep Coding

jquery window on load and resize not running

I have this code that is used for a responsive image slider that shows the logos of partners.
This is how it looks.
https://i.scrny.me/yaOn.gif
At times, it randomly stops working, i refresh the page a few times and its working again so I am not sure what the problem is. This is how it looks when it stops working.
https://i.scrny.me/ot1N.png
This is the JavaScript code I am using for this.
$(function() {
var partnerSlider = $('.partners'),
partners = partnerSlider.children().length,
width, partnerHeight, containerWidth, windowSize, columns = 4;
//Making it responsive and all
$(window).on("load resize", function(){
containerWidth = $('.container').width();
windowSize = $(window).width();
if (windowSize >= 992) {
columns = 4;
}
else if (windowSize >= 768 && windowSize < 992) {
columns = 3;
}
else if (windowSize < 768) {
columns = 2;
}
$('#partners').css('width', containerWidth);
$('.partner').css('width', containerWidth / columns);
width = containerWidth / columns;
partnerHeight = $('.partner > img').height() + 20;
partnerSlider.css({width: (partners * width), height: partnerHeight});
});
var rotating = true;
var sliderSpeed = 4000;
var seePartners = setInterval(slidePartners, sliderSpeed);
$(document).on({
mouseenter: function () {
rotating = false;
},
mouseleave: function () {
rotating = true;
}
}, '.partners');
function slidePartners() {
if (rotating !== false) {
var first = $('.partner:first');
first.animate({'margin-left': '-' + width + 'px'}, 1000, function () {
first.remove().css({'margin-left': '0px'});
$('.partner:last').after(first);
});
}
}
});
As far as I managed to figure out the problem is from this part.
$(window).on("load resize", function(){
containerWidth = $('.container').width();
windowSize = $(window).width();
if (windowSize >= 992) {
columns = 4;
}
else if (windowSize >= 768 && windowSize < 992) {
columns = 3;
}
else if (windowSize < 768) {
columns = 2;
}
$('#partners').css('width', containerWidth);
$('.partner').css('width', containerWidth / columns);
width = containerWidth / columns;
partnerHeight = $('.partner > img').height() + 20;
partnerSlider.css({width: (partners * width), height: partnerHeight});
});
The function is meant to run whenever the page is loaded or resized I believe but sometimes when the page is loaded it doesn't run so it does not automatically assign the sizes for the images and the container.
This is the HTML
<div class="container wow fadeIn" style="overflow:hidden;">
<h2>Partners</h2>
<div class="partners">
<div class="partner">
<img src="assets/images/sponsor.png" class="img-responsive"/>
</div>
<div class="partner">
<img src="assets/images/sponsor.png" class="img-responsive"/>
</div>
<div class="partner">
<img src="assets/images/sponsor.png" class="img-responsive"/>
</div>
<div class="partner">
<img src="assets/images/sponsor.png" class="img-responsive"/>
</div>
<div class="partner">
<img src="assets/images/sponsor.png" class="img-responsive"/>
</div>
<div class="partner">
<img src="assets/images/sponsor.png" class="img-responsive"/>
</div>
<div class="partner">
<img src="assets/images/sponsor.png" class="img-responsive"/>
</div>
</div>
</div>
Any help will be appreciated.

I believe the issue with your code is related to the version of jQuery you have. Sometime within the jQuery 3.x.x version (not sure when exactly) changes were made to make the on ready event handlers run asynchronously. This means there can be scenarios where the on load event completes before the ready event is fired. In you case, this becomes an issue because if the load event has been fired before ready is called, the window.load event handlers registered inside jQuery's document.ready() will not run. This sequence can depend on many things like how quickly the page loads, image caching..., which is why you see the issue occurring inconsistently.
The solution is to update the code you have and move the $(window).('on') event handler outside the docuemnt.ready function: $(function(){}). Additionally, since I didn't see it in the jsFiddle you provided, make sure the scripts for your js code are embedded withing the <body> element, as this is the ideal place to put code that impacts the rendering of the page.
I've update teh jsfiddle provided to include these changes, take a look:
Updated jsFiddle

Problems with scrollTop animation

I have three divs, each one with some hidden content. When you click on a div, its content is being displayed by sliding down. And at the same time, I'm using scrollTop to make the browser scroll to the top of the block thats been clicked on. The HTML looks like this:
<div class="blocks block1"></div>
<div class="content block1_content"></div>
<div class="blocks block2"></div>
<div class="content block2_content"></div>
<div class="blocks block3"></div>
<div class="content block3_content"></div>
However, im having problems with parts of the scrollTop animation. Here is the JS:
$('.blocks').on("click", function() {
if (!$(this).hasClass('expanded')) {
collapseExpandedFunction();
$('html, body').animate({
scrollTop: $(this).offset().top
}, 500);
$(this).addClass('expanded');
$(this).next().slideDown();
} else if ($(this).hasClass('expanded')) {
collapseExpandedFunction();
}
});
collapseExpandedFunction = function() {
$('.blocks.expanded').removeClass('expanded');
$('.content').slideUp();
};
I made an jsfiddle to easier demonstrate the problem: https://jsfiddle.net/ss53ckyk/3/
Explaination:
If you start toggle the green block and then toggle the red or blue, it's all good. The greens content is being hidden, while the red/blue is displayed and scrolled to the top of the block.
The problem is if you start from the top and moving down. If you first toggle the red one and then either blue or green, the browser won't scroll down correctly.
Another thing i'd like is to make the slideDown happen after the scrollTop animation is done.
Hopefully someone can help me out!
EDIT:
There should only be one blocks content visible at a time. For example, if you click the red once and then the blue, the content of the red should slide up, while the blue is showing.

The asynchronous nature of javascript is causing your issues; namely .slidUp() function. When this event is triggered, it fires an asynchronous event, which is non-blocking to the rest of the function. Therefore, the animate top will take a snapshot of the DOM at a particular moment in time while the .slidUp() function is actioning. Replacing the .slidUp() and .slidDown() with .show() and .hide() to resolve this, but this doesn't provide the responsiveness you require. One thought would be to capture the offsets of each previous content div and use that in the scrollTop function.

EDIT :
Based on the edit, you need to make few adjustments in your code which calculates the scrolltop position based on scrollposition and adding margin based on the corresponding .content div
$(document).ready(function() {
var addMargin = false;
$('.blocks').on("click", function() {
if (!$(this).hasClass('expanded')) {
collapseExpandedFunction();
var doc = document.documentElement;
var ele = this;
var nextEle = $(ele).next();
$(this).addClass('expanded');
var margin = 0;
var scrollTo = 0;
if($(ele).hasClass('expanded'))
{
if(addMargin)
margin = $(nextEle).css('height').replace('px','');
scrollTo = $(ele).offset().top - margin;
}
if(doc.scrollTop != 0 && doc.scrollTop > scrollTo && addMargin)
{
console.log(margin);
scrollTo = scrollTo + 200;
}
$('html, body').animate({
scrollTop: scrollTo
}, 500, function()
{
$(ele).next().slideDown();
});
} else if ($(this).hasClass('expanded')) {
collapseExpandedFunction();
}
});
collapseExpandedFunction = function()
{
$('.blocks.expanded').removeClass('expanded');
$('.content').slideUp();
addMargin = false;
};
window.onscroll = function (e) {
addMargin = true;
}
});
Here's the working code : https://jsfiddle.net/ss53ckyk/13/

JQuery Add Class when bottom of div reaches top

I am trying to add a class when the bottom of a div reaches the top of the window, but am not sure of how to do it.
I have managed to add the class when the top of the div gets to the top of the window, but am not having much luck with the bottom of the div.
Code I am using:
$(document).ready(function() {
var menuLinksTop = $('.container').offset().top;
var menuLinks = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > menuLinksTop) {
$('header').addClass('black-links');
} else {
$('header').removeClass('black-links');
}
};
menuLinks();
$(window).scroll(function() {
menuLinks();
});
Any help is appreciated.

You should use javascript's getBoundingClientRect() method, watch $(window).scroll event, and look at element's rectangle, its bottom value will give you what you need (if it's negative, your element is all the way up)
$(window).scroll(function() {
console.log($("div.watch")[0].getBoundingClientRect());
if ($("div.watch")[0].getBoundingClientRect().bottom < 0)
alert ("i'm out :3");
});
see jsFiddle http://jsfiddle.net/ja5nnbwr/2/

Add the height of the div. Assuming it is the .container :
var menuLinksTop = $('.container').offset().top + $('.container').height();

.toggle() function adds overflow hidden inline

In the site that I'm working on, I am using the jQuery .toggle() function to display and hide the navigation when viewing the site in mobile devices. Here's the code that I am using:
<script>
$(document).ready(function() {
$('.nav-toggle').click(function(){
//get collapse content selector
var collapse_content_selector = $(this).attr('href');
//make the collapse content to be shown or hide
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.html('Show');//change the button label to be 'Show'
}else{
toggle_switch.html('Hide');//change the button label to be 'Hide'
}
});
});
});
</script>
It is toggling the navigation but the text links are not displaying. I've used the element inspector in chrome and I'm seeing that overflow:hidden is being added inline to the element by the .toggle() function but it is not being removed when toggling to display the links. I've taken a look at the jQuery documentation for this but it doesn't mention anything about overflow:hidden. You can see that this is being adding by this function because it does not appear until after clicking the toggle button
Here's the url to the site: http://theinfluence.iamchrisbarnard.com
The toggle function is being applied to the toggle icon in the top right but can only be seen at smaller sceensizes. And it's toggling the nav element at the very top of the page.
What could be causing this issue?

Instead of making background image for the toggle menu try adding as image. Code something similar to
Html
<img src="images/icon_mobile_menu.jpg" alt="m"> Menu
jQuery
$(window).resize(function() {
var windowWidth = $(window).width();
if (windowWidth < 366) {
$('#nav').hide();
$('#mobibtn').show();
} else {
$('#nav').show();
$('#mobibtn').hide();
$('#mobimenu').hide();
}
});
$(window).load(function() {
var windowWidth = $(window).width();
if (windowWidth < 366) {
$('#nav').hide();
$('#mobibtn').show();
} else {
$('#nav').show();
$('#mobibtn').hide();
$('#mobimenu').hide();
}
});
$(document).ready(function() {
$('#mobibtn').click(function() {
$('#mobimenu').toggle();
});
});
(You may see live example at http://pfitr.net/frontend/index.html )

automated scrolling text in div's

i saw a stack question posted already:
[question]: < Text in div - automated scrolling with jQuery - jsFiddle inside >
My question adding to this is, is it possible to have the text in each paragraph or separated divs highlighted (boldness, background color, etc.) once they are in main view, whilst the p's or div's leaving/entering the slider box are faded?
So like the jsfiddle referenced, you have a div container with say 4,5,6,... div's or p's inside of it and one div or p is visible whilst the div or p above and below it, only half would be visible (faded), whilst the remaining overflow is hidden.
thanks.

If I understand you correctly, you're looking for an effect like this:
http://jsfiddle.net/2RRWS/
My code assumes an html structure like:
<div id="scrollContainer">
<p>Some text</p>
<p>More text</p>
...
</div>
And some CSS to set the width/height of the containing div as appropriate. Also it assumes some classes for "dimmed" and "highlighted" paragraphs.
There's probably a cleaner way to do this, but this is just what I cobbled together and it seems to work, so...
var $container = $("#scrollContainer"),
$ps = $container.find("p"),
containerHeight = $container.height(),
contentHeight = 0,
scrollTop = 0;
// figure out the height of the content
$ps.each(function() {
contentHeight += $(this).outerHeight();
});
// add some blank space at the beginning and end of the content so that it can
// scroll in from the bottom
$("<div></div>").css("height", 400).appendTo($container).clone().prependTo($container);
setInterval(function() {
if (paused)
return;
// if we've gone off the end start again
if (scrollTop > contentHeight + containerHeight)
scrollTop = 0;
// scroll up slightly
$container.scrollTop(scrollTop++);
$ps.removeClass("highlighted") // for each paragraph...
.addClass("dimmed") // dim it
.each(function() { // unless it is in view
var $this = $(this),
top = $this.position().top,
height = $this.height();
if (top > 0 && top + height < containerHeight)
$(this).addClass("highlighted").removeClass("dimmed");
});
}, 20);
$container.hover(function() {
paused = true;
}, function() {
paused = false;
});
EDIT: Updated to implement "pause" feature as per comment. http://jsfiddle.net/2RRWS/8/