Develop Reference

Height change closes sidebar

I have a sidebar while displaying on mobile and entering the search input field, it closes once mobile keyboard is open and also if the height of the page is changed in browser inspection as shown in the following images:
this is the only code contains innerHeight
function fitContent() {
var top = $(window).scrollTop() < 340 ? 270 - $(window).scrollTop() : 0;
rightSide.css("top", top + "px");
content.css("min-height", window.innerHeight - 130 + "px");
var window_Width = window.innerWidth;
if (window_Width < 1366) {
closeRightSide();
} else {
openRightSide();
}
}
and fitContent functions runs under window.resize and document.ready. Also that sidebar has open and close functions which toggle between two classes and changes the boolean value of an attribute.
function openRightSide() {
body.removeClass("shrink");
body.addClass("expand");
rightSide.attr("data-expand", "true");
}
I noticed that data-expand attribute turns to false when the height is changed. and there is no additional code or css related to it.
The Question:
How can I prevent height changes from closing the sidebar? What piece of code can I use?

JS CSS line clamp reset (TextOverflowClamp.js)

I'm using TextOverflowClamp.js to try and line clamp some text. It works while decreasing window width, but does not reset after increasing window width. Can someone help with resetting the line clamp after the clamp is triggered and window width becomes greater than set conditional size?
Codepen
All the code is in the Codepen, but my resize and load functions are here:
var winWidth;
$(window).resize(function () {
winWidth = $(window).width();
if (winWidth <= 991) {
loadClamp();
}
else {
// reset line clamp code here
}
}).resize();
function loadClamp() {
$(window).on('resize', function() {
// TextOverflowClamp.js
clamp(document.getElementById('js-toclamp1'), 1);
});
}

I couldn't seem to find a proper site for TextOverflowClamp.js. However, reading through the code itself, it seems passing 0 as the second parameter should remove the truncation (It is unclear if this is intentional but it seems to work). However, if there were any inner elements initially, those are lost and were not retained. In the case of your example, it is just text, so it should be fine:
var winWidth;
$(window).resize(function () {
winWidth = $(window).width();
if (winWidth <= 991) {
loadClamp(1);
}
else {
// back to normal
loadClamp(0);
}
}).resize();
function loadClamp(lines) {
clamp(document.getElementById('js-toclamp1'), lines);
}
Some additional notes on your code. You were adding an additional resize handler every time you called loadClamp and there was really no reason for this. I removed that.
Additionally, it is important that you place the TextOverflowClamp code before your own code.
http://jsfiddle.net/w9nkad0u/

jQuery function on window events (load and resize)

I'm not sure how to use the order of the window events load and resize on jQuery to make it work when resizing. The first function is used to get the total width except the scrollbar width, because the CSS is using the device width, but the JS is using the document width.
The second function adds a style when the total screen width is between 768px and 1024px, and it should work when I load the page at any screen, after resizing, etc. I'm doing a lot of tests and I think the problem is about the window events order.
For being more specific about the problems, it doesn't remove the style when I load the page at 900px and I expand it to > 1024px! Or by the contrary, it doesn't add the style when I load the page at 1300px and I shorten the width to 900px.
I think it's 'cause of the load and resize events order, but I'm not totally sure. Or maybe I'm not doing the correct declaration of the variable into the resize.
The code:
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
$(document).ready(function(){
var vpwidth=$(window).width();
$(window).on('resize', function(){
var changeWidth = (($('.main-content .wrap').width() * 96.3)/100) - 312;
if(vpwidth >= 768 && vpwidth <= 1024) {
$('.contentleft, .contentright').css('width', changeWidth + 'px');
} else {
$('.contentleft, .contentright').removeAttr('style');
}
}).resize();
});

