Encountering an issue with my Android PhoneGap mobile website application. I have implemented a scroll bar in the application which works perfectly on PC. However, when testing on an Android device (mobile phone), the scroll bar does not enable.
Encountering an issue with my Android PhoneGap mobile website application. I have implemented a scroll bar in the application which works perfectly on PC. However, when testing on an Android device (mobile phone), the scroll bar does not enable.
Personally, I have found that iscroll can be problematic, so I sought out an alternative solution. Here is what you can try:
1.) Set the overflow of your DIV to auto (or scroll) and specify its height like this:
<div id="wrapper" style="overflow:auto; height: 200px">...content...</div>
(I typically calculate the height with JavaScript based on the user's screen size rather than setting a fixed height for all devices, but for demonstration purposes, a fixed height is used here.)
2.) Add the following JavaScript code:
<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 the function on page load using jQuery:
$(document).ready(function() {
touchScroll("wrapper");
});
4.) If you want visible scrollbars, define the following CSS rules:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #000;
}
Check out this helpful PhoneGap resource
This guide is specifically designed for Android and PhoneGap applications, providing solutions for vertical and horizontal scrolling.
Here is an example of what the code looks like:
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);
}
}
I am working on a table that contains mat-icon-buttons. When the button is clicked, it should display 2 additional buttons at the end of the table. Upon clicking the first button, its color changes from primary to red, and I would like to add two more butt ...
Recently, I encountered an issue with a Thread in my service where calling the startActivity method works perfectly when using API 24 or higher. However, it fails to work when using API 23 or lower. The code in the Thread class looks like this: private I ...
I tried to pause a CSS transition and came across a question with a solution that seems similar: Is there a way to pause CSS transition mid-way? However, I couldn't make it work for my code. I suspect the issue lies with the before element. What cou ...
I need to create a feature that changes the state of a button from active to inactive based on user input, using Bootstrap. Ultimately, I am working towards finding an intuitive way to validate form input so that the submit button can be pressed for PHP pr ...
I'm currently exploring ways to customize the appearance of my website based on the viewer's screen resolution. I am interested in potentially optimizing the layout for vertical screens on mobile devices, and horizontal screens for laptops. Addit ...
When my app is launched, users are required to log in before proceeding to the main activity. Upon logging in, their email and password are stored in shared preferences. In the main activity, users must then click a button to indicate that they are "checke ...
For my website, I found this useful tool: It's been working great for me, but one issue I've encountered is that when I click on a picture using the tool, its opacity changes to 0 but the link remains in the same spot. I'm trying to figure ...
Can someone help me troubleshoot why my code is not entering the on click function as expected? What am I missing here? let allDivsOnTheRightPane = rightPane.contents().find(".x-panel-body-noheader > div"); //adjust height of expanded divs after addi ...
One vulnerability of using Javascript is that it's a client-side language, making scripts accessible for reading and copying. Let's take a look at this code snippet as an example: <html> <head> <title>title</title> <s ...
My HTML output is as follows: https://i.stack.imgur.com/aBdEF.jpg It seems that the footer is not matching up with the cards... The CSS component I am using looks like this: .card-equal-height { display: flex; flex-direction: column; height: 100%; ...
As I was attempting to center a div inside another div using flexbox, an inconsistency in rendering between Firefox and Chrome caught my attention. In the scenario, there are 3 divs, each with properties display:flex, justify-content:center, and align-ite ...
Currently, I'm using the Twilio Android SDK for a conference call, but whenever I try to establish a connection using the function device.connect(foo), my app crashes. Here is the snippet of my code: public void connectToConference(String name){ ...
Whenever I use VSC, I notice these odd grey boxes that appear in my editor. They seem to be dynamic and really bother me. Interestingly, switching to a light theme makes them disappear. However, I prefer using a dark theme and haven't been able to fin ...
I am facing some challenges with single quotes while trying to append HTML with a JavaScript string. So far, I have managed to successfully append the element: $("<a class='action-button' id='pl65197buy' value='buy now'&g ...
Seeking a solution to expand shortened URLs universally. I am aware that popular services like bit.ly, TinyURL, and goo.gl use 302 redirection for forwarding users to new destinations. How can a HEAD request be made in PHP to retrieve the "Location" sectio ...
I am currently working on a page with multiple <string> tags containing different strings, like 'Is this a String? Yes'. My goal is to use JQuery to locate the first instance of 'Is this a String? ' and extract either ...
I am facing a challenge with arranging three columns in a row: Interested listings | Basic profile | Connections However, when the screen size is reduced to that of a phone, they should be stacked like this: Basic profile Interested listings ...
I am working on a simple JavaScript (jQuery library) if statement to check for the presence of a div element with the class 'video' on the page. If it finds the element, the variable 'arrows' is set to true, otherwise it is set to false ...
Currently, I am in the process of learning how to execute a basic server call using Javascript/jQuery. Despite my efforts to find a straightforward tutorial, I have not been successful. The main objective is to transmit a message containing two parameters ...
I'm new to the world of web development and design, embarking on a journey to learn all I can in these fields. Recently, I attempted to create unique hover styles for each menu button within my CSS classes-based menu list. However, I encountered an i ...