meichi回答ポイント 150ptウォッチ 1

すみません、ホームページを作成していてIE9では、

問題なくリンクが開いていたのに、firefox20.0.1
ではリンクが動かなくなりました。
すみません、ご教示いただけないでしょうか。
Firefoxは通常のブラウザに設定はしてないです。
当方Windows7です。たぶん　的はずれもいいとこ
でしょうが、質問の補足にjavascriptの部分だけ
つけさせていただきます。よろしくお願いします。

• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32013/05/09 17:34:27

  満足120pt

  左のABCのリンクが手のひら　に変わらず　リンクが動作
  しないです・・・・

  クローバーの画像を動かす処理を入れましたが、それの影響でした。
  
  追加した javascript のコードを動かすと、元々見えていたテーブルの上にウィンドウ一杯のサイズのもう一枚の板を置き、その上にクローバーの画像を置くような処理になってました。
  （見えてませんが）一枚被さっているので、下のリンクが押せないという...
  ＃ 何で、IE の方が押せるのかの方が不思議です
  
  板を一枚被せている辺りの処理を修正すると、期待通りになると思います。
  修正した辺りを抜粋したのが、こちらです。

          init : function(){
              // ★z-index の値を大きくしました
  // ※※クローバーの画像を乗せる領域の構成を変えました
  //          $('body')
  //              .wrapInner('<div style="position:relative;z-index:5"></div>')
  //              .append('<div style="position:fixed;top:0;left:0;z-index:5" id="cube-area"></div>');
              $('body')
                  .wrapInner('<div id="cube-area" style="position:fixed;z-index:5"></div>');
  
  

  
  

  サンプルも手直ししてます。
  http://jsfiddle.net/a_kuma3/MbDTy/3/embedded/result/
  
  ＃ IE8 と FF20.0.1 では確認しました　(^^ゞ

  スター

  • 

    1件のコメントを見る

  • meichi 2013/05/09 17:52:54

    早いレス　大変　ありがとう　ございます。m(_ _)m
    
    動きました。（感謝！！）
    
    ・・・・それにしても　自分が14年前ホームページをつくっていたころと
    　　　　くらべて　こんなに　変わってるなんて・・・・・
    
    これで、質問を終了します。　ありがとう　ございました。

    スター

その他の回答

• meichi

  2013/05/09 08:32:28

  <script type='text/javascript' src='/js/lib/dummy.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'></p> <p> </p> <p> </style>

  
  

  <script type='text/javascript'>//<![CDATA[ </p> <p>window.onload = function(){</p> <p> var settings = {</p> <p> interval : 3000, // cubeを出す間隔</p> <p> dur : 30000, // cubeが持続する時間</p> <p> windowWidth : $(window).width(),</p> <p> windowHeight : $(window).height()</p> <p> }</p> <p> </p> <p> // cubeの最終スタイル設定</p> <p> var styleFor = {</p> <p> height : 48, // cubeの高さ ★サイズ変えました</p> <p> width : 48, // cubeの幅 ★サイズ変えました</p> <p> 'border-width' : 0 // cubeの罫線幅 ★縁取りを無くします</p> <p> }</p> <p> </p> <p> // cubeの初期スタイル設定</p> <p> var styleInit = {</p> <p> position:'absolute',</p> <p> 'z-index' : 5, // ★数値を大きくしました</p> <p> display : 'inline-block',</p> <p>// border : 'solid 4px #eaeaea', ★縁取りを無くします</p> <p> height : 24, // ★サイズ変えました</p> <p> width : 24, // ★サイズ変えました</p> <p> // ★クローバーの画像を使います（三行追加）</p> <p> 'background-image': 'url(file:///C:/hp/image6.gif)',</p> <p> 'background-size': 'contain',</p> <p> 'background-repeat': 'no-repeat',</p> <p> adj : 0</p> <p> }</p> <p> </p> <p> var cube = {</p> <p> init : function(){</p> <p> // ★z-index の値を大きくしました</p> <p> $('body')</p> <p> .wrapInner('<div style="position:relative;z-index:5"></div>')</p> <p> .append('<div style="position:fixed;top:0;left:0;z-index:5" id="cube-area"></div>');</p> <p> </p> <p> $('#cube-area').css({</p> <p> height : settings.windowHeight,</p> <p> width : settings.windowWidth</p> <p> });</p> <p> </p> <p> styleInit.adj = styleFor['border-width'] + styleFor['width'];</p> <p> },</p> <p> add : function(){</p> <p> var initX = cube.getRandomX();</p> <p> var initY = cube.getRandomY();</p> <p> </p> <p> var endX = cube.getRandomX();</p> <p> var endY = cube.getRandomY();</p> <p> </p> <p> styleFor.left = endX;</p> <p> styleFor.top = endY;</p> <p> </p> <p> $('#cube-area').append($('<div class="block" />')</p> <p> .css(styleInit) // end init</p> <p> .css({</p> <p> top : initY,</p> <p> left : initX,</p> <p> })</p> <p> .animate(styleFor,{</p> <p> easing : 'linear',</p> <p> duration : settings.dur,</p> <p> complete : function(){</p> <p> $(this).fadeOut(300,function(){</p> <p> $(this).remove();</p> <p> });</p> <p> }</p> <p> }</p> <p> )</p> <p> );</p> <p> },</p> <p> getRandomX : function(){</p> <p> return Math.floor( Math.random() * settings.windowWidth - styleInit.adj);</p> <p> },</p> <p> getRandomY : function(){</p> <p> return Math.floor( Math.random() * settings.windowHeight );</p> <p> }</p> <p> }</p> <br> <p> // execute</p> <p> cube.init();</p> <p> setInterval(function(){</p> <p> cube.add();</p> <p> },settings.interval);</p> <p>}</p> <p>//]]> </p> <p></script>

  
  

  </head>

  <body>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

  <script></p> <p>$(function() {</p> <p> $("#anchor").click(function() {</p> <p> var s = "<iframe name='display' class='display'></iframe>";</p> <p> $("#area").html(s);</p> <p> });</p> <p>});</p> <p></script>

• エネゴリ2013/05/09 11:17:31

  満足30pt

  推測で申し訳ないですが、それはページ内リンクの表記ではないでしょうか？
  ページ内リンクでは以下の方法で動作すると思います。
  http://www.xml.vc/hp/keitai/link-id1.html

  <p><a href="#jump">移動元</a></p>
  
  ～途中略～
  
  <h2 id="jump">ジャンプ先</h2>
  

  スター

この質問へのコメント

• a-kuma32013/05/09 11:54:40
  質問の補足に書いてもらったコードは、一部、消えていると思います。
  <script> の開始や、最近貼りつけたクローバーの画像を流すところの改行とか。
  以下のような感じで、>|| ～ ||< で囲んで書きこんでみてください。
  
  >||
  貼り付けたいソースコード
  　　...
  ||<
• meichi2013/05/09 16:41:44
  コメントありがとうございます。m(_ _)m
  
  前の質問で　ご教示いただいたクローバーを動かす下記のサンプル　↓
  
  http://jsfiddle.net/a_kuma3/MbDTy/2/embedded/result/
  
  ですが、Firefox20.0.1　でみると　大変申し訳ないのですが・・・
  
  左のABCのリンクが手のひら　に変わらず　リンクが動作
  しないです・・・・
  
  すみませんが、よろしくお願いします。m(_ _)m
• a-kuma32013/05/09 17:52:52
  ＞ですが、Firefox20.0.1　でみると　大変申し訳ないのですが・・・
  人力検索は、質問をして回答を得る場なので、質問をする度に、そんなに恐縮されなくても。
  ＃ お人柄なんでしょうが
  
  今回の場合は、「Firefox で動かないじゃねぇか、a-kuma3 ごるぁ！」くらいでも良かったんじゃないか、と。
  しかも、ぼくが常用しているのは Firefox だったりするし...　X-(
  

質問の情報

登録日時

2013-05-09 08:28:37

終了日時

2013-05-09 17:54:02

回答条件

1人5回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• ノーヒットワンダラー、雪村いずみ、和田アキ子、大貫妙子のように、一定の評価の下、長年歌手活動を、著名…minminjp2001332日前
• 「か」の3画目って跳ねますか？（パソコンでは跳ねてないけど） 分かったら教えてええ！…あいるん1322日前
• 仮想通貨で１万円から始めたとして、その１万円以上損をするということはありますか？ できたら理由や根拠…kan3711日前
• 【GoogleのBardとBingのChatGPT】とでは、どっちが良いと思いますか。 rsc212日前
• 中学3年です。 ほとんど成績が2の偏差値約30です。偏差値50の倍率が高い高校を目指すのはまだ希望はありま…匿名質問者4115時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