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

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

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

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

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2045閲覧

googledriveでjQueryをうまく動かしたい

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

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

Google

Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/08/09 02:05

編集2016/08/09 02:09

googledriveでURLを取得することは出来て、html・cssともに読み込むことは出来ました。
しかし、jQueryだけがうまく稼働しません。
jQueryをgoogledriveでうまく動かす方法を教えていただきたいです。

html

1<script src="http://code.jquery.com/jquery-3.1.0.min.js"></script> 2 <script src="jquery.leanModal.min.js"></script> 3 <script> 4 $(function(){ 5 $("a[rel*=leanModal]").leanModal(); 6 }); 7 </script>

html

1<div class="boxA"> 2 <a id="x" href="#sample" rel="leanModal"> 3 <div class="navigate"> 4 <p>料金</p> 5 </div> 6 <div class="navigate"> 7 <p>ルート</p> 8 </div> 9 <div class="navigate"> 10 <p>その他</p> 11 </div> 12 </a> 13 <div id="sample"> 14 <p>バルーン</p> 15 </div> 16 </div>

css

1#lean_overlay { 2 position: fixed; 3 z-index:100; 4 top: 0px; 5 left: 0px; 6 height:100%; 7 width:100%; 8 background: #000; 9 display: none; 10} 11 12#sample { 13 width: 400px; 14 padding: 30px; 15 display:none; 16 background: #FFF; 17 border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 18 box-shadow: 0px 0px 4px rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7); 19}

jQuery.leanModal.min.js

1// leanModal v1.1 by Ray Stone - http://finelysliced.com.au 2// Dual licensed under the MIT and GPL 3 4(function($){$.fn.extend({leanModal:function(options){var defaults={top:100,overlay:0.5,closeButton:null};var overlay=$("<div id='lean_overlay'></div>");$("body").append(overlay);options=$.extend(defaults,options);return this.each(function(){var o=options;$(this).click(function(e){var modal_id=$(this).attr("href");$("#lean_overlay").click(function(){close_modal(modal_id)});$(o.closeButton).click(function(){close_modal(modal_id)});var modal_height=$(modal_id).outerHeight();var modal_width=$(modal_id).outerWidth(); 5$("#lean_overlay").css({"display":"block",opacity:0});$("#lean_overlay").fadeTo(200,o.overlay);$(modal_id).css({"display":"block","position":"fixed","opacity":0,"z-index":11000,"left":50+"%","margin-left":-(modal_width/2)+"px","top":o.top+"px"});$(modal_id).fadeTo(200,1);e.preventDefault()})});function close_modal(modal_id){$("#lean_overlay").fadeOut(200);$(modal_id).css({"display":"none"})}}})})(jQuery); 6
/*! jQuery v3.1.0 | (c) jQuery Foundation | jquery.org/license */ !function(a,b){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0):function(a)(省略)

また、これが難しいようであれば無料のサーバーなどを契約してアップロードしたほうが良いのでしょうか?
ご回答の程よろしくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

Googleのサービスは多くがHTTPS経由となっています。jQuery本体もHTTPS経由で参照しましょう。

なお、Google Driveでの静的ページのホスティングは今月末で終了とのことですが、そちらは大丈夫でしょうか。

投稿2016/08/09 02:09

maisumakun

総合スコア145183

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

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

退会済みユーザー

退会済みユーザー

2016/08/09 02:11

とりあえず今月中だけでもサーバーを確保したいと考えているので、今は google drive で大丈夫です。 HTTPS経由とういのはどう行えばよろしいでしょうか?
退会済みユーザー

退会済みユーザー

2016/08/09 02:31

ありがとうございます!実装できました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問