I believe the issue is that you're not re-calculating the vpwidth on resize, So the value you got when the page was loaded will be used every time window is resized.
try
$(document).ready(function(){
$(window).on('resize', function(){
var vpwidth=$(window).width(); // get the new value after resize
var changeWidth = (($('.main-content .wrap').width() * 96.3)/100) - 312;
if(vpwidth >= 768 && vpwidth <= 1024) {
$('.contentleft, .contentright').css('width', changeWidth + 'px');
} else {
$('.contentleft, .contentright').removeAttr('style');
}
}).resize();
});

The issue is because you are not recalculating the width (vpwidth) on resize function.
It is initialized and set on page load itself and hence doesn't change when the window is resized causing the style to not be added or removed.
You need to re-assign the value to the variable from within the resize function.
$(window).on('resize', function(){
var vpwidth=$(window).width();
}
Demo Fiddle

Jquery .height() not working until resize of window

I'm using this code to resize a div on my page:
function sizeContent() {
var newHeight = ($("html").height() - $(".header").height() -3) + "px";
$(".content").height(newHeight);
}
I am triggering this using:
$(window).resize(sizeContent());
But I also call it inside
$(document).ready(sizeContent());
to set all the heights properly.
If i resize the browser window by dragging at its borders it works great.
But the initial call does not seem to have any effect. Putting an alert inside the sizeContent function I can see that it is being called at page ready, and is setting the right height, but nothing is changed on the page.
It's as if the browser does not recognize that it needs to redraw anything unless the window itself is changed.
Solved:
In the end it was not the javascript that was the problem, using div's with display:table and display:table-row was causing it. Removed these from the css and everything worked.

// If you put your code at the bottom of the page to avoid needing`$(document).ready`, it gets even simpler:
$(window).on('resize', function () {
var newheight = ($(window).height() - $('.header').height() - 3);
$(".content").css("height", newheight);
}).trigger('resize');
// Another way to do that same thing
$(document).ready(sizeContent);
$(window).on('resize', sizeContent);
function sizeContent() {
var newheight = ($(window).height() - $('.header').height() - 3);
$(".content").css("height", newheight);
}
// Another technique is to`.trigger()`one event inside the other:
$(window).on('resize', function () {
var newheight = ($(window).height() - $('.header').height() - 3);
$(".content").css("height", newheight);
});
$(document).ready(function () {
$(window).trigger('resize');
});

Replace
$(".content").css({height:newHeight}) //replace this
with
(".content").height(newHeight);

Use below code:
function sizeContent() {
var newHeight = ($(window).height() - $(".header").css('height')-3) ;
$(".content").css('height',newHeight);
}

jQuery width change detection

Now Solved, thanks
I have see a lot of near answers to my problem with resize(), here is my code:
'larger()' is a layout function that I want to call when screen width regardless of device orientation is >= 501, 'smaller()' is a function that i want to call when the screen width is < 501.
My problem I have is that I don't want these functions to be called when the window.height changes. Note that in my page I am using an accordion in mobile view and if I expand an accordion panel, it adds height to the page, even though the browser window hasn't been re-sized. jQuery sees this as a window.resize.
$(window).resize(function(e) {
var winWidth = $(window).width();
if (winWidth >= 501){
larger();
}
if (winWidth < 501){
smaller();
}
});
any answers appreciated, and let me know if I need to clarify anything.
I am using jquery-1.11.0.min.js with jquery-ui-1.10.3.custom.min.js
Thanks

How about storing a reference to the previous width and if the width has changed on resize then call your functions - otherwise skip it. Like So:
// If you don't want it to change the first time
// then set this value on document load to get initial window width
var prevWinWidth = 0;
$(window).resize(function(e) {
var winWidth = $(window).width();
if(winWidth != prevWinWidth) {
if (winWidth >= 501){
larger();
}
if (winWidth < 501){
smaller();
}
prevWinWidth = winWidth;
}
});

Create a global variable that keeps track of the last known width of the window. Only if the width is changing, evaluate the width to call the appropriate function.
var lastWidth = 0;
$(window).resize(function (e) {
var winWidth = $(window).width();
if (lastWidth !== winWidth) {
winWidth >= 501 ? larger() : smaller();
lastWidth = winWidth;
}
});