I have a problem where when the page is resized or a div with an image in it moves on the page, the image gets pixelated, then becomes sharp again a few seconds after the page stops moving.
In my CSS code, the img tag has a "-ms-interpolation-mode: bicubic;" property, but even without that the same behavior occurs. Any idea how to prevent this?
Related
Here is what I am trying to do: When the user is clicking a button, a transparent overlay is opening. The background shouldn't be scrollable but stay at the scroll position. So what I am doing at the moment is that once the button is clicked, I safe the current scroll position via window.scrollY, then add overflow: hidden to both the html and body tag (which unfortunately scrolls the page to the very top), then proceed to scroll to the saved position inside the main div of the website. In most browsers these steps aren't noticeable so it seems like everything just stays at the same position. In Safari however, you can see that for a few ms the background scrolls to the very top and then back again.
So what I would like to know is how to execute multiple methods at once before the DOM updates. Or maybe you can think of another way of doing this?
Thank you!
I have a webpage that waits for images to be loaded until they are visible in the viewport of the browser (lazyload). The dimensions of images are unknown. On the top of the webpage I have a link that jumps to an anchor on the bottom of the page. When a user presses the link the browsers scrolls to the wrong position of the webpage. I assume this is because the images are loaded in the browser and this changes the height of the page. In other words the position of the anchor changes after the link is link is clicked. Is there anyway to solve this paradox.
What you could do, is append a link and a div after the images are fully loaded.
For example: If the images are loaded, you could:
$("#someDiv").append("<a href='#SomeOtherDiv'></a>");
$("#someDivAtTheBottomOfThePage").append("<div id='#JumpToThis'></div>");
I have two overlayed divs (let's call them top and bottom), and the visible div can be swapped by the user (I set opacity = 0 on the top div to show the bottom one). Each has a different img. The user can change the images like a photo gallery, where two arrows change the src of both img using JavaScript.
The user may only click the arrows when the top div is visible.
However, sometimes after the user clicks one of the arrows (changing both images), and then hides the top div, the bottom div image doesn't show up at all. The src is changed with no problems, but there is no image visible.
Here's a screenshot:
As you can see, there is no image visible, even though DevTools shows the correct source and picture. If I change the viewport size slightly (by resizing the window, or bringing up DevTools), it magically appears. This does not always happen, sometimes the picture is shown with no issues. What is going on?
Thanks.
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();
});
I am trying to create an animation in javascript that is triggered by a mouseover event and then returns to the initial state on mouse out. When the user runs their cursor over an image on the page, another div with an initial height of 0px gradually rises in height to 50px over the bottom portion of the image.
The problem I am facing is that when they move the cursor from the image to the div which now covers the bottom portion of the image, it triggers the mouseout (as it is a separate element from the image) and then a new mouseover event in quick succession because the div disappears when it detects that the cursor is no longer over the image (meaning the div appears and disappears quickly, over and over again).
I am wondering how I would go about breaking such a loop so that the div does not disappear when the cursor runs over it from the image (i.e. prevent the onmouseout event from triggering unless the mouse moves to some other element that is not the newly created div).
Here's an image to hopefully better illustrate the problem:
http://i.imgur.com/qcE64.jpg
I think for this situation you'd want to use a wrapper div around both the image and the div you're animating. Attach the mouseover/mouseout events to the wrapper and they will trigger when you're expecting them to. Here's a jsfiddle example