【実験】マネーボタンを非表示にするとどうなるか？

マネーボタンは指先１つで送金・支払いのできるシンプルなシステムですが、
WEBページのレイアウトや用途によっては「ページの読み込み直後はマネーボタンを非表示」にしておきたい場合もあります。

この記事では、
・マネーボタンを表示／非表示にする方法
・その際に発生する障害と、その障害を回避する方法
・実用に適した方法
などを記述します。

マネーボタンを非表示にすると発生する障害

最初に障害について記載しておきます。

マネーボタンを非表示にするにはjavascriptを使用すると簡単に行えます。
しかし、支払う金額によっては下記のような障害が発生します。

マネーボタンの横幅が小さすぎて、すべての桁が表示できていません。
リロード後、マネーボタンがロードされる前に「表示」を押すと正常に表示されます。

それでは実際にマネーボタンを使って表示／非表示の実験を行ってみましょう。

「display：none」でマネーボタンを非表示にする方法

下記のマネーボタンは

---

  通常表示    

---

  実験 A  

マネーボタンが最初から隠されている場合

 

---

  実験 B  

マネーボタンが最初から隠されていない場合

 

---

使用されているJavascriptのソースコード

 

Aタグを使用して表示を切り替えるためのHTMLコード

クリックで表示

クリックで非表示

クリックで更新

 

マネーボタンを表示するHTMLコード

 

「display：none」でお金ボタンを非表示にすると、実験Aで確認できる障害が発生します。

以下は、この障害の解決策です。

マネーボタンを非表示する手段を  display:none  から  visibility: hidden  に変更します。

「visibility：hidden」でマネーボタンを非表示にする方法

  実験 C  

マネーボタンが最初から隠されている場合

 

---

  実験 D  

マネーボタンが最初から隠されていない場合

 

---

ただし、この方法では空白スペースができてしまいます。

 

使用されているJavascriptのソースコード

 

Aタグを使用して表示を切り替えるためのHTMLコード

クリックで表示

クリックで非表示

クリックで更新

 

マネーボタンを表示するHTMLコード

 

この空白スペースの問題を解消するには、DIVタグで「position：absolute」を指定します。

「position：absolute」を使用して空白の問題を解決する方法

  実験 E    

DIVタグを使用してブロックを作成し、マネーボタンに置​​き換えます。

 

---

使用されているJavascriptのソースコード

 

Aタグを使用して表示を切り替えるためのHTMLコード

クリックで表示

クリックで非表示

クリックで更新

 

マネーボタンを表示するHTMLコード

	

		
DIVの高さ height : 50px でピッタリ
	

	

	

	

 

実際の使用に適した方法

  実験 F    

ボタン１つでシンプルに表示させています。
この方法は実際の使用に最適だと言えます。

---

使用されているJavascriptのソースコード
（青いブロックボタンとマネーボタンそれぞれの表示が瞬間的に重ならないように、マネーボタンが出現するタイミングを0.5秒遅らせています）

 

使用されているスタイルシート

 

マネーボタンを表示するHTMLコード

	

		Money Button