JS / Jquery: resize window without actually resizing
So, I have a very specific problem that presented itself recently (right before our scheduled launch day tomorrow) and I'm not really sure how to solve it. I created our HTML template site with my modest external skills and we are very happy with it. However, I am unable to resolve this issue.
Problem: I have a filter system that allows the user to filter the articles that are presented on a page. The user can even fill in this filter on the home page, go to the article page, and apply the filter. However, if the filter is then expanded (less stringent) and new articles appear, the images are not displayed. Found this to be the case because it should be followed by the flexslider that is re-initialized when the window is loaded (e.g. when the window is resized). The function that controls the flexslider initialization is in an external js file and I'm not sure if I can call it from my own custom.js file, so I think to just call the resize / reload function to active it.
Question: Can I trigger the window's resize function (or something that activates flexslider) without interfering with the user experience (more specifically, without ACTUALLY resizing / reloading the window)? I ran this on filter change.
I know this is a very specific question, but hopefully someone can help me.
Be careful!
ps it would be perfect if I could run the actual function that loads flexslider but it's in an external js file.
EDIT: Brief information. If I go straight to the article page, it does not have an active filter and thus shows all articles, if I start flipping through the filter, everything is fine. However, it is only if I come from the home page with the filter installed that problems arise. Then you are taken to the article page, where only articles that are within the bounds are shown, and when the filter is removed, it has problems loading images of new articles. As if it didn't load them because they weren't open when the window was loaded the first time.
source to share
You can trigger a resize event by creating a new event and passing it to the command dispatchEvent
on window
. Here's a great guide here . You want the event type to resize
be as it is listening.
window.dispatchEvent(new Event('resize'))
This will work for events added via jQuery, as well as events added via addEventListener
.
source to share
I was able to work it out in the end by delaying a function that dumps the filter values to my inputs, so it loads all the images first before applying the filter. This is happening at such a speed that it is barely noticeable.
Also, I tried to initiate the resize function of the window, it did work without resizing, but unfortunately the images were not loading properly (overlapping, etc.).
Anyway, it was resolved. Thanks for the whole input!
source to share