Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Onsen Ui

Outside Javascript Not Work With Onsen Framewowrk

Post a Comment
i am use onsen.ui framework but when i include any script he do not working how i do accept include javascript in the framework

Solution 1:

The problem you are experiencing is not that the javascript is not working but rather you're just trying to scroll the wrong element.

Onsen UI's ons-page elements create their own content element (div.page__content) and that is used for scrolling purposes. So you can just scroll that element. However it does not have a method scrollTo, rather you can just set the scrollTop and scrollLeft properties like this:

document.querySelector('.page__content').scrollTop = 140; // for verticaldocument.querySelector('.page__content').scrollLeft = 140; // for horizontal

If you use this for your scrollWin function you will be fine.

Also note - if you want to use horizontal scrolling you should have some content which is wider, so that you can actually scroll the element.

For the purpose of the snippet I inserted the following:

<divstyle="position:absolute;width: 200%;height: 10px;"></div>

I think you get the gist of it.

And finally if you want to execute something when onsen is ready - for example if you want to call your autoscroll function you can do:

ons.ready(function(){ ... });

Here is your modified snippet:

window.console = window.console || function(t) {};
span{
  color:red;
  }
<html><head><metacharset="UTF-8"><title>CodePen - Navigator</title><linkrel='stylesheet prefetch'href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css'><linkrel='stylesheet prefetch'href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css'><script>window.console = window.console || function(t) {};
</script></head><bodytranslate="no" ><ons-navigatortitle="Navigator"var="myNavigator"><ons-page><ons-toolbar><divclass="center">Simple Navigation</div></ons-toolbar><divstyle="text-align: center"><br><buttononclick="scrollWin()">Click me to scroll horizontally no work!</button><br><br><script>functionscrollWin() {
    document.querySelector('.page__content').scrollTop = 140; // for verticaldocument.querySelector('.page__content').scrollLeft = 140; // for horizontal
}
</script><divstyle="position:absolute;width: 200%;height: 10px;"></div><span><br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test</span></div></ons-page></ons-navigator><scriptsrc='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js'></script><scriptsrc='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js'></script><script>
      ons.bootstrap();
      //# sourceURL=pen.js</script></body></html>

Post a Comment for "Outside Javascript Not Work With Onsen Framewowrk"