Responsive Gap Issue - javascript

I found a question today that is similar to what I need for a project: Div Table with fixed right column.
Here's the jquery that is already there.:
$(function() {
var scrollingWidth = $('.table').innerWidth();
var lastWidth = $('.table .wrap .column:last').outerWidth();
var innerWidth = 0;
$('.table .column').each(function() {
innerWidth += $(this).outerWidth();
});
var gap = scrollingWidth - innerWidth + lastWidth;
if(gap > lastWidth) {
$('.table .wrap .column:last').css('width', gap);
innerWidth += gap - lastWidth;
}
$('.table .wrap2').css('width', innerWidth);
});
I also made a JSfiddle with all of the code: http://jsfiddle.net/U5Vn2/
So, getting to the issue:
If you never resize the window that the .table is in, then the code works perfect. But try to resize the window bigger than it was originally (without hitting Run again), then the code breaks. If you do hit Run, then it works at the larger size (unless of course you resize it even bigger).
Another issue is that the gap that the jQuery generates should get smaller if a scrollbar has to appear. (To demonstrate, resize the window and you have to scroll even though it is only gap space). Is this possible to fix?
I've been playing around with it this morning trying to get it to be responsive to larger sizes, but I can't figure out how to fix it.
Thanks for all help!

Here's my solution to the issue: http://jsfiddle.net/znWAX/1/
$(function () {
var gap, scrollingWidth, innerWidth = 0,
lastWidth = $('.table .wrap .column:last').outerWidth();
$('.table .column').each(function () {
innerWidth += $(this).outerWidth();
});
function fixTableColumn() {
scrollingWidth = $('.table').innerWidth();
gap = scrollingWidth - innerWidth;
if (gap > 0) {
$('.table .wrap .column:last').css('width', gap + lastWidth);
}
$('.table .wrap2').css('width', innerWidth + Math.max(0, gap));
}
fixTableColumn();
$(window).resize(function () {
requestAnimationFrame(fixTableColumn);
});
);
The basics of it is that you need to hook to window.onresize event and do appropriate calculations and actions - we actually need to calculate innerWidth and lastWidth only once and then on every resize - the gap and scrollingWidth.
The requestAnimationFrame function is used for fluid animation,
you can find more info about it here: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
Hope this helps.

Put your existing code into a function setupTable(), when the page loads for the first time execute setupTable().
To make sure your table is updated each time the size of the browser window changes, you need to bind your setupTable() function to the "resize" event.
$(function() {
// called when page is loaded
setupTable();
// triggered when the size of the browser window changes
$(window).on("resize", setupTable);
function setupTable(){
var scrollingWidth = $('.table').innerWidth();
var lastWidth = $('.table .wrap .column:last').outerWidth();
var innerWidth = 0;
$('.table .column').each(function() {
innerWidth += $(this).outerWidth();
});
var gap = scrollingWidth - innerWidth + lastWidth;
if(gap > lastWidth) {
$('.table .wrap .column:last').css('width', gap);
innerWidth += gap - lastWidth;
}
$('.table .wrap2').css('width', innerWidth);
}
});

Related

Use matchMedia to enable/disable script like a media query on load/viewport resize

I only want to run a script when the viewport width is greater than a set value. I would also like this to check as the browser resizes and disable/enable as required. I've tried to achieve this using matchMedia and rather than checking every pixel, the script only triggers when the viewport is less/greater than a set value.
If I load a narrow viewport (less than 1080px) the JS doesn't trigger - perfect! Enlarging the viewport to have a width greater than 1080px then runs the script - also perfect!
The problem I have is when I scale down from a larger viewport (greater than 1080px) to narrow/small. The script still functions until I refresh the page - I'm hoping someone can help me with that.
As an aside, is it possible to change const mediaQuery = window.matchMedia('(min-width: 1080px)') to include a min-height or a more complex media query if required (not essential for this).
My script:
const mediaQuery = window.matchMedia('(min-width: 1080px)')
function viewportChange(e) {
// Check if the media query is true
if (e.matches) {
$(document).ready(function() {
var num_children = $('.split-loop__left').children().length;
var child_height = $('.split-loop__right').height() / num_children;
var half_way = num_children * child_height / 2;
$(window).scrollTop(half_way);
function crisscross() {
var parent = $(".split-loop");//.first();
var clone = $(parent).clone();
var leftSide = $(clone).find('.split-loop__left');
var rightSide = $(clone).find('.split-loop__right');
if (window.scrollY > half_way ) {
//We are scrolling up
$(window).scrollTop(half_way - child_height);
var firstLeft = $(leftSide).children().first();
var lastRight = $(rightSide).children().last();
lastRight.appendTo(leftSide);
firstLeft.prependTo(rightSide);
} else if (window.scrollY < half_way - child_height) {
var lastLeft = $(leftSide).children().last();
var firstRight = $(rightSide).children().first();
$(window).scrollTop(half_way);
lastLeft.appendTo(rightSide);
firstRight.prependTo(leftSide);
}
$(leftSide).css('bottom', '-' + window.scrollY + 'px');
$(rightSide).css('bottom', '-' + window.scrollY + 'px');
$(parent).replaceWith(clone);
}
$(window).scroll(crisscross);
});
}
}
// Register event listener
mediaQuery.addListener(viewportChange)
// Initial check
viewportChange(mediaQuery)

I want to use javascript to resize my browser so that it doesn't scroll

I want to use a background color with Gradient on the intro page, but when I shrink my browser, I want to work to reduce the height value without scrolling.
I don't know what method to use when it's resizing.
The code is as follows.
function __screenResize () {
var innerHeight = window.innerHeight;
var availHeight = window.screen.availHeight;
document.getElementById('section').style.height = innerHeight + 'px';
window.onresize = function () {
document.getElementById('section').style.height = availHeight + 'px';
}
}

How to disable a JavaScript, with inner window width

The page I am working on has a tilt effect, which affects the orientation of the site body. I want to turn this off when the page reaches a mobile viewport; I have looked and tried a few thing but can't seem to get the effect I want. The code below is what i am using. This script runs separate from my main JS code.
window.addEventListener("mousemove",function(e) {
var width = window.innerWidth;
var height = window.innerHeight;
var clientHeight = document.body.clientHeight;
var skew = {};
skew.y = (20 * ((e.x / width) - 0.5));
skew.x = -(20 * ((e.y / height) - 0.5));
document.body.style.webkitTransform = "perspective("+clientHeight+"px) rotateX("+skew.x+"deg) rotateY("+skew.y+"deg)";
});
CSS changes won't remove themselves, so you'll have to remove the transform manually if the browser window is under your desired size.
Check on window resize,
window.addEventListener('resize', function() {
if (window.innerWidth < 568) {
document.body.style.webkitTransform = '';
}
});
And also make sure not to reapply it if the user moves their mouse.
// This is the function you already have
window.addEventListener('mousemove', function(e) {
if (window.innerWidth < 568) {
return;
}
...
}

jQuery toggle element class based on scroll percentage

I want to change the var num into a percentage instead of a number of pixels.
how can I do this?
I need this for my site:
http://www.sutanaryan.com/Tutorials/fixed-menu-when-scrolling-page-with-CSS-and-jQuery/
But they work with pixels, and my website works with % (because autoscaling for example on a HD screen or a Full HD screen)
/* Dynamic top menu positioning
*
*/
var num = 150 ; //number of pixels before modifying styles 150
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
//USE SCROLL WHEEL FOR THIS FIDDLE DEMO
First, let me tell you this is a horrible solution. Listening to every scroll event and calling addClass() or removeClass() every time is expensive. // end preach
Here's the answer to your question anyway:
var baseHeight = $(window).height(); // for body, use $("body").height();
var num = .25; // this the percentage of vertical scroll
$(window).bind('scroll', function () {
if ($(window).scrollTop() / baseHeight > num) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});

JQuery recalculate css on window resize

On this site:
http://houston.aiga.org/
Although the slider is full width / variable on browser window size, the Title of each slider item is always indented to line up with the content.
I've tried setting this up:
http://jsfiddle.net/topiman/xS7vn/
$(window).resize(function() {
$('#item').css("padding-left",$(window).width()/2);
});
The function is working but the calculation pushes the item too far in on decreasing window size and too far out on increase.
The line in the working slider example is:
$('.layout-feature .box-section-image-gallery-controls-title, .layout-feature .box-section-image-gallery-title').css('paddingLeft', 60 + extraSpace/2);
where extraSpace is the $(window).width()
Any help gratefully received - thanks in advance
It seems you forgot about the width after all: http://jsfiddle.net/topiman/xS7vn/5/
This is what I came up with. Stupid thing is the console.log kept giving back a +8 difference which I had to hardcode remove. Is this what you were looking for?
$(window).resize(function() {
var ItemWidth = $(".wrapper").width();
$('#item').width( ItemWidth );
var WindowWidth = $(window).width();
// cannot resize because window is smaller than the wrapper
if( ItemWidth > WindowWidth ) {
var PadWidth = 0;
} else {
var PadWidth = (WindowWidth - ItemWidth)/2 - 8;
}
console.log( ItemWidth + " - " + WindowWidth + " - " + PadWidth );
$('#item').css("margin-left",PadWidth + "px");
});
Update; also check http://jsfiddle.net/xS7vn/8/ for the latest update including resizing on page load.

Categories