Globally disable Ext JS Animations - javascript

I'm testing an intranet web app in an iPad but the animations to open "windows" and show message boxes are horribly slow.
I've tried setting the global Ext.enableFx to false, and confirmed that flag is still false after page load in Firebug. The animations are still occurring though so I must be doing something wrong.
Thanks...

When you show a window, the second (optional) argument to show() is the target to animate from. Omit that and you should not get the animation.
EDIT:
Not tested, but glancing at the Window code you should be able to do this (put it after your Ext includes and before your app code):
Ext.override(Ext.Window, {
animShow: function(){
this.afterShow();
},
animHide: function(){
this.el.hide();
this.afterHide();
}
});

Related

Website toggling full screen mode in Chrome, after ajax load

I still fighting with one Chrome issue on my webpage. There is pagination, that loads content via ajax call:
https://elody.cz/nase-nevesty
When I click 2nd, 3d, .. tab in pagination. The load is being performed and after that, it jumps into fullscreen mode.
You can also check on this video:
https://www.loom.com/share/768557e080f1471393aa0377d3fec024
I have this issue on Mac as well as on Windows – in Chrome.
Please, do anybody know how to fix that?
Thank you!
Filip
Inside ba_gallery.js there is following line:
var fullscreen = true;
set this value to false may solve your problem, i guess its worth a try
After ajax is done you could verify if its in fullscreen mode, if yes set its to false.
document.fullscreenEnabled : test id browser supports fullscreen
document.documentElement.requestFullscreen(); turn your page in to fullscreen
document.addEventListener("fullscreenchange", function (event) {
if (document.fullscreenElement) {
// fullscreen is activated
} else {
// fullscreen is cancelled
}
});
testing if its in full screen
document.exitFullscreen(); getting out

iOS not loading target click URL bc of hover?

I have a fun little button on a website I am developing here:
http://dev.lapiazzaonline.com/merrick.php
When you click on the takeout menu button on desktop and chrome inspector iPhone simulator it works great.... with a nice little delay.
Now on iOS, nothing happens. I think it might have to do with the hover state issue, but more think my JS is messed up.
this is the js in the behavior.js file
// cool buttons
(function() {
var removeSuccess;
removeSuccess = function() {
return $('.button').removeClass('success');
};
$(document).ready(function() {
return $('.button').click(function(e) {
e.preventDefault();
var goTo = this.getAttribute("href");
$(this).addClass('success');
setTimeout(removeSuccess, 1500);
setTimeout(function(){
window.open(goTo);
},1500);
});
});
}).call(this);
Any ideas?
Thanks,
-Muhu
Your issue here is the use of window.open. You can read more about this here and other similar issues if you search. Unfortunately, there are multiple reports that jQuery trigger will not work either. So, what I would do is just use something like Modernizr, or if you just want to figure out which browser it is, this is a nice tool, and then when you're on iOS or a browser with similar blocking functionality, run a different function that doesn't prevent the default, and opens the link normally.

JQwidgets scroll doesn't work on chrome when i close opened window

