On long press gesture the context action menu appears along the selected text.
But not getting hide unless I select an option from the menu.
First to enable context action menu, I used this:
overflow-scroll = "true" in the ion-content.
In the CSS class, I wrote:
-webkit-user-select: auto;
But now I can't hide it. It is locked on my view. Even after touching anywhere in my web view, it is still enabled. To hide context menu I used this:
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout:none;
But still not getting success. This particular issue is in android only. For iOS, it is working fine. Any help would be appreciated.
Ionic version - 2.1.0
Update
Finally I found the answer.
I used the following two methods. First method to select text on long press and second method to remove selection.
/*----------- To get selection--------*/
$scope.getSelectionText = function() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
$scope.selectMode = true;
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
$scope.selectMode = true;
}
return text;
};
/*---------------To remove selection----------*/
$scope.remove = function(){
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
};
And add ng-click to your div
<div class="selectable" ng-click="remove()">
<ng-include src="activeTab.url"></ng-include>
</div>
Finally I found the answer.
I used the following two methods. First method to select text on long press and second method to remove selection.
/*----------- To get selection--------*/
$scope.getSelectionText = function() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
$scope.selectMode = true;
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
$scope.selectMode = true;
}
return text;
};
/*---------------To remove selection----------*/
$scope.remove = function(){
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
};
And add ng-click to your div
<div class="selectable" ng-click="remove()">
<ng-include src="activeTab.url"></ng-include>
</div>
Related
`
constructor: function() {
this.adjustHeight = Ext.Function.createBuffered(function(textarea) {
var textAreaEl = textarea.getComponent().input;
if (textAreaEl) {
textAreaEl.dom.style.height = 'auto';
var iNewHeight = textAreaEl.dom.scrollHeight;
if (iNewHeight > 0) {
textAreaEl.dom.style.height = textAreaEl.dom.scrollHeight + "px";
}
}
},200,this);
this.callParent(arguments);
}
I want the textarea focused with full content visible . But text area hiding with keypad
Try to use the onBeforeFocus event with scrolling:
scrollableView.scrollTo(textfield.element.getXY()[0],textfield.element.getXY()[1]);
And now you might want to do this to all textfields and textareafields, so that the user gets the same on all items.
Make sure, that the effect is either earlier than the keypad animation or delay it with about 175ms.
Ext.defer(function() {###your code goes here###}, 175, this);
For a hybrid app , I need to scroll till the end of the page. How can I do ?
I am able to scroll to exact element by using driver.scrollTo(); and driver.ScrollToExact();
But I want to scroll the app from top to bottom.
Can anyone tell me please?
#Test
public void testScroll()throws Exception
{
for(int i=0;i<4;i++)
{
Thread.sleep(2000);
if (driver.findElement(By.name("end_item")).isDisplayed())
{
driver.findElement(By.name("end_item")).click();
break;
}
else
{
verticalScroll();
}
}
}
public void verticalScroll()
{
size=driver.manage().window().getSize();
int y_start=(int)(size.height*0.60);
int y_end=(int)(size.height*0.30);
int x=size.width/2;
driver.swipe(x,y_start,x,y_end,4000);
}
This will help you to swipe till end or till whatever position you want.
You can use coordinates to scroll to the end of the page with even locating the String available on the page. Use this:
TouchAction action = new TouchAction(driver).longPress(20,y).moveTo(20, 10).release();
action.perform();
I too had the same problem. What I did is, used the text which is at the bottom of that particular page ("text should be dynamic, it should be constant") then used the following code
String text="ABC";
driver.scrollTo(text);
After this code you can perform any action.. for example see the below code
String text="ABC";
driver.scrollTo(text);
driver.findElement(By.xpath("//*[#text='"+text+"']")).click();
public List<String> getAllStudyMaterialName(List<WebElement> elements) {
List<String> documentTitle = new ArrayList<>();
boolean isStudyMaterialRepeat = false;
while (true) {
List<WebElement> titles = elements;
for (WebElement title : titles) {
documentTitle.add(title.getText());
}
scrollUp(driver);
if (documentTitle.get(documentTitle.size() - 1).toString().equals(elements.get(2).getText())
&& documentTitle.get(documentTitle.size() - 2).toString().equals(elements.get(1).getText())
&& documentTitle.get(documentTitle.size() - 3).toString().equals(elements.get(0).getText())) {
isStudyMaterialRepeat = true;
}
if (isStudyMaterialRepeat) {
break;
}
}
return documentTitle;
}
After scrolling till bottom I am checking it's a same elements
This logic will scroll till the bottom of the page and if it found last 3 elements are same with stored element it will break the loop
Hi I have developed android phonegap app which is responsive.So when keyboard is visible i need to hide the footer in portrait and landscape mode and keyboard is not visible i need to show the footer in both the mode.I have tried the sample but its not working fine.If i open the app in portrait mode i cant able to find the footer in landscape mode when keyboard is not visible.
Here is my sample code:
var is_keyboard = false;
var is_landscape = false;
var initial_screen_size = window.innerHeight;
/* Android */
window.addEventListener("resize", function() {
is_keyboard = (window.innerHeight < initial_screen_size);
is_landscape = (screen.height < screen.width);
if (is_keyboard)
{
$("#footer1").hide();
}
else
{
$("#footer1").show();
}
}, false);
Please guide me.Thanks in Advance.
I think your best bet is to register for the show and hide keyboard events.
document.addEventListener("showkeyboard", function() {
$("#footer1").hide();
}, false);
document.addEventListener("hidekeyboard", function() {
$("#footer1").show();
}, false);
I have designed an app using Phonegap and jQuery Mobile. The fixed footer works properly until I click on a dropdown or text field, which causes the footer to either disappear from view (Android 4.0) or move to the middle of the view (Android 2.2 Galaxy Tab). Any suggestions?
Phonegap Version: Cordova 2.1.0
jQuery Mobile Version: 1.2.0
Here is my code:
<div data-role="footer" class="nav-mobilyzer" data-tap-toggle="false" data-position="fixed">
<div data-role="navbar" class="nav-mobilyzer" data-grid="d">
<h1>footer</h1>
</div>
</div>
I had the problem in some devices the footer displayed and in others it didn't. I found this worked for me:
var initialScreenSize = window.innerHeight;
window.addEventListener("resize", function() {
if(window.innerHeight < initialScreenSize){
$("[data-role=footer]").hide();
}
else{
$("[data-role=footer]").show();
}
});
EDIT:
But what about orientation changes?
var portraitScreenHeight;
var landscapeScreenHeight;
if(window.orientation === 0 || window.orientation === 180){
portraitScreenHeight = $(window).height();
landscapeScreenHeight = $(window).width();
}
else{
portraitScreenHeight = $(window).width();
landscapeScreenHeight = $(window).height();
}
var tolerance = 25;
$(window).bind('resize', function(){
if((window.orientation === 0 || window.orientation === 180) &&
((window.innerHeight + tolerance) < portraitScreenHeight)){
// keyboard visible in portrait
}
else if((window.innerHeight + tolerance) < landscapeScreenHeight){
// keyboard visible in landscape
}
else{
// keyboard NOT visible
}
});
The tolerance accounts for the inexact calculation of landscape height with portrait width and vis-versa.
Okay, this thread is as old as the internet at this point, but the answer above didn't seem to do the job for me.
The best way I found was to bind a method to the jquery .blur() event, and then call fixedtoolbar() methods in a very specific order, i.e.
var that = this;
$(':input').blur(function(){
that.onFocusLoss();
});
......
onFocusLoss : function() {
try {
$("[data-position='fixed']").fixedtoolbar();
$("[data-position='fixed']").fixedtoolbar('destroy');
$("[data-position='fixed']").fixedtoolbar();
console.log('bam');
} catch(e) {
console.log(e);
}
},
The keyboard is opened when we have the focus on an input so:
// hide the footer when input is active
$("input").blur(function() {
$("[data-role=footer]").show();
});
$("input").focus(function() {
$("[data-role=footer]").hide();
});
You can also detect when the keyboard shows and when it hides and show or hide your footer accordingly:
document.addEventListener("showkeyboard", function(){ $("[data-role=footer]").hide();}, false);
document.addEventListener("hidekeyboard", function(){ $("[data-role=footer]").show();}, false);
Try data-hide-during-focus="" and set it to an empty string.
My solution uses another JQUERY attribute on the div footer. Adding data-fullscreen="true" to that div was all I needed. I know that this fix might not have been available until recently, but I am using jqm 1.3.2 and jq 1.9. I thought I would post this solution just in case it helps someone. Good luck. :)
I have a problem in android phonegap mobile website application, I applied scroll bar in my application, it is working good in PC but when i test in android device(mobile phone) scroll bar not enable.
personally I don't like iscroll.. had many problems using it so I discovered another solution... you can try this:
1.) set your DIV overflow to auto (or scroll) and set its height.. e.g.
<div id="wrapper" style="overflow:auto; height: 200px">...content...</div>
(I usually calculate height with javascript based on user's screen size.. I never set just a fixed height for all devices, this is just for the purpose of this "demo")
2.) add this javascript:
<script>
function isTouchDevice(){
try{
document.createEvent("TouchEvent");
return true;
}catch(e){
return false;
}
}
function touchScroll(id){
if(isTouchDevice()){ //if touch events exist...
var el=document.getElementById(id);
var scrollStartPos=0;
document.getElementById(id).addEventListener("touchstart", function(event) {
scrollStartPos=this.scrollTop+event.touches[0].pageY;
event.preventDefault();
},false);
document.getElementById(id).addEventListener("touchmove", function(event) {
this.scrollTop=scrollStartPos-event.touches[0].pageY;
event.preventDefault();
},false);
}
}
</script>
3.) call it on page load.. if you use jQuery:
$(document).ready(function() {
touchScroll("wrapper");
});
4.) if you want your scrollbars to be visible, just define following CSS rules:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #000;
}
Use this PhoneGap link
http://phonegap.pbworks.com/w/page/22863184/Hide%20the%20scrollbar%20in%20Android
this works in Android ,PhoneGap Applications for vertical and Horizontal Scroll
Code look Like this
public class MyActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
// Display vertical scrollbar and hide horizontal scrollBar
super.appView.setVerticalScrollBarEnabled(true);
super.appView.setHorizontalScrollBarEnabled(false);
// set scrollbar style
super.appView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
}
}