I am developing a FM Radio streaming app. When user presses in toggle button the streaming should stop when clicked again it should start.
streaming works fine but the portion where user needs to touch is not exactly coming on top of that toggle icon. Its coming slightly some where on the top portion of the icon. The portion I have circled and shown in picture.
How to create Image button with simple css and html for this case
<a href="#" style="position:fixed;top: 1%;left: 5%;" onclick="toggleAudio('http://kantipur-stream.softnep.com:7248');">
<img src="images/toggle.png">
</a>
I'd recommend using a touchststart, or touchend, event instead of click events, as they normally (except in VERY recent mobile Chrome browsers) have a delay. Also, I'd get rid of the link. Just add the event handler to the image itself.
Related
We have an app that uses a Webview to render a text editor (contentEditable) inside of a React Native application. This works well overall, except that the Android back gesture can lead to changes in the selection of text inside the Webview and similar strange behaviors.
We've tried things like having an element along the screen edge that pops out to overlay the Webview when a user begins a back gesture, tried with both onPress and onPressIn.
But by that time, it's already too late to evt.preventDefault() - and the text selection takes place even though the Webview is now covered by another element, I guess because it's technically still the same event that triggered the overlay. (Also tried evt.stopPropagation in desperation.)
Is there any way to prevent text selection within our Webview when a user uses the back gesture?
I've made an app for Android using phonegap and i wanted to make it really full screen and hide/remove the buttons at the bottom of the screen (The back button, the home button and the app switcher button) I know this is possible because the BBC iPlayer app does it when you're viewing a video, but i dont know if it's possible with phonegap, Does anyone know if it is, and if so, could you point me in the right direction
Not possible - I haven't used the BBC Sport app properly, but hazard a guess it uses the device's default player (which is an Android player) and thus this is the only desirable time you want full-screen mode.
Android relies on those buttons - otherwise, how can you exit the app? It's like the home button on iOS - you need it to operate the device.
There are event listeners you can use for the back button and menu button which you can override the default behaviour for:
document.addEventListener('backbutton', function () {
// do something when back is pressed
}, false);
document.addEventListener('menubutton', function () {
// do something when menu is pressed
}, false);
That's about it though. Think in terms of the Samsung Galaxy phones - these are hard buttons and so you can't 'hide' them like you can on stock Android.
The scenario:
I open my app, I click on a screen that has a youtube embeded iframe,
I click play, a blue square is displayed on top of the iframe.
I click back, the app goes to the previous screen but the blue square remains
why does it display this blue square?
how can I get rid of it?
The reason it displays that blue square is to notify the user what link/interactive object the user has clicked. This is built into the the browser so a user knows which link they clicked, particularly on older websites when the links are close together.
If you want to remove the blue outline from all elements add this to your stylesheet:
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
If you want to only remove the blue box on the video, apply the above style to the youtube embed.
I am making cross-platform mobile site using html and jQuery for android, windows and iPhone devices .
The problem Is when I click on an element which is above another element then the click event is also triggered on below element.
I am having a custom popup which opens on center of page and having a button exactly below the button there is also a button on page with click event.
So on clicking the button on popup the event is also fired on button below the popup.
How to prevent this kind of events on Touch devices.
Same is the case with the drop-down when I select or click the option then the below button's click event get fired up.
you should use event.stoppropagation():
$('your-element').on('click', function(e){
e.stopPropagation();
// other stuff here
})
That should solve your problem.
I am implementing pop up screen .But when i click a button My pop up is show .But when i click the field which is present on pop up screen .it show keyboad
along with my background image .I didn't add any background image on that page .I only add background image on different pages but it is show in that page when i scroll the pop up screen
i don't provide my code because it too large.Can you please idea how it is possible .actualy i check on browser it is working fine problem is android device!
This is not a image. Actually jQueryMobile adds a border to the active input field. You can change this via CSS. Please see the link jQuery Mobile border on select text input
It is not an image those lines are the lists that are created automatically for some reason you can check there will be some code for it in your code put it on git.