Develop Reference

how to show a script div with a button jquery - fixed

I got a short external script code I want to show on Button click, (onload hidden) using jquery or JS. the button works on simple div or iframe.
the weird is it works well on the browser (with emulator), I can't get this to work on the the device itself :-/
(fixed question)
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use device APIs
$("#showBitcoin").click(function(){
$("#coindesk-widget").show();
});
$("#showRates").click(function(){
$("#iframe").show();
});
};
</script>
<button id="showRates">Live Exchange rates</button>
<button id="showBitcoin">Bitcoin rate</button>
<div id="coindesk-widget"></div>
<script type="text/javascript" src="js/coindesk-widget.min.js"></script>
css:
#iframe{
display:none;
}
#coindesk-widget{
display:none;
}
comment:
The button shows the iframe, can't get the script to show at all
it's a live bitcoin widget graph (CoinDesk). Thanks

There has been a fix for my question,
refering to the original id named "coindesk-widget"
$("#showBitcoin").click(function(){
$("coindesk-widget").show();
This fixed the function it works well.
under PhoneGap desktop tool. but still can't get this to work on samsung device

Angular Google Maps running in Cordova/Phonegap issue

I am doing a project with the following techs: phonegap (v 4.1.2), angular (v 1.3.0) and onsen ui (v1.2.1).
I am really having a hard time to include Angular Google Maps on it. I am really lost because I am no receiving any log to follow.
I am going to write the steps I have followed in order to hopefully anyone notice where is the mistake.
First, I always like to start with a simple example, so I decided to create a sample project. I used this:
http://angular-ui.github.io/angular-google-maps/#!/use
I create my phonegap project structure, follow the instructions and voilá, the map appears correctly.
Then, it's time to include the code in the project. it consists in the following elements (I will write which I think are important to the issue, if any more info is required I will add it later)
File: index.html
<script src="components/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="components/lodash/lodash.js"></script>
<script src="components/angular-google-maps/angular-google-maps.js"></script>
<script src="cordova.js"></script>
<!--modules-->
<script src="app.js"></script>
<!--controllers-->
<script src="controllers/updateCtrl.js"></script>
<script src="controllers/geoCtrl.js"></script>
File: geolocalizacion.html
<ons-page on-device-backbutton="menu.setMainPage('main.html', {closeMenu: true});">
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggle()">
<ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">Geolocalización</div>
</ons-toolbar>
<div id="map_canvas" ng-controller="GeoCtrl">
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
</div
</ons-page>
File: app.js
//App module
angular.module('app', ['onsen', 'angularLocalStorage', 'ngSanitize', 'uiGmapgoogle-maps']);
//Configs
//Google Maps SDK
angular.module('app').config(function(uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'xxx',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
});
File geoCtrl:
angular.module('app').controller('GeoCtrl', function($scope, uiGmapGoogleMapApi, uiGmapLogger){
console.log('Loading geoCtrl');
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
console.log('map: ', maps);
});
});
It seems to be all correct, nothing is shown is logs. I have used the same api key for the sample app and the project, but I think this is allowed. The logs 'Loading geoCtrl' is appearing, and the 'map:' is appearing blank, but the same occurs in the sample app but even though the map appears.
Any idea what can I test, what is wrong or any little hint. I am pretty new to angular developement, I think this is importan to mention to.
Thanks in advance guys for your time.
Regards,
Néstor

Finally I found out what was happening. There was no problem with the code posted. The error was mine, I was missing some css code to display the map.
css:
.angular-google-map-container { height: 400px; }

JQM - data-dom-cache="true" on page not loading js files

I got one strange behavior from JQM page.
I am using phonegap-android 4.4.2 with eclipse IDE.
Page code :
<html>
<head></head>
<body>
<div data-role="page" id="folfirstForm" data-dom-cache="true">
<link rel="stylesheet" href="../../css/follow_up.css">
<script src="../../js/addProdLine.js"></script>
<script type="text/javascript">
$(document).off("pageshow", "#folfirstForm").on("pageshow", "#folfirstForm", function() {
alert("First form loaded!");
AddElement();
});
</script>
----Some body----
</body>
</div>
</div>
</html>
You can see on code that I have put data-dom-cache="true" as per my requirement. I have also include the js file named as addProdLine.js which contains functions that i required, (for e.g. The AddElement() is from include file it self).
Now, when i am visiting this page first time all the functionality works very well. On second visit on same page I am getting the previous state of form which is expected as i have put data-dom-cache="true". But Might be due to data-dom-cache="true" my external js files are not being loaded on the second time visit on same page. I want, that on every visit ,my js file should run.

