Develop Reference

(PhoneGap): Div overlay is not blocking events beneath it.

I am creating application for Android using PhoneGap (with jQuery mobile).
I want that after clicking some certain button div overlay would show. It managed it with no problem. The thing is that everything underneath that div should not react on click (should be not accessible at all). Unfortunately all the events can be fired and even input/textarea fields can be edited.
Here is some CSS code for created div:
#shopBoxOuter{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.3;
}
Is there other option to deal with that? Thanks in advance

That's probably happening because of event propagation. Try binding an on click event to the pop-up, and include event.stopPropagation() or if that doesn't work event.preventDefault(), which cancels the event.

Responsive not working on iPhone, width too long using Media 320px doesn't work

I am using a default custom skin 'GHD' folder (which is not responsive) have downloaded the blanco theme, which is under 'GHDNew' folder, This is where the style.css is based and the responsive media queries.
I am using trying to style the Iphone but cannot get the portrait to work to fit the width of the device. The width is long, I can't explain it but have a look here ghd.ecommerceit.co.uk. The Landscape is working fine.
none of the page is actually fitting, and I'm having to use margins to bring everything in but struggling. Also it's my first time trying to make it responsive. Can anyone advice what I can use to bring different elements in and make them fit according to device width? i.e. Search, Navigation, Logo, Header Links, Body etc...
I don't want to use Margins but in the interim, it's working.
Mayur

The (or at least one) reason this does not fit is
.page {
position: relative;
width: 100%;
min-width: 750px;
min-height: 100%;
}
in your style.css
Check out a css framework for responsive design, like bootstrap or pure css.

You do not have a viewport meta tag in your header, try adding
<meta name="viewport" content="width=device-width, initial-scale=1">

In case your example page is ghd.ecommerceit.co.uk (without www), the (or at least one) problem is
#wrapper {
width: 1004px;
margin: 0px auto;
overflow: hidden;
text-align: left;
}
in your all.css

Overflow: auto not working or working inconsistently on Android

I'm trying to use overflow: auto in a PhoneGap app on Android, but the scrolling frequently does not work: on Android 4.1 it occasionally sticks; on Android 4.3, items will generally scroll one time (not necessarily the first time), and then never again.
The CSS I'm using to apply overflow is:
.overthrow {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
I was using filamentgroup's overthrow library, but as we are no longer supporting versions of Android/iOS that do not (nominally) support overflow: auto, we're no longer using it.
The scrollable areas work perfectly on iOS and in Chrome.

I found the solution to my problem.
.overthrow {
overflow-x: hidden;
overflow-y: auto;
border :1px solid transparent;
-webkit-overflow-scrolling: touch;
}

android app created using phonegap - background doesn't stay fixed while scrolling

I have an android app that has has this css for the body background:
html, body {
height:100%
margin: 0;
padding: 0;
color: white;
position: static;
text-align:left;
background: URL(images/aVia_Background_new.png) top center black;
background-repeat:no-repeat;
background-size: cover;
background-attachment:fixed !important;
}
When the page is long enough to be scrolled, the background will scroll right off the screen as the page is traversed downward. It acts as though the background-attachment property is set to scroll, but it certainly isn't. The background works properly when the website is viewed in Google Chrome on my desktop, but for some reason when it's translated to Android via Phonegap, it doesn't work properly. Is this a known issue with Phonegap? And does anyone know anything I could try to remedy this? Thanks to any responses. The more ideas the better.

yes.. the problem is with your `background-attachment:fixed;
As far as I know position:fixed is not working fine. I had the same issue while I was trying to do a fixed header/footer in my app. And used iScroll at last

CSS horizontal scrollbars apear in chrome after resizing browser screen

I'm currently developing an responsive website.
I have a very strange problem in Google chrome and on the default android internet browser.
It appears after the website is resized (Making the browser horizontally bigger or change portrait to landscape view on android (over 480 pixels)).
When I resize the browser back to less then 480 pixels a horizontal scrollbar appears.
See for yourself at (loco para saxo .com / new)

The problem is with your css. for navigation You write visibility: hidden; instead of display:none .
.moduletable_shop h3, #navigatie-horizontaal, .logo {
position: absolute;
width: 0;
height: 0;
display: none;
}
Reason to write display:none; because visibility: hidden; hide the element but not remove the element but display:none remove the element.

Dirty way, but it works.
body {
overflow-x: hidden;
}

As sandeep has written, it happens because you use visibility: hidden. If you want to hide stuff, you should use display:none instead. According to w3schools-docs, visibility: hidden is:
The element is invisible (but still takes up space)