質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

受付中

toastをスクロールしても常に画面下部に表示したい

hitomi_
hitomi_

総合スコア0

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

1回答

0評価

1クリップ

13閲覧

投稿2020/03/09 02:32

編集2022/01/12 10:55

スマホアプリでtoastを実装したいと思い、OnsenUIのtoastを書いてみたのですが、toastの表示位置がスクロールしない状態の最下部で固定されています。
スクロールしても最下部に表示させたいのですが、色々調べてみてもわかりませんでした。

OnsenUI以外のtoastでtoastrを使ってみましたが下記のエラーが出てしまいます。
ReferenceError: Can't find variable: toastr

javascript

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> <script language="javascript" type="text/javascript"> //ローカルストレージに保存する function Add(account_no) { //フォームナンバーを変数に入れる var idNo = account_no.id;//これだと「submit_0」 idNo = idNo.replace(/[^0-9]/g, '');//数字を取り出す //ローカルストレージに保存する var serviceName = document.getElementById('service_name_' + idNo).value; var serviceId = document.getElementById('service_id_' + idNo).value; var servicePass = document.getElementById('service_pass_' + idNo).value; localStorage.setItem('service_name_' + idNo, serviceName); localStorage.setItem('service_id_' + idNo, serviceId); localStorage.setItem('service_pass_' + idNo, servicePass); //オンラインストレージに登録 var account = monaca.cloud.Collection("Account"); console.log(idNo); account.findOneMine(monaca.cloud.Criteria("idno==?", [idNo]), {propertyNames: ["idno", "service_name", "service_id", "service_pass"]}) .done(function(item) { if(item != null){ item.service_name = serviceName; item.service_id = serviceId; item.service_pass = servicePass; item.update('success') .done(function(result) { console.log('Updating success'); callDialog(); }) .fail(function(err) { console.log("Err#" + err.code +": " + err.message); }); } else { account.insert({ idno: idNo, service_name: serviceName, service_id: serviceId, service_pass: servicPass}) .done(function(insertedItem) { console.log('Insert is success!'); }) .fail(function(err) { console.log('Insert failed!'); }) } }) .fail(function(err) { }); function callDialog(){ toastr.info('登録完了');   } </script>

同じく、iziToastを試しても同じエラーが出ました。
ReferenceError: Can't find variable: iziToast

環境:monacaIDE monacaデバッガー iphone7

どのような方法でも良いので、スクロールしても画面下部に表示されるtoastの実装の仕方を教えてください。
お願いします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Onsen UI

HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。