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

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

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

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

jQuery

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

Q&A

解決済

3回答

4298閲覧

画面サイズで読み込むJavascriptを切り替えたい

pompompom

総合スコア11

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2016/08/26 18:44

編集2016/08/27 01:56

###前提・実現したいこと
レスポンシブサイトを製作中です。
ウインドウサイズに合わせて読み込むjavascriptが上手く動作しません。
具体的なコードを教えていただけますと助かります。
どなたかご教授お願いいたします。

window.matchMediaで分岐を試みましたが切り替えることが出来ませんでした。

現在は分岐せず以下で通常に作動しています。

<script type="text/javascript"> var slider = new MasterSlider(); slider.control('arrows'); slider.control('scrollbar' , {dir:'h'}); slider.control('thumblist' , {autohide:false, dir:'v', arrows:true, align:'right', width:127, height:137, margin:5, space:5, hideUnder:300}); slider.setup('masterslider' , { width:600, height:600, space:5 }); </script>

###該当のソースコード
上記より480pxにて分岐し以下を読み込みたいです。

<script type="text/javascript"> var slider = new MasterSlider(); slider.control('arrows'); slider.control('thumblist' , {autohide:false ,dir:'h',arrows:false, align:'bottom', width:127, height:137, margin:5, space:5}); slider.setup('masterslider' , { width:600, height:600, space:5, view:'scale' }); </script>

###試したこと

検索して置き換えてみました。

<script type="text/javascript"> jQuery(document).ready(function($) { //PC環境の場合 if (window.matchMedia( '(min-width: 769px)' ).matches) { //切り替える画面サイズ $.ajax({ var slider = new MasterSlider(); slider.control('arrows'); slider.control('scrollbar' , {dir:'h'}); slider.control('thumblist' , {autohide:false, dir:'v', arrows:true, align:'right', width:127, height:137, margin:5, space:5, hideUnder:300}); slider.setup('masterslider' , { width:600, height:600, space:5 }); }); //モバイル環境の場合 } else { $.ajax({ var slider = new MasterSlider(); slider.control('arrows'); slider.control('thumblist' , {autohide:false ,dir:'h',arrows:false, align:'bottom', width:127, height:137, margin:5, space:5}); slider.setup('masterslider' , { width:540, height:586, space:5, view:'scale' }); }); }; }); </script>

###補足情報(言語/FW/ツール等のバージョンなど)
サムネイル付きの画像スライダーで通販サイトで使用を試みています。
上コードがdir:'v'でvertical
下コードがdir:'h'でhorizontal
サムネイルの位置を変えたいだけなのですが。。。

よろしくお願いします。

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

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

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

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

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

kei344

2016/08/26 19:39

コードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
pompompom

2016/08/27 01:57

お世話になります。 ご指摘していただいた通りコードブロック致しました。 よろしくお願いします。
guest

回答3

0

ベストアンサー

$.ajax で囲んでいる理由がいまいちわかりませんし、リサイズにも対応できていませんが、こうすればとりあえず動きませんか?

JavaScript

1jQuery( function( $ ) { 2 var slider = new MasterSlider(); 3 slider.control( 'arrows' ); 4 5 if ( window.matchMedia( '(min-width: 769px)' ).matches ) { //切り替える画面サイズ 6 //PC環境の場合 7 slider.control( 'scrollbar', { 8 dir: 'h' 9 } ); 10 slider.control( 'thumblist', { 11 autohide: false 12 , dir: 'v' 13 , arrows: true 14 , align: 'right' 15 , width: 127 16 , height: 137 17 , margin: 5 18 , space: 5 19 , hideUnder: 300 20 } ); 21 slider.setup( 'masterslider', { 22 width: 600 23 , height: 600 24 , space: 5 25 } ); 26 } else { 27 //モバイル環境の場合 28 slider.control( 'thumblist', { 29 autohide: false 30 , dir: 'h' 31 , arrows: false 32 , align: 'bottom' 33 , width: 127 34 , height: 137 35 , margin: 5 36 , space: 5 37 } ); 38 slider.setup( 'masterslider', { 39 width: 540 40 , height: 586 41 , space: 5 42 , view: 'scale' 43 } ); 44 }; 45} );

有料プラグインのようなので、動作検証はこちらでは出来ませんので、あとはがんばってみてください。

投稿2016/08/27 10:00

kei344

総合スコア69364

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

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

pompompom

2016/08/27 14:15

全くの素人ですのでコピーして貼り付けただけで$.ajax がどういう作用なのか知らない状態で手探りでした。 試してみたところ無事機能しました。 本当にありがとうございました。
guest

0

(他にも誤りがあるのですが、とりあえず)文法上の誤りがあります。
ブロックを表す中括弧と、オブジェクトリテラルを表す中括弧とを、混同しているようです。下記を確認して、ご自分が記述したい内容を再度検討してみてください。

オブジェクト初期化子はオブジェクトのプロパティ名と関連した値のゼロ以上のペアのリストです。中括弧({})で囲まれます

Object initializer - JavaScript | MDN

ブロックは中括弧 (波括弧) の組で区切られます。

ブロック - JavaScript | MDN

投稿2016/08/27 02:12

Lhankor_Mhy

総合スコア35865

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

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

0

css レスポンシブ
で, google 検索すると、いろいろ情報を得られます。

参考情報:

投稿2016/08/27 00:34

katoy

総合スコア22324

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問