Develop Reference

How to get this script trigger before the page loads

I want this script to be executed before the page is shown to the user so that the user does not see the page to be adjusted in real time.
Can anyone help?
<script>
$(document).ready(function () {
onResize();
$(window).resize(function () {
onResize();
});
});
function onResize() {
var w = $(window).width();
var ratio = 1;
if (w < 1920) {
ratio = (w / 1920);
}
if (isTablet()) {
ratio = ratio * 1.25;
}
if (isMobile()) {
ratio = ratio * 3;
}
$('body').css('font-size', ratio + 'px');
}
function isTablet() {
if ($('.tablet:visible').length > 0) {
return true;
} else {
return false;
}
}
function isMobile() {
if ($('.mobile:visible').length > 0) {
return true;
} else {
return false;
}
}
</script>

what you're trying to do with Javascript could be easily done with css only and the usage of media queries. I would suggest you to learn about them instead of using "hacks" to do something that is not the regular behaviour of a web page

Use CSS to hide page content, and then execute this code, and then display page content.

Adjust the height of a column dynamically

This is the page I am working on http://bigislandnaturetours.com/tour/
The issue is I am trying to extend the height of the right column to automatically adjust the height of the left column. I use the following JS below which I have tested and works on other sites but not on this one. What might be wrong?
function doResize() {
if ($(window).width() > 981) {
setTimeout(function() {
$(".leftpane").css("height", "auto");
$(".midpanel").css("height", "auto");
var heightLeft = $(".rightpane").height();
var heightMiddle = $(".midpanel").height();
var heightRight = $(".leftpane").height();
if (heightRight > heightMiddle) {
$('.midpanel').css('min-height', heightRight + 2)
} else {
$('.leftpane').css('min-height', heightMiddle + 2)
}
heightMiddle = $(".midpanel").height();
heightRight = $(".leftpane").height();
if (heightLeft >= heightRight) {
$(".leftpane").css("height", heightLeft - 10);
$(".midpanel").css("height", heightLeft - 10);
}
}, 1000);
}
}
$(document).ready(function() {
doResize();
});
$(window).resize(function() {
doResize();
if ($(window).width() < 561) {
$(".leftpane").css("min-height", "auto");
$(".midpanel").css("min-height", "auto");
}
$('.main-nav li').unbind("click");
if ($('.rightpane').css('display') == 'none') {
$('.main-nav li').bind("click", function() {
$(this).addClass('im-curent');
$("ul", this).toggle(100);
});
}
});

The simplest answer is to use flex-box CSS (HTML5 / CSS3) or, for older browsers, a table used in 'presentation' mode.
Both should automatically keep column height in sync.

How To Disable This JS Function In Responsive Designs

I am using a script in my blog http://www.helpitx.com which makes a widget floating sticky. Currently I am using this script for navigation menu but it destroys layout of responsive design specially for mobile devices which have screen height less than 768px because whole menu isn't displayed there.
Here is the script that I am using.
<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Syed Faizan Ali
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
center: false
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
};
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
if (o.center)
var centerElement = "margin-left:auto;margin-right:auto;";
stickyId = stickyElement.attr('id');
stickyElement
.wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
.css('width', stickyElement.width());
var elementHeight = stickyElement.outerHeight(),
stickyWrapper = stickyElement.parent();
stickyWrapper
.css('width', stickyElement.outerWidth())
.css('height', elementHeight)
.css('clear', stickyElement.css('clear'));
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
elementHeight: elementHeight,
className: o.className
});
});
};
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#mblfloater").sticky({topSpacing:0});
});
</script>
I have enclosed my navigation menu in tag. The script is working fine but I want to disable it in mobile devices which have screen width less than 768. How could it be done?

<script type='text/javascript'>
$(document).ready(function(){
if ($(window).width() >= 768) {
$("#mblfloater").sticky({topSpacing:0});
}
});
</script>
Only run the script if the window's width is greater than or equal to (i.e. not less than) 768.

Hide the menu using a CSS media query.
For example:
<style>
#media (max-width: 600px) {
#mblfloater {
display: none;
}
}
</style>

As you are using jQuery:
if($(window).outerWidth() < 768){
//disable your code here
}

Menu-bar in responsive design disappears

I am working on a responsive design template where the horizontal menu-bar will convert into an icon to save space. Basically I have created 3 media queries, i.e. > 800px, betweeen 500 to 800px and less than 500px.
.
It is working fine, but when the windowWidth of the screen reaches the range of 484px to 500px, the menu-bar just disappears! You can go to the link to view the test page : http://www.acetraining.com.sg/responsive1/
// JavaScript Document
var windowSize = "";
var windowWidth = 0;
var actualSize = 0;
$(document).ready(function (e) {
checkBrowserSize();
setInterval("checkBrowserSize()", 100);
$("a.mobile_menu").on("click", function () {
var navHeight = $("nav").height();//finding current height of navigation
var newNavHeight = $("nav div").height();
//mobile screen
if (navHeight == 0) {
$("nav").animate({"height": newNavHeight + "px"}, 500);
$(this).addClass("selected");
}
//retract back to 0
else {
$("nav").animate({"height": "0px"}, 500);
$(this).removeClass("selected");
}
});
});
function checkBrowserSize() {
windowWidth = window.outerWidth;
var contentWidth = $("body").width();
var sizeDiff = windowWidth - contentWidth;//size of scrollbar
actualSize = windowWidth - sizeDiff;
if (actualSize > 800) {
newWindowSize = "large";
}
if (actualSize <= 800 && actualSize > 500) {
newWindowSize = "medium";
}
if (actualSize <= 500) {
newWindowSize = "small";
}
//display out
$("h1").html(windowWidth + "(" + contentWidth + "(contentWidth) + " + sizeDiff + "(sizeDiff)) is " + newWindowSize);
if (windowSize != newWindowSize) {
windowSize = newWindowSize;
//invoke changeNav
changeNav();
}
else {
//append the word no change
$("h1").append("--no change--");
}
}//end of checkBrowserSize()
function changeNav() {
if (windowSize == "large") {
$("nav").css("height", "auto");
}
else if (windowSize == "medium") {
$("nav").css("height", "auto");
}
else if (windowSize == "small") {
$("nav").css("height", "0px");
$("a.mobile_menu").removeClass("selected");//load in the first image of the mobile menu when you resize to small
}
}//end of changeNav()
I suspect the problem lies in my javascript file. I have attached the codes for your perusal:
I am hoping there is a way to show the menus between these ranges.

The media query in screen_layout_large.css css file is hiding the mobile menu. Either edit the media query to give a min-width or show the mobile menu as follows in changeNav function.
function changeNav() {
if (windowSize == "large") {
$("nav").css("height", "auto");
}
else if (windowSize == "medium") {
$("nav").css("height", "auto");
}
else if (windowSize == "small") {
$("nav").css("height", "0px");
$("a.mobile_menu").show().removeClass("selected");//load in the first image of the mobile menu when you resize to small
}
}

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

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;