I made an image gallery format. It's responsive (boostrap and some own medias #), when i click an image, a Swiper (http://idangero.us/ plugin) slider opens to show images one by one in a bigger size. I tested on PC, and Android phones, and it's working fine on this 2 devices:
responsive, changing orientation on phone (android), all formats are working fine...
except iphones, when i click an image, it opens fine, but when orientation is changed, it doesnt resize the swiper area.
I allready try this 2 options:
window.addEventListener("orientationchange", function() {
mySwiper.update(); and thisone: mySwiper.onResize();
});
Also i notice this, after changing orientation (landscape to portrait OR portrait to landscape), and do a small scroll-down, swiper resize the container (the scroll to hide the addres-bar upside) and works fine, but in android, that's not necesary.
It's look like a huck, but it's worked for me:
$(window).on('orientationchange', function () {
setTimeout(() => swiper.onResize(), 50);
});
I had similar trouble when using Swiper (4.4.6). On iOS after an orientation change, Swiper appeared to be "confused" as to how many slider elements it contained and would let me slide beyond the final element. Although the OP stated it didn't work for him, I had success with:
$(window).on( 'orientationchange', function()
{
mySwiper.update();
} );
I happened to be using jQuery, but I'm sure it would have worked as well using DOM only.
Be sure to change the reference to "mySwiper" to whatever your Swiper instance global variable is named!
Related
I'm working on a site that uses CSS3 animations.
I've noticed on iOS the comic captions 'jump' which I believe is caused by the address bar changing one of the window properties used to calculate the caption position.
Source code is available here: https://gitlab.com/ashleyconnor/adventurersclubcomic
If I'm correct in my assumption. Is there an accurate way to offset the iOS address bar so there is no jump (sudden increase) in any of these values?
I cloned your repo, and was able to reproduce the jitter on window resize in both Firefox and Chrome. After a few minutes of debuggine, I think the problem is actually in your index.js file.
You are completely refreshing the enllax plugin every time the windows resizes. This appears to be unnecessary.
If you remove the excess calls to the enllax function like this:
$(document).ready(function() {
// function enllax() {
$('#start').enllax({
type: 'foreground',
ratio: 0.5,
direction: 'vertical'
});
// $(window).scroll();
// };
$('#begin').click(function() {
$('html, body').animate({
scrollTop: $("#panel1").offset().top
}, 1000);
});
// enllax();
// And trigger the scroll event on resize to deal with changes
// in the responsive layout
$(window).on('resize', $(window).trigger('scroll'));
});
With that update, the jitter stops on resize in all the browsers I have installed. It remains to be tested in iOS because I don't have any Apple hardware to test it on, but I suspect it should fix the problem there as well.
As stated above, I am using the particles.js library to add a background to a div on a site that I am designing.
When the page loads, the correct div has the animation as a background, but it always starts way too "zoomed in". It appears to be using too large a default screen size, however whenever the screen area is changed either by directly changing the window size or opening the developer console it triggers the "resize" event and then everything is displayed correctly.
The resize event code is as follows:
if(pJS && pJS.interactivity.events.resize){
window.addEventListener('resize', function(){
pJS.canvas.w = pJS.canvas.el.offsetWidth;
pJS.canvas.h = pJS.canvas.el.offsetHeight;
/* resize canvas */
if(pJS.tmp.retina){
pJS.canvas.w *= pJS.canvas.pxratio;
pJS.canvas.h *= pJS.canvas.pxratio;
}
pJS.canvas.el.width = pJS.canvas.w;
pJS.canvas.el.height = pJS.canvas.h;
/* repaint canvas on anim disabled */
if(!pJS.particles.move.enable){
pJS.fn.particlesEmpty();
pJS.fn.particlesCreate();
pJS.fn.particlesDraw();
pJS.fn.vendors.densityAutoParticles();
}
/* density particles enabled */
pJS.fn.vendors.densityAutoParticles();
});
}
What I am looking for is either a way to get the animation to load properly, or to trigger the resize immediately upon page load so that it always looks right to page visitors.
What I have tried
I have tried manually setting the size of the canvas element that the library creates, however that does not work. I have also tried changing the size of the div that contains the element, and that also does not work.
Potential conflicts or easier solutions
I am using Jquery 3.1.1 and Bootstrap 3
To trigger the resize you do:
$(window).trigger('resize');
when the dom is loaded
I'm using the BigVideo.js plugin (http://dfcb.github.io/BigVideo.js/) in a website of mine. I am also using the following Javascript to scale the site up or down as the user resizes their browser.
$(document).ready(function() {
scaleSite();
});
$( window ).resize(function() {
scaleSite();
});
// Scale Site to Fit Window
function scaleSite() {
var windowWidth = $( window ).width();
var defaultWidth = 1200;
var scaleWidth = 1;
var isMobile = false;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// MOBILE ACTIONS
} else {
// STANDARD ACTIONS
if(windowWidth >= defaultWidth) {
scaleWidth = windowWidth/defaultWidth;
var scaleWidthRounded = Math.round( scaleWidth * 10 ) / 10;
} else {
scaleWidth = windowWidth/defaultWidth;
var scaleWidthRounded = Math.round( scaleWidth * 10 ) / 10;
}
$("#mainDiv").css("-webkit-transform", "scale("+scaleWidth+")");
$("#mainDiv").css("-moz-transform", "scale("+scaleWidth+")");
$("#mainDiv").css("-o-transform", "scale("+scaleWidth+")");
$("#mainDiv").css("msTransform", "scale("+scaleWidth+")");
$("#fixedHeader").css("-webkit-transform", "scale("+scaleWidth+")");
$("#fixedHeader").css("-moz-transform", "scale("+scaleWidth+")");
$("#fixedHeader").css("-o-transform", "scale("+scaleWidth+")");
$("#fixedHeader").css("msTransform", "scale("+scaleWidth+")");
// RESET BODY HEIGHT
var mainDivHeight = ($("#mainDiv").height()*scaleWidthRounded);
$("body").css("height", mainDivHeight);
$("html").css("height", mainDivHeight);
}
}
Strangely enough, when I load a page that has a video playing on it, and I try to resize the browser, the scaling works correctly but everything BUT the video gets a little blurred.
I had trouble with this same issue when using the Jssor Slider plugin, it also caused my pages to blur after resizing the browser window. I resolved that issue by adding the $HWA : false to the options for the Jssor Slider, which disabled the plugins ability to use Hardware Acceleration.
Is there something in the BigVideo.js or the underlying Video.js file that I can adjust to prevent hardware acceleration there as well? As it seems to be the same cause.
UPDATE
I just noticed the blur issue ONLY happens in Chrome. Firefox and Internet Explorer both work fine with no problem, but in Chrome, all content on the page OTHER than the BigVideo itself gets slightly blurred.
UPDATE 2
Okay, so I just noticed that if I inspect element on the div containing the HTML5 <video> tag and I delete it from the DOM, my text "snaps" back into focus. I went through the div item by item and unchecked CSS styles thinking that would lead me to the one that is causing problems but still no luck.
Why would deleting the element from the DOM in the Chrome DEV tools snap the rest of the page back into focus and remove the blur?
Below is a screen shot showing an example of the text on my page BEFORE I resize the browser window, and the result AFTER I resize. Again, if I resize, the page gets a bit blurry, and if I delete the element containing the <video> using the Chrome DEV tools, the blur goes away.
UPDATE 3
So I removed the BigVideo plugin and replaced it with a generic HTML5 <video> tag, the video still plays and the blur issue is still present when resizing the browser. So it's something with the way chrome is handling the HTML5 video along with my scale site script.
JSFIDDLE
https://jsfiddle.net/h5vu7La7/3/
Not sure if this will help or not, but if you resize the window on this jsFiddle you can see the text (in Chrome) is blurred a bit. If you remove the <video> from the HTML and re-run and resize it does not blur.
Also noticed if you run the fiddle, and inspect element on the video and delete it from the DOM, the text snaps back into focus.
If you are applying transform scale CSS rule to a HTML element that has child elements (I'm guessing those visible in the pictures are inside one of the divs you are scaling), they will get somewhat blurry due the layer moving to 3D plane.
Open inspector and apply transform: scale(1.01); to the blue button below here on SO and you'll realize what I mean.
Instead of scale, you should just resize the width and height of the video element.
i thought this would be an very frequent question, but i actually did not find any answer to it.
i am making a webapp/website for mobile.
When the user rotates his phone, i want to hide the whole body just before the page is rotated, with that ugly deformation/transition. Then, when this transition is done, show the body again.
here i have done a minimal version of the code that works on android.
there is a background image from loremPixel on the body, and a red background on the html tag.
the expected result is: never seing the image rotate. only a red screen (not rotating either)
thanks for any help.
ps: i think i have narrowed the problem down to the orientationchange event being fired after the rotation on ios, and before(as i would expect) on android
Random idea.
$(window).resize(function() {
$("#wrapper").css("display","none");
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
$("#wrapper").css("display","block");
});
Start resize, hide wrapper. No resize in 0.5 seconds, show.
http://jsfiddle.net/7ktg9can/
I have a JS feature on the following site that is working just fine in Firefox but not in Safari: http://rossbolger.com/kids/light-stories/
The feature slides out a grid of thumbnails called #image-thumbs when the mouse hovers over the container called #hit-area. It works (at least in Firefox) by first changing #image_thumbs height from '48px' to 'auto', the height is then measured using jQuery's height(). This height is stored in a variable and then using jQuery's css() it is given back to the #image-thumbs when the mouse is over.
The code on the site looks a little something like this:
// Thumbnails Nav Reveal and Hide Scripts
var thumbs_height = 1,
thumbs = $('#image-thumbs'),
thumbs_original_height = thumbs.css('height');
// Slide Up Thumbs
(function revealThumbs() {
// On hover let the thumbs become their full height
$('#image-thumbs #hit-area').hover(function(){ // Mouse over
// Get the unrestricted height of the thumbs
thumbs.css('height', 'auto');
thumbs_height = thumbs.height();
// then put it back to what it was so we can animate it using CSS3 transition
thumbs.css('height', 'inherit');
// delay 0.1s before triggering the change in height (time for the calculations to complete)
setTimeout( function() { thumbs.css('height', thumbs_height ) }, 100 );
}, function(){ // Mouse out
hideThumbs();
});
})();
// Hide thumbs
function hideThumbs(){
thumbs.css('height', thumbs_original_height );
};
The reason for measuring the unrestricted height and passing it back as a pixel value, rather than simply setting the height to 'auto', is to create a sliding effect via CSS3 (i.e. transition: height 0.5s). The transition only takes place if the affected attribute goes from one numeric value to another.
Thanks for any help bug testing this. I haven't even looked at other browsers yet.
All the best,
Laurence
Okay, so I've worked it out...
In the javascript document (scripts.js on the site) there was a function higher up the page calling the hideThumbs() function. So it wasn't working because the variables in hideThumbs() hadn't been declared at that point. Funny that it should still work in Firefox and IE9!
I've moved all this code to a point before that other function and the problem is now resolved. So far I've only done this locally. I'll update the site in the link above later.