- ベストアンサー
IEでkamome slideshowが表示できないエラーについて
- IEでkamome slideshowが表示できないエラーについて教えてください。
- IEのエラーメッセージには、'elem_id' は Null またはオブジェクトではありませんと表示されます。
- ライン524のコードに問題があるようですが、具体的に何がいけないのかわかりません。
- 13202
- お礼率40% (2/5)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
- fujillin
- ベストアンサー率61% (1594/2576)
kamome slideshowってこれのことでしょうか？ http://firstaudience.com/pages/javascript/kamome/ このデモページも動作していませんか？（当方のIE6では動作しています。） jsの中身は見てませんが、エラー内容から想像すると対象要素が正しく指定できていない雰囲気。 HTMLのid名を変えているのに、scriptのid指定を修正していないとかいうことはありあませんか？ デモページの「設置方法」のサンプルをコピペして（画像名等は修正）、同様にエラーとなるかどうかを確認してみてはいかがでしょうか？
補足
お答えくださり、本当にどうもありがとうございます。 助言していただいたとおり、もう一度サンプルをコピぺして試してみたのですが やはり、上手くいきません。 初心者なので、どこかで何かを変更しているのだと思うのですが、 なにがいけないのか・・・。 不躾ながら、もし引き続き相談に乗ってくださったら、と期待をこめて 問題のあるページを書かせていただきます。 作業環境 dreamwever 問題のあるページ http://13202.info/camino-e.asp （このページ以外でも、kamomeのスライド自体、全てのページがIEでは動かないのですが。） いつもはgoogle cromeかFirefoxを使っていて、IEで表示されない事に気がつかなかったのですが この写真プロジェクトの友人全員にこのページを見てもらいため、どうにかIEで見れるようにしたいです。 どうぞ、よろしくお願いいたします。 どうぞ、よろしくお願いいたします。
関連するQ&A
- 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
- Firefoxでheight:100%がきかない？
ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。 よろしくお願いいたします。 <!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" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定・IE6のハック*/ #wrapper { width: 1000px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FF0000; } body > #wrapper { height:auto; } /*ヘッダの設定*/ #header { width: 1000px; height: 123px; clear: both; } /*メインコンテンツの設定*/ #container { width: 1000px; clear: both; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#00FF00; } /*左カラム外側（2カラム内包）*/ #container_left01 { width: 732px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（左側）*/ #container_left02 { width: 268px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（右側）*/ #container_left03 { width: 463px; float: right; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height: 100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FFFF00; } /*右カラム*/ #container_right01 { width: 267px; float:left; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>
- 締切済み
- HTML
- cssで擬似フレームについて
はじめて質問させていただく、CSS初心者のものです。 下記のdivタグを画面中央寄せにする方法はあるのでしょうか？ HTMLとCSSは下記のように書いています。 HTML <body> <div id="header"> （width="800" height="180" のflashファイルを入れています） </div> <div id="main"> （ width="700"のコンテンツを作りスクロールさせていま） </div> <div id="footer">テキストを一行入れています</div> </body> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｃｓｓ html{ height:100%; overflow:hidden; } body{ height:100%; width:100%; margin:0px auto; background-color: #000000; } #header{ position: absolute; height: 180px; width: 800px; overflow: hidden; top: 0px; } #main{ overflow: auto; position: absolute; width: 800px; top: 180px; bottom: 20px; background-color: #FFFFFF; } #footer{ position: absolute; width: 800px; bottom: 0px; font-family: "Courier New", Courier, mono; font-size: medium; font-style: italic; color: #00FF33; height: 20px; background-color: #000000; overflow: hidden; } このような感じなのですがなにかいい方法があればご教授お願いいたします。
- ベストアンサー
- HTML
- IE6にてliタグに対してposition:absolute;を使ったときのバグについて
すみません、質問させて下さい。 下記のソースとスタイルシートでIE6の場合だけliが原因と思われる余白ができます。他のモダンブラウザ、IE7以降ではhrの部分を除いて問題ありませんでした。余白をなくす方法はないでしょうか。 ソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link href="test.css" type="text/css" rel="stylesheet"> <title>test</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>test</h1> </div> <div id="contents"> <div id="lefty"> <p>test test test （略）</p> </div> <div id="righty"> <p>test test test （略）</p> </div> </div> <hr> <div id="navi"> <ul> <li id="list01"><a href="#">赤</a></li> <li id="list02"><a href="#">青</a></li> </ul> </div> <div id="footer"> <address>copyright.</address> </div> </div> </body> </html> スタイルシート @charset "shift_JIS"; * { margin: 0; padding: 0; } body { text-align: center; } #wrapper { margin: 0 auto; width: 760px; position: relative; text-align: left; } #header { width: 760px; height: 100px; background-color: #CC9900; } #contents { width: 760px; } #lefty { width: 380px; float: left; background-color: #CCC; } #righty { width: 380px; float: right; color: #FFF; background: #000 } #list01 a { display: block; width: 180px; padding: 30px 0 0 0; overflow: hidden; background: url(images/nav01.gif) no-repeat; height: 0px !important; height/**/: 30px; position: absolute; top: 30px; right: 0; } #list02 a { display: block; width: 180px; padding: 30px 0 0 0; overflow: hidden; background: url(images/nav02.gif) no-repeat; height: 0px !important; height/**/: 30px; position: absolute; top: 60px; right: 0; } #list01 a:hover { display: block; width: 180px; padding: 30px 0 0 0; overflow: hidden; background: url(images/nav01_on.gif) no-repeat; height: 0px !important; height/**/: 30px; position: absolute; top: 30px; right: 0; } #list02 a:hover { display: block; width: 180px; padding: 30px 0 0 0; overflow: hidden; background: url(images/nav02_on.gif) no-repeat; height: 0px !important; height/**/: 30px; position: absolute; top: 60px; right: 0; } #footer { clear: both; padding-top: 30px; width: 760px; background-color: #990033; } li { list-style-type: none; } a { text-decoration: none; } hr { clear: both; width: 0; } どなたかご教授ください、よろしくお願いします。
- ベストアンサー
- HTML
- 100%ボックス・フッタ固定、IE6だけ左寄り…
いつもお世話になっています。 画像のような構成で、100%ボックスの下にフッターを付けたページ なのですが、IE6だと左寄せになってしまいます。 いろんなCSS解説のHPを渡り歩いてみたのですが、どこが悪いのか 分からず。 どうぞよろしくお願いします。 /*100%ボックスとフッター画面の下固定のためのCSS-------------*/ html{ height: 100%; } body{ background-image: url(../common/bg.gif); height: 100%; text-align: center;/*ie6 centering*/ } * html div#container{ height: 100%; } div#container{ width: 800px; margin: 0 auto; background-color: #FFFFFF; position: relative; min-height: 100%; text-align: left;/*ie6 centering*/ } body > #container { height: auto; } div#main{ padding: 0 0 60px 0; } div#main:after { content: ""; display: block; clear: both; height: 1px; overflow: hidden; } /*\*/ * html #container { height: 1em; overflow: visible; } /**/ /*フッター---------------------------------------*/ #footer{ clear:both; background-color:#4682B4; position:absolute; bottom:0px; height:30px; width:100%; text-align:center; line-height:30px; font-size:80%; color:#FFFFFF; }
- ベストアンサー
- HTML
- 4：3とパノラマ写真の混在スライドショーについて
ホームページに写真のスライドショーを用意しています。 他板でのアドバイスで動かなくなったものが動くようになりました。 写真の表示もできるようなって良かったのですが、 若干問題があり、アドバイスをお願いしたいのです。 ＯＳ：win7 ＩＥ：１１ 下記のソースを頂きましたが・・・・ 写真 4：3表示・・・全体が表示されない（はみ出した感じ） 写真サイズ 800×600ですが → 1068×800と表示サイズが大きくなっています パノラマ：高さに合わせて左右がカットされたようになります。 800×284ですが → 2254×800の表示サイズの様です これも大きくはみ出しています どちらも、height:600pxとなっていますが、web上では800pxになっています ●なぜ高さが600pxの設定が有効にならないのか 狙いは、横方向800pxでパノラマにも対応したい （パノラマの場合、高さ方向は低く表示する） <STYLE type="text/css"> #container {width:100%;text-align:center;} #slideshow {margin:0 auto;width:800px;height:600px;text-align:left;} #slideshow div {width:800px;height:600px;overflow:hidden;position:relative;} #slideshow div div {top:0;left:0;position:absolute;} #slideshow ul {width:800px;} #slideshow ul li {width:100px;height:75px;float:left;display:inline;} #slideshow .active {filter:alpha(opacity=100)!important;-moz-opacity:1!important;opacity:1!important;} --> </STYLE> 4：3の写真（800：600）の全体表示 パノラマ写真800サイズの高さは自動調整 ができると良いのですが・・・ ここまで書いて、素人ですというのも申し訳ないように思いますが アドバイスをいただけないでしょうか
- ベストアンサー
- HTML
- IEではうまく行くのですが他のブラウザでも表示できるように…
下記のようにしたのですが、IEではうまくゆくのですが、 他のブラウザではできません。 同じようにするにはどのように調整したらよいのか教えてください。 <DIV> <SPAN style="overflow:hidden;width:30px"> <TABLE border="1" width="100%"> <TR bgcolor="silver"><TD>A</TD></TR> </TABLE> </SPAN> <SPAN id="title" style="overflow-y:scroll;overflow-x:hidden;width:150px;"> <TABLE border="1" style="table-layout:fixed;width:150px"> <TR bgcolor="silver"><TD>C</TD><TD>D</TD><TD>E</TD></TR> </TABLE> </SPAN> </DIV> <!--本体部分--> <DIV> <SPAN id="fixedcols" style="overflow:hidden;overflow-x:scroll;width:30px;height:80px;"> <TABLE border="1" style="width:100%" bgcolor="#ffffcc"> <TR><TD>F</TD></TR> <TR><TD>K</TD></TR> <TR><TD>P</TD></TR> <TR><TD>U</TD></TR> </TABLE> </SPAN> <SPAN id="maincols" style="overflow:scroll;width:150px;height:80px" onscroll="fnc_scroll()"> <TABLE border="1" style="table-layout:fixed;width:150px"> <TR><TD>H</TD><TD>I</TD><TD>J</TD></TR> <TR><TD>M</TD><TD>N</TD><TD>O</TD></TR> <TR><TD>R</TD><TD>S</TD><TD>T</TD></TR> <TR><TD>W</TD><TD>X</TD><TD>Y</TD></TR> </TABLE> </SPAN> </DIV> <SCRIPT language="javascript"> <!-- function fnc_scroll(){ document.all.item('fixedcols').scrollTop=document.all.item('maincols').scrollTop; document.all.item('title').scrollLeft=document.all.item('maincols').scrollLeft; } --> </SCRIPT>
- ベストアンサー
- JavaScript
- 疑似フレームがIEだと成り立たない
疑似フレームがIEだと成り立たない 以下のようなCSSですが、FIREFOXやクローム等では反応するのですが、 IEだと処理されません。 どうすればいいのでしょうか？ 教えてください。お願いします。 ちなみにCSSというものは初心者です。申し訳ありません。 <STYLE> <!-- BODY .menu1 { width : 12%; height : 100%; left : 0px; top : 100px; position : fixed; overflow: auto; } .menu2 { width : 12%; height : 100%; right : 0px; top : 100px; position : fixed; overflow: auto; } .main { position : absolute; z-index : 1; } --> </STYLE>
- 締切済み
- ブログ
- IE6,IE7でボックスがずれてる。解決法を願いし
こんにちは、Santaと申します。 いつもお世話になっております。 さて、ホームページを製作しております。 ブラウザプレビューには、 Chrome 16.0 Firefox 8.0.1 IE9 ソフト Microsoft Expression SuperPreview 4 Trial を使用しまして IE6 IE7 IE8 IE9 Firefox3.6 を確認しておりますが、IE6とIE7のみ、ボックスがずれてしまいます。 どのようにしましたたら、解決できますでしょうか？ html（複雑に作ってしまいましたので、簡単に書かせて下さい） ******************************************* <div id="wrapper"> <div id="header> Rと書いてある画像が入っているボックスです </div> <div id="line"> 直ぐ下の、１０pxの横長の950pxの黒いラインです。 </div> <div id="contents"> こちらに５つのDIVボックスが入っております。 ●左の赤いwidth:75px height:500px;のものが一つ目のDIVボックスです。 </div> </div> 簡単に書きました。 画像のとおり、<div id="line"></div>に入っている width:950; height:10px; の黒のラインが少し下がってしまい、赤色の部分と重なってしまっております。 赤色の部分が上がっているのではなく、上の横長の黒のラインが下がっているようです。 何か解決法が御座いますでしょうか？ どうぞ、よろしくお願い致します。 失礼致します。
- ベストアンサー
- CSS
- firefox とie6 でのbackground height wi
firefox とie6 でのbackground height width表示の違い ホームページ作成しています。 初心者です。 globalnavi というdiv のなかに globalnavi li をfloat-rightで横並びにしました。 width 800px height 30px にしたいのですが IEやfirefoxでずれが生じます。よくあるトラブルのよなのでバグ対策など調べて試してみましたが両方がぴったり合うことはありませんでした。丸一日挑戦しましたがギブアップです。background image は30×800のバーをpng形式で作りました。独学でまだ理解していないことばかりで乱雑なcssですみません。ご教示をお願いします！！ #globalNavi{ background-image:url(../menubar.png); width:790px; height:30px; font-size:14px; color: #1C1D21; text-align:center; } #globalNavi li{ float:right; overflow:hidden; width:80px; height:30px; list-style-type:none; text-align:center; color: #1C1D21; border-left-width: 2px; border-left-style: solid; border-left-color: #999; line-height:0; } #globalNavi a{ width:80px; height:30px; display:block; text-align:center; line-height:normal; } #globalNavi a:hover{ width:80px; height:30px; background-position: 0 -80px; background-color:#B7D68D; text-decoration: none;
- ベストアンサー
- HTML
お礼
回答どうもありがとうございます。 文法違反だったんですね、直しました。 しかしながら、やはりIEでは表示できません。 他に何か問題点等ありますでしょうか？ もしよろしければ、助言を頂きたいです。 どうぞよろしくお願いいたします。