Opacity FadeIn/FadeOut GWT Query Internet Explorer - gwt

i am using
$("div.content").fadeOut(300, new Function() {
public void f(Element e) {
absolutePanel.clear();
show(comp);
}
});
to hide/show content. It works fine in Chrome and FF but in IE 7, 8, 9 the Opacity wont work. I know there are a lot of problems with IE but i haven't found anything specified for GQuery how to solve this issue.
Is there any workaround? Or maybe I am using it wrong for IE?
Thanks in advance
Edit:
This works with IE:
Style style = absolutePanel.getElement().getStyle();
style.setOpacity(0.0d);
This does not:
$("div.content").animate("opacity:0.4");

Related

Sencha Touch 2 textfield's focus issue in iOS 7

I'm having an issue with textfields in Sencha Touch 2, this is only occurring in iOS 7 and working fine in iOS 6 and Android.
The issue is when you tap a field the keypad opens but the cursor disappears, it should be focus on selected textfield but it does not. You have to tap the textfield again to focus.
I have checked this issue on iOS 6 and android (on devices as well as on simulators), working fine but not on iOS 7 only.
Is anybody having this issue...?
Is this a bug in sencha or should i missing something, please advice.
Thank you..
I have found this to be directly related to two things:
centered: true
pack: 'center'
When I removed those lines, my app started playing nice. The challenge is to find an alternative way to center your panels.
I spent days figuring this out. Actually there is a problem with Sencha understanding the ViewPort height. In your index.html add a script block with the following code
if (window.device && parseFloat(window.device.version) == 7.0) {
document.body.style.paddingTop = "20px";
Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() - 20);
}
This does two things for you
It Provides enough space on Top to display the activity bar
It sets the Viewport height to be that of screen height, irrespective of the keyboard being present or not.
Also, If your app works in Portrait and Landscape mode, you will need to add these lines in your Viewport.js (or Main.js)
initialize: function(){
Ext.Viewport.on('orientationchange', 'handleOrientationChange', this, {buffer: 0 });
},
handleOrientationChange: function(){
try{
if (parseFloat(window.device.version) == 7.0) {
Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight() - 20);
}else{
Ext.Viewport.setHeight(Ext.Viewport.getWindowHeight());
}
}catch(e){
// do nothing
}
},
And Yes, Make sure they Keyboard Bounce is TRUE in true (if you are using cordova). This will make sure your field does not get hidden.
Hope this works for you.
add height="device-height" in viewport meta tag, fixes the issue.
ios7 issues with webview focus when using keyboard html

Android webview perform double click when doing a single tap

i'm have a problem with android webview on some device. When i do a single click, webview performs a double click and when i do a long tap, it performs as a single click.
Here is my webview setting code:
webSettings.setJavaScriptEnabled(true);
webSettings.setLoadWithOverviewMode(false);
webSettings.setUseWideViewPort(false);
webSettings.setPluginState(WebSettings.PluginState.ON);
webSettings.setPluginsEnabled(true);
webSettings.setAppCacheEnabled(false);
webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
webSettings.setDefaultZoom(ZoomDensity.FAR);
// Cleaning previous cookies
CookieSyncManager.createInstance(baseContext);
CookieManager cookies = CookieManager.getInstance();
cookies.removeAllCookie();
webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
webSettings.setSavePassword(false);
webView.setInitialScale(width*100/320);
//webView.requestFocus(View.FOCUS_DOWN);
webView.setBackgroundColor(Color.TRANSPARENT);
webView.setBackgroundResource(R.drawable.body_bg);
webView.setOverScrollMode(View.OVER_SCROLL_NEVER);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
if (Build.VERSION.SDK_INT >= 11) {// Android v3.0+
webView.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);
}
Do i make a wrong somewhere? Anyone can give a suggestion? I'm sorry because my bad English. Thank you for your help in advance.
Update: i found the reason of this problem. When i set webview scale is 1, it's seem ok but when i set scale large than 1, i have this bug. I also tested with default browser and the phenomenon is same. Can anyone help me?

GWT - Fullscreen

Is there a way to start a gwt-app in fullscreen mode (without toolbar, navigation)?
I found only a hint to open a new window:
Window.open("SOMEURL","SOMETITLE",
"fullscreen=yes,hotkeys=no,scrollbars=no,location=no,menubar=no,status=no,
toolbar=no,resizable=no");
Is this the only way?
If yes, what's the best way to use the "Window.open" (Example)?
This works for me:
private native void requestFullscreen() /*-{
var element = $doc.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}-*/;
This isn't really a GWT question - this is a browser-provided API that GWT happens to wrap for you.
It's worth noting that modern browsers have a tendency to ignore some or all of these flags. For example, good luck getting Chrome to hide its address bar. The reason for this is that if they honoured all of the flags, you could write a web app which looked exactly like a desktop app and the user wouldn't know it - which is exactly what you sound like you're trying to do!
or use https://github.com/wokier/gwt-fullscreen
Caffeinate response has been used as a basis. I also added an event to be notified of fullscreen state change.

Selenium 2.0b3, deal with tinymce in IE9

I'm using selenium 2.0b3 and ruby to test send email function with tinymce and this is my problem: I can't type text into tinymce text area. Here is my code:
select_frame("message_content_ifr")
focus("tinymce")
type("tinymce", "test")
select_frame("relative=parent")
It still works fine with firefox 3.6.8 but not with IE9. As I see, select_frame() and focus() work but can't type any text into the area.
Anybody knows the reason?
I have found a solution using rspec/selenium for IE8. select_frame/focus/type.... works in Firefox and Chrome, but would not work in IE.
This line is calling javascript:
page.get_eval("selenium.browserbot.getCurrentWindow().tinyMCE.activeEditor.setContent('Replace with your text')")
try to use something else xpath ,
Ex: type("name=tinymce", "test")

Jscroll is not working in chrome and safari

I tried teh jScroll plugin by Kelvin Luck. First of all its a wonderful script. Its working fine with text, ie text as contents, in all browesers. But when we insert images in that the scroll is not working in Safari and Chrome... please help me. Am a beginner in javascrpt...:)
Retheesh
Another way of doing it is to initialise the plugin once the entire page is loaded
$(window).load(function(){
$('.scroll-pane').jScrollPane();
})
Ok, this way late, but I just spent most of the day figuring this out.
It's actually quite simple and also sort of explained in the jScrollpane Demo pages...
Since I am using the Wordpress plugin, using the the workaround Dann provided seemed a bit to complicated. The solution here is setting the image height in your CSS file for this specific page instead of (or on top of) declaring them inline.
So basically if you have
<div id="mydiv">
<img src="...." height=200px"/>
>/div>
jScrollpane won't recognize the height of the pictures and count them for your div height. So you need to add a class to your div and define the img height in your CSS:
#mydiv .newclass img {
height: 200px;
}
and it will work fine!
I had a similar problem.
Reinitialising the panel seemed to work.
I used this script:
$('.image_class').load(function () {
$('.scroll-pane').jScrollPane();
});
Dann
It's a known issue, but Dann's workaround is effective. I ended up testing for the presence of troublesome images, since they weren't always present on the page and affecting the scroll area size:
$(function() {
if($('.image_class').size()) {
$('.image_class').load(function() {
$('.scroll-pane').jScrollPane();
});
} else {
$('.scroll-pane').jScrollPane();
}
});