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);
}
}
Recently, I came across a useful jQuery filter example that sparked my interest. To test it out, I created my live example and shared the code on CodePen (or you can check out the Fiddle if you prefer). One issue I encountered was that after entering text ...
I came across this JavaScript function on Stack Overflow that I've been using to convert XML to JSON: function xmlToJson(xml) { try { var obj = {}; if (xml.nodeType == 1) { if (xml.attributes.length > 0) { ...
I have a simple and validated local JSON file that I am trying to fetch using Backbone.js. Here is the snippet of Backbone.js code: MyModel = Backbone.Model.extend({ defaults:{ name: '', age: 0 } }); MyCollection =Backbo ...
In my JS project, I experimented with creating animations using the bounding client feature. By scrolling down to reveal certain text or content, I was able to adjust its opacity to 1 by applying the CSS class ".active". However, once the user scrolls back ...
I am currently experimenting with an SVG example where I hover over specific elements to expand or scale them. However, I seem to have made a mistake somewhere or missed something important. Can someone offer me assistance? View the demo on JSFiddle here ...
In my application, I have a common HTML component styled as follows: .box { min-width: 100px; padding: 20px 10px; } There are over 100 of these components and they each have a unique border style without a bottom border: .box:nth-child(1) { border ...
I have implemented a jQuery function that replaces specific words with links, however, I am looking to create a modal popup using only jQuery. Is there a way to achieve this? Below is the code snippet: $(".wpb_wrapper, p").html(function(i, html) { re ...
Taking the example into consideration: Imagine a scenario where you have a webpage containing numerous DIVs. Now, the goal is to render a single DIV and its child DIVs within an IFrame. Upon rendering the following code, you'll notice a black box ag ...
Struggling with resizing an element upon page load, although it functions correctly when the browser viewport is adjusted. Initially, the height of the element is set to 0px. The jQuery code I'm using is as follows: $(window).load(function () { va ...
I'm working with 4 separate divs, with the last one acting as a footer. Is there a way to position this last div at the top using CSS? ...
My goal is to locate all elements on the page that have a title attribute and add a new attribute to each of them. For example: <div title='something 1'></div> <p>Test<div title='something 2'></div></p ...
I'm working on a project with a div containing scrollable content, but I'm struggling to get the header to overflow its parent element. It seems that using overflow: scroll is causing the element to have overflow: hidden as well. Any assistance ...
Currently, I am working on a UIWebView project that involves HTML and JavaScript. One of my friends is working on something similar but for Android. The challenge I'm facing is that in Android, there is a simple way to send an Android object to JavaS ...
I recently tried using swiper.js and had success with the lazy loading demo. However, I encountered an issue where only one image per slide was showing up, despite wanting to display 4 images per slide. <div class="swiper-container"> <div cla ...
My goal is to identify the final image in a Wordpress post content and place a title over it. Each post may contain a different number of images, which is why I need to target the last one specifically. I currently have code that successfully targets the ...
Is it possible to identify which elements are located within a specific rectangular region on a web page identified by a URL? UPDATE: The default settings for screen resolution, font size, etc. can all be adjusted to reasonable values. ...
Issue with data insertion into database using ajax: The output is not showing up in the success section. Please review my script and form code below for any errors. Code: <script> $(document).ready(function () { $('#data_form' ...
Is it possible to create a color picker that allows the user to select a hex value and then automatically apply it as an attribute in an HTML tag, like shown below? <p style="background-color: #FCF8C0;">TEXT GOES HERE</p> In the code example ...
I'm currently facing a challenge where I am unable to fetch JSON data from a webpage despite multiple attempts. I keep encountering the following errors: Uncaught SyntaxError: Unexpected token : or XMLHttpRequest cannot load URL. No 'Access-Co ...
After creating a page with React.jsx, I encountered an issue where my page was initially opening index.jsx upon running npm start. However, when I deleted and then restored the index.html file to "public", the page started opening index.html instead. This ...