jquery？css？IEで表示されません。
- 現在HPを作成していて、ページ内リンクに、jQueryを入れてカレントページにナビゲーションを固定するようにしています。
- バックに白背景がカレントページのページ内リンクにしていますが、IEではバックが白にならず困っています。
- jQueryとcss、どちらに原因があるのかすら分かりません。
- ベストアンサー
jquery？css？IEで表示されません。
現在HPを作成していて、ページ内リンクに、jQueryを入れてカレントページにナビゲーションを固定するようにしています。バックに白背景がカレントページのページ内リンクにしています。クロームで確認しても動くのにIEではバックが白にならず困っています。 jQueryとcss、どちらに原因があるのかすら分かりません。 ご回答いただけると幸いです。 jQuery // JavaScript Document $(function(){ var set = 300;//ウインドウ上部からどれぐらいの位置で変化させるか var boxTop = new Array; var current = -1; //各要素の位置 $('.box').each(function(i) { boxTop[i] = $(this).offset().top; }); //最初の要素にclass="on"をつける changeBox(0); //スクロールした時の処理 $(window).scroll(function(){ scrollPosition = $(window).scrollTop(); for (var i = boxTop.length - 1 ; i >= 0; i--) { if ($(window).scrollTop() > boxTop[i] - set) { changeBox(i); break; } }; }); //ナビの処理 function changeBox(secNum) { if (secNum != current) { current = secNum; secNum2 = secNum + 1;//HTML順序用 $('#nav li').removeClass('on'); $('#nav li:nth-child(' + secNum2 +')').addClass('on'); /* 位置によって個別に処理をしたい場合 if (current == 0) { // 現在地がsection1の場合の処理 } else if (current == 1) { // 現在地がsection2の場合の処理 } else if (current == 2) { // 現在地がsection3の場合の処理 }*/ } }; }); css div#nav ul li.on { box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 7px rgba(0, 0, 0, 0.3),0 -3px 2px rgba(0, 0, 0, 0.25) inset; cursor:pointer; background-color:#FFF; color:#ffffff; }
- arisa755
- お礼率18% (2/11)
- CSS
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
HTML側に問題があることが多いです。DOCTYPEスイッチを標準モードで起動するように書き加えて ⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml ) 将来性を考慮すると、HTML4.01strict、すなわち <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ついで、 ⇒Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) のDATA入力(右上)で大きな減点が無いように修正します。 ここまではHTMLを作成するときの基本です。 その上で、JQeryなりCSSを導入していきましょう。これでほぼ100%解決するはずです。
関連するQ&A
- 現在jQueryで背景色が変るナビを作っていて…
現在jQueryで背景色が変更するナビゲーションを作っていますが、他のブラウザでは反応するのに、firefoxでは反応しません。 トップページからとあるページの特定部分へのリンクの場合です。 スクロールすると背景が追従してくるので問題ないのですが、スクロールせずクリックしただけの場合無反応です。 おそらくjQueryがスクロールになっているからだと思うのですが、 どう書き換えたらいいのかが分かりません。 クリックしてそのページにジャンプした場合に反応するjQueryにするには、 どう書き換えたらいいのでしょうか？ 急ぎご回答願います。 // JavaScript Document $(window).load(function() { var set = 300;//ウインドウ上部からどれぐらいの位置で変化させるか var boxTop = new Array; var current = -1; //各要素の位置 $('.box').each(function(i) { boxTop[i] = $(this).offset().top; }); //最初の要素にclass="on"をつける changeBox(0); //スクロールした時の処理 $(window).scroll(function(){ scrollPosition = $(window).scrollTop(); for (var i = boxTop.length - 1 ; i >= 0; i--) { if ($(window).scrollTop() > boxTop[i] - set) { changeBox(i); break; } }; }); //ナビの処理 function changeBox(secNum) { if (secNum != current) { current = secNum; secNum2 = secNum + 1;//HTML順序用 $('#nav li').removeClass('on'); $('#nav li:nth-child(' + secNum2 +')').addClass('on'); /* 位置によって個別に処理をしたい場合 if (current == 0) { // 現在地がsection1の場合の処理 } else if (current == 1) { // 現在地がsection2の場合の処理 } else if (current == 2) { // 現在地がsection3の場合の処理 }*/ } }; });
- ベストアンサー
- JavaScript
- cssのtranslateYを変えたい
知識のある方、教えていただきたいです。 やりたいことは、jqueryでtranslateYにscrollTop - offsetTopを代入するということです。何が間違っているのでしょうか。 $('#tableLayout table thead').css('transform', 'translateY(' + scrollTop - offsetTop + 'px)'); headerFix(); function headerFix(){ var $header = $('#tableLayout thead'), offsetTop = $header.offset().top, windowHeight = $(window).height(); $(window).on('load scroll orientationchange resize' , function(){ var scrollTop = $(window).scrollTop(); if (scrollTop >= offsetTop){ $('#tableLayout table thead').css('transform', 'translateY(' + scrollTop - offsetTop + 'px)'); }else{ }; }); }
- ベストアンサー
- JavaScript
- jqueryでscrollTopの値をとりたい
貴重な場をお借りして、ぜひとも教えていただきたいことがございます。 今、スクロールをすると要素がフェイドインするようなjqueryを書いています。 下記をご覧ください。 $(window).on("scroll", function(){}の中に入っているscrollTop,scrollVolを このfunctionの外でも使用したいのですが、方法はございますでしょうか。 つまり、if文のscrollVolに値を入れたいのですがunderfindとなってしまいます。 $(window).on("scroll", function(){}の中でif文を実行すれば取得はもちろんできるのですが、この外側で使用したい場合どうすればよろしいでしょうか。 お手数ですが、お力を貸していただけませんでしょうか。 よろしくお願いいたします。 function paralax(){ var target = $('#sec1'); var targetOffset = target.offset().top; target.css('display','none'); var scrollTop , windowHeight , scrollVol; windowHeight = $(window).height(); $(window).on("scroll", function(){ scrollTop = $(window).scrollTop(); scrollVol = scrollTop + windowHeight; }); if(targetOffset <= scrollVol){ target.fadeTo(400 , 1); } }
- ベストアンサー
- JavaScript
- 【jQuery】 if else 文の合体
２カラムレイアウトで良くあるページをスクロールしていくと 「サイドナビの"途中"で固定され、フッター直前で固定解除」されるのを jQueryで実現したいんです。 「サイドナビの途中で固定（でもフッターに重なる）」と 「最初から固定されてるけどフッター手前で固定解除」という ２種類のjQueryを見つけたので、その２つを合体して 上記の希望する動作にしたいんです。 以下２つのコードです。 ■サイドナビの途中（class="kotei"）で固定 $(function(){ var nav = $('.kotei'), offset = nav.offset(); $(window).scroll(function(){ if($(window).scrollTop() > offset.top) { nav.addClass('fix-on');} else {nav.removeClass('fix-on');}}); }); ※スタイルシート .fix-on { position : fixed; top : 0; z-index : 10000; } ■フッター（id="footer"）手前で固定解除 window.onload=function(){ var onoff = $("#fotter").offset().top - $(window).height() + 0; //フッターまでの高さを計算＝onoff $(window).scroll(function(){ if($(window).scrollTop() < onoff) //onoffの高さがスクロール量より大きい場合 $(".kotei").addClass("fix-on"); //class="kotei"にfix-onを付与する else $(".kotei").removeClass("fix-on"); //それ以外はfix-onを解除 }); } ■自力で合体したけどうまく動作しなかったコード $(document).ready(function(){ var nav = $(".kotei"), offset = nav.offset(), onoff = $("#footer").offset().top - $(window).height() + 0; $(window).scroll(function(){ if($(window).scrollTop() > offset.top) { nav.addClass("fix-on");} else if($(window).scrollTop() > onoff) { nav.removeClass("fix-on");} else {nav.removeClass("fix-on");}}); }); オフセットを２重に設定したのが競合しているのでしょうか。。？ ※※※補足※※※現在のホームページレイアウト（html） <body> <#wrap> <#content> 略 </#content> </#wrap> <#header> 略 </#header> <#side-nav> <li>略</li> </#side-nav> <#footer> </body> 普通の２カラムと違うところは<#header>をposition:absoluteでトップに絶対配置している事、 <#content>と<#side-nav>は<#header>分のマージンを上部に取っている事、 <#wrap>は<#content>のみを囲っている事です。 ■ヘッダー■←:absoluteでトップに □□■■■■ □□■コン■ ナビ■テン■←maegin-top＋コンテンツだけにwrap □□■ツ■■ □□■■■■ ■フッター■ ２つの条件を両方満たしたjQueryを見つけたんですが、 <wrap>で<side-menu>と<content>の両方を包んでいないと 既存のjQueryでは動作しないようです。 それで２つのjQuertを合体したいという経緯に至りました。
- ベストアンサー
- JavaScript
- 640px以下の時のみjQueryを有効にしたい
JQueryで、以下のソースでやりたい事が実現できました。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function() { $('nav ul').hide(); $('.menu-icon').on('click', function() { var $navList = $(this); if($navList.hasClass("current")) { $('nav ul').slideUp(500,function(){ $navList.removeClass("current"); }); } else { $('nav ul').slideDown(500,function(){ $navList.addClass("current"); }); }; return false; }); }); </script> が、640px以上のときも、効いてしまって「nav ul」が隠れてしまいます。そこで、 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> jQuery(document).ready(function($) { if (window.matchMedia( '(max-width: 640px)' ).matches) { 「上記javascript」 } </script> と、切り分けをし640px以下のときだけ、jqueryが聞くようにしたつもりなのですが、以下の問題が発生しました。 640px以上の場合はjavascriptが無効になったのですが、640px以下の場合には、以下の問題が発生しました。 ・640px以上の場合はhideされることなく表示されるようになったのですが、640px以下の場合にも.hideされずに開きっぱなし ・.menu-iconでhideのオン・オフが切り替えられたのですが、無反応になりました。 つまり、全体にjavascriptが全く聞いていない。640px以下の時のみjQueryを有効にするにはどうしたらいいのでしょうか？教えてください。 以上、よろしくおねがいします。
- 締切済み
- JavaScript
- jQueryでリストを分割してページ送りを表示
現在、以下の内容でリストを分割してページ送りで切り替えられる様にしています。 [jQuery] $(function() { var item = $('#list li').length; var i = 0; while (i < item){ var group = i * 10; var num = group + 10; for (var j = group; j < num; j++) { $('#list li').eq(j).addClass('num'+(i+1)); } i++; } /* Pagenation */ $('#list').after('<ul id="nav"></ul>') var lastrep = $('#list li:last').attr('class').replace(/no/i,''); var lists = ""; for (var i = 0; i < lastrep; i++) { lists += '<li class="page-count">'+( i+1 )+'</li>\n'; } $("nav").append(lists); /* First View */ $('#list li').hide(); $('#list .no1').show(); $('#nav li').eq(0).addClass('current'); /* Click */ $('#nav li').click(function () { var items = $(this).parent().children().index(this); var setitems = items +1; $('#list li').hide(); $('#list .no'+setitems).show(); $('#nav li').removeClass('current'); $(this).addClass('current'); }); }); [html] <ul id="nav"> <li class="page-count current">1</li> <li class="page-count">2</li> <li class="page-count">3</li> <li class="page-count">4</li> </ul> <ul id="list"> <li class="no1">item</li> <li class="no1">item</li> ... <li class="no4">item</li> </ul> このページネーションの部分を次の様にするにはどうしたら良いでしょうか…？ [html] <ul id="nav"> <li class="page-count">Prev</li> <li class="page-count">Next</li> </ul> <div class="count"><span class="now">1</span>/<span class="total">4</span></div>
- ベストアンサー
- JavaScript
- jquery 追従メニュー IEについて
下記jqueryを使って追従メニューを制作した時に、IEで確認すると限りなくスクロールできてしまいます。 解決する方法を検索しましたがわかりませんでした。 どなたかお分かりの方教えてください。 よろしくお願いします。 <script type="text/javascript"> $(function() { var offset = $("#leftcontent2").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#leftcontent2").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#leftcontent2").stop().animate({ marginTop: 0 }); } }); }); </script>
- 締切済み
- JavaScript
- jqueryについて教えて下さい。
貴重な場をお借りして質問させていただきます。 知識のある方、お力を貸して下さい。 今勉強の為プラグインなどを制作しておりまして、 一定の値までスクロールするとコンテンツをフェイドインさせるような スクリプトを書いています。 ただ、別ページに遷移して戻ってくると、opacityが0となり真っ白な状態と なってしまいます。 それを解決するためにcookieなどを使ったりはして出来たのですが、 スマートではないので、cookieを使用せずに出来れば嬉しいのですが、 良い方法ございましたら、ご教示いただけないでしょうか。 宜しくお願い致します。 <script type="text/javascript"> $(function(){ $('#contents1').locationFade(); $('#contents2').locationFade(); $('#contents3').locationFade(); $('#contents4').locationFade(); }) </script> (function($) { $.fn.locationFade = function(options){ var defaults = { fadeSpeed:500, location:300, easing:'swing' } var opts = $.extend(defaults , options); var windowHeight = $(window).height(); var target = $(this); target.css('opacity',0);//最初に透明度0とする $(window).on('load' , function(){ //画像が読み込まれた後でないとtargetOffsetがきちんと取れない為 target.each(function(){ var targetOffset = target.offset().top; if(windowHeight > targetOffset){ //最初から要素がwindowサイズ内に表示されているなら即fadeIn target.stop().fadeTo(opts.fadeSpeed , 1 , opts.easing) } $(window).on("scroll", function(){ var scrollTop = $(window).scrollTop(); var scrollVol = scrollTop + windowHeight - opts.location; //locationはその要素のどれだけ上に来た時に表示するかの値 if(targetOffset <= scrollVol){ target.stop().fadeTo(opts.fadeSpeed , 1 , opts.easing) }; }); }); }); }; })(jQuery);
- ベストアンサー
- JavaScript
- jquery returnについて
貴重なスペースをお借りいたします。 jqueryを勉強中前々から調べてもよくわからない部分がございまして、 皆様のお力を貸して頂ければとおもいます。。。 jqueryのreturnについてなのですが、 あやふやな部分が多く、どこで使えるのか、どうゆうときに使うのかということが今だに理解できていないところがございます。 $('#photogallery li .imgArea').hide();//ページ上の画像を隠す $(window).bind("load", function(){ var interval = 300; //表示間隔 for(var i=0; i<$('#photogallery li .imgArea').length; i++) setTimeout(doFade(i), interval * i); function doFade(i){ return function(){ $('#photogallery li .imgArea').eq(i).fadeIn(1000); }; } }); 上記は画像のプリロードをするためのjqueryなのですが、最下部のreturn function～の部分ですね、 なぜreturnで関数を返さないといけないのかがさっぱりわかりません。 doFade(i)でfadeInを実行するならreturnをかかなくてもいいのではないかと思い困惑中です。 物分かりが良い方ではなく、どなたかわかりやすく説明していただける方がいたら、 どうぞ宜しくお願い致します。
- 締切済み
- JavaScript
- jＱueryで作ったドロワーメニューに画像が被る
トップページにjＱueryを使ってドロワーメニューとカルーセルとアコーディオンメニューを作成しました。 それぞれは作動するのですが、ドロワーを一番上に表示させたいのにカルーセルとアコーディオンメニューが上に被ってしまいます。 jQueryは初心者です。よろしくお願いします。 【html】 <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>')</script> <script src="js/slick.min.js"></script> </head> <body> <div id="wrapper"> <header id="header"> <div class="navDrawrBtn"><span></span></div> <nav class="navDrawr" role="tablist"> <ul> <li> <a>A</a> <ul class="sub" role="tabpanel"> <li><a>a</a></li> <li><a>b</a></li> <li><a>c</a></li> </ul> </li> <li> <a>B</a> <ul class="sub" role="tabpanel"> <li><a>a</a></li> <li><a>b</a></li> <li><a>c</a></li> </ul> </li> </ul> </nav></header> <div class="contents"> <section class="carousel"> <div class="gimmicCarousel"> <ul class="slider"> <li><a href="#"><img src="images/carousel_1.jpg"></a></li> <li><a href="#"><img src="images/carousel_2.jpg"></a></li> <li><a href="#"><img src="images/carousel_3.jpg"></a></li> </ul></div></section> <div class="accordion"> <ul> <li> <a class="toggle">C</a> <ul> <li><a href="#">ca</a></li> <li><a href="#">cb</a></li> <li><a href="#">cc</a></li> </ul> </li> <li> <a class="toggle">D</a> <ul> <li><a href="#">da</a></li> <li><a href="#">db</a></li> <li><a href="#">dc</a></li> </ul> </li> <script>// ACCORDION $(function() { function accordion() { $(this).toggleClass("active").next().slideToggle(300); } $(".accordion .toggle").click(accordion); });</script> <script src="js/script.js"></script> </body> </html> 【jcript.js】 $(function () { var $nav = $('.navDrawr'); var $navBtn = $('.navDrawrBtn'); var $speed = 300; var $navW = 270; //サブメニューを非表示に $nav.find('.sub').hide(); //hover時の挙動 $nav.find('li').hover(function(){ // PC表示時（ハンバーガーボタン非表示時）のみにプルダウンを限定 if ($('.navDrawrBtn span').css('display') !== 'block'){ //li要素にhoverした時に.subがあれば実行する if( $(this).find('.sub').length && !$nav.hasClass('open') ){ $(this).find('.sub').slideDown(); } }jj },function(){ // PC表示時（ハンバーガーボタン非表示時）のみにプルダウンを限定 if ($('.navDrawrBtn span').css('display') !== 'block'){ if(!$nav.hasClass('open')) { $(this).find('.sub').stop(true).slideUp(); } } }); //ドロワーに関連した記述(PCでもドロワーが動作するようにtouchend→clickに変更) $('body').on('click','.navDrawrBtn span',function(){ drawerFunc(); }); $('body').on('click','.overlay',function(){ drawerFunc(); }); function drawerFunc(){ if( $('body').hasClass('menuOpen') ){ $('body').removeClass('menuOpen'); $nav.animate({right:-1*$navW},$speed,'swing'); $('.overlay').fadeOut($speed); }else{ $('body').addClass('menuOpen'); if(!$('.overlay').length){ $('#wrapper').prepend('<div class="overlay"></div>'); } $nav.animate({right:0},$speed,'swing'); $('.overlay').fadeIn($speed); } } }); //カルーセルの設定 $(function () { $('.gimmicCarousel .slider').slick({ accessibility: true, dots: true, autoplay: true, autoplaySpeed:3000, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 1, responsive: [ { breakpoint: 768, settings: { slidesToShow: 2, slidesToScroll: 1, } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, } } ] }); });
- ベストアンサー
- JavaScript
補足
ありがとうございます。 アドバイスの通りhtmlを変更してみたんですけど、やっぱり変わらずで、もう何が何だかさっぱりです…