We Keep Coding

Run function on load and resize & get height of class

I have created this function but there are two things that are not working and, after a while trying to find why, I can't find the reason.
First, it should take the height from .bar-info, but is not. It gets -10, instead of 100px
Second, when the page loads (and on resize), it should run this function and get the height, but it doesn't. It works on resize, but not on ready
onResize = function() {
if($(window).width() < 1000) {
//Set height based in number of bars
$('.vert .bars').each(function(){
var length = $(this).find(".bar-info").length;
var info = $(this).find(".bar-info").height(); // 1. Not taking the correct height
var height = (info * length) + 1270 + "px";
$(this).parent().css({"height":height}); // 2. Wrong height just on load
});
} else {
$('.vert .bars').each(function(){
$(this).parent().css({"height":"1200px"});
});
}
}
$(document).ready(onResize); // Why it doesn't work?
$(window).resize(onResize); // This works
HTML:
<div class="container vertical flat vert">
<div class="bars">
<div class="bar-general">
<div class="bar-info">Content</div>
</div>
</div>
</div>

JavaScript: Set scroll position variable according to media queries

I am working on a fade-in/out-effect-on-scroll on a web project.
On my js I have to set a certain value for the scroll position i. e. the offset to make the effect kick in.
The problem:
The offset value cannot be applied to all kinds of devices due to
different heights.
Questions (hierarchic):
How to make the static values dynamic and variable to the device
height/media queries?
How can you generally slim down the code?
How can I trigger an additional slide-slightly-from-right/left to the
effect?
Here is the code:
// ---### FOUNDATION FRAMEWORK ###---
$(document).foundation()
// ---### FADE FX ###---
// ## SECTION-01: fade out on scroll ##
$(window).scroll(function(){
// fade out content a
$(".j-fadeOut").css("opacity", 1 - $(window).scrollTop() / 470);// 470 should be variable
// ## SECTION-02: fade in/out on scroll bottom ##
var offset = $('.j-fadeOut-2').offset().top;
console.log('offset: '+offset);
console.log('window: '+$(window).scrollTop())
if($(window).scrollTop() > offset)
{
// fade out top part of content b
$(".j-fadeOut-2").css("opacity", 1-($(window).scrollTop() - offset)/520);// 520 should be variable
// fade in bottom part of content c
$(".j-fadeIn").css("opacity", 0 + ($(window).scrollTop() - offset)/ 1100);// 1100 should be variable
}
});

See here for JavaScript Media Queries
You can use window.matchMedia to perform media queries in JavaScript. Example:
var mediaQuery = window.matchMedia( "(min-width: 800px)" );
The result will be stored as a boolean in mediaQuery.matches, i.e.
if (mediaQuery.matches) {
// window width is at least 800px
} else {
// window width is less than 800px
}
You can use multiple of these to suit your different device widths. Using the standard Bootstrap buckets:
var sizes = ['1200px', '992px', '768px', '480px']; // standard Bootstrap breakpoints
var fadeOutAs = [470, 500, 530, 560]; // this corresponds to your content a fadeout variable. Modify as required per screen size
var fadeOutBs = [520, 530, 540, 550]; // content B fadeout
var fadeOutCs = [1100, 1200, 1300, 1400]; // content C fadeout
var fadeOutA = 0;
var fadeOutB = 0;
var fadeOutC = 0;
for (i = 0; i < sizes.length; i++) {
var mediaQuery = window.matchMedia( "(min-width: " + sizes[i] + ")" );
if (mediaQuery.matches) {
fadeOutA = fadeOutAs[i];
fadeOutB = fadeOutBs[i];
fadeOutC = fadeOutCs[i];
}
}
Hope this helps

How to calculate jqGrid header height

