I have a script that is creating a grid, and the grid elements are "re-positioned" every time the viewport width is changed. I don't have access to the script, nor did I write it. I think it's a Masonry grid.
I'm dynamically changing the content of the grid, so I need to somehow "refresh" (re-calculate) the grid without refreshing the page. On mobile I did this by changing the "initial-scale" meta tag (then resetting it) to force the grid to update. However the viewport tag is ignored on desktop, so I don't know how to actually make the browser think that page dimensions are changed and force a refresh on the grid.
Any ideas are appreciated, thanks.
Depending on how the script is setup you may be able to simply trigger the resize event causing it to recalculate based on the current size. If the script is actually tracking the size and checking for changes then you will need to find the best way to force the script to perform it's grid recalculation, which means examining the script. It might be as simple as changing the value of the variable where the script is storing the previously recorded viewport width right before you trigger the resize event.
FYI: If the script is loading on your page then you do have access to the script.
window.addEventListener("resize", function(){
// Resize event listener from masonry script
console.log("Masonry grid resized for width "+window.innerWidth);
});
// If using jQuery
$(window).trigger("resize");
// Plain JS version
window.dispatchEvent(new Event('resize'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If the masonry script is good it may have an API feature to do what you need, however I think you'd explore that already.
Alternatively...
Option #1: Modify a parent container
See if you can force a refresh by simply temporarily modifying a parent container. For example, increase container width by 1 pixel for an instant, and return back to the original width.
Option #2: Find the existing listener; find the functions
The existing script probably has a listener + actions for when the viewport changes size (as you describe happening). Inspect the script and find that listener, and see what it's running inside. It'll have some function(s) to calculate and render the grid, and you'd want to call those same functions in your own data-update function.
To find that listener, do a find for "resize", see what comes up.
Here's how a vanilla JS resize listener may look like:
var screenWidth = document.documentElement.clientWidth;
resizeRefresh(screenWidth);
function resizeRefresh(width) {
window.addEventListener("resize", function(){
newWidth = document.documentElement.clientWidth;
if (newWidth != width) {
width = newWidth;
// do stuff
}
}, true);
}
Related
I use var targetHeight = jQuery('.acc-content-inner').eq(currIndex).outerHeight(); to take hight of an element. But if the div.acc-content-inner has a table in it, it doesn't add the height from the tabele to the targetHeight
The height may not be calculated right not because of the table, but because of the images. If you run your code on document.ready. My guess is that jQuery calculates it before the images get downloaded. A similar effect can be seen here: http://jsfiddle.net/z2eounmt/1/ (notice it disappears on page refreshing if cache is not cleared). The first time the output is 40, so the height of the image is not included.
To solve this issue, either use imagesLoaded, or change your function to be run on window.load. or change the way your accordion works.
I have a working product slider that now I'm trying to reduce width for smaller viewport
which isn't going so well.
The code starts with adding up the width of each product item when document is loaded
and slide happens when buttons are clicked.
My problem is that when viewport gets smaller, every product item will become narrower (handled with CSS media query) and now with script, it needs to re-calculate the new width specified in the media query when browser window gets resized.
I tried to refactor into a function or a variable and pass it in resize()
but no luck seeing the total with calculated with resize event.
I should separate event and function but then I face some variable scope issue.
Please see My JSFiddle Demo
I understand this is probably no use for normal users but I want to give it a try.
You can use match media
if (window.matchMedia("(max-width: 480px)").matches) {
//code for window less than 480px
}
else
{
}
Match Media Documentation
I have this very simple function to resize a div according to an element on the page.
Because of the static navigation bar on top of the page, I need to control the empty space underneath it, for the first div with content to appear on the right place (below the navigation bar), specially because when the screen is smaller, the navigation bar gets larger (height is bigger).
My question is: why does it not always work? It works fine most of the times, but sometimes I need to refresh the page for it to work.
Here is the dummy HTML:
<div id="menu-fixed-top"></div>
<div id="empty-space"></div>
<div id="content"></div>
where the #empty-space is the div I want to control the height.
I used the document.ready and the window.resize to control it.
The JQuery function is:
$(document).ready(function() {
var height = $("#menu-fixed-top").innerHeight();
$("#empty-space").height( height );
$(window).resize(function() {
$("#empty-space").height( height );
});
});
Is there any way to get it working 100% of the time? Or the only way is to be sure is to use media queries?
Thanks
document.ready will trigger when the whole DOM has loaded and is ready for javascript to execute. This is to avoid any problems with javascript being ready to go but the whole DOM hasn't finished loading.
http://learn.jquery.com/using-jquery-core/document-ready/
I would first check to see that the DOM has finished loading without document.ready being triggered before drawing the conclusion that jquery isn't kicking it off.
You may also want to look at window.load if you're wanting to calculate heights and such as the DOM != the fully rendered page
I'm using the following code:
$("#galleries").load("letters/index.php");
$(function(){
$('#galleries').hide().fadeIn(1500);
});
everything works fine. My problem is, I got about 8 scripts like that, and whenever I switch the content of the div, it doesn't do that smoothly, first of all, it clears the DIV and let me see that for about 0.7 seconds, after that, it loads ALL of the content within a second, and it's really disturbing my eye.
I thought about a solution, that I will get the height of the page I wanna load, and then set the DIV height to that height, and then load the info. Will it work? because, the LOAD function removes everything from the div, will it remove the height property as well?
generally, this is what im trying to achieve:
//GET TARGET'S HEIGHT
//SET #galleries TO THAT HEIGHT
$("#galleries").load("letters/index.php");
$(function(){
$('#galleries').hide().fadeIn(1500);
});
I don't know how to get the target's height and set it. But anyways, will it work? or maybe someone has another solution for me?
Thanks in advance!
You aren't using the complete callback of load() which allows you to run code after content is loaded.
Try something like this:
$(function(){
/* hide first, then load*/
$('#galleries').hide().load("letters/index.php", function(){
/* new content now exists*/
$(this).slideDown()/* or fadeIn() or any other effect*/
});
});
SlideDown is not dependent on overall height so will smoothly move content below it down
I am currently working on an existing site that uses iframes(sigh!), these are pretty painful to work with and I'm having problems getting the height of the iframe to scale with the height of the HTML content.
I've tried a few different script snippets that floats around on the interwebs, but none of them have worked for me. I really want to use jQuery to do this, but that's not an option because IT wants to keep the size of the pageload down.
Does anyone know of good way to do this, in a way that works on both FF and IE 6+?
You should just be able to simply set the height and the width parameters - since these are both valid attributes of the iframe dom element.
function resize(width, height) {
var frame = document.getElementById('my_iframe');
frame.width = width;
frame.height = height;
}
Of course, this only applies if you are attempting to resize the iframe from it's parent element (the document with the actual iframe tag). If you are trying to resize the iframe from within the iframe (the document the iframe loads) you will need to call a public function of the parent element to perform the resize.
In iframe:
parent.resize(600, 800);