I have a gallery of three Grids with images. The grid sizes changes depending on the screen size, and I have achieved that using Media-Query - ie, on desktop the grid's width will be 33% to make three columns view next to each other, and on tablet it will be 50% to make two columns view, and on phone it will be a 100% for each grid making one column view.
The reason I did this is to create a tiled gallery with images of different heights - and if I did it the normal way it will generate White-empty-spaces when floating.
So to fix this problem, and with the help of few members on this website, we have created a JavaScrip function that will MOVE all of the images that are inside Grid3 equally to Grid1 & Grid2 when screen size is tablet, so we get rid of the third grid making a view of fine two columns. Everything is working great!
Now, the problem is - on Chrome & IE - The function is being fired before its time for some reason that I need your help to help me find it! Please try it your self here: [http://90.195.175.51:93/portfolio.html][2]
Slowly on Chrome or IE - (try it on Firefox as well) - try to re-size the window from large to small, you will notice that BEFORE the top header changes to be a responsive Header (which indicate that you are on a small screen) the images have been sent to Grid1 and Grid 2! but a few px before the time. As on the function it says to fire it on <770.
Hope my question is clear enough for you to help me solve this issue which is stopping me from launching my website. Thanks.
Here is the JavaScrip:
//Gallery Grid System//
var testimonial = $(".testimonial, .galleryItem", "#grid3");
(function () {
$(document).ready(GalleryGrid);
$(window).resize(GalleryGrid);
})(jQuery);
function GalleryGrid() {
var grid3 = $('#grid3');
var width = $(window).width();
if (width < 1030 && width > 770) {
var grid1 = $('#grid1');
var grid2 = $('#grid2');
for (var i = 0; i < testimonial.length; i++) {
if (i < testimonial.length / 2) {
grid1.append(testimonial[i]);
} else {
grid2.append(testimonial[i]);
}
}
} else {
grid3.append(testimonial);
}
}
Note: The following is the whole page with all the functions:
$(document).ready(function () {
//Prevent clicking on .active links
$('.active').click(function (a) {
a.preventDefault();
});
//Allow :active on touch screens
document.addEventListener("touchstart", function () {}, true);
//Hide toolbar by default
window.addEventListener('load', function () {
setTimeout(scrollTo, 0, 0, 0);
}, false);
//Scroll-up button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});
//StickyBox
$(function () {
$.fn.scrollBottom = function () {
return $(document).height() - this.scrollTop() - this.height();
};
var $StickyBox = $('.detailsBox');
var $window = $(window);
$window.bind("scroll resize", function () {
var gap = $window.height() - $StickyBox.height() - 10;
var footer = 288 - $window.scrollBottom();
var scrollTop = $window.scrollTop();
$StickyBox.css({
top: 'auto',
bottom: 'auto'
});
if ($window.width() <= 770) {
return;
$StickyBox.css({
top: '0',
bottom: 'auto'
});
}
if (scrollTop < 50) {
$StickyBox.css({
bottom: "auto"
});
} else if (footer > gap - 100) {
$StickyBox.css({
top: "auto",
bottom: footer + "px"
});
} else {
$StickyBox.css({
top: 80,
bottom: "auto"
});
}
});
});
//Change items location depending on the width of the screen//
$(function () { //Load Ready
function myFunction() {
var insert = $(window).width() <= 770 ? 'insertBefore' : 'insertAfter';
$('#home-sectionB img')[insert]($('#home-sectionB div'));
$('#home-sectionD img')[insert]($('#home-sectionD div'));
}
myFunction(); //For When Load
$(window).resize(myFunction); //For When Resize
});
//Contact Form//
$(".input").addClass('notSelected');
$(".input").focus(function () {
$(this).addClass('selected');
});
$(".input").focusout(function () {
$(this).removeClass('selected');
});
$(document).ready(function () {
GalleryGrid();
$(window).resize(GalleryGrid);
});
//Gallery Grid System//
var testimonial = $(".testimonial, .galleryItem", "#grid3");
(function () {
$(document).ready(GalleryGrid);
$(window).resize(GalleryGrid);
})(jQuery);
function GalleryGrid() {
var grid3 = $('#grid3');
var width = $(window).width();
if (width < 1030 && width > 770) {
var grid1 = $('#grid1');
var grid2 = $('#grid2');
for (var i = 0; i < testimonial.length; i++) {
if (i < testimonial.length / 2) {
grid1.append(testimonial[i]);
} else {
grid2.append(testimonial[i]);
}
}
} else {
grid3.append(testimonial);
}
}
//Testimonials Animation//
$(".testimonial").hover(function () {
$(".testimonial").addClass('testimonialNotActive');
$(this).removeClass('testimonialNotActive').addClass('testimonialActive');
},
function () {
$(".testimonial").removeClass('testimonialNotActive');
$(this).removeClass('testimonialActive');
});
//Portfolio Gallery Filter//
(function () {
var $portfolioGallerySection = $('#portfolio-sectionB'),
$filterbuttons = $('#portfolio-sectionA a');
$filterbuttons.on('click', function () {
var filter = $(this).data('filter');
$filterbuttons.removeClass('portfolio-sectionAClicked');
$(this).addClass('portfolio-sectionAClicked');
$portfolioGallerySection.attr('class', filter);
$('.galleryItem').removeClass('selectedFilter');
$('.galleryItem.' + filter).addClass('selectedFilter');
});
}());
});
Your problem is that CSS media queries and jQuery's $(window).width() do not always align.
function getCSSWidth() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return e[ a+'Width' ];
}
Use this instead of $(window).width()
modified from http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
I think this could solve your problem (but I'm not quite sure)
//Put that before the document ready event
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
// Here you call GalleryGrid (replace $(window).resize(GalleryGrid) with that):
$(window).smartresize(GalleryGrid);
http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
The reason is your vertical scrollbar. Your content is fixed at width=1030, but when the window size is 1030, the size of the viewport is actually: window size (1030) - vertical scroll bar
Try setting
<body style="overflow:hidden">
You will see that it works correctly when the scrollbar is removed. Or try setting:
<link href="assets/css/tablets-landscape.css" rel="stylesheet" type="text/css" media="screen and (max-width : 1045px)"/>
Set max-width:1045px to make up for scrollbar, you will see that it works correctly.
Your javascript should be like this:
var width = $(window).width() + verticalscrollbarWidth;
Related
I'm currently using jQuery Masonry and the imagesLoaded plugin on a WordPress theme, but images are still overlapping when I load the page.
The layout displays well only when I resize the page but otherwise it still looks bad.
Here's a screenshot of the layout when the page loads:
Here's my code for now:
jQuery(function ($) {
$('.gridContainer').imagesLoaded( function() {
var doneMasonry = false;
function doPostsMasonry() {
if (doneMasonry) {
return;
}
doneMasonry = true;
var masonry = $(".post-list.row");
var images = masonry.find('img');
var loadedImages = 0;
var debounceMasonryRefresh = jQuery.debounce(function () {
masonry.data().masonry.layout();
}, 500);
function imageLoaded() {
loadedImages++;
if (images.length === loadedImages && masonry.data().masonry) {
masonry.data().masonry.layout();
}
}
images.each(function () {
$(this).on('load', imageLoaded);
debounceMasonryRefresh();
});
var items = $(".post-list.row .post-list-item");
var index = items.length - 1;
items.each(function () {
$(this).css({
width: $(this).css('max-width')
})
});
if (masonry.length) {
masonry.masonry({
itemSelector: '.post-list-item',
percentPosition: true,
columnWidth: '.' + items.eq(index).attr('data-masonry-width')
});
}
}
if (window.innerWidth >= 768) {
doPostsMasonry();
}
$(window).resize(function () {
if (window.innerWidth >= 768) {
doPostsMasonry();
}
})
})
});
I also tried using the function layoutComplete (eg. $('.div').on('layoutComplete', function {})) but it does not work either.
You can have a look at the page live here: https://www.lesvoyagesdemma.fr/bonsplans
I have 2 different functions to call based on the size of the screen. I call them in ready function like this:
$(document).ready(function() {
var $window = $(window);
var $window_width = $(window).width();
if ($window_width < 768) {
faq_mobile();
} else {
faq();
}
});
But again I want call them on window resize event since the functions are not called then. So I wrote this:
$(window).bind('resize', function(e) {
window.resizeEvt;
$(window).resize(function() {
clearTimeout(window.resizeEvt);
window.resizeEvt = setTimeout(function() {
if ($(window).width() < 768) {
faq_mobile();
} else {
faq();
}
}, 250);
});
});
But this does not work properly since the functions faq and faq_mobile have been called multiple times when I resize the window. What is the best solution for on this case?
function handler() { // separate the code and wrap it in a function
var $window_width = $(window).width();
if ($window_width < 768) {
faq_mobile();
} else {
faq();
}
}
$(handler); // on load of the document
$(window).resize(handler); // on resize of the window
If you want to keep the delay of the resize event, then change the last line above to this:
$(window).resize(function() {
window.clearTimeout(window.resizeEvt); // remove previous delay if any
window.resizeEvt = setTimeout(function() { // create a new delay
handler();
window.resizeEvt = 0;
}, 250);
});
Well.. thanks everyone for help. I googled it a bit and found a fix for it. I had to unbind the events which were added inside faq and faq_mobile functions after a resize is done. Then call those functions again. Here is the modified code: (Thanks #disstruct for your advice).
$(document).ready(function() {
var width = $(window).width();
handleView(width);
});
$(window).bind('resize', function(e) {
window.resizeEvt;
$(window).resize(function() {
clearTimeout(window.resizeEvt);
window.resizeEvt = setTimeout(function() {
// here i am unbinding the click events which were previously added inside faq and faq_mobile functions.
$('.faq-expand, .answer-close').off('click');
var width = $(window).width();
handleView(width);
}, 250);
});
});
function handleView(width) {
if (width < 768) {
faq_mobile();
} else {
faq();
}
}
Your code looks a little strange. Consider this example
var isMobileView = false;
var isDesktopView = false;
function handleView(width) {
if (width < 768 && isDesktopView) {
faq_mobile();
isMobileView = true;
isDesktopView = false;
} else if (width >= 768 && isMobileView) {
faq();
isMobileView = false;
isDesktopView = true;
}
}
$(document).ready(function() {
var width = $(window).width();
handleView(width)
});
$(window).resize(function() {
var width = $(window).width();
handleView(width)
})
I want my social sidebar make scroll only within the gray div. I have already put the sidebar within the gray div does not exceed the footer or the content above. My difficulty is to sidebar scroll accompanying the scroll without going gray div.
http://test.eae.pt/beautyacademy/angebot/
JS:
beautyAcademy.sharer = {
element: void 0,
elementToScroll: void 0,
init:function() {
this.element = $('.js-sharer-ref');
console.log(this.element.length);
if(this.element.length != 1) {
return;
}
this.build();
},
build: function() {
this.binds();
},
binds: function() {
var _this = this;
// Element that's gonna scroll
this.$elementToScroll = $('.fixed-social');
// Element that's gonna scroll height
this.elementToScrollHeight = this.$elementToScroll.outerHeight();
// Element where scroll is gonna happen Height
this.elementHeight = this.element.outerHeight();
// Element where scroll is gonna happen distance to top
this.elementOffsetTop = this.element.offset().top;
// Scroll that was done on the page
this.windowScrollTop = $(window).scrollTop();
this.elementOffsetBottom = this.elementOffsetTop + this.elementHeight - this.elementToScrollHeight;
this.$elementToScroll.css('top', (_this.elementOffsetTop+80) + "px");
$(window).on('scroll', function() {
if(this.windowScrollTop + this.elementToScrollHeight < this.elementHeight )
this.$elementToScroll.css('margin-top', this.windowScrollTop );
});
}
};
You need to try like below :
$(function(){
if ($('#container').length) {
var el = $('#container');
var stickyTop = $('#container').offset().top; // returns number
var stickyHeight = $('#container').height();
$(window).scroll(function(){ // scroll event
var limit = $('#footer').offset().top - stickyHeight - 20;
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
el.css({ position: 'fixed', top: 0 });
}
else {
el.css('position','static');
}
if (limit < windowTop) {
var diff = limit - windowTop;
el.css({top: diff});
}
});
}
});
DEMO
When you get to the limit of document, you can keep scrolling and can see an background behing the document before it bounces back (overscrolling).
How can I force the window to overscroll like this with javascript?
This is not the ultimate solution since I think the animation is imperfect and it's really only for desktops, but it can at least get you started. What I have done is increase the height of the body for animation on scroll.
$(document).on('scroll mousewheel', function (e) {
//Check for mousewheel scrolling down (or not used at all)
if (!e.originalEvent || !e.originalEvent.wheelDeltaY
|| e.originalEvent.wheelDeltaY < 0) {
if ($(window).height() + $(this).scrollTop() == $(this).height()) {
//Prevent simultaneous triggering of the animation
if (!$("body").data('bouncing')) {
$("body").height(function (_, h) { return h + 15; })
.data('bouncing', true);
$("body, html").animate({
'scrollTop': '+=15'
}, 125).animate({
'scrollTop': '-=15'
}, {duration: 125, complete: function () {
$(this).height(function (_, h) { return h - 15; })
.data('bouncing', false);
}});
}
}
}
}).on('keydown', function (e) {
//The "down" arrow; still bounces when pressed at the bottom of the page
if (e.which == '40') {
$(this).trigger('scroll');
}
});
I've been playing with this version that imitates the effect using a div, that slides in and out of view at the bottom of the page. If you have a high res monitor, you may need to increase the height of the main div to test it.
<div id="main" style="background:#f5f5f5;height:1000px"></div>
<div id="overscroll" style="background:#666666;height:120px"></div>
<script type="text/javascript">
var $doc = $(document);
$doc.ready(function () {
var $wnd = $(window),
$oscroll = $('#overscroll'),
block = false;
$wnd.bind('scroll', function () {
if (!block) {
block = true;
var scrollTop = $wnd.scrollTop(),
wndHeight = $wnd.height(),
docHeight = $doc.height();
try {
if (scrollTop + (wndHeight + 120) > docHeight) {
$oscroll.slideUp('slow');
}
else if ($oscroll.css('display') === 'none'
&& (scrollTop + (wndHeight + 120) < docHeight)) {
$oscroll.slideDown();
}
} finally {
block = false;
}
}
});
});
</script>
trying to use :visible and it's not working.
neither $('.landscape:visible') or $('.landscape').filter(':visible')
My goal is to make a variable of whatever the visible landscape picture is, grab it's height, then apply that to the portrait images for consistency.
For testing purposes , the third navigation button, #w, is set to write what that height is using variable vincent.
test site: http://brantley.dhut.ch/
JavaScript:
(function($){
$.respond = function(callback) {
var element = $('#main');
$('.z').hide();
$(document).ready(function() {
dimensions();
});
$(window).load(function() {
dimensions();
$('#load').fadeOut('fast', function() {
$('.z:first').fadeIn('slow');
$('footer').fadeIn('slow');
});
});
$(window).resize(function() {
dimensions();
});
//Adjust image size
function dimensions() {
return element.each(function() {
var i = $('.z', element);
$(i).each(function(){
var browserWidth = $(window).width();
var imgRatio = $(this).width() / $(this).height()
var availableHeight = ($(window).height() - $('header').height() - $('footer').height() - 80)
var browserRatio = browserWidth / availableHeight
var zzz = $('.z').height();
/* resize functions
$(this).height(availableHeight).width('auto');
$(this).width(browserWidth - 40).height('auto');
*/
/* image sizing logic */
if (imgRatio >= 1) {
$(this).addClass('landscape');
}
var vincent = $('.landscape').filter(':visible').height();
if (browserRatio >= imgRatio) {
if (availableHeight <= 312) {
/* Landscape */
$('body').css('background', 'yellow');
$(this).width(browserWidth - 40).height('auto');
} else {
$(this).height(availableHeight).width('auto');
$('body').css('background', 'green');
}
} else {
if (availableHeight <= 312) {
/* Portrait */
$('body').css('background', 'yellow');
$(this).height(200).width('auto');
} else {
$(this).width(browserWidth - 40).height('auto');
$('body').css('background', 'blue');
}
}
/* horizontally center content */
$(this).css('margin-left', (browserWidth - $(this).width())/2);
$('#w').text(vincent);
});
return false;
});
};
//callback();
};
})(jQuery);
Try if ($('.landscape').is(':visible')){}