so I have a set of images that on a big screen are not using the image slider. And when the screen goes below a certain width, the image slider is initiated.
At the moment, when I resize the window manually and play around dragging the size around it works well.
But, if I resize the window to a small size and hit F5 then what should happen is that the page automatically recognises that it needs to initiate the image slider. What does happen is that the images load like this below and not an interactive image slider.
So the problem is that if the page is already under 939 then the bxSlider functionality doesn't work. It will put the images into a bullet-pointed list as below without actually adding the interactivity. It will also not deactivate the bxSlider when the screen is resized to above 939.
It sounds like you're using the resize event to trigger your code. The reason that doesn't work when you refresh at a small size is that after the page loads, you don't resize it again, so the resize event doesn't fire.
Resizing only triggers when you manually grow/shrink the browser, without refreshing the page.
To fix it, just trigger your current function on first page load (I can't see the code here, but presumably it checks the current browser dimensions and updates the page accordingly? If so, entirely safe and sensible to run at the start of page load).
try changing this
$(window).resize(checkWidth);
to
$window.on('resize', function() {
checkWidth();
});
Related
On my website, I have to use lazy load effect for images to optimize my website's performance <img src="source_img" alt="img_alt" loading="lazy"/>. But I have a problem if I have a button with a function go to a section inside this page. I use element_scrolled_into.scrollIntoView({ behavior: 'smooth' }). As naturally, when clicking this button, the page will scroll to the section added event. But the position scroll works wrongly because of the lazy loading image.
Demo: Demo codesandbox link
Screenshot: Deme screenshot
First, it works wrongly, because at that time the image isn't loaded. After that, it works naturally, of course, the image is loaded, so having no bug here.
First, it works wrongly, because at that time the image isn't loaded. After that, it works naturally, of course, the image is loaded, so having no bug here.
Having any solutions to fix this bug?
If I understand your problem correctly, it‘s about that the image wouldn‘t take the space and page jumps through image loading. It‘s important for rendering and to prevent this restyling to always provide width and height attributes for these assets like images.
I am using Adobe Edge Animate to do some CSS3 animations, and using a plugin that converts the SVG images to tags so that the SVG elements are accessible via Javascript. The problem is, when one of the parent DIV containers is hidden and later re-shown, the embedded SVG image is reloaded losing any changes that have been made to it, such as fill colors of shapes, etc.
This also causes some stuttering in the animation when a new image is loaded, as it takes a small amount of time to reload the image.
This problem is not present in Firefox or IE. Is there any way to tell chrome to not re-load embedded images when hidden and shown?
Here is a link to the page in question: Link
If you press the enter key, it triggers part of the animation. You can see after the rotation where it switches out the image and flashes. If you use the built in function via browser console called changeBladeColor() you can see how it resets any changed attributes. This function changes the fill colors of the shapes in the SVG.
Here is an example usage for testing:
changeBladeColor(1, '#ff0000');
It seems the only solution is to position the elements off the page. I had to re-do a lot of my animation, so keep this in mind when doing any projects where you need to display and hide objects (especially ones that may not appear to be doing so).
I am using a slideshow plugin that centres the images in the browser. I need to disable this function so that the images in the slideshow stay fixed and do not move as the browser size changes. I have looked through the js file and the css but cannot figure out how to fix the image.
Please view this page that I am working on to see my problem: http://georgewoolfe.com/new-website/yogurt-line.html
Have a look at this in the script
// Adjust image when browser is resized
$(window).resize(function(){
base.resizeNow();
});
Window -> IFRAME -> DIV
I have a window, that has an iframe, that has a div. The div has the ability to scroll the content within but not having full control of the parent window, I have to decide how large the div needs to be from within the iframe.
To do this, I have the following code JavaScript (please pardon the mix of jQuery/straight JavaScript):
$(window.parent).resize(function () {
var frameHeight = parent.document.getElementById('IFRAME_banner').offsetHeight - 52;
$("div.ajax__tab_body").height(frameHeight);
});
This code works fine as long as you resize the window by dragging one of the corners. If you vertically resize by dragging the bottom of the window, it does not fire this event and the div does not properly resize.
I use the iframe as a reference since it seems to automagically resize itself because of something the parent window does. (This is all in MS CRM Dyanamics...so who knows what is happening behind the scenes)
Does anyone know why this would be? And what I would have to do to work around this?
Hackish is ok in this instance. The whole thing is a big hack.
Hack answer: You could create a timer that fires once every second or so and checks the dimensions. If they aren't what you expect, call the event function manually.
The resize event fires differently on different browsers. FF fires repeatedly and IE fires only after the resize is complete. You can't count on it. Use a timer and poll the current size.
What I'm trying to achieve is basically have a code that will morph (move around the page) based on the part of the window which is currently viewed.
Scenario:
actual page height : 2000px
actual screen height( pc, laptop whatever ) : 800px
1 image of 600px
3 div's or virtual boxes ( just to prove what I want to do )
Workflow
When you open the page, you'd see the first part of the page with the image loaded in the first div.
What I want and need to achieve is when scrolling the page, and the focus would be on the second div (or the image simply gets out of focus - you can't see it no more),
the image would move (disappear from the first box) and appear in the second one, which is currently visible.
The idea might seem pretty easy but I'm not JavaScript savvy.
Ideally, the answer should include a way to load a JavaScript instead of that image.
The way you use the word focus can be misleading, as focus is a JS event that happens after an element is clicked. You need to get familiar with the jQuery scroll event and scrollTop. Here is similar Thread here in StackOverflow that you may want to read Jquery / Javascript find first visible element after scroll