ファイルアップロードが可能な 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も見ています
-
「環境が人を育てる」って本当?環境によって人格や生き方は本当に変わるのか
環境が人生に与える影響は実際どれほどのものなのか、専門家の田宮由美さんに伺った。
-
HTMLタグに複数のクラスを設定する方法がわからない
JavaScript
-
HTMLで作った時報アプリが動きません
JavaScript
-
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
-
4
disabled プロパティが表示されない原因が分からない
JavaScript
-
5
Javascriptエラーの原因が分からない
JavaScript
-
6
JavascriptのHTMLクラス表示について
JavaScript
-
7
二次元配列を使って順位をだすときに、同点の場合の順位をだす方法を教えて下さい。
JavaScript
-
8
コードレビューをお願いします。
JavaScript
-
9
かっこいいウェブを作るテク
HTML・CSS
-
10
プログラミング言語の制作方法について
C言語・C++・C#
-
11
【JavaScript?HTML?】Webページでこのページは戻ることは出来ませんと表
JavaScript
-
12
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
13
二次元配列の中の各行の要素をランダムに並べ替えたいです。
JavaScript
-
14
Cookieに保存されない
JavaScript
-
15
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
-
16
var exports = exports || {}; ← この意味を教えてください。
JavaScript
-
17
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
18
テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい
HTML・CSS
-
19
Q&A掲示板の入力フォームに文字数制限を設けて入力可能な文字数を表示したい
JavaScript
-
20
ブラウザ自体の事じゃなくてJavaScriptで書かれたブラウザ上で動作するアプリのことをなんといい
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
三菱GOTの画面切り替えについて
-
C# ログイン画面からメイン画面...
-
Javaプログラミングの質問にな...
-
Ctrl+F4を無効にしたい
-
【swing】ボタンクリックにより...
-
Java-jspの画面入力値保持について
-
ポップアップでウィンドウを表...
-
サブミット後、自動的に画面を...
-
MFCプログラミング
-
アドレスバーに引数を表示させ...
-
【JSP】input typeで入力された...
-
非アクティブな画面を操作する...
-
Strutsのデータ受け渡しについて
-
子画面から孫画面をポップアッ...
-
登録後、呼び出し元ページに戻...
-
C言語で今まで表示していた画面...
-
VBS/HTA:画面のサイズを取得す...
-
JSPから出力されたHTML画面のcl...
-
変数名とDBカラム名の関係性に...
-
HTTPステータスコードを取得(VB...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Java-jspの画面入力値保持について
-
三菱GOTの画面切り替えについて
-
C言語で今まで表示していた画面...
-
ServletからServletへの値渡し
-
遷移元を判定したい!
-
C# ログイン画面からメイン画面...
-
ASP.NET 画面遷移前の状態を保...
-
Strutsの情報保持の仕方について
-
登録後、呼び出し元ページに戻...
-
ServletからHTMLページへの遷移...
-
JAVAのセッション変数の上書き...
-
system("cls")について
-
画像の縦横比固定の計算方法。
-
ブラウザアドレスバーからのURL...
-
画面を隠す・消す方法を教えて...
-
strutsで、JSP→アクションクラ...
-
セッション切れでのリクエスト...
-
MFCプログラミング
-
javaのstrutsを使った画面遷移...
-
FormのsubmitでFormの内容がnull
おすすめ情報