I use JQwidgets ,, I use to print data onclick print-button
as code :
$("#print").click(function () {
var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
var newWindow = window.open('', '', 'width=800, height=500'),
document = newWindow.document.open(),
pageContent =
'<!DOCTYPE html>\n' +
'<html>\n' +
'<head>\n' +
'<meta charset="utf-8" />\n' +
'<title>jQWidgets Grid</title>\n' +
'</head>\n' +
'<body>\n' + gridContent + '\n</body>\n</html>';
document.write(pageContent);
document.close();
newWindow.print();
});
When I close printing-widow(not continue printing), I can't use the grid-scroll (on chrome)..
google-chrome Version 34.0.1847.131 m
This worked fine on Firefox and IE..
How to fix the scroll after closing printing-window on chrome
Fiddle-Demo
It looks like you're not the only one with this issue.
I understand that your code is already setup and you want to run with what you have, but unless someone comes up with a hack or Google decided to fix what is clearly a bug, I think you need to re-think how you are approaching this issue.
If chromeless windows were an option, or if the print dialogue were a modal then you could pull this off with the current strategy, but neither of those options are possible in Chrome. Even if you were able to get around this scrolling issue somehow you're still left with a less than desirable UX problem in that if the user hits "cancel" in the print dialogue then they are left with a still open blank window.
Here is a JS fiddle to demonstrate that you need to change your approach: DEMO
You can see from this demonstration that even if we run a completely separate script from within the new window by passing it as plain text in the content object, it still causes the same issue. This means to me that this is a parent/child type of a relationship that is not easily circumvented with JS.
I recommend 2 alternative possible solutions:
Option1:
<input type="button" value="Print" onclick="window.print(); return false;" />
This triggers a full screen print dialogue that can't be closed from the "Windows Close Button." That way you can avoid the issue all together. Then you can use a combination of JS and Print Styles to target and isolate the information you want to print. I know it's more work but I think may be the better cross-platform solution.
This option is more brute force and simplistic in nature (and you have already commented that you know this but I'm leaving it up because it's still an option).
DEMO
Option2:
User clicks on a link/button that opens a new tab/window
In the same function the data from your table gets loaded into a JSON Object
The JSON object is loaded into a print template in the new tab/window
the template initiates the print function
By taking these actions, I think you will have disassociated the JS instance enough that the new tab will not affect the initiating script.
This is a browser bug - you'd have to find some sort of hack to fix it.
Doesn't sound like you want to put the print dialog code elsewhere thus not affecting your scroll bar. That is the obvious solution but it sounds like you can't do that.
Here's what I would do: Wait until someone has triggered the problematic condition, then put an event listener on the scroll event. when it happens... go ahead and reload the page.
Simple, easy, fun.
var needToReload = false;
$("#print").click(function () {
... as you have
needToReload = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
}
$('#contentjqxgrid').scroll(function () {
if (needToReload) {
window.location.reload();
}
});
$("#jqxscrollbar").jqxScrollBar({
width: 5,
height:180,
theme:'energyblue',
vertical:true
});
$("#jqxscrollbar1").jqxScrollBar({
width: 300,
height:5,
theme:'energyblue'
});
Look at jsfiddle: http://jsfiddle.net/8PtUX/6/

Changing iframe URL to another protocol reloads the page, but not when fired from a timer

My theory is that later incarnations of Chrome#Android stops the behaviour below when not "user triggered".
My question is if anyone has found a work around.
Setting src with another schema on an iframe makes the device open an app.
Well.. it works for certain browsers#devices.
It has worked for "all" devices since a year but not since a while back.
It works when I trigger this event from a click like so:
(this works on "all" devices)
$("#myAnchor").click( function() {
$("#myIframe").attr( 'src', 'schema://redirect=whatever' );
});
But not from a timer like so:
(i.e. this works on ie10metro#win8, safari#ios and opera#android but not chrome#android)
window.setTimeout( function() {
$("#myIframe").attr( 'src', 'schema://redirect=whatever' );
}, 1000 );
We stopped the latter from working in Chrome, it was at the time abused for redirecting to the playstore or other apps. (note: I actually thought we stopped the former from working too).
The preferred solution is to use the intent Anchor syntax https://developers.google.com/chrome/mobile/docs/intents

window.open won't work in Phonegap 1.7.0

I'm working with Phonegap on a mobile device. And its issues and bugs are too much to solve. One of them is:
window.open('new_window.html','well','width=300,height=200');
(I have already created a new_window.html under assets/www/.)
it appears a full screen window, and of course. If I set scroll bar option is true, it's still no use. The system is like a dummy.
I have searched the solution for several days, trying use iframe/frame to replace it. But they are not appropriate or no use. In my development environment, I just want to let the user press a button and a small window pops out. I can set the tile, location, size...
Any alternatives or suggestions?
Thanks.
You could try setting the size on the actual page that is popping up and try window.open() again, if that does not work try:
window.location.href = "newindow.html";
If that does not work either and you could try using a jQuery Dailog box (need to import the jQuery Library found here jQuery) as the popup, code would be something like this:
$(document).ready(function()
{
$('#buttonID').click(function()
{
$help.dialog('open');
return false;
});
var $help = $('<div></div>')
.html('Your HTML copy goes here!')
.dialog
({
autoOpen: false,
height:200,
width: 300,
title: 'Window Title'
});
});
You are treating it like a web browser when it is not a web browser. You can use the ChildBrowser plugin from https://github.com/phonegap/phonegap-plugins/tree/master/Android/ChildBrowser

Categories