JavaScript is being triggered before its time, *only on Chrome & IE

JavaScript is being triggered before its time, *only on Chrome & IE

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