@markus said in How to prevent a page from scrolling?:
$(".page__content").css(“overflow”,“none”);
Thanks! That alone won’t work but led me to a solution:
var height;
function lockScroll()
{
height=$(".page__content").css("height");
$(".page__content").css("height","100%");
$(".page__content").css("overflow","none");
}
function unlockScroll()
{
$(".page__content").css("height",height);
$(".page__content").css("overflow","auto");
}
Problem solved!
Hi!
I have a project when the user clicks on a link, a fix div is shown over the page. The problem is that I couldn’t find a way to stop the content underneath from scrolling, which can be distracting.
Here’s what I tried:
$(".page__content").on('scroll',function(ev) { ev.preventDefault(); });
That didn’t work so I tried another strategy:
var divScroll=$(".page__content").scrollTop();
$(".page__content").on('scroll',function(ev) {
$(".page__content").scrollTop(divScroll);
ev.preventDefault();
});
On a desktop this works great but on mobile when the user scrolls, the page starts scrolling and then jumps. It’s very distracting.
Anyone found a way to solve this? Thanks in advance!
Hi!
Is there a way to change the animation of the ons-splitter menu?
If not, anyone knows what functions needs to be changed to change the splitter behaviour? Thanks in advance.
Just a quick reminder to whomever sees this: this tutorial uses DialogFlow V1 that it’s not possible to use in new Google projects and will stop working for everyone on October 23th, 2019.
For more information: https://github.com/dialogflow/dialogflow-cordova-client
@nightrobin Index.html is your entry point, where all the action is :)
You’ll have to include Onsen Javascript, CSS, etc.
Cordova apps are almost the same as a regular website, you just have to include cordova.js and only use local relative paths. The rest is the same.
Here’s an example of a valid Cordova index.html using Onsen:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="cordova.js"></script>
</head>
<body>
<ons-button onclick="alert('Hello World!')">Click Me</ons-button>
</body>
</html>
If you’re lost, give Monaca.io a spin, it does all the nitty-gritty work for you.
Hi!
I’m trying to develop an app that uses cordova-plugin-googlemaps to access Google Maps but in the browser preview I always get the error “Cannot read property ‘google’ of undefined”.
Here’s the JS:
document.addEventListener("deviceready", function() {
console.log("This is never called in browser");
});
document.addEventListener("init", function (event) {
if (event.target.id=='home') {
var mapDiv = document.getElementById("map");
// Next lines = error "Cannot read property 'google' of undefined"
window.plugin.google.maps.environment.setEnv({
'API_KEY_FOR_BROWSER_RELEASE': '<KEY>',
'API_KEY_FOR_BROWSER_DEBUG': ''
});
var map = window.plugin.google.maps.Map.getMap(mapDiv);
}
});
The HTML:
<ons-navigator swipeable id="myNavigator" page="home.html"></ons-navigator>
<ons-template id="home.html">
<ons-page id="home">
<ons-toolbar>
<div class="center" class="white">Map App</div>
</ons-toolbar>
<p>Hi, Onsen with Google Maps!</p>
<div id="map" style="width:100%;height:500px"></div>
</ons-page>
</ons-template>
Since deviceready() also is not called, I think the problem must be with the plugin although the documentation says browser is supported (it uses Google Maps V3 API)
Note: this is a brand new project and besides cordova-plugin-googlemaps, no other third-party plugin are installed.
I haven’t tested yet on a real device but I need desperately browser preview or the development will be a pain…
Thanks in advance!
Is it possible to create valid AMP pages using Onsen?
If not, is it planned for future versions?
Hi!
Has anyone been able to use a autocomplete feature with ons-search-input? I’ve tried a few scripts and don’t work or the results require quite a bit of CSS kludges.
Thanks in advance!
(Note to Onsen developers: autocomplete would be great in the next release)