Simplicityの特徴 › フォーラム › Simplicityについての質問 › スライドインメニュー表示時にスマホでコメント入力がしにくいとの声がユーザーからありました
- このトピックには20件の返信、2人の参加者があり、最後ににより10ヶ月、 1週前に更新されました。
-
投稿者投稿
-
-
zaxゲスト
お世話になります。
早速ですが、
ただいま【モバイルメニューでスライドインライト(ボタン下)】を使わせて頂いているのですが、
スマホでコメント入力がしにくいとの声がユーザーからありました。
表示されているメニューで、コメント入力のスペースが少し失われるということだと思います。たとえばなんですが、コメント入力欄にフォーカスした際だけ、スライドインライト(ボタン下)を非表示には出来るのでしょうか?
-
hidekichiゲスト
もしコメント入力中でもコメント欄からfocusが外れないのであれば、
■jQuery
(function($){ $(function(){ $("#comment-area").find("textarea") .on("focus", function(){ $("#footer-mobile-buttons").addClass("active"); }) .on("blur", function(){ $("#footer-mobile-buttons").removeClass("active"); }); }); })(jQuery);
■css
#footer-mobile-buttons {
transition: .3s ease;
}
#footer-mobile-buttons.active {
transform: translate(0,200%);
}こんなのでどうでしょうか?
別途非表示用ボタンを作れば、これら動作はどこでも可能です。 -
hidekichiゲスト
#footer-mobile-buttons { transition: .3s ease; } #footer-mobile-buttons.active { transform: translate(0, 200%); }
コード入れるの忘れてました。
-
zaxゲスト
hidekichi様
早速のご返答有難うございます!
(function($){ $(function(){ $("#comment-area").find("textarea") .on("focus", function(){ $("#footer-mobile-buttons").addClass("active"); }) .on("blur", function(){ $("#footer-mobile-buttons").removeClass("active"); }); }); })(jQuery);
こちらのコードは、子テーマのfunctions.phpに記述すれば宜しいのでしょうか?
-
hidekichiゲスト
子テーマjavascript.jsです。
-
zaxゲスト
記述してシークレットで確認しましたが、コメント欄にフォーカス時にメニューは消えませんでした。
コメントのプラグインを入れていたので、それを一旦停止にしてみましたが、それでもダメでした。jqueryは子テーマjavascript.js、cssは子テーマのmobile.cssに記述しました。
-
hidekichiゲスト
表示用のサンプル作りました。実機でもサンプルでも機能的には同じことです。
もしかするとスマホでfocusが効かないのかも知れないと言うことでtouchendを入れてみました。サンプル: スライドインメニューバーをtextareaのfocusで表示非表示 | codepen
これを実機なりで見て確認してみてください。
-
hidekichiゲスト
> わいひらさん
ひとまずの所、スマホでfocusが効くのか、はたまたblur(focusが外れた時)が効くのかを確かめてもらってからのほうが良いかと思います。
場合によってはtouchインベントか、clickで代用できると思うんですけども、外れたときをどうしようか考え中です。
それなら何かしらボタンをメニュー内にと思いましたが、バーが非表示になるともちろんその操作するボタンを消えるので中に入れることはできずで、入れたメニューだけ表示しようかと思いましたが結局それでは邪魔になるのは変わりないでしょうし、どこにイベントの発火ポイントを持っていくべきかが問題点です。 -
わいひらキーマスター
とりあえずのAndroidエミュレーター(Nox App Player)のAndroidブラウザで試してみたら、動作しないようでした。
あと、アニメーションも動作しないようだったので、動きに何の面白味もないのですが、以下のように変更したら動作しました。jQuery
$('textarea#comment') .focusin(function(e) { $("#footer-mobile-buttons").addClass("active"); }) .focusout(function(e) { $("#footer-mobile-buttons").removeClass("active"); });
CSS宇
#footer-mobile-buttons.active { display: none; }
動作は、hidekichiさんが書かれたものの方が断然好みなのですが、無念。
-
zaxゲスト
hidekichi様
表示サンプルを実機で拝見いたしました。
下記のようになり、バーを隠せるようになっておりました。 -
hidekichiゲスト
> わいひらさん
なるほどfocusinやらはありかも知れませんね。ただ問題はiphoneなんですよ。
奴は凶悪です。もしかするとfocus自体ができないかも知れません。できないってことはないと思うんですけどね。そこで、touchendで、テキストエリアをタッチした時と、clickの時(clickは必ず動作すると思いますが)にメニューバーを非表示にして、別途zaxさんにレスしてもらったスクリーンショットのように小さなボタンを表示するようにしてみました。
このボタンはcssで好きにデザインできます。
これをクリック(タッチ)で、メニューの表示・非表示ができるのであれば、後は邪魔にならない位置を見つける感じです。ここらの意見なり要望が欲しい所です。
サンプル: 通常版 | codepen
サンプル: フル表示版 | codepen通常版は普通にソース付きの画面です。画面幅が480px以下になったらメニューが出るようにしてあります。
フル表示版はソース部分のないいわゆるプレビューです。どちらも同じものです。 -
わいひらキーマスター
あらら。表示サンプルの方をAndroidエミュレータで見てみたら、アニメーションもちゃんと動作していました。
僕が間違った書き方をしていたのかも。もう一度試してみます。 -
わいひらキーマスター
おっと、投稿時間が重なってしまった。
-
わいひらキーマスター
#45677
「メニューバーを表示」ボタンが出ずに、フォーカスインと、フォーカスアウトしたら動作するバージョンも見せてもらうことは可能でしょうか?あとは、以下も含めて、iPhoneユーザーにちゃんと動作するか見てもらうしかないですねこの場合;僕もiPhoneを持っていないので。
http://codepen.io/Hidekichi/pen/qamvVA/
http://simplicity.wp.xdomain.jp/post-2230/ -
zaxゲスト
#45670
わいひらさんの書いてくださったコードに変更してみたら、
$("textarea#comment")
私の実機(android)で、入力欄フォーカス時にメニューが非表示になりました。 -
hidekichiゲスト
サンプル: 「メニューバーを表示」ボタンが出ずに、フォーカスインと、フォーカスアウトしたら動作するバージョン | fork-codepen
こんな感じです。
ちなみに、このメニューは設定で上と下に別れますよね。これはできたらclassをつけて、
#footer-mobile-buttons.above #footer-mobile-buttons.below
みたいな感じで分けられるとアニメーションのスタイルがしやすいかと思います。
-
わいひらキーマスター
hidekichiさんありがとうございます。
とりあえず、hidekichiさんのコードを参考に、以下のような動作にしました。
jQuery//テキストエリアにフォーカスが入った時にメニューを隠す $("textarea#comment") .on("touchend focus", function(){ $("#footer-mobile-buttons").addClass("comment-active"); $("#container").addClass("comment-active"); }) .on("touchend blur", function(){ $("#footer-mobile-buttons").removeClass("comment-active"); $("#container").removeClass("comment-active"); });
CSS
#footer-mobile-buttons { -webkit-transition: .3s ease; transition: .3s ease; } #footer-mobile-buttons.comment-active { opacity: 0; } #container.comment-active { margin-bottom: 0; }
transform: translate(0, 200%);
は、メニューが上つきと、下つきがあるので分岐させるのが面倒だったので、opacity: 0;
にしてなるべく簡略な方法を取りました;
iPhoneが動作しなかったらしなかったで、今まで通りの動作が変わるわけではないので、これで良いかなと。 -
hidekichiゲスト
サンプルではどちらのメニューにも対応できるようにしてみました。
ラジオボタンの選択で表示を切り替えられるようにしてみました。理屈的には、ラジオボタンの値 = カスタマイザーの選択値という感じです。
カスタマイザーのオプションで、上下いずれかのクラス名が拾えたら、それを付けるだけで比較的簡単に実現できますよ。
-
わいひらキーマスター
サンプルコードありがとうございます!
とりあえず、後に試してみて動作を検討したいと思います。
-
-
投稿者投稿