We Keep Coding

JavaScript - Hide an element when another element is fully inside the viewport

I want to hide .isi-jumo-link when .indication is fully visible in the viewport. Currently it only disappears once .indication is at the top of the viewport.
User needs to scroll from the top and once .indication is fully in view then .isi-jump-link will disappear.
$(window).on('scroll', function () {
if ($(this).scrollTop() >= $('.indication').offset().top) {
$('.isi-jump-link').hide();
}
else {
$('.isi-jump-link').show();
}
});
Just to note... using a fixed scrollTop in my case will not work.

You could check if the both the top and the bottom of your indication is within the viewport:
$(window).on('scroll', function () {
var bottomIsVisible = $(this).scrollTop() + $(this).height() >= $('.indication').offset().top + $('.indication').height();
var topIsVisible = var topIsVisible = $(this).scrollTop() <= $('.indication').offset().top;
if (bottomIsVisible && topIsVisible) {
$('.isi-jump-link').hide();
}
else {
$('.isi-jump-link').show();
}
});

You need to add the height of the .indication <div> also to the equation:
$(window).on('scroll', function () {
if ($(this).scrollTop() >= ($('.indication').offset().top + $('.indication).height())) {
$('.isi-jump-link').hide();
}
else {
$('.isi-jump-link').show();
}
});

How to combine .with() and .resize() in one script

Can you help me with the following?
I have this working javascript code.
This code makes the bootstrap columns in a row all an equal height for screens with a bigger width than 640px.
if($(window).width() >= 640){
$(document).ready(function () {
$(".row").each(function () {
var highestBox = 0;
$(".col", this).each(function () {
if ($(this).height() > highestBox) highestBox = $(this).height();
});
$(".col", this).height(highestBox);
});
});
}
Problem
The problem is that if I resize the window from less than 640px to more than 640px, I have to refresh the page in order to see the changes. I'd like a script that automatically checks the window size. I think the .resize() function can help me with this but I can't figure out how to implement it.

You could implement it as follows. Put your code inside a function, let's call it resizeMe() .Then:
var rtime,
timeout = false,
waitingTime = 200,
resizeFinished = function () {
if (new Date() - rtime < waitingTime) {
window.setTimeout(resizeFinished, waitingTime);
} else {
timeout = false;
if ($(window).width() >= 640) {
resizeMe();
}
}
};
$(window).resize(function () {
rtime = new Date();
if (timeout === false) {
timeout = true;
window.setTimeout(resizeFinished, waitingTime);
}
}).resize();
With this function, your function resizeMe() is fired only when the resizing process has finished. That way it is assured that resizeMe()isn't fired at every mouse move but only if waitingTime is reached (200ms). This is quite important for performance. (Thanks to urban pointing at)

You could use following snippet, using window.matchMedia() (support & polyfill) method and binding handler in load/resize window events:
$(window).on('load resize', function() {
clearTimeout(this.resizeTimeout);
this.resizeTimeout = setTimeout(function() {
if (window.matchMedia("(min-width: 640px)").matches) {
$(".row").each(function() {
var highestBox = Math.max.apply(null, $(this).find('.box').map(function() {
return this.clientHeight; // or $(this).height()
}));
$(this).find('.box').height(highestBox);
});
}
}, 50);
});
EDIT Adding debouncing regarding good point done in #Daenu's answer

just make a function and pass it to window
function resizeMe(){
if($(window).width() >= 640){
$(document).ready(function () {
$(".row").each(function () {
var highestBox = 0;
$(".col", this).each(function () {
if ($(this).height() > highestBox) highestBox = $(this).height();
});
$(".col", this).height(highestBox);
});
});
}
}
then attach an event to window and pass your function
window.addEventListener("resize", resizeMe);

you need to put the
$(document).ready(function () on the top before the if($(window).width() >= 640)
you can use
$( window ).resize(function() function

Based on #Daenu's answer. A compressed/simplified version that is reusing the same timeout:
$(function(){
timeout = null
waitingTime = 200
$(window).resize(function(){
// Clear old timeout
if (timeout)
clearTimeout(timeout)
// Set new
timeout = setTimeout(resizeMe, waitingTime);
})
})
function resizeMe(){
$(".row").each(function () {
var highestBox = 0;
$(".col", this).each(function () {
if ($(this).height() > highestBox) highestBox = $(this).height();
});
$(".col", this).height(highestBox);
});
}
The idea is that if resize is fired while there is an active timeout, we cancel the old and re-schedule a new one
Fiddle: https://jsfiddle.net/hq1jd47v/2/

Understanding Jquery function - $(document).ready(callback);

Hi am trying to run a function on window resize and document ready. As resize is triggered by mobile scroll it is necessary to check the height hasn't changed. This code works for resize but not on load. Is anyone able to explain whey the function isn't executed on document ready? Thanks in advance.
//CLOSE EXPANDED ELEMENTS FOR MOBILE
var $window = $(window);
var width = $(window).width();
var callback = function () {
if($(window).width() != width){
if ($window.width() < 756) {
$(".content_lower.collapse").removeClass('in');
}
else {
$(".content_lower.collapse").addClass('in');
}
}
};
$(document).ready(callback);
$(window).resize(callback);
console.log(callback.toString());

Actually on document ready the document is just loaded and the $(window).width() is equal to width variable.
So the function callback will be called while width = $(window).width() so it will not enter the if condition and nothing will happen inside the function.
If you try to log somtheing to the console or alert a message in the beginning of your function you will see that it's executed:
var callback = function() {
console.log("Callback entered !!!");
if ($(window).width() != width) {
if ($window.width() < 756) {
$(".content_lower.collapse").removeClass('in');
} else {
$(".content_lower.collapse").addClass('in');
}
}
};
EDIT:
If you still want to execute it in document load you can add a boolean flag initialized to false and set it to true if the window is once resized then test with it:
var $window = $(window);
var width = $(window).width();
var called = false;
var callback = function() {
console.log("callback entered !!!");
if ($(window).width() != width || !called) {
if ($window.width() < 756) {
$(".content_lower.collapse").removeClass('in');
} else {
$(".content_lower.collapse").addClass('in');
}
}
called = true;
};
$(document).ready(callback);
$(window).resize(callback);
console.log(callback.toString());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content_lower.collapse">the div</div>
EDIT 2:
A better approach is to use the boolean flag as a parameter of the callback function, and call it with false on document load and true on window resize:
var $window = $(window);
var width = $(window).width();
var callback = function(resized) {
if ($(window).width() != width || !resized) {
if ($window.width() < 756) {
$(".content_lower.collapse").removeClass('in');
} else {
$(".content_lower.collapse").addClass('in');
}
}
};
$(document).ready(callback(false));
$(window).resize(callback(true));

This gave the desired effect. Tanks for the help guys.
var $window = $(window);
var width = $(window).width();
var callback = function () {
if ($window.width() < 756) {
$(".content_lower.collapse").removeClass('in');
}
else {
$(".content_lower.collapse").addClass('in');
}
};
$(document).ready(callback);
$( window ).resize(function() {
if($(window).width() != width){
callback();
}
});

When the document is loaded the width variable will be set to your window-width (let's say 500px). Then it checks if the current window-width (so 500px) is equal to the width var (500 !== 500). This returns false, so you code won't be executed. You can do this instead:
var callback = function() {
if ($(window).width() < 756) {
$('body').text($(window).width() + " - if");
} else {
$('body').text($(window).width() + " - else");
}
};
$(document).ready(callback);
$(window).resize(callback);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Pop up text after scrolling certain distances is not working

I'm trying to get text to pop up at a fixed location at different y-scroll intervals however, I can't seem to chain the scripts correctly. It seems to skip the first action of displaying the first message.
Code: http://jsfiddle.net/k8bnd/
var startY = 1500;
var stopY = 2000;
$(window).scroll(function(){
checkY();
});
function checkY()
{
console.log($(window).scrollTop());
if($(window).scrollTop() > startY && $(window).scrollTop() <= stopY)
{
console.log("Show");
$('.titleTwo').show();
}
else
{
console.log("Hide");
$('.titleTwo').hide();
} }
checkY();

Your functions should have different names. Try
var startY1 = 900;
var stopY1 = 1800;
var startY2 = 1801;
var stopY2 = 2500;
$(window).scroll(function(){
checkY();
});
function checkY()
{
console.log($(window).scrollTop());
if($(window).scrollTop() > startY1 && $(window).scrollTop() <= stopY1)
{
console.log("Show");
$('.foxedDiv').show();
}
else
{
console.log("Hide");
$('.foxedDiv').hide();
}
if($(window).scrollTop() > startY2 && $(window).scrollTop() <= stopY2)
{
console.log("Show");
$('.foxedDivved').show();
}
else
{
console.log("Hide");
$('.foxedDivved').hide();
}
}
checkY();
Fixed Fiddle:
http://jsfiddle.net/k8bnd/1/

This is happening because you have overwritten the previous values/functions. To make this more dynamic you can add data-* attributes to each message element specifying which positions they are valid for. And then in the scroll event check each element's position data, if the window is within that range show it, otherwise hide it.
HTML
<!-- Changed the classes both elements had to foxedDiv
so that we can select them as a group and loop over them -->
<div class="foxedDiv" data-position="900,1800">
MESSAGE 1
</div>
<div class="foxedDiv" data-position="1801,2500">
MESSAGE 2
</div>
JS
//Note you do not need to make an anonymous
//function just to do the call for checkY
//just pass the function
$(window).scroll(checkY);
function checkY(){
//save this value so we dont have to call the function everytime
var top = $(window).scrollTop();
console.log(top);
$(".foxedDiv").each(function(){
var positionData = $(this).data("position").split(",");
if(top > positionData[0] && top <= positionData[1]){
console.log("Show");
$(this).show();
} else {
console.log("Hide");
$(this).hide();
}
});
}
checkY();
JSFiddle Demo

Responsive javascript

Can anyone please help with a dodgy if statement, try as I might I can't see anything wrong with it, the code works when outside of the if statement:
var sizeBefore;
var sizeAfterResize;
var sizeBreakPoint;
var resizeTimer;
$(function() {
sizeBefore = $(window).width();
sizeBreakPoint = 500;
doneResizing();
});
function doneResizing(){
sizeAfterResize = $(window).width();
if ((sizeBefore < sizeBreakPoint) && (sizeAfterResize >= sizeBreakPoint)) {
alert('Before:' + sizeBefore);
alert('After:' + sizeAfterResize);
sizeBefore = sizeAfterResize;
// THIS RUNS WHEN OUTSIDE IF STATEMENT
}
}
$(window).resize(function() {
//doneResizing();
clearTimeout(resizeTimer);
resizeTimer = setTimeout(doneResizing, 100);
});
EDIT: This statement should only be true on both document ready or completion of resize when the window has been resized from smaller than sizeBreakPoint to larger than sizeBreakPoint - hope this clarifies
EDIT: SOLUTION
var sizeBefore;
var sizeAfterResize;
var sizeBreakPoint;
var resizeTimer;
$(function() {
sizeBefore = $(window).width();
sizeBreakPoint = 500;
doneResizing();
});
function doneResizing(){
sizeAfterResize = $(window).width();
if ((sizeBefore < sizeBreakPoint) && (sizeAfterResize >= sizeBreakPoint)) {
alert('Before:' + sizeBefore);
alert('After:' + sizeAfterResize);
}
sizeBefore = sizeAfterResize;
}
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(doneResizing, 100);
});

ok from looking and testing your if i can say:
if ((sizeBefore < sizeBreakPoint) && (sizeAfterResize >= sizeBreakPoint))
this is only true if your window starts with smaller then 500 and after you resize if it goes over 500. This because you never change you sizeBefore other then on page load.
Can you tell me what you really want to verify? Or if this what you really want.
** edit: suggested solution **
try to do something like this:
$(function() {
sizeBreakPointMin = 480;
sizeBreakPointMax = 520;
doneResizing();
});
function doneResizing(){
sizeAfterResize = $(window).width();
//this way you have a window where this is false and it's as you want to allow the window as in a fine size
//you can garantie that the window is always bigger then 480 and smaller then 520
if ((sizeAfterResize < sizeBreakPointMin) || (sizeAfterResize >= sizeBreakPointMax)) {
alert('Before:' + sizeBefore);
alert('After:' + sizeAfterResize);
// THIS RUNS WHEN OUTSIDE IF STATEMENT
}
}
from your code:
if ((sizeBefore < sizeBreakPoint) && (sizeAfterResize >= sizeBreakPoint)) {
...
sizeBefore = sizeAfterResize;
}
this two lines don't go well together because the first time this is true you just garantied that sizeAfterResize >= sizeBreakPoint making the next time you go check the if sizeBefore is will always be bigger then sizeBreakPoint making the if statement impossible to enter 2 times as it is (and if you don't change sizeBefore outside the if.
Hope this helps.

I think your problem lies within the if condition.
sizeBefore is whatever your screen width is at the document ready event, which if you have a fullscreen browser, will be bigger than 500 (which is your breakpoint value). But you're never updating the sizeBefore, so it will never be lower than the sizeBreakPoint, and so, this part of the if statement will never be true: (sizeBefore < sizeBreakPoint)

This is no direct answer to the question, just my own twist on a responsive JavaScript
// calculate viewport width so that we can load js conditionally
function responsive(){
var scaffolding = 'desktop';
var w = parseInt($(window).innerWidth(), 10);
if (w > 0 && w < 768) { scaffolding = 'phone'; }
if (w >= 768 && w <= 980) { scaffolding = 'tablet'; }
if (w > 980) { scaffolding = 'desktop'; }
return scaffolding;
}
if ( responsive() == phone ) {
// do stuff only on phones
}
if ( responsive() != phone ) {
// do stuff everywhere else but phones
}
You get to define what each breakpoint represents and what it is called, in a way that it still makes sense when you start using the condition later in the code.