scrollsmoothly.jsが動かない
- scrollsmoothly.jsが設定できず、動作しない問題について質問させていただきます。
- scrollsmoothly.jsを正しく設定してもうまく動作しない問題が発生しています。
- scrollsmoothly.jsがうまく機能せず、正しく設定できない問題に関して質問させていただきます。
- ベストアンサー
scrollsmoothly.jsが動かない
質問させていただきます。 下記のscrollsmoothly.jsを設定したいのですが、どうしても うまく動作しません。 http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly ソースコードをDLして jsフォルダに入れました。 そして <head>～</head> の間に <script type="text/javascript" src="js/scrollsmoothly.js"></script> と記述しました。 そして <body> <div id="head"> ～ <a href="#head">topへ戻る</a> </body> と記述しました。 何か間違っていますでしょうか？ よろしくお願いします。
- karup
- お礼率96% (233/241)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
demoページがありますが、そちらは動作していますか？ http://www.rr.iij4u.or.jp/~kazumix/d/javascript/scrollsmoothly/#section1 動作しているのなら、まずはこれとおなじものを作成してみればよろしいかと。 ブラウザの、「名前をつけて保存」-「WEBページ、完全」などで保存すれば同じものが作成できるかと思います。 その動作が確認できましたら、逐次変更してみてください。
関連するQ&A
- jQuery.lightpop.jsの動作について
jQuery.js : Ver1.3.1 jQuery.light.js Ver0.7.5 使用ブラウザ:FireFox3.0.8(Firebugインストール済み) Google Chrome2.0.169.1 お世話になります。 現在弊社ではjQuery.lightpop.jsライブラリを使用して リンク先(以下例では「hogehogeName」のリンク先「hogehoge.html」)をポップアップ表示させようとしています。 以下(1)のように「静的」にテーブルタグを記述するとうまくいきますが (2)のように「動的」だとポップアップされず 普通にページ遷移してしまいます。原因はどこにあるのでしょうか？？ ちなみにFireBugで動作確認を行いましたが、エラーはなかったです。 (1)タグ内にテーブルを直接記入 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"> <table class="table1" id="table1" border="1" bgcolor="white"><tbody> <td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td> </tr></tbody></table> </div> </body> </html> (2)divタグ内に「動的」にテーブルを記入する方法 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); &(view).innerHTML = '<table class="table1" id="table1" border="1" bgcolor="white"><tbody>' + '<td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td>' + '</tr></tbody></table>'; }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"></div> </body> </html>
- ベストアンサー
- JavaScript
- jQuery.jsを使ったhtml外部読み込み
教えてください。 現在Jqueryを使用して外部htmlを読み込ませようとしていますが、 うまくいきません・・・ ■本体html <head> <script src="js/jquery-1.8.3.min.js"></script> </head> <body> <script type="text/javascript" src="sample.js"></scrip> <div id="sample"></div> </body> ■sample.js // JavaScript Document $(function(){ $("#sample").load("sample.html"); }); ■読み込ませるsample.html 特に設定なし このような感じですが、全然読み込めません。。。 javascriptを外部リンクにしているのは、読み込むhtmlが複数ある為、 headの見栄えが悪くなるからという個人的な意見です・・・ 済みませんがお知恵をお貸しください！！
- 締切済み
- JavaScript
- ＪＳの記述を別ファイルに移す
下記のＨＴＭＬ内の <script type="text/javascript">～</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>
- ベストアンサー
- JavaScript
- prototipの設定
質問させていただきます。 <script src="js/prototype.js" type="text/javascript"></script> <script src="js/effects.js" type="text/javascript"></script> <script src="js/prototip.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="http://yourdomain/prototip.css"> <script type="text/javascript"> function init() { new Tip('test', 'ToolTip simple', {title: 'title'}); Event.observe(window, 'load', init, false); </script> </head> <body> <a href="" id="test">test</a> </body> </html> 以上のように記述して、動かしてみたのですが、動きません。 何処が違っているか解るか炊いたら教えていただけ無いでしょうか。
- ベストアンサー
- JavaScript
- shadowbox.jsについて
shadowbox.jsとslimbox.jsを併用したいと考えています。 もともとshadowbox.jsをPrototypeで使用し、HTMLを呼び出すのに使用していたのですが、 画像のライトボックス表示にslimbox.js（jquery使用）を使いたいと思い、 両方とも記述したらshadowboxの方が正常に動作しなくなりました。 何か解決策はありますでしょうか。 非常に困っています。お願いします。 ちなみに以下の様なコードをhead内に記述しております。 <script src="../../common/js/prototype.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../common/js/shadowbox/shadowbox.css"> <script src="../../common/js/shadowbox/shadowbox.js" type="text/javascript"></script> <script type="text/javascript">Shadowbox.init();</script> <link rel="stylesheet" type="text/css" href="shadowbox.css"> <script type="text/javascript" src="shadowbox.js"></script> <script type="text/javascript">Shadowbox.init();</script> </script> <link href="../../common/css/slimbox/slimbox.css" type="text/css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="../../common/js/jquery.js"></script> <script type="text/javascript" src="../../common/js/slimbox.js"></script> <script type="text/javascript"> //slimbox $(document).ready(function() { $('a[rel*=lightbox]').slimbox(); }); </script>
- ベストアンサー
- CSS
- jQueryのタブにスクロールバーをつけたい
jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？
- ベストアンサー
- JavaScript
- 外部 .js で
index.html 内の head タグ間に <script type="text/javascript" src="./js/test2.js"></script> また、index.html と同階層にある js ディレクトリの内の test2.js の内容は document.write("test") だけです。 この条件で（というのは、最終的に別にテキストを出したいだけというわけではないので）、body の任意の場所に test を表示 [記述] させる方法を教えてください。 body の適当な場所に <script type="text/javascript"></script> と書いても、何も現れません（ソースで確かめています）。根本的におかしいのかもしれませんが、わかりません。 必ず、これら条件でお願いします。
- 締切済み
- JavaScript
- javascriptを２つ使うと１つの動きしかしません。
初心者です。ホームページを作っています。 以下のように記述してjavascriptで2つの動きをしたいのですが１つしか動きません。scriptをべつのファイルにしたのですが動かないのですが。どう記述したらいいのでしょうか？ よろしくお願いします。 <html> <title></title> <head> <script language="javascript" src="test.js"></script> </head> <center> <body text="#000000" onLoad="timer1=setTimeout('fadein(0,100)',100)"> <br><br> <font size="8" color="green">ようこそマイホームページへ</font><br><br> <img src="top.jpg"><br><br> <a href="top.html"> <img src="main.jpg"></a> <form action="top.html"> </form> <script language="javascript" src="common.js"> </script> <a href="javascript:void(post())">3秒後に遷移します。画面が変わらない場合はクリックしてください</a> </center> </body> </html>
- ベストアンサー
- JavaScript
- <head>外での、外部css、外部jsの読み込み
基本的な質問で失礼します。 <head>内ではなく、たとえば<body>内に外部cssと外部jsを読み込む際、 今まで、以下のようにスクリプトを書いて読み込んでおり、うまくいっていました。 <script type="text/javascript"> document.write('<link rel="stylesheet" type="text/css" href="hoge.css" media="screen,print">'); document.write('<script src="hoge.js" type="text/javascript"></script>'); </script> ところが、あるサイト作成時、上記スクリプトでは効かなくなってしまいました。 （HTML 4.01 Transitional） そこで、<head>内で書くように、以下のように記述したら、うまく機能しました。 <link rel="stylesheet" type="text/css" href="hoge.css" media="screen,print"> <script type="text/javascript" src="hoge.js"></script> 自分の中では、この記述は<head>内で書くときであって、<head>外ではうまく読み込めないと思っていたのです。 そもそも、<head>外なのに、このような書き方をしてよいものでしょうか？ まぁ、きちんと読み込めていて、動きも期待通りだから良いのでしょうが… 皆さん、どのように読み込んでいるのかなっと思い質問してみました。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- js 引用符
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <div id="a"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="moment.js"></script> <script src="fastclick.js"></script> <script> $(function(){ var retinaSwitch = window.<span class="searchword">devicePixelRatio</span>; if(retinaSwitch == 1) { $('#container').html('Retinaディスプレイではありません'); } else if(retinaSwitch == 2) { $('#container').html('Retinaディスプレイです'); } }); </script> </body> </html> javascriptのコードなのですがWebサイトからコピペした文章が上手く反映されません。引用符関係のイージーミスだとは思うのですが、ちょっとドツボに嵌っているので、ご指摘頂ければと思います。
- ベストアンサー
- JavaScript
お礼
fujillin様回答ありがとうございます！ お礼が遅くなってしまい申し訳ありません。 アドバイスいただいたように、これと同じものを作成して、ひとつずつ試してみました。 何が良くなかったのか、未だに分からないのですが 結果的には何とか動作できました。ありがとうございました！！！！！