ファイルアップロードが可能な Q&A 掲示板を作成しており入力画面のボタン送信の際に時間がかかる為、確認画面に切り替わるまでローディングアニメーション画像を表示したいと考えております。
ボタンの上に重なる形で実装したいのですが、座標を指定する方法以外で画像をボタン上に表示させる方法はありますでしょうか?
座標はスマホやタブレットの端末ごとに異なる為、別の方法で考えております。
Ajax を使う方法もあると思うのですが入力画面から確認画面までを非同期通信で行っているため、速度を考えて極力避けたいです。
※該当コード(bbs_quest_input.php)
https://wandbox.org/permlink/hYhRZBA0NG6HbOIw
※ローディングアニメーション
https://nagashima.kyusan-u.ac.jp/note/loading-an …
※送信が完了するまでローディング
https://moshashugyo.com/media/loading
No.1ベストアンサー
- 回答日時:
こんばんは
ご質問の内容が、よくわかりませんけれど・・・
>ボタンの上に重なる形で実装したいのですが、座標を指定する方法以外
>で画像をボタン上に表示させる方法はありますでしょうか?
という事であるなら・・
両方の要素を同時に見せることはないのでしょうから、初めから重ねてレイアウトしておいて、状況に応じて一方(=上になっている要素)の表示/非表示を制御すれば良いのではないでしょうか?
(アニメーションを何で行っているのかも不明ですけれど、例えばGIFみたいなものとして)
<wrapper要素>
<ボタン要素 />
<アニメーション要素 />
</wrapper要素>
とでもしておいて・・
CSSで、
wrapper要素 { position: relative; }
アニメーション要素 { position:absolute; top:0; left:0; }
としておけば、ボタンとアニメーションが同じ位置に表示されます。
座標指定と言えば座標指定ですけれど、ブラウザ幅などには影響されずにレイアウトできますので、問題はないものと想像します。
あとは、アニメーション要素の表示/非表示を制御すれば良いでしょう。
(順序を逆にしても同じことですが・・)
アドバイスありがとうございます。参考コードとても助かりました。
プランを変更して画像を表示させる方法からボタンに動作を加える方法にいたしました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX 非同期通信で掲示板を作る際の送信画面はフォームである必要はありますでしょうか? 2 2023/10/30 01:34
- AJAX WordPressで画面還移なしの掲示板を作成する方法が分かりませんアドバイスお願い致します。 1 2023/10/19 15:15
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 画面遷移を行わずに同一ページでHTML表示を切り替えたい 3 2023/10/07 20:52
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- PHP 入力フォームの空白や改行を制限したい 1 2024/01/08 21:29
- JavaScript disabled プロパティが表示されない原因が分からない 2 2024/02/10 21:44
- その他(データベース) Q&Aフォームを作成したいのですが、どう設計してよいか分かりません、アドバイスお願い致します。 1 2023/07/27 19:04
- AJAX 非同期通信を使うタイミングが分からず困っております、アドバイスお願い致します。 2 2023/10/24 02:28
- 防犯カメラ・監視カメラ・小型カメラ VHSを高画質な動画ファイルにしたいです。 3 2022/05/06 12:08
このQ&Aを見た人はこんなQ&Aも見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
disabled プロパティが表示されない原因が分からない
JavaScript
-
HTMLタグに複数のクラスを設定する方法がわからない
JavaScript
-
-
4
【JavaScript?HTML?】Webページでこのページは戻ることは出来ませんと表
JavaScript
-
5
コードレビューをお願いします。
JavaScript
-
6
Cookieに保存されない
JavaScript
-
7
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
8
かっこいいウェブを作るテク
HTML・CSS
-
9
プログラミング言語の制作方法について
C言語・C++・C#
-
10
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
-
11
HTMLで作った時報アプリが動きません
JavaScript
-
12
Javascriptエラーの原因が分からない
JavaScript
-
13
変数名をどのようにつけるのが良いかアドバイスお願い致します
JavaScript
-
14
var exports = exports || {}; ← この意味を教えてください。
JavaScript
-
15
JavascriptのHTMLクラス表示について
JavaScript
-
16
二次元配列を使って順位をだすときに、同点の場合の順位をだす方法を教えて下さい。
JavaScript
-
17
JavascriptでDom XSSの脆弱性対策を行いたい
JavaScript
-
18
ホームページの事でおしえてください
CGI
-
19
フロントエンドフレームワークの定数について
JavaScript
-
20
javascriptでbgmを自動再生する方法を教えてください。
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
三菱GOTの画面切り替えについて
-
遷移元を判定したい!
-
Java-jspの画面入力値保持について
-
ServletからServletへの値渡し
-
Javascriptのhistory.back()が...
-
ASP.NET 画面遷移前の状態を保...
-
プログラミングで例えばゲーム...
-
JAVAのセッション変数の上書き...
-
戻るボタン
-
Struts1.3.10でAjax連携
-
C# ログイン画面からメイン画面...
-
【swing】ボタンクリックにより...
-
FormのsubmitでFormの内容がnull
-
Strutsの情報保持の仕方について
-
PDFファイルを表示するサブ...
-
登録後、呼び出し元ページに戻...
-
location.hrefでページ切替時の...
-
ポップアップでウィンドウを表...
-
java初心者です。 画面Aで情報...
-
system("cls")について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
三菱GOTの画面切り替えについて
-
C# ログイン画面からメイン画面...
-
C言語で今まで表示していた画面...
-
画面遷移を行わずに同一ページ...
-
Java-jspの画面入力値保持について
-
プログラミングで例えばゲーム...
-
フロントエンドフレームワーク...
-
ASP.NET 画面遷移前の状態を保...
-
遷移元を判定したい!
-
画像の縦横比固定の計算方法。
-
FormのsubmitでFormの内容がnull
-
画面を隠す・消す方法を教えて...
-
HTMLのINPUTから画面表示
-
登録後、呼び出し元ページに戻...
-
ボタンを押したあとに画像を表...
-
Javascriptのhistory.back()が...
-
ServletからServletへの値渡し
-
セッション切れでのリクエスト...
-
アドレスバーに引数を表示させ...
-
system("cls")について
おすすめ情報