質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1217閲覧

スマートフォンでドロワーメニューを開いている状態で画面を回転したときの幅を再取得したい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/07/05 03:17

###前提・実現したいこと
お世話になります。
スマートフォンでドロワーメニューを開いている状態のとき、画面を回転したときに幅を再取得したいのですが、うまくできません。
お手数をおかけしますが、どなたかご教授お願いします。

###該当のソースコード

javascript

1$(function() { 2 // アクセス時にグローバルメニューの位置を設定 3 glmCat.css({ 4 'height': glmCatH + 'px', 5 'width': windowW + 'px', 6 'left': '-' + windowW + 'px' 7 }); 8 glmPri.css({ 9 'height': glmPriH + 'px', 10 'width': windowW + 'px', 11 'left': '-' + windowW + 'px' 12 }); 13 glmMai.css({ 14 'height': glmMaiH + 'px', 15 'width': windowW + 'px', 16 'right': '-' + windowW + 'px' 17 }); 18 19 // リストトグル 20 $('.evListOpen').on('click', function() { 21 $(this).next('.evlistSub').stop().slideToggle(); 22 if ($(this).hasClass('ev-open')) { 23 $(this).css('background-image', 'url(/images/smart/top/icon/plus.png)'); 24 $(this).removeClass('ev-open'); 25 } else { 26 $(this).css('background-image', 'url(/images/smart/top/icon/minus.png)'); 27 $(this).addClass('ev-open'); 28 } 29 }); 30 31 // グローバルメニュー表示 32 function globalMenuWrapOpen(elm, elmH) { 33 st = $(window).scrollTop(); 34 elm.css('display', 'block'); 35 cnts.fadeOut(); 36 setTimeout(function() { 37 elm.addClass('open'); 38 }, 300); 39 $(window).scrollTop(0); 40 } 41 42 // グローバルメニュー非表示 43 function globalMenuWrapClose(t, st) { 44 cnts.fadeIn(); 45 // globalMenu内まとめて処理 46 $('#globalMenu .evListOpen').css('background-image', 'url(./images/smart/top/icon/plus.png)'); 47 $('#globalMenu .evListOpen').removeClass('ev-open'); 48 $('#globalMenu .evlistSub').css('display', 'none'); 49 t.parents('#globalMenu').find('.open').removeClass('open') 50 setTimeout(function() { 51 glmMai.css('display', 'none'); 52 }, 500); 53 sliderRank.slick('setPosition'); 54 sliderMain.slick('setPosition'); 55 $(window).scrollTop(st); 56 } 57 58 // グローバルメニュー表示キック 59 $('.globalMenuCategory').on('click', function() { 60 globalMenuWrapOpen(glmCat, glmCatH); 61 }); 62 $('.globalMenuPrice').on('click', function() { 63 globalMenuWrapOpen(glmPri, glmPriH); 64 }); 65 $('.globalMenuMain').on('click', function() { 66 globalMenuWrapOpen(glmMai, glmMaiH); 67 }); 68 69 // グローバルメニュー非表示キック 70 $('.globalMenuClose').on('click', function() { 71 globalMenuWrapClose($(this), st); 72 }); 73});

###試したこと

javascript

1// アクセス時にグローバルメニューの位置を設定 2$(window).on("orientationchange",function(){ 3 glmCat.css({ 4 'height': glmCatH + 'px', 5 'width': windowW + 'px', 6 'left': '-' + windowW + 'px' 7 }); 8 glmPri.css({ 9 'height': glmPriH + 'px', 10 'width': windowW + 'px', 11 'left': '-' + windowW + 'px' 12 }); 13 glmMai.css({ 14 'height': glmMaiH + 'px', 15 'width': windowW + 'px', 16 'right': '-' + windowW + 'px' 17 }); 18});

の様に画面が回転したときに、幅や位置を取得しようとしましたが、できませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

最新のiOSでも同様の仕様か確認できていませんが、ちょっと古いiOSではorientationchangeの段階ではまだ縦横の幅が回転前の状態のままという仕様だったので、orientationchangeではなくresizeイベントに処理を仕込むということで対応していました。

※参考資料
http://qiita.com/tomoyukilabs/items/05f5d886893f79c1a00b

var event = navigator.userAgent.match(/(iPhone|iPod|iPad)/) ? 'orientationchange' : 'resize'; $(window).on(event,function(){ // ココに「glmCatH」「windowW」の値を取得、代入する処理を記述する(例で取得している値は適当に修正してください var glmCatH = $('.hoge').innerWidth(); var windowW = window.innerWidth; glmCat.css({ 'height': glmCatH + 'px', 'width': windowW + 'px', 'left': '-' + windowW + 'px' }); glmPri.css({ 'height': glmPriH + 'px', 'width': windowW + 'px', 'left': '-' + windowW + 'px' }); glmMai.css({ 'height': glmMaiH + 'px', 'width': windowW + 'px', 'right': '-' + windowW + 'px' }); });

投稿2017/07/05 03:38

編集2017/07/05 04:46
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/07/05 04:00

レスありがとうございます。 // リサイズイベント処理  $(window).on('load resize', function(){ glmCat.css({ 'height': glmCatH + 'px', 'width': windowW + 'px', 'left': '-' + windowW + 'px' }); glmPri.css({ 'height': glmPriH + 'px', 'width': windowW + 'px', 'left': '-' + windowW + 'px' }); glmMai.css({ 'height': glmMaiH + 'px', 'width': windowW + 'px', 'right': '-' + windowW + 'px' }); }); この様に「resize」イベントで試みたのですが、androidとiPhone両方ダメでした。
退会済みユーザー

退会済みユーザー

2017/07/05 08:42

サンプルコードありがとうございます。 無事リサイズ時の横幅取得ができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問