- ベストアンサー
GallerifficというjQueryはIE7で
GallerifficというjQueryを使ってスライドショーを設置しています。 http://www.twospy.com/galleriffic/ IE7よりも古いバージョンで見ると、レイアウトがぐちゃぐちゃに崩れてしまいます。 このjQueryはIE7では使えないのでしょうか？ いろいろ調べていると英語の情報で、「div.slideshow img」にposition: absolute;やposition: relative;を追加しろと出てきますが、レイアウトが崩れるのはjQueryの問題ではなくCSSの問題なのでしょうか？ 詳しい方教えていただけると幸いです。
- midorinodonchan
- お礼率97% (101/104)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ブラウザ間のござをなくそうとされているのでしたら、当然 HTMLはstrictで作成し、Docymentスイッチも標準モードで動作するように指定されていると思います。 1999年の勧告以来、「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。」-- http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/conform.html#h-4.1 DOCTYPE スイッチ( https://www.google.co.jp/search?q=DOCTYPE%20%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&hl=ja ) <!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 ) でチェックすると早い。 javascript一部は確かにIE7で動作しないものもありますがjQeryは対処されているので大丈夫でしょう。
関連するQ&A
- IEで表示されてしまう余白をなくしたい
ブログポータルのテンプレをカスタマイズしたことがあるレベルの私ですが、今回初めてHPを作っています。 トップページに、jQueryでスライドショーを設置しているのですが、IEで確認したところ、そのスライドショーの上下に、不要な余白ができてしまいます。 スライドショーが参照しているCSSに原因があるんだろうということは、なんとなく分かるのですが、解決方法がわかりません。 スライドショーのCSSですが、オリジナルは以下です。 position:relative; が影響し、上下のcontents（menuやheader）に重なってしまうため、各数値を変更しました。 ------------------ @charset "utf-8"; /*crossFader*/ .crossfader{ position:relative; height:340px; } .crossfader img{ position:absolute; top:0; left:0; z-index:8; opacity:0; cursor:pointer; } .crossfader .active{ z-index:10; opacity:1.0; } .crossfader .last-active{ z-index:9; } ------------------ ソースを見てもらったほうが確実と思いますので、URL記載します。 ほかにも、HTMLの不備などありましたらご指摘下さい。よろしくお願いいたします。 http://miyauchi-babymomcare.com/
- ベストアンサー
- CSS
- jqureryスライドショーが上手くいきません。
こんにちは。 web初心者です。 今、jqueryを使いスライドショーを作っているのですが 上手く行きません。 5枚の画像を重ねてフェードイン フェードアウトみたいな形にしてるのですが、最後の画像だけdisplay: none;が適用されなくてきれいに表示出来ません。 どなたか詳しい方、宜しくお願い致します。 <HTML> <div id="contents"> <div class="slideshow"> <img src="top30.jpg" width="950" height="450"> <img src="top21.jpg" width="950" height="450" class="alt"> <img src="top20.jpg" width="950" height="450" class="alt"> <img src="top22.jpg" width="950" height="450" class="alt"> <img src="top23.jpg" width="950" height="450" class="alt"> </div> </div> <CSS> #contents { width: 950px; margin-right: auto; margin-left: auto; height: auto; .slideshow { width: 950px; border-top-width: 1px; border-top-style: solid; clear: both; padding-top: 60px; height: auto; position: relative; float: left; } .slideshow img { position: absolute; } .slideshow img .alt { display: none; }
- ベストアンサー
- その他（プログラミング・開発）
- このjQueryの意味を説明してください。
jQuery の初心者です。 あるサイトからjQueryでクロスフェードさせる内容のものを 参考にしているのですが、セレクタなどの個々の意味が いまひとつ理解出来ません。 調べて自分なりの解釈を書きましたが、訂正などがありましたら ご説明頂ければと思います。 ■html <div class="box"> <img src="1.png" width="600" height="200" alt="" /> <img src="2.png" width="600" height="200" alt="" /> <img src="3.png" width="600" height="200" alt="" /> </div> ■css .box{ position:relative; height:300px; width:400px; } .box img{ position:absolute; left:0; top:0; } ■js $(function(){ $('.box img:gt(0)').hide(); //0より大きい数字のimgをhideする setInterval(function(){ $('.box :first-child') //.box内の一番目 .fadeOut(1500) //1.5秒かけてフェードアウト .next('img') //次のimgを .fadeIn() //フェードイン .end() //終わったら？？ .appendTo('.box'); //.boxに追加？？ },4000); //4秒間隔で繰り返す });
- 締切済み
- JavaScript
- 「position:absolute」のIEのバグへの対処方法
CSS #navbar { position: absolute; z-index: 1 } HTML <div id="navbar"> 略 </div> <div id="contents"> 略 </div> CSSとJavascriptを使って、プルダウンメニューを作ったのですが、IE7でうまく動かない為ネット検索したところ、CSSの「position:absolute;」に対して、「"absoluteした要素が消える"というIEのバグ?」の記事に出会いました。 このため「position:relative;」としてみたのですが．． メニューの下のコンテンツがプルダウンメニューのプルダウンされる大きさの分だけ下に下がって空間が空いてしまい、メニューバーの下にコンテンツがすぐ在ってその上にプルダウンするメニューが重なる、という表示ができなくなってしまいました。 なにかよい方法はありますでしょうか。
- ベストアンサー
- HTML
- JQUERY slideshowについて
slide-show.jsについての質問です。 ホームページのトップイメージにスライドショーで３枚の写真を動かしています。 で、トップページの写真を９枚にして、左３枚・真ん中３枚・右３枚というふうに動かしたいです。 トップイメージの写真（幅900px）３枚を トップイメージの写真（幅300ｐｘ）×３を３枚スライドにする （意味不明ですか・・・） 下の#slideshow01を#slideshow02、#slideshow03に増やして、設置したら動きませんでした。 出来れば、右→真ん中→左がちょっと時差をつけてスライドして欲しいです。 写真の切り替えは、ＣＳＳのＺーindexを使っています。 現在のＨＴＭＬ <div id='slideshow01'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> 求めるＨＴＭＬ <div id='slideshow01'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_1.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_2.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_3.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> <div id='slideshow02'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_4.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_5.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_6.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> <div id='slideshow03'> <!--スライドショーの３枚ここ！--> <img src="upimg/results/flash_7.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_8.jpg" alt="" width="300" height="400" /> <img src="upimg/results/flash_9.jpg" alt="" width="300" height="400" /> <!--スライドショーの３枚終わり--> </div> この js を使っています。 function slideSwitch() { var $active = $('#slideshow01 img.active'); if ( $active.length == 0 ) $active = $('#slideshow01 img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow01 img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); });
- 締切済み
- JavaScript
- jqueryでHTMLを変える
jquery初心者です。 色々検索してみましたが、見つからないのでここで質問させてください。 jqueryでHTMLソースの変更方法を教えてください。 <a id="link"> <div id="back-img" style="background-image:a.jpg; background-position:0px 100px;" ></div> </a> -------------CSS------------- a{position:absolute;} イメージの上にposition指定のリンクが重なり、 aをマウスhoverで <div style="background-image:a.jpg; background-position:0px 100px;" > ↓ <div style="background-image:a.jpg; background-position:100px 0px;" > に変更したいです。 どうぞよろしくお願いします。
- ベストアンサー
- JavaScript
- ウィンドウの縮小に合わせて変化させるには？
WEBデザインの質問です。 添付画像のようなものを作りたいのですが、ウインドウの幅を小さくした時に、 自動的にそれに合わせて画像も小さくなってもらいたのですができません。 どのようにhtml,cssを書いたらいいですか？ 画像4の上に、画像1,2,3があって、背景、画像1,2,3がメニュー(後で画像にリンクを追加したい)のようなイメージです。 そこで今、画像4は縮小に合わせて一緒に縮んでくれるのですが、 画像1,2,3は色々試してみたのですが変化がありません。 html↓ <body> <article> <div class="relative"> <img src="/../../画像4.gif" class="img-responsive" alt="" /> <img src="/../../画像1.gif" alt="" class="absolute" /> <img src="/../../画像2.gif" alt="" class="absolute2" /> <img src="/../../画像3.gif" alt="" class="absolute3" /> </div> </article> </body> CSS↓ @charset "utf-8"; .img-responsive { display: block; max-width: 100%; height: auto; } .relative { position: relative; } .absolute { position: absolute; top: 515px; left: 185px; } .absolute2 { position: absolute; top: 515px; left: 535px; } .absolute3 { position: absolute; top: 515px; left: 888px; } 初めてhtmlを書いているので、変な質問をしていたらすみません。 お早めな回答をいただけると助かります。 よろしくお願いいたします。
- ベストアンサー
- CSS
- 教えてください!
教えてください！jQueryについて safariではうまく表示されるのですがgoogle chromeでは表示されません。 初心者です。 どうしてでしょうか？ コード載せております。 困っています。分かる方 どなたかご教授お願いいたします。 よろしくお願いいたします。 -----------html------------ <body> <div id="slideshow"> <img src="images/top_01.jpg" width="950" height="450" alt="" class="active" /> <img src="images/top_02.jpg" width="950" height="450"alt="" /> <img src="images/top_03.jpg" width="950" height="450"alt="" /> <img src="images/top_04.jpg" width="950" height="450"alt="" /> <img src="images/top_05.jpg" width="950" height="450"alt="" /> </div> </body> -----------css------------- #slideshow { position:relative; height:450px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } ----------js----------- function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); よろしくおねがいします
- ベストアンサー
- CSS
- jQuery クリックした後の動き
ボタン(#btn)をクリックすると、#navWarpを右に200px 移動するところまでは出来ましたが、２度目のクリックで元の位置まで 戻すにはどのような方法があるのでしょうか。 宜しくお願いします。 ■jquery $(function(){ $("#btn").click(function(){ $("#navWarp").stop().animate({"left":"200px"},500); }); }); ■css #navWarp{ position:relative; margin:0 0 0 -200px; } #btn{ position:absolute; top:0; left:200px; cursor: pointer; } ■html <div id="navWarp"> <div id="btn"></div> </div>
- ベストアンサー
- JavaScript
- css、javascriptの外部化について
<!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" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="lib/global.css" /> <!-- JS --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); }); </script> <!-- CSS --> <style type="text/css"> #slideshow { position:relative; width:320px; height:240px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } </style> </head> <body> <div id="wrap"> <h1>設置サンプル</h1> <p>参照：<a href='http://jonraasch.com/blog/a-simple-jquery-slideshow'>A Simple jQuery Slideshow</a></p> <p>▼画像がフェードしながら切り替わります。</p> <!-- CODE --> <div id="slideshow"> <img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50.jpg" alt="" /> <img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939.jpg" alt="" class="active" /> <img src="http://farm4.static.flickr.com/3174/2973352946_d3589b717e.jpg" alt="" /> </div> <!-- / CODE --> </div> </body> </html> 上記のソースをｈｔｍｌ、ｃｓｓ、javascriptの三つのファイルに分けたいのですが、、、ちょっと分からなかったもので、、、 お願いします 単純に cssファイル #slideshow { position:relative; width:320px; height:240px; } #slideshow img { position:absolute; top:0; left:0; z-index:8; } #slideshow img.active { z-index:10; } #slideshow img.last-active { z-index:9; } javascriptファイル function slideSwitch() { var $active = $('#slideshow img.active'); if ( $active.length == 0 ) $active = $('#slideshow img:last'); var $next = $active.next().length ? $active.next() : $('#slideshow img:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4000 ); }); htmlファイル <script type="text/javascript" src="JSファイルのパス"></script> <link rel="stylesheet" type="text/css" href="cssファイルパス" /> -------------------------------------- 上記でいけると思ったのですが、、、単純すぎました よろしくお願いいたします
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 勉強しながらやってみます。