Jquery mobile only loads tag once when whole document is loaded. After the document is loaded if you will click on other links then only content part data-role=page will be refreshed through ajax along with data transition effect. Hence either add all your js script in a file and add it into head tag or stop loading other pages through ajax using following option:
<a href="#" data-ajax=”false”>Without Ajax</a>
But if you will disable content loading using ajax then link will work as it works in normal webpage and also transition effect will be not exist.
Edit:
One Alternate way could be: you can append some random values to the path of your JS files.
<script src="../../js/addProdLine.js?Q=<?php echo time(); ?>"></script>

jQuery slideToggle Android Lag

I am trying to make a slideToggle work properly on the Android devices. I mean... it works fine, but the slideToggle lags or chops. Here is my code and maybe you guys can help me with this.
EDIT
I have been using PhoneGap, and done some research. PhoneGap, apparently, doesn't do well with rendering a lot of media. I chopped down half my content, and realized that the effect works perfectly. However; the effect still chops. Is there a way to optimize PhoneGap to properly render media? I have tried CSS3, but the rendering is still horrible. I changed my images format to GIF, and still no luck. What is my alternative, here? If PhoneGap is the issue, then what should I do to create my Web Based apps?
jQuery
$( ".info" ).click( function(){
$( this ).prev( ".tut-box" ).children( ".info-txt" ).slideToggle( "slow" );
$( this ).toggleClass( "active" );
if ( $( this ).text() == "HIDE INFO" )
$( this ).text( "SHOW INFO" )
else
$( this ).text( "HIDE INFO" );
});
HTML
<div class="tut-box">
<img src="blah.jpg" />
<span class="arrow"></span>
<div class="info-txt">
<div class="txt">
DISPLAY MESSAGE GOES HERE!
<div class="fade"></div>
</div>
</div>
</div>
<div class="info">SHOW INFO</div>

I solved the problem by optimizing my script to CSS3 implemented with jQuery 2. So far; no slow animations or slow actions. I also replaced this...
$( ".info" ).click( function(){
to this...
$( ".info" ).on( 'touchstart', function(){
It makes tapping actions respond faster. I've discovered this within posts and jQuery Mobile books. Thanks, for the help, Flash Thunder. We tried xD

I had alot of problems with smooth jQuery animations on Android tablets, but I found a solution that worked for me. Try using this plugin - it basically converts every animation it can to transitions.

Webkit tap highlight color in ASP.NET 3.5 Pages including a ScriptManager

We're developing a jQuery Mobile application using ASP.NET 3.5, and we've run into a problem with lots of large, strangely shaped, and quite distracting tap highlights. I discovered that the inclusion of a ScriptManager in the page seemed to be the culprit, in our case. Here's a simple .aspx page that should reproduce the problem (I'm testing on Android 2.2.2 and iOs 4.2.6).
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManager"></asp:ScriptManager>
<h1>Oh Hai!</h1>
</form>
</body>
</html>
With the ScriptManager, that h1 tag will produce a tap highlight each time it's touched. Lose the ScriptManager, and the tap highlight goes away. Assuming that the ScriptManager is necessary, is there anything better than doing something like:
<script type="text/javascript">
$(function () {
$('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
})
</script>
Adding a css rule to our stylesheet doesn't work, because the client-side initialization of the ScriptManager seems to override it somehow.

ScriptManager is adding a click handler to the form element, so in fact webkit is intercepting clicks on the form - H1 just happens to be within it from a DOM perspective.
You could prove this by moving the <form> tag after the <H1></H1> tags, naturally that won't be practical for all your elements.
I think the approach of adding "-webkit-tap-highlight-color" is valid but perhaps you need to do this after script manager does its stuff:
$(document).ready(function(){
$('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
});
You could also experiment with adding the css inline to specific form/h1 elements just to eliminate css cascading or script issues.