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/
Related
im trying to switch a background image out based upon the window size...
https://codepen.io/anon/pen/qYdZox
function resize(){
var dbg = $('.full-screen-banner').data('dbg');
var mbg = $('.full-screen-banner').data('mbg');
if ($(window).width() < 768) { console.log('less than');
$(".full-screen-banner").css('background-image', mbg);
} else {
$(".full-screen-banner").css('background-image', dbg);
}
}
resize();
$(window).on('resize', resize);
Im using the above, the console log works fine but the inline style wont change?
You need to do something like this, where you use url(...) with the image source path
$(".full-screen-banner").css('background-image', 'url('+dbg+')');
I had seen that there is similar questions, but couldn't find proper answer for my problem.
Code:
function test() {
var scroll = parseInt($('.sidebar').css('height'));
if (window.matchMedia('(min-width: 769px)').matches) {
$(window).scroll(function() {
if ( $(window).scrollTop() > scroll ) {
$('.element').addClass('fixed');
} else {
$('.element').removeClass('fixed');
}
});
} }
window.onload = function() { test(); }
As you can see this code (adding and removing simple class when scrolling) should work for resolutions bigger than 769px (width) and it works - when test this on mobile device with resolution 1024x768 at 1024px width - works fine, BUT the problem is when you rotate the device - now the width is 768px, but "fixed" class is again added and breaks layout. You have to refresh the whole page so the code to work properly.
I can make the whole page to reload on resize but this is slow and irritating for users.
Tried to set function and on resize but it doesn't work.
$(window).resize(function() {
clearTimeout(window.resizedFinished);
window.resizedFinished = setTimeout(function(){
test();
}, 10);
});
Tried to add "else" for the if (window.matchMedia('(min-width: 769px)').matches) but it doesn't work too.
Is there a way to fix this?
The scroll-event is added onload, and not removed on the resize-event. So the event-function is still being triggered. How about:
$(window).on('scroll resize', function() { // On both scroll and resize, call
if (
window.matchMedia('(min-width: 769px)').matches
&& $(window).scrollTop() > scroll
) {
$('.element').addClass('fixed');
} else {
$('.element').removeClass('fixed');
}
});
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
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;
}
});
I have a design which uses side-by-side divs that need to be height matched. This works perfectly well on page load, but on window resize, things tend to get all out of whack. The elements that are getting their heights changed are becoming larger or smaller than the heights of their target elements - sometimes by very large margins.
var specials = $('#specials');
var specialsPicture = $('#specials_contain .picture');
This is a function that gets called on page load and on the window resize event:
function matchAll() {
match(specialsPicture, specials, {min: 768, max: null});
}
Here's the actual matching function:
function match(elem, target, range) {
// if no max
if (range.max == null) {
// if in range
if (window.innerWidth >= range.min) {
// resize element to target height
elem.outerHeight( target.outerHeight() );
}
// if there is a max
} else {
// if in range
if (window.innerWidth >= range.min && window.innerWidth <= range.max) {
// resize
elem.outerHeight( target.outerHeight() );
}
}
}
Here is a screenshot of what happens:
It seems like such a simple piece of code, but I can't seem to figure out what might be happening. Thanks for the help.