- 締切済み
【js】特定の位置に来たらCSSを動作させる
AsarKingChangの回答
- AsarKingChang
- ベストアンサー率46% (3467/7472)
どこまで、JSをかけるかわからない投稿なので、 ヒントだけ、書いておきます。 １．スクロール位置を検出します。 ２．思ってる位置になったら、addCSSでスタイルシートを追加。 または、CSSメソッドとそのものをダイレクト書き換え （この場合その、階層のみに反映されます） だけで、OKです。 どうしてもわからないなら、再度質問をお願いします。 サンプル込みで、回答しますので！
関連するQ&A
- 縦のスクロール動作で横スクロールできるJSについて
縦のスクロール動作で横スクロールできるJSについて 質問させて頂きます。 私は現在ホームページを作成しているのですが、その際に横スクロールを要求される時にマウスホイールの縦操作で横にスクロールされれば良いなぁと思っています。 自身で調べた結果、 http://www.skuare.net/test/horizontinyscrolling.html このような方法を見つけたのですが、どうもdivに発生した横スクロールには対応していないようなのです。 ブラウザ内で発生した横スクロール全てに対応しうるJSは存在するのでしょうか？ （もしくは上記のJSの使い方が悪かった…？） あれば利用したいのでご回答宜しくお願い致します。 なお、勝手ですが横スクロールなど使うなという回答はご遠慮願いますm(__)m
- ベストアンサー
- JavaScript
- JSで自動スクロールを行う方法。
初めまして JSで自動スクロールを行う方法について質問があります。 以下のようにした場合、wall から wall_2 に自動スクロールが出来るのですが スクロールする際に、アニメーションを付加したい場合はどのようにしたらよろしいでしょうか。例えば、ゆっくりスクロールさせるにはどのようにすればよろしいでしょうか。 希望はanimate 関数を使いたいのですが、上手くいきません。。 [HTML] <div id="wall"></div> <div id="wall_2"></div> [JS] jQuery("#wall").click(function(){ $(window).scrollTop($('#wall_2').offset().top); }); 以上、よろしくお願いします。
- ベストアンサー
- JavaScript
- IE, NN の動作の違い(height=100%)
下記のように記述した場合、IEだと、文が書いてあるところ全ての背景が黄色になりますが、NNだと、スクロールなしで見られるエリアしか背景が黄色になりません。 なにか、記述に問題がありますでしょうか？ また、NNでIEと同様の動作を得る方法があれば教えていただけますか？ なお、OSはWin2000、IEのバージョンは6、NNのバージョンは7.1です。 ---（以下、要所のみ記載します）--- <STYLE type="text/css"> DIV#test{ width:100%; height: 100%; background: yellow; } </STYLE> <BODY> <DIV id="test"> （スクロールしないと見られない量の長文） </DIV> </BODY> ---（ここまで）---
- ベストアンサー
- CSS
- css3のセレクタについて
質問させてください。 CSS3で疑問に思っていることがあります。 たとえば、 例1） <div id="sample"> <p>サンプル1</p> <p>サンプル2</p> <p>サンプル3</p> </div> に対して、cssで #sample p:nth-cihld(3){ color:red;} とすればサンプル3だけ赤文字になると思います。 また 例2） <div id="sample"> <dl> <dt>サンプル1</dt><dd>sample1</dd> </dl> <dl> <dt>サンプル2</dt><dd>sample2</dd> </dl> <dl> <dt>サンプル3</dt><dd>sample3</dd> </dl> </div> に対して、 #sample dl:nth-cihld(3){ color:red;} とするとサンプル3 sample3が赤文字になります。 (検証ブラウザはクローム/FF/IE9・10) IE7・8はCSS3に対応していないので、赤文字になりません。 IE7・8にも対応するようにselectivizr.jsを使用します。 すると 例1はIE7・８で赤文字になりますが、例２は変化なしでした。 これはselectivizr.jsの仕様なのでしょうか。 それとも、厳密に言うとdl要素はdiv要素の子要素には当たらないのでしょうか。 腑に落ちなくてかなり時間を使ってしまいました。 ご教授いただけませんでしょうか。 よろしくお願い致します。
- 締切済み
- HTML
- ＪＳの記述を別ファイルに移す
下記のＨＴＭＬ内の <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
- CSSのクラス指定について
CSSのクラス指定で質問させていただきます。 下記の条件で「a-クラスのついたDIV」の中で、 なおかつ一番初めに表示される[a-]の背景色だけ「赤色」にする方法を教えてください。 「a-1」「a-2」「a-3」はそれぞれ時間によって消えたりし、[x]が挿入されたりします。 以上のように条件が変わっても、常にclass=「a-」のついた一番上のDIVの背景は赤色になります。 HTML------------------- <div class="wrapper"> <div class="x"></div> <div class="a-1"></div> <div class="a-2"></div> <div class="a-3"></div> </div> css----------------------- [class^="a-"]{}; nth-of-typeを使って指定できると思うのですが、いまいちうまくできません＞＜ ぞうぞよろしくお願いします。
- ベストアンサー
- CSS
- CSSについて
はじめまして、今日の質問内容は、サイト制作に使うCSSについてです。 あるサイトのコードを見ていてどうしてもわからない部分がありまして、ご質問させていただきました。 まずhtml部分で <html> (略） <body> <div id="itemCanvas"> <div class="item"> (略） </div> </div> という風にdiv itemCanvasブロックの中にdiv itemブロックを作ります。その後、CSS部分で CSS部分 #itemCanvas .item >*{ display:block; } という記述がでてきます。 この >* という意味がわかりません。 どなたか詳しい方で存知の方はいないでしょうか？よろしくお願いします。
- ベストアンサー
- CSS
- CSSのfilterでテキストまで透明化される
CSSのfilterプロパティで背景色だけでなくテキストまで透明化されてしまいます。 以下のように親divの中に子divを造り、その子divにテキストを入力し、 親divに設定した背景画像が子divに透き通って見えるように 子divにfilterプロパティを設定しました。 子divの背景色（白）が透明化され親divの背景画像が見えるようになったのはいいのですが、 背景色（白）だけでなくテキスト文字まで透明化されてしまいます。 テキスト文字だけ透明化されないように設定したいです。 ブラウザチェック：windows IE 8 です。 ******************************************************* 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } ******************************************************* テキスト文字まで透明化されるので、さらにそのテキストをpタグで囲ってみましたが、 それでもテキストが透明化されている（親divのfilterがpタグまで継承されているから？）ので pタグにfilterプロパティで不透明を１００に戻すような設定をしてみましたが適用されません。 ************************* 【変更後】 *********************** 【XHTML】 <div class="test1"><div class="test2">テキスト</div></div> 【ＣＳＳ】 .test1{ width:300px; height:300px; background-image:url("image.jpg"); } .test2{ width:150px; height:50px; background-color:#ffffff; filter:alpha(opacity=30); ←背景色（白）が透明ぽくなるように設定 } p { filter:alpha(opacity=100); ←テキスト文字まで透明化されるのでpタグで囲って不透明１００に設定 } ******************************************************* ご指導のほどよろしくお願いします。
- ベストアンサー
- CSS
- html cssで困っています
基本的な質問ですが、 html部分 <html> <head> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="soto"> <div id="naka"></div> </div> </body> </html> css部分 @charset "utf-8"; #soto{ width:320px; height:480px; background-color:#FB0004; } #naka{ width:160px; height:50px; margin-top:160; margin-left:80px; background-color:#000000; } としたら、赤の長方形の真ん中当たりに黒の長方形がくると思ってやったのですが、全体が下がります。ねらった通りにするにはどのようにしたらいいのでしょうか。paddingで無理矢理したのですが、この記述の根本的なミスはなでしょうか？教えていただければありがたいです。
- ベストアンサー
- HTML
- javascriptにてcss切り替え
現在webサイトを作成しており、javascriptのcss切り替えにてページの色変更を作っています。 (青、緑、赤、三色で作成) デフォは青で表示しています。 その後緑、赤とリンクで色が変わるようにしています。 ここでご質問です。 緑をクリックした場合は緑に変わる(赤も同様)のですが、別ページにリンクした場合、緑(赤)ではなく青に戻ってします。 別ページにとんでも緑(赤)が引き継がれるにはどのように記述したらよろしいでしょうか? ソースは以下のとおりです。 <head> <link rel="stylesheet" type="text/css" href="css/blue/top.css" media="all" /> <script src="js/styleswitch.js" type="text/javascript"></script> <link rel="alternate stylesheet" type="text/css" title="blue" href="css/blue/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="green" href="css/green/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="red" href="css/red/top.css" media="all" /> </head> <body> <div style="width:200px;"> <a href="javascript:chooseStyle('blue', 30)">青</a><br /> <a href="javascript:chooseStyle('green', 30)">緑</a><br /> <a href="javascript:chooseStyle('red', 30)">赤</a> </div> </body> javascriptは以下のところからしようしています。 http://noongoro.main.jp/note/note0059.html javascriptは初心者です。 ご教授お願いいたします。
- ベストアンサー
- JavaScript