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.
Related
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
I am using ionic framework with cordova platform. The css for active state of an element (div, button or a) works fine in browser during development/testing but not at all in android device/emulator
i have defined some classes
.bg-dark {
background: #333333 !important;
}
.bg-active-darkBlue:active {
background: #16499a !important;
}
and following html
<a class="fg-white bg-active-darkBlue button" style="background-color:#3B5998;">Sign in with Facebook</a>
even tried this (got on ionic forum)
<a ng-mousedown="class='bg-active-darkBlue'" ng-mouseup="class='bg-dark'" menu-close class="fg-white {{class}}">Sign in with Facebook</a>
tried for a,div and button tags.
still not working on android, only works in browser, please help.
By experience, angular ng-mousedown andng-mouseup events do not fire up on the mobile device. My experience was ionic 1.6.4 on iOS.
However, on-touch and on-release works flawlessly well. So just replace ng-mousedown and ng-mouseup with on-touch and on-release, respectively.
<a on-touch="class='bg-active-darkBlue'" on-release="class='bg-dark'" menu-close class="fg-white {{class}}">Sign in with Facebook</a>
Here is the pointer to the ionic reference documentation on the on-touch and on-release events.
Hope this helps..
Apparently, the "right" way of doing this is according to
phonegap-tips.com is to add an ontouchstart="return true;" on the element.
eg.
<a class="bg-active-darkBlue" ontouchstart="return true;">:active now works in cordova</a>
That worked for me, so I hope it works for you too.
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 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 developed android phonegap app using html and jquery.I need to show tooltip for textbox.so i tried using mouseover in jquery,but its working like normal click event.After i click the textbox i am getting the alert.I have tried in javascript also.
Here is my code:
$('#text').qtip({
content: "element",
show: 'mouseover',
hide: 'mouseout'
});
<input type="text" id="text" placeholder="first"/>
<script src="jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
Please kindly help me.Thanks in Advance.
You don't have any mouse on the Phone, so there can not be any "mouse over". I know for iOS there is a movement event, maybe something similar on Android that could be useful.