jquery mobile couple of issues, scoll out of bounds, splash screen and visited links

i have created a mobile site with jquery mobile to go into a phonegap project but i have a couple of questions a more experienced user may be able to resolve for me:

----------- SOLVED -------------

1. I have applied no theme, but when i click on list items Item, the bar stays blue forever ( like a v开发者_运维技巧isited state that never goes ) [ should just have an active and over state ]

----- END SOLVED ------------------

1. you can hold the header bar or footer bar and scroll beyond up or down into what is best described as ( BEHIND the application ) how can i stop users from scrolling out of bounds.

2. I have a Splash / Loading screen and this at first loads great when the application starts, but then it increaes in size and i see a blown up corner of the loading screen and then finally the app comes into view.... please advice

thanks

---

I have an answer for 1.

The css code for the jquery mobile is currently broken for alpha 4.1. A click on a list item stays blue after it has been clicked. No way around it aside from opening up firebug, or chromes developer tools and finding the class and removing it from the css file.

I have notified them of this issue, and i believe others have as well. So a future version will correct it hopefully.

---

As for your #1 question...

$('a').live('click',function() {$(this).removeClass( $.mobile.activeBtnClass )});
$('li').live('click',function() {$(this).removeClass( $.mobile.activeBtnClass )});

I noticed on my site that links (that I was making into buttons with data-role="button") and list items would stay blue after pressed. The above code removed this issue for me after placing it in the head of the document.

---

----EDIT----

For the remaining two questions:

Some example code would be good as well as a target device but it sounds like it's a viewport meta tag issue. Here is the viewport I've settled on:

< meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" >

This viewport sizes the page to the device-screen width and height and does not allow zooming. You can allow zoom by changing the "maximum-scale=1.0" to a larger value (iPhone/Safari currently supports up-to 10.0).

As for splash screens, Xcode 4.0.2 (iPhone development) made it easy to just put a Default.png file into the /Resources/splash/ directory. If you are using Xcode make sure to use the Phonegap project wizard when you make your project because Phonegap makes these files by default, making it easy for you to replace the images. I use Eclipes for my Android development which is also easy to add a splash screen to your Phonegap app. Simply place the following code in the /src/App.java file directly after the "onCreate" function and before the "super.onCreate(savedInstanceState);" line:

super.setIntegerProperty("splashscreen", R.drawable.splash);

This will require putting an image named splash.png (I think any file extension will work) in the /res/drawable-*dpi directories (there are usually hdpi, mdpi, and ldpi directories).

NOTE: I'm using Phonegap 0.9.5.1 however this should work with anything 0.9.2 and above.

----END EDIT----

---