ファイルアップロードが可能な 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も見ています
-
外出時に「待たせる妻」vs イライラする「待つ夫」は日本だけ?見習いたい海外事情
夫の家事参加に積極的なイメージのある海外でも、同様の事例はあるのか。結婚カウンセラーの佐竹悦子さんに伺ってみた。
-
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
disabled プロパティが表示されない原因が分からない
JavaScript
-
HTMLタグに複数のクラスを設定する方法がわからない
JavaScript
-
-
4
【JavaScript?HTML?】Webページでこのページは戻ることは出来ませんと表
JavaScript
-
5
コードレビューをお願いします。
JavaScript
-
6
かっこいいウェブを作るテク
HTML・CSS
-
7
プログラミング言語の制作方法について
C言語・C++・C#
-
8
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
9
Cookieに保存されない
JavaScript
-
10
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
-
11
HTMLで作った時報アプリが動きません
JavaScript
-
12
Javascriptエラーの原因が分からない
JavaScript
-
13
var exports = exports || {}; ← この意味を教えてください。
JavaScript
-
14
変数名をどのようにつけるのが良いかアドバイスお願い致します
JavaScript
-
15
JavascriptのHTMLクラス表示について
JavaScript
-
16
二次元配列を使って順位をだすときに、同点の場合の順位をだす方法を教えて下さい。
JavaScript
-
17
JavascriptでDom XSSの脆弱性対策を行いたい
JavaScript
-
18
フロントエンドフレームワークの定数について
JavaScript
-
19
ホームページの事でおしえてください
CGI
-
20
javascriptでbgmを自動再生する方法を教えてください。
JavaScript
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
三菱GOTの画面切り替えについて
-
C言語で今まで表示していた画面...
-
Java-jspの画面入力値保持について
-
ホームページビルダーが遅い!...
-
遷移元を判定したい!
-
C# ログイン画面からメイン画面...
-
SessionとViewStateについて
-
javaでプリントスクリーン(ス...
-
"+"文字が" (スペース)"に文字...
-
Javascriptのhistory.back()が...
-
GUIとは何でしょうか?(定義)
-
プログラミングで例えばゲーム...
-
Strutsで画面遷移させない。
-
system("cls")について
-
ASP.NET 画面遷移前の状態を保...
-
ブラウザ表示しない設定のPDFの...
-
画面を隠す・消す方法を教えて...
-
URLはそのままで、リンクをクリ...
-
alertでHTMLのコードが出て...
-
モーダル画面の親をクリック時...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
三菱GOTの画面切り替えについて
-
画面遷移を行わずに同一ページ...
-
プログラミングで例えばゲーム...
-
フロントエンドフレームワーク...
-
Java-jspの画面入力値保持について
-
遷移元を判定したい!
-
ASP.NET 画面遷移前の状態を保...
-
Googleキーワードについて キー...
-
Javaプログラミングの質問にな...
-
C言語で今まで表示していた画面...
-
ボタンを押したあとに画像を表...
-
セッション切れでのリクエスト...
-
C# ログイン画面からメイン画面...
-
JavaScriptでページが更新され...
-
ServletからServletへの値渡し
-
ZOOMでオンラインミーティング
-
登録後、呼び出し元ページに戻...
-
サブミット後、自動的に画面を...
-
アドレスバーに引数を表示させ...
-
Beautiful Soupのインストール...
おすすめ情報