- ベストアンサー
javaを入れると勝手に作られるcssについて
はじめまして。 jquery.sticky.jsを読み込ませて、ページをスクロールさせると右側のバナーがついてくるようにするスクリプトを入れたところ※、勝手に【element.style】というcssが追加されてページ上部に不自然な高さができてしまいました。 このelement.styleを無効にしたいのですが、どなたかご存知の方いらっしゃいましたら、宜しくお願い致しますm_ _m ※対応するhtmlは78行目の【div id="socialbox"】です。 ページURL http://www.kaitenichiba.jp/contact/sub2.html
- cxa63xnh
- お礼率100% (2/2)
- HTML
- 回答数2
- ありがとう数12
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
まず、javaとjavascriptは名前は似てますが全くの別物ですのでご注意を。 element.styleはタグのstyle=""に直接書かれたスタイルです。 デモを見るとjquery.sticky.jsはposition:absolute;なタグを想定していないようです。 本来の使い方としては、ある要素が画面内にいるうちはなにもせず、 画面外に行った時には画面内に表示するために導入されるべきものかと思います。 今回の場合は、 #socialboxの position:absolute; を position:fixed; にすればいいだけのように思えます。
その他の回答 (1)
- think49
- ベストアンサー率59% (285/482)
http://www.kaitenichiba.jp/contact/contact.css で #socialbox { margin-top:100px; } が定義されている為ですね。 これは jquery.sticky.js が指定したものではありませんし、element.style で margin-top:100px; は定義されていませんでしたので、jquery.sticky.js はシロだと思います。 また、Java と JavaScript は似て非なるものですのでお気をつけ下さい。 # Re: cxa63xnhさん
お礼
ご回答有難うございました！ なんとか解決できました。 JavaとJavascriptの違いについても気を付けていきますm(__)m
関連するQ&A
- HTMLをWordPress化 CSSをどこに？
HTMLをWordPress化にするための勉強をしています。 HTML側 CSS ヘッダー内 <link rel="stylesheet" href="css/test.css"> <link rel="stylesheet" href="css/test2.css"> JS ヘッダー内ではなく一番下</body>の前に配置 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="js/test1.js"></script> <script src="js/test2.js"></script> ★これをfunctions.php に記述するにはどうすれば良いのでしょうか？ function sample_scripts() { // CSSの読み込み wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test.css', array(), '1' ); wp_enqueue_style( 'jdsa-style', get_template_directory_uri().'/css/test2.css', array(), '1' ); // jqueryの読み込み wp_deregister_script( 'jquery' ); wp_enqueue_script( 'jquery', get_template_directory_uri().'https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', array(), '1.10.3', true ); // サイト内のjsの読み込み wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test1.js', array(), '1', true ); wp_enqueue_script( 'jdsa-script', get_template_directory_uri().'/js/test2.js', array(), '1', true ); }//ここまで 結果 ヘッダー内にtest.cssのみ記載、test2.cssは記載していない。 jsはどこにも記載していませんでした。 どこが間違っておりますか？ 宜しくお願いします。
- ベストアンサー
- PHP
- jqueryを使ったスクロール画面が正しく作動しません。
jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。 以下のようなものを書いてみました。しかし、スクロールされるべき文字（この場合は「テスト」）が右からでてきません。左端に現われてすぐに消えてゆきます（一様左にスクロールされながら消えるのですが）。 どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。 よろしくお願いいたします。 <!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"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span> テスト</span> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- Twitter Bootstrap初期設定
ドットインストールのソースをそのままコピーして 実行したところ、段組が崩れます。同じソースコードデモボタンから実行すると綺麗に動作している。 ＵＴＦ－８で保存もしています。 バージョンが違うためその他の設定が必要なのでしょうか？ ｊquery,cssなどがうまく動いてくれません。 1.<!DOCTYPE html> 2.<html lang="ja"> 3.<head> 4. <meta charset="utf-8"> 5. <title>Bootstrap 101 Template</title> 6. <link href="css/bootstrap.min.css" rel="stylesheet"> 7.</head> 8.<body> 9. 10.<div class="row"> 11. <div class="span4" style="background:red">Sidebar</div> 12. <div class="span8" style="background:green"> 13. Main 14. <div class="row"> 15. <div class="span4">aaa</div> 16. <div class="span4">bbb</div> 17. </div> 18. </div> 19.</div> 20. 21.<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> 22.<script src="js/bootstrap.min.js"></script> 23.</body> 24.</html>
- ベストアンサー
- CSS
- jquery uiが動かない
jquery uiが動きません。 何度も見直し、プログラムを書いてもどこがいけないかわかりません。 教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>
- ベストアンサー
- JavaScript
- jQuery UIのdraggableについて
こちらでは初めて質問させていただきます。 よろしくお願いします。 現在、jQuery UI の draggable を使用してWebブラウザ上での ドラッグ＆ドロップを実装中なのですが、 期待通りに動作させることが出来ません。 <script></script> …… (1) <html> <head> <script type="text/javascript" src="jQuery/jquery-1.3.2.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.core.js"></script> <script type="text/javascript" src="jQuery/jquery-ui-1.7.2/development-bundle/ui/ui.draggable.js"></script> <style> #a { height:100px; width:300px; overflow:scroll; border:solid 1px Black; } #b { width:60px; height:40px; background:lime; position:absolute; top:10px; left:50px } #c { width:60px; height:40px; background:lime; position:absolute; top:60px; left:50px } </style> <script type="text/javascript"> $j = jQuery.noConflict(); $j(function($) { $('#b').draggable(); }); $j(function($) { $('#c').draggable(); }); </script> </head> <body> <div id="a"> <span id="b">Drag Element1</span> <span id="c">Drag Element2</span> </div> </body> </html> ドラッグ対象は複数存在するため、ドラッグ対象を<div>エリア内で スクロール（必須です）させています。 ドラッグ対象を<div>エリア外にドラッグしたいのですが、 <div>エリア内しかドラッグできません。 ((1)の記述がないと、ドラッグ対象が<div>エリア内でスクロール しませんでした。？？？) どなたか、よきアドバイスをお願いします。
- 締切済み
- JavaScript
- onclick属性に外部jsと外部cssの記載方法
表題の通りclickイベントを付与したいのですが、記載方法が分からなくて困っています。 例） <div id="sample1"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='block'; document.getElementById('sample1').style.display='none'">ぴーしー</a> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </div> <div id="sample2" style="display:none"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='none'; document.getElementById('sample1').style.display='block'">もばいる</a> </div> 上記のままだと更新ボタンを押さないと反映されなかったので、onclick属性にjquery.mobileを付与したいと思いまして。toggle,appendToなども試しましたが、挙動がおかしかったので、有志の方、代換え方法や助言をお願いします。
- 締切済み
- JavaScript
- Camera slideshowの使い方について
jQueryプラグイン"Camera slideshow"を試しに使ってみたのですが、まったく動きません。 どこが間違っているのか見当もつかなく困っています。 【head内】 <head> <!--省略--> <link rel="stylesheet" id="camera-css" href="/camera.css" type="text/css" media="all"> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.mobile.customized.min.js"></script> <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/js/camera.js"></script> <script type="text/javascript" charset="utf-8"> <script type="text/javascript"> jQuery(function(){ jQuery('#camera').camera(); }); }); </script> </head> 【HTML部】 <div class="camera_wrap camera_blue_skin" id="camera"> <div data-src="../images/slides/bridge.jpg"></div> <div data-src="../images/slides/leaf.jpg"></div> <div data-src="../images/slides/road.jpg"></div> </div> この情報だけで質問をするのが失礼だったらすいません。 初心者なもので誠に申し訳ございませんが、改善方法をどなたかご教授いただければ大変助かります。 よろしくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
- ブログパーツのjquery利用について
ブログパーツでjqueryを使用してhtmlなどを出力したいのですが、 思い通りの動作ができません。 jsファイルの中身 ------------------------------------------------------------ document.write("<script type='text/javascript' src='http://hoge.com/jquery.js'></script>"); document.write('<link rel="stylesheet" type="text/css" href="http://hoge.com/hoge.css">'); $(function() { $("div").html("<p>aaaaaaaaa</p>"); }); document.write('<div></div>'); ------------------------------------------------------------ これじゃあ、ほかのサイトからjsを読み込んでも 出力されないのでしょうか？ （<script src="http://hoge.com/hoge.js"></script>） document.write("<div>aaa</div>");だけであれば、 ちゃんと出力されるのでjqueryの記述がおかしいのだと思います。 ご教授お願いいたします。
- ベストアンサー
- AJAX
- CSS含めてアップロードしても反映しない。
デスクトップ上でwebサイトをTwitter bootstrapのフレームワークを使いながら構築しました。ローカル上は何の問題もなかったのですが、サーバーにアップロードした途端に、CSSや画像の読み込みがされなくなってしまいました。 The results here may be inaccurate because some stylesheets could not be loaded due to access restrictions. というようなメッセージがfirefoxで確認されました。 ディレクトリ構造は、下記のような感じです。 index.html bootstrap/css bootstrap/js bootstrap/img 実際のindex.htmlのヘッダー (ちなみにhtml5の記法に従ってます。) <head> <meta charset="utf-8"/> <title>Twitter bootstrap practice</title> <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/> <script src="bootstrap/js/jquery.js"/></script> <script src="bootstrap/js/bootstrap.min.js"/></script> <style type="text/css"> body{padding-top:40px} </style> </head> なぜかさっぱりわかりません。 教えてください。 よろしくおねがいします。
- ベストアンサー
- CSS
- さくらVPS css外部ファイル読み込みNG!
スマホのホームページを作成中ですが、なぜか外部ファイルの読み込みがうまく行きません。 【さくらVPSサーバではNG】 <link rel="stylesheet" href="../css/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="../js/jquery-1.9.1.min.js"></script> <script src="../js/jquery.mobile-1.3.2.min.js"></script> 【他サーバからはOK】 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 「nkf -g jquery.mobile-1.3.2.min.css」で漢字コードを確認し、EUCおよびUTF-8の両方試しましたがどちらともNG。 でも他サーバから読み込みは、OK。 LinuxOS設定で、設定すべき点があるのかなぁ～と思っていますが、手詰まり状態です。 1.パソコンのブラウザ(IE/Chrome)からは、読み込みOK。 2.スマホは、Android端末を使用、標準ブラウザ/ChromeともにNG。 どなたか教え願えないでしょうか、宜しくお願い致します。 ※FTPサーバは、ProFTPDを構築し、これを利用しています。
- 締切済み
- Linux系OS
お礼
ご回答ありがとうございました！ #socialbox{position:fixed;…にて解決できましたm(__)m