jqgrid header
may contain extra toolbar defined using
toolbar: [true, "top"],
contains navigation toolbar defined using
$grid.jqGrid('navButtonAdd', '#grid_toppager', {...
and contains search toolbar.
To resize grid to end of screen I'm looking for a way to calculate this header height
in window resize.
I tried code below but this sets grid height too big.
How to calculate grid header height ?
$(window).resize(function () {
var extraToolbarHeight = $('#t_' + $.jgrid.jqID($grid[0].id)).outerHeight(true),
caption_height=$("div#gview_"+$grid[0].id+" > div.ui-jqgrid-hdiv").outerHeight(true);
$('#grid1container').height($(window).height() - 18);
$grid.jqGrid('setGridHeight', $('#grid1container').height()-caption_height
-extraToolbarHeight );
});
<div id="grid1container" style="width: 100%; height: 100%">
<table id="grid">
</table>
</div>

Here is a function I wrote to resize my jqGrids to fit their container element. See if it fits your needs.
// resize a grid to fill the space of its container
// this will throw an error if you pass in a non-existant
// Parameters:
// grid - a reference to your grid
// container - a reference to your container, or the selector
// Usage:
// resizeGrid($('#gridXYZ'), '#largeGridDiv')
function resizeGrid(grid, container) {
if (typeof container == 'string') {
container = $(container);
}
if (container.length > 0) {
var headerHeight = $($('.ui-jqgrid-hdiv')[0]).height();
var newHeight = container.height() - headerHeight;
grid.jqGrid().setGridHeight(newHeight);
grid.jqGrid().setGridWidth(container.width());
} else {
throw ('Non-existant container passed to resizeGrid()');
}
}
// some other selectors that may help, again grid
var gviewSelector = '#gview_' + $('#gridXYZ').attr('id');
var headerSelector = gviewSelector + ' .ui-jqgrid-hdiv';
var bodySelector = gviewSelector + ' .ui-jqgrid-bdiv';

How can I change a width parameter in jQuery given as a pixels integer into a percentage?

I'm working with a custom scrolling div jQuery plugin. I want the div to fill 100% of the width of its parent to change size depending on the browser window size.
The script takes a given width parameter, and uses it throughout the script. The customizable parameters of the script seem to only allow me to specify the width in pixels, as an integer:
$.fn.hoverscroll.params = {
vertical: false, // Display the list vertically or not
width: 1280, // Width of the list
height: 230, // Height of the list
arrows: true, // Display arrows to the left and top or the top and bottom
arrowsOpacity: 0.4, // Maximum opacity of the arrows if fixedArrows
fixedArrows: false, // Fix the displayed arrows to the side of the list
rtl: false, // Set display mode to "Right to Left"
debug: false // Display some debugging information in firebug console
};
I tried quoting the percentage, '100%', but that didn't work. Is there a way to use a percentage here?
If not, is there a way to use a script like the one below, which determines the width of the window, make the script output the width in pixels, and use that integer as the width parameter in the jQuery script?
<script type="text/javascript">
function alertSize() {
var myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
} else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if( document.body && ( document.body.clientWidth ) ) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
//window.alert( myWidth );
}
</script>
For reference, here is the full script of the plugin that I'm using:
http://rascarlito.free.fr/hoverscroll/js/hoverscroll/jquery.hoverscroll.js

If you want the width of the hoverscroll region to be some percentage of a container on ready, you can always use jQuery. Wrap your start-up routine in a ready() expression:
$(document).ready(function() {
var w = $(window).width();
var p = 0.95 /* Your percentage */
$.fn.hoverscroll.params = {
width: w * p, // Width of the list
...
};
// Start your hoverscroll like normal;
});
That ... is just there to indicate "the other stuff goes here." I didn't want to fill the answer up with repetitious code.
Although in normal practice, you would never modify the defaults in place, but pass them as arguments:
$(document).ready(function() {
var w = $(window).width();
var p = 0.95 /* Your percentage */
$('#mylist').hoverscroll({
width: w * p // Width of the list
});
});
Note that I'm only passing in the width; everything else uses the defaults. You only have to set the ones that differ from the defaults-- in this example, I've only set the width.

Equal height for divs

I have a site. I want to make 3 vertical divs with equal height. For this purposes I change the height of last block in each column/div.
For example, the naming of 3 columns are:
.leftCenter
.rightCenter
.right
Now I wrote a code which set the equal height for .leftCenter and .rightCenter:
var left = $('.leftCenter').height();
var center = $('.rightCenter').height();
var news = $('#newItemsList').height();
if (center < left)
$('.rightCenter').height(center + (left-center));
else if (center > left)
$('#newItemsList').height(news + (center-left));
news is the latest subblock in left column (there are 3 images in it). So, if central div is bigger than left div, I change the height of news to make them equal. This code works in Firefox, but doesn't work in Chrome. That's the first question. And the last is: how to make equal 3 divs (including right one).

I needed to make elements equal in height and width so I made the following function that allows you to define a height, or width, or really whatever at it. refType would be used if you sent a min-height and needed it to match the height of the tallest element.
elemsEqual = function (options) {
var defaults = {
'type' : 'height',
'refType' : '',
'elements' : [],
'maxLen' : 450
},
settings = $.extend({}, defaults, options),
max = 0;
$(settings.elements.join(",")).each(function () {
max = Math.max( max, parseInt( $(this).css(settings.type) ) );
if(settings.refType.length) max = Math.max( max, parseInt( $(this).css(settings.refType) ) );
});
max = ((max < settings.maxLen) ? max : settings.maxLen);
$(settings.elements.join(",")).css(settings.type, max + "px");
};
elemsEqual({elements : ['#selector1','#selector2', ... '#selectorN'], type : 'height'});

Well I have this so far:
//Get the height of the right column since it starts at a different Y position than the other two
var right=$('.right').outerHeight(1)-$('.left').children('header').outerHeight(1)-$('.left .innav').outerHeight(1);
//Get the max of the 3
var height_max=Math.max($('.leftCenter').outerHeight(1),$('.rightCenter').outerHeight(), right);
//Apply the max to all 3
$('.rightCenter').height(height_max-3); //-3 to accommodate for padding/margin
$('.right').height(height_max);
$('.leftCenter').height(height_max);
The only problem is that it does not make #newItemsList as tall as the parent, .leftCenter. It also assumes that the right div will be largest, so I don't know if it will still work if it isn't the biggest of the 3.