Develop Reference

PDF.JS: Reloadeing/ re-rendering due to zoom stops JS events

When I execute the Pinch Zoom gesture (wipe 2 fingers apart or to each other on the display), on the PDF.JS viewer.html in an Cordova app on iOS 11.4.1, the document should be permanently zoomed in or out. But if the document is reloaded/ re-rendered (little loading spinner is shown in PDF.JS toolbar) from a zoom size of approx < 120%, the 'gesturechange' event is no longer fired. The fingers must first be removed from the display and the pinch zoom gesture must be executed again with 2 fingers to get the event fired again. I also tried the library Hammer.JS, but unfortunately here is exactly the same behavior. If the document is further enlarged at a zoom of approx. > 120%, no re-rendering takes place (no loading spinner is shown in PDF.JS toolbar) and the 'gesturechange' event is further fired and everything works. Now the question would be whether you can deactivate re-rendering if necessary and only execute it again at the end of the pinch zoom?
This is the JavaScript example code. PDFJS viewer.html is rendered in an iframe and ExtJS is used.
var viewer = Ext.dom.Query.select('iframe')[0].contentWindow.document.getElementById("viewer");
var pdfViewer = me.el.dom.contentWindow.PDFViewerApplication.pdfViewer;
viewer.addEventListener('gesturechange', function(e) {
if (e.scale < 1.0) {
console.log("PinchOut")
pdfViewer.currentScale = pdfViewer.currentScale - 0.01;
} else if (e.scale > 1.0) {
console.log("PinchIn");
pdfViewer.currentScale = pdfViewer.currentScale + 0.01;
}
})

Try to set the PDFJS.disableTextLayer in viewer.js to "false"
PDFJS.disableTextLayer: false,
then it should work

detect a change of screen resolution, and execute a code or another in javascript

I have this doubt, I have a menu in which I run a javascript code or another depending on whether its width is greater or less than its height, works me well the first time the screen resolution is detected, but if there is a change of resolution or a change of orientation does not detect it, and despite for example of having changed to portrait orientation still executing the landscape orientation code. Is there any way to solve this? regards

You could use an eventlistener and listen on the resize event.
window.addEventListener('resize', () => {
// function body
});
But I think this is rather a styling issue and you should consider to use a different approach.

Here is an extention of #mstruebing 's answer :
function resisePageMobile(){
if (window.innerWidth <= 696) { //Detect mobile
aside.classList.remove('pc-stuff');
aside.classList.add('mobile-stuff');
}else{ //Detect other higher resolution screens
aside.classList.remove('mobile-stuff');
aside.classList.add('pc-stuff');
}
}
resisePageMobile();//run once on page load
//then attach to the event listener
window.addEventListener('resize',resisePageMobile);
Running this function once at the start of the page is important because the resize event will not trigger until the window is getting resized so we must initialize page at the start !

Vertical scroll animation 'jumps' on iOS

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.

Turning off Slider load based on device width

I'm working on a site for a client who bought a template and the issue is that now client wants the slider remove from hand held devices.
I know that we can use <picture> tag to assign different images based on screens size but what I'm trying to do here is to disable(by disable i mean canceling image load on mobile devices, not {display:none;} the slider loading all together from a certain screen size.
We'll probably have to create a script to call event assigned to that <div> to cancel its loading on for instance any screen size bellow 768px.
How can I do this?
(BTW I'm still learning JS .. any help is muchappreciated)
Many thanks in advance.

I have a simple solution to achieve your need. Below is the mobile check method.
// Mobile Device Check
function MobileDeviceCheck() {
var mobileFlag = false;
var isMobile = window.matchMedia("only screen and (max-width: 768px)");
if ($(window).innerWidth() < 768 || (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) {
mobileFlag = true;
}
return mobileFlag;
}
Call the Above function to check the mobile device and do your necessary actions.
// Load Device Specific Actions
var mobileFlag = MobileDeviceCheck();
if (mobileFlag == true) {
// Do Your Actions
}

Orientation Portrait and PortraitUpSideDown Only For One Window

I have 10 windows.
The initial window is loginWindow i want to set orientation for Portrait and PortraitUpSideDown.
For remaining windows will have landscape and portrait orientation.
in Tiapp.xml
<key>UISupportedInterfaceOrientations~iphone</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
Which set all orientation for my application which enables portrait,portraitupsidedown,landscapeLeft and landscapeRight.
I need those only portrait and portraitUpSideDown for LoginWindow.
Rest of window do have all the orientation which is portrait,portraitupsidedown,landscapeLeft and landscapeRight.
Can any one suggest me how can i able to get this behaviours for my application.

You need to use different windows and define for each window which orientation you want to allow.
I mean, you have to create loginWindow like this:
var loginWindow = Ti.UI.createWindow({
orientationModes : [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT],
fullscreen : false,
navBarHidden : true
});
winPortrait.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT];
Windows where you want to allow all orientations, have to been created like this:
var appWindow = Titanium.UI.createWindow({
width : Ti.UI.FILL,
height : Ti.UI.FILL,
fullscreen : false,
navBarHidden : true,
orientationModes : [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT]
});
appWindow.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.UPSIDE_PORTRAIT, Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT];
Hope it helps

Present your loginWindow as a modal view and after that set this methods for desired orientations.
- (BOOL) shouldAutorotate
{
return NO;
}
- (NSUInteger) supportedInterfaceOrientations
{
return UIInterfaceOrientationMaskPortrait;
}

Using different orientation modes for a single app in iOS is not recommended. Please read Orientation design principles
Apple's Developer documentation says: "People expect to use your
app in different orientations, and it’s best when you can fulfill that
expectation." In other words, don't look at handling orientation as a
bother but an opportunity.
Apple further recommends that when choosing to lock or support
orientation, you should consider following these principles:
On iPhone/iPod Touch – Don't mix orientation of windows within a single app; so, either lock orientation for the whole app, or react to orientation changes.
On iPhone – don't support the portrait-upside-down orientation because that could leave the user with their phone upside-down when receiving a phone call.
However you can achieve orientation for particualr window using the orientationMode property of window