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
Related
I wrote the code for mini cart. This is working fine in desktop but in mobile device its not working and code is showing as its in mobile browser. I am using below code.
<script>
jQuery(document).ready(function(){
jQuery('#mini-cart').mouseover(function(){
jQuery( this ).addClass('open');
jQuery( this ).children('.dropdown-menu').css('display','block');
}).mouseout(function() {
jQuery( this ).removeClass('open');
jQuery( this ).children('.dropdown-menu').css('display','none');
});
});
</script>
Please someone help me on this issue.
Thanks
you wrote mouseover() and mouseout() function. So it will work only in desktop. How do you access mouse in mobile ..?
try by changing open script tag to
<script type="text/javascript">
I got the error. This is designing issue. Designer put * and display: block in css that was applying on all elements. like.
.myclass > * {
display: block;
}
This is the issue that's why jquery is showing in browser.
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.
I am trying to make a mobile app in html 5 using PhoneGap.
For this i am going to use button(like the menu button)
When i am searching in google i can find code, but it seems to me that only doesnt work for me.
My code so far from what i have tried(copied and not working):
http://pastebin.com/0U6ipFa7
Is there something wrong in the code?
Do i need to change something in the config so this will work?
document.write() can only be used when your script is inline with the HTML, for example:
<html>
<head>
<title>Foo</title>
</head>
<body>
<script language="javascript">
document.write("bar");
</script>
</body>
</html>
In your case you should use innerHTML:
<html>
<head>
<title>Foo</title>
<script language="javascript">
function onMenuKeyDown() {
document.getElementById("barCntr").innerHTML += "<h1>Menu</h1>";
}
</script>
</head>
<body>
<div id="barCntr"></div>
</body>
</html>
document.addEventListener("deviceready", function () {
document.addEventListener("menubutton", menuKeyDown, true);
}, false);
function menuKeyDown() {
alert('Menu button pressed.');
}
Refer this phonegap link for reference.
You should install phonegap plugins first.
Follow this tutorial here.
Install phonegap/cordova here and even in Eclipse IDE install phone-gap plugin by going to help --->eclipse market
for getting menu option in the mobile on click on mobile option you are supposed to get like setting ,logout....
menu option...
I have implemented a slide show using ResponsiveSlides.js V1.54. I am very impressed with the slideshow but I have found on a Samsung Galaxy Ace phone the page jumps to the top of the page when the slide changes? It works fine on all other devices I have been able to test the slideshow on.
I have a development version of my slideshow at:
http://brixhamgigclub.co.uk/multimedia-new.php?id=9
my js is in the head section of the html
Any ideas to fix this would be appreciated.
Bob
I have resolved this problem by methodically removing bits of my code. It appears there maybe contention with the Google Translate code used on my site.
I have removed the meta statement
and the html
<div id="googleTranslate">
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'bg,cs,cy,da,de,el,en,es,et,fi,fr,ga,hr,hu,it,lt,nl,no,pl,pt,ru,sk,sl,sr,sv', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a /element.js?cb=googleTranslateElementInit">
</script>
</div>
and problem resolves.
Bob
I have a WebView inside my android app, and this WebView is running a website with a fair bit of Javascript on it. Users have reported high power consumption when my app is running in the background, and I expect it is due to this javascript. However, I don't want to completely unload or remove the WebView, as this would hurt the time-to-resume.
Is there any way to selectively turn off Javascript and/or disable the WebView completely when the app is in the background (onPause())?
Accoring to http://www.mcseven.me/2011/12/how-to-kill-an-android-webview/ the only working way is to redirect to empty page with no javascript (and return back after resume).
In case of PhoneGap, the page should contain a code to return itself:
<!DOCTYPE html><html><head>
<script type="text/javascript" src="js/phonegap/cordova-2.9.0.js"></script>
<script type="text/javascript" src="js/jquery/jquery-1.9.1.min.js"></script>
</head><body>
<script type="application/javascript">
$(document).on('deviceready', function() {
$(document).on('resume', function() {
return history.back ? history.back() : history.go(-1);
});
});
</script>
</body></html>
Update: The above is for Cordova 2.x.x. In Cordova 3.x.x (not sure if since 3.0.0, but for sure in currect 3.7.x) you can simply add KeepRunning preference in your configuration XML:
<preference name="keepRunning" value="false" />
This will pause all JS timers until the APP is resumed again; see https://stackoverflow.com/a/21629586/2011448.