アコーディオンのフォントがIEのみ適用にならない
- 以下のソースなのですが、Firefox/Operaはスタイルシート指定のメイリオ表示なのですが、IE8で閲覧すると文字がぼやけて表示されます。
- どこに原因があるでしょうか？
- よろしくお願いいたします
- ベストアンサー
アコーディオンのフォントがIEのみ適用にならない
以下のソースなのですが、Firefox/Operaはスタイルシート指定のメイリオ表示なのですが、 IE8で閲覧すると文字がぼやけて表示されます。どこに原因があるでしょうか？ よろしくお願いいたします --- var accordion=function(){ var tm=sp=10; function slider(n){this.nm=n; this.arr=[]} slider.prototype.init=function(t,c,k){ var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:''; h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length; for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}} l=s.length; for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}} } slider.prototype.pro=function(d){ for(var i=0;i<this.l;i++){ var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm); if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl} else if(s.style.display==''){su(s,-1); h.className=''} } } function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)} function sl(c,f){ var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px'; c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')'; if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)} } return{slider:slider} }(); var slider1=new accordion.slider("slider1"); slider1.init("slider"); var slider2=new accordion.slider("slider2"); slider2.init("slider2",0,"open"); var slider3=new accordion.slider("slider3"); slider3.init("slider3",0,"open");
- ryoryu2002
- お礼率100% (1346/1346)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
[ANo.3] の補足に対する回答ね。 opacity=100 を opacity=50 に換えてみるとわかるけれど、 filter:alpha を有効にするには、hasLayout を true にする必要がって、 でも、 filter:alpha と hasLayout=true のときは「フォントの縁を滑らかにする」が無効になるので 論理的に無理。 なので filter:alpha をあきらめる。 または、 透明度を持ったブロック要素を上からかぶせてごまかす。 <div style="position:relative;width:20em;height:5em;"> <div style="width:100%;height:100%;"> <p>width:100%;</p> </div> <div style="position:absolute;top:0;background-color:white;width:100%;height:100%;opacity:0.5;filter:alpha(opacity=50);"> </div> </div>
その他の回答 (3)
- dscripty
- ベストアンサー率51% (166/325)
IE8 以下の実装の不備だとおもうよ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>IE8 以下の実装の不備</title> <style type="text/css"> body { font-family:meiryo, sans-serif; } </style> </head> <body> <div style="width:20em;filter:alpha(opacity=100);"> <p>width:20em;filter:opacity(alpha=100);</p> </div> <div style="filter:alpha(opacity=100);"> <p>filter:opacity(alpha=100);</p> </div> <div style="width:20em;"> <p>width:20em;</p> </div> </body> </html> 関連 hasLayout Property http://msdn.microsoft.com/en-us/library/ms533776%28v=vs.85%29.aspx
お礼
どうもありがとうございました。
補足
原因追及ありがとうございます。 IE8以下へ実装するには具体的にどのようにすればよいのでしょうか？ お聞きしてばかりで申し訳ないです。。。
- 4017B
- ベストアンサー率73% (1306/1777)
＞IEに限り表示されるものなので、諦めるしかない～ まあ端的に言えばそうなりますね。 つ～か前述の通り、HTMLでのフォントは基本、閲覧者側のブラウザ環境に完全依存なので。IEとFireFoxで見た目を完全に統一する事自体が最初から無理。仮に font-family:"メイリオ"; などと指定した所で、世の99％のWindows＋IE環境のPCにはメイリオフォントがインストールされてないので（半強制的にDefaultフォントの "MS Pゴシック" で表示されます）。 ただIEで「ClearTypeをOFF」にしているにも関わらず、滲んだようになるというのが少し解せません。必ず理由と原因はあるのですが、オンラインではこれ以上は分りません（私は国家エスパー免許を持っていませんので）。 可能であれば、全く別の環境PCで見てみて。それでも同じ様になるのなら、作ったHTMLページ（JavaScript）に問題有り。他のPCでは正常に表示される様であれば、お使いのPC環境独自の問題だと類推出来ます。
お礼
どうもありがとうございました。
補足
早速の回答ありがとうございます。 一度サンプルを下記へアップしてみました。 http://street.s51.xrea.com/test/ ご確認の程、お願い申し上げます。 タブを開いた中のコンテンツがアンエリがかからないのです。 よろしくお願いいたします
- 4017B
- ベストアンサー率73% (1306/1777)
ざっと見た感じ、JavaScript内で特にフォントを指定している箇所がない様に見受けるので。これはJavaScriptの問題では無く、単に表示してるブラウザ側の問題。つまり各ブラウザのDefaultのフォント指定の問題かと。 自分はメインでIE使ってないので確証は無いですが。確かIE7くらいの時分のver.Upで、フォントにアンエリをかけて擬似的にきれいに見せる仕様が追加されてたはずです。しかしながらIEはDefaultのフォントが「MSPゴシック」なので、あまりきれいに表示されず非常に不評を買っていたと記憶してます。 念のため、IEの設定で ・[ツール] →インターネットオプション →詳細設定 →マルチメディア ～と進んで、下の方にある項目の「HTMLで常にClearTypeを使用する」のチェックを外してみて下さい。フォントのアンエリが解除され、くっきりと見える様になると思います。 それで改善しなかったら、まあIEには良くある事と思って先に進みましょう。
お礼
どうもありがとうございました。
補足
早速の回答ありがとうございます。 既にClearTypeを使用するのチェックは外れておりました。 IEに限り表示されるものなので、諦めるしかないでしょうか・・・ よろしくお願いいたします
関連するQ&A
- アコーディオンメニューの高さの調節がわかりません
アコーディオンメニューを設置したのですか、開いた時にすべてが表示されずに下部がきれてしまします。 どこかに高さを制限しているところがあるのでしょうか？ 知識が無く、いろいろ調べてみたりしたのですがわかりません。 どなたか教えていただけませんでしょうか？ -------------script.js---------------- var accordion=function(){ var tm=sp=10; function slider(n){this.nm=n; this.arr=[]} slider.prototype.init=function(t,c,k){ var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:''; h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length; for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}} l=s.length; for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}} } slider.prototype.pro=function(d){ for(var i=0;i<this.l;i++){ var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm); if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl} else if(s.style.display==''){su(s,-1); h.className=''} } } function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)} function sl(c,f){ var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px'; c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')'; if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)} } return{slider:slider} }(); ----------------------------------------- -----------style.css-------------------------- * {margin:0; padding:0} #accordion2 {width:180px; margin:10px auto; border:0px solid #000; border-top:none} .accordion2 {width:180px; font:10px Verdana,Arial; color:#fff} .accordion2 dt {width:180px; border-top:0px solid #333} .accordion2 dt:hover {background-color:#fff} .accordion2 .open {background-color:#fff} .accordion2 dd {overflow:hidden; background:#fff} .accordion2 span {display:block; width:180px; border-top:none; padding:0px} ----------------------------------------
- 締切済み
- JavaScript
- jQueryでアコーディオンメニュー
jQueryのaccordionでメニューを作っています。 初期のページは大項目1～3がアコーディオンで開閉し、 開いた中にある小項目がリンクボタンになっています。 【HTML 1】 小項目1（index_01.html）では、大項目1が開いたままになり、 大項目2、3のみアコーディオンで開閉します。【HTML 2】 ここからがご教示頂きたいところで、 小項目2（index_02.html）を表示している時は 大項目2が開いたままで、大項目1、3をアコーディオンさせたいと考えております。 【HTML 3】 アコーディオンではさむ形になるので、新しいid「slider2」を作りましたが、 お互いが開いたままの状態になってしまうのが難点です。 解決案として、「slider」で大枠を囲み、アコーディオンに左右されないddを作るか、 「slider」と「slider2」を同期させてどちらか片方が開いている時は片方が閉じるように する・・・と考えています。 ★印の部分のfor文に手を加えるのではないかと思うのですが、 どうにもお手上げです・・・ お手すきの方、どうかお力添え下さい よろしくお願い致します。 //______jQuery______// var accordion=function(){ var tm=sp=10; function slider(n){this.nm=n; this.arr=[]} slider.prototype.init=function(t,c,k){ var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:''; h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length; ★for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onmouseover=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}} l=s.length; for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}} } slider.prototype.pro=function(d){ for(var i=0;i<this.l;i++){ var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm); if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl} else if(s.style.display==''){su(s,-1); h.className=''} } } function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)} function sl(c,f){ var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px'; c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')'; if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)} } return{slider:slider} }(); //______HTML 1______// <div id="accordion"> <dl class="accordion" id="slider"> <dt>▼大項目1</dt> <dd> <span class="bank_top"><a href="index_01.html">小項目1</a></span> </dd> <dt>▼大項目2</dt> <dd> <span><a href="index_02.html">小項目2</a></span> </dd> <dt>▼大項目3</dt> <dd> <span><a href="index_03.html">小項目3</a></span> </dd> </dl> </div> //______HTML 2______// <div id="accordion"> <dl class="accordion"> <dt>▼大項目1</dt> <dd> <span class="bank_top"><a href="index_01.html">小項目1</a></span> </dd> <dl class="accordion" id="slider"> <dt>▼大項目2</dt> <dd> <span><a href="index_02.html">小項目2</a></span> </dd> <dt>▼大項目3</dt> <dd> <span><a href="index_03.html">小項目3</a></span> </dd> </dl> </div> //______HTML 3______// <div id="accordion"> <dl class="accordion" id="slider"> <dt>▼大項目1</dt> <dd> <span class="bank_top"><a href="index_01.html">小項目1</a></span> </dd> </dl> <dl class="accordion"> <dt>▼大項目2</dt> <dd> <span><a href="index_02.html">小項目2</a></span> </dd> <dl class="accordion" id="slider2"> <dt>▼大項目3</dt> <dd> <span><a href="index_03.html">小項目3</a></span> </dd> </dl> </div> <script type="text/javascript"> var slider1=new accordion.slider("slider1"); slider1.init("slider"); var slider2=new accordion.slider("slider2"); slider2.init("slider2"); </script>
- ベストアンサー
- JavaScript
- スライド開閉のｊｓを複数にしたい
http://sandbox.leigeber.com/accordion/index.html 元ページはこれなんですが１番上aboutの開閉１列だけでいいんです。 これをhttp://sussiweb.com/hp/html/img/13.htmの タグ切り替えのようにボタンを押したら画像の変わりに文章が切り替わるようにしたいのです。 スペースの都合上ボタンを押したら文章が開閉しなおかつ押すボタンによって文章が変わって欲しいのです。開閉窓は１個にしたい（初期状態は閉じた状態希望） このようなことは可能でしょうか？ よろしくお願いします。 http://sandbox.leigeber.com/accordion/index.html の起動jacascriptは以下のものです。 var accordion=function(){ var tm=sp=10; function slider(n){this.nm=n; this.arr=[]} slider.prototype.init=function(t,c,k){ var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:''; h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length; for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}} l=s.length; for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}} } slider.prototype.pro=function(d){ for(var i=0;i<this.l;i++){ var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm); if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl} else if(s.style.display==''){su(s,-1); h.className=''} } } function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)} function sl(c,f){ var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px'; c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')'; if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)} } return{slider:slider} }(); これを切り替え開閉ように改造できたらと思ってます。 よろしくお願いします
- 締切済み
- JavaScript
- アコーディオンのタブ開きリンクについて
以下の通りアコーディオンを設定しました。 http://street.s51.xrea.com/test/index-.html デフォルトでは全て展開・全て閉じるのリンクがあるのですが、 １つのタブを開いた後に「次のタブを開く」のリンクを作りたいと考えています。 この場合のソースはどのようになるでしょうか？ よろしくおねがいいたします --- <script type="text/javascript"> var parentAccordion=new TINY.accordion.slider("parentAccordion"); parentAccordion.init("acc","h3",0,0); var nestedAccordion=new TINY.accordion.slider("nestedAccordion"); nestedAccordion.init("nested","h3",1,-1,"acc-selected"); ---- --- var TINY={}; function T$(i){return document.getElementById(i)} function T$$(e,p){return p.getElementsByTagName(e)} TINY.accordion=function(){ function slider(n){this.n=n; this.a=[]} slider.prototype.init=function(t,e,m,o,k){ var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0; for(i;i<l;i++){ var v=n[i]; if(v.nodeType!=3){ this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')'); if(o==s){h.className=this.s; c.style.height='auto'; c.d=1}else{c.style.height=0; c.d=-1} s++ } } this.l=s }; slider.prototype.pr=function(f,d){ for(var i=0;i<this.l;i++){ var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t); if((k!=1&&c.d==-1)&&(f==1||i==d)){ c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1) }else if(k>0&&(f==-1||this.m||i==d)){ c.d=-1; h.className=''; su(c,-1) } } }; function su(c){c.t=setInterval(function(){sl(c)},20)}; function sl(c){ var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/5)*c.d)+'px'; c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')'; if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)} }; return{slider:slider} }();
- ベストアンサー
- JavaScript
- JavaScriptエラーが出ます…
2つのJavaScriptエラーが出て大変困っております。 どなたか分かる方いらっしゃいませんでしょうか？ ※当方はJavaScriptは分かりません。 検索にて調査いたしましたが、情けないですがもうお手上げ状態です。 ▼1つめ----------------------------------------------▼ メッセージ: 'null' は Null またはオブジェクトではありません。 ライン: 8 文字: 3 コード: 0 コード内容 以下 var accordion=function(){ var tm=10; var sp=10; function slider(n){ this.nm=n; this.arr=[]; this.sel='' } slider.prototype.init=function(t,c,k){ var a,h,s,l,i; a=document.getElementById(t); h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); l=h.length; for(i=0;i<l;i++){ var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+".process(this)"); if(k!=null&&c==i){this.sel=d.className=k} } l=s.length; for(i=0;i<l;i++){ var d=s[i]; d.maxh=d.offsetHeight; if(c!=i){d.style.height='0'; d.style.display='none'} } } slider.prototype.process=function(d){ var i,l; l=this.arr.length; for(i=0;i<l;i++){ var h=this.arr[i]; var s=h.nextSibling; if(s.nodeType!=1){s=s.nextSibling} clearInterval(s.timer); if(h==d&&s.style.display=='none'){ s.style.display=''; setup(s,1); h.className=this.sel} else if(s.style.display==''){setup(s,-1); h.className=''} } } function setup(c,f){c.timer=setInterval(function(){slide(c,f)},tm)} function slide(c,f){ var h,m,d; h=c.offsetHeight; m=c.maxh; d=(f==1)?Math.ceil((m-h)/sp):Math.ceil(h/sp); c.style.height=h+(d*f)+'px'; c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')'; if(f==1&&h>=m){clearInterval(c.timer)} else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.timer)} } return{slider:slider} }(); ▲1つめここまで----------------------------------------------▲ ▼2つめ----------------------------------------------▼ メッセージ: 'obj.length' は Null またはオブジェクトではありません。 ライン: 238 文字: 10 コード: 0 コード内容 以下 http://www.myulond.com/js.txt ▲1つめここまで----------------------------------------------▲ どうぞ、ご教授よろしくお願いいたします。
- 締切済み
- JavaScript
- IE8で動作が遅くなるjavascriptメニュー
いつもお世話になります。サイト製作初心者peace193と申します。 サンプルサイトを参考にjavascript+cssのグローバルメニュー、ローカルメニューを作ってみたのですが、IE7では快適に動く一方、IE8では動作が遅くなってしまいます。原因がわからずこちらに質問した次第です。 テストサーバに該当ページをUP致しました。お忙しい中恐縮ですが、ご教示のほど、なにとぞよろしくお願い申し上げます。 http://doa.nts21.jp/test001.html http://doa.nts21.jp/test002.html 参考サイトURL グローバルメニュー http://www.leigeber.com/2008/11/drop-down-menu/ ローカルメニュー http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html グローバルメニューjavascript var menu=function(){ var t=15,z=50,s=6,a; function dd(n){this.n=n; this.h=[]; this.c=[]} dd.prototype.init=function(p,c){ a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0; for(i;i<l;i++){ var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i]; h.onmouseover=new Function(this.n+'.st('+i+',true)'); h.onmouseout=new Function(this.n+'.st('+i+')'); } } dd.prototype.st=function(x,f){ var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0]; clearInterval(c.t); c.style.overflow='hidden'; if(f){ p.className+=' '+a+x; if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0} if(c.mh==c.offsetHeight){c.style.overflow='visible'} else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)} }else{p.className=p.className.replace(a+x,''); c.t=setInterval(function(){sl(c,-1)},t)} } function sl(c,f){ var h=c.offsetHeight; if((h<=0&&f!=1)||(h>=c.mh&&f==1)){ if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'} clearInterval(c.t); return } var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh; c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')'; c.style.height=h+(d*f)+'px' } return{dd:dd} }();
- ベストアンサー
- JavaScript
- ドロップダウンメニューのカスタマイズ
こちらのサイトで配布されているドロップダウンメニューのカスタマイズについてお聞きしたいのですが、 http://www.leigeber.com/2008/11/drop-down-menu/ デモページ http://sandbox.leigeber.com/dropdown-menu/index.html メニューが表示されるアニメーションの速度を調節することは可能なんでしょうか？ できればもう少し速くしたいと思っています。 Javascriptについて全く知識がないので、ネットで色々検索して探したのですがカスタマイズ方法について見当たらず、ここに質問させていただきました。 どうぞよろしくお願いいたします。 以下がjsのソースになります。 -------------------- var menu=function(){ var t=15,z=50,s=6,a; function dd(n){this.n=n; this.h=[]; this.c=[]} dd.prototype.init=function(p,c){ a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0; for(i;i<l;i++){ var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i]; h.onmouseover=new Function(this.n+'.st('+i+',true)'); h.onmouseout=new Function(this.n+'.st('+i+')'); } } dd.prototype.st=function(x,f){ var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0]; clearInterval(c.t); c.style.overflow='hidden'; if(f){ p.className+=' '+a; if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0} if(c.mh==c.offsetHeight){c.style.overflow='visible'} else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)} }else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)} } function sl(c,f){ var h=c.offsetHeight; if((h<=0&&f!=1)||(h>=c.mh&&f==1)){ if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'} clearInterval(c.t); return } var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh; c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')'; c.style.height=h+(d*f)+'px' } return{dd:dd} }();
- ベストアンサー
- JavaScript
- jQueryのアコーディオンがIE6でちゃんと動いてくれない
jQueryのアコーディオンがIE6でちゃんと動いてくれない Mac osX 10.5.8 dreamweaver cs3 jQueryのアコーディオン機能を使い、2階層のサイドナビゲーションを作っています。しかし、それをIE6で確認すると２階層目だけが開いてくれません。＞＜MacのSafariなどではちゃんと動いています。 【構造】 （例：HTML） <div id="side"> <h3>製品紹介</h3> <div id="tab01"> <h4><img src="tab01.png" width="210" height="35" alt="" /></h4> <ul> <li><a href="#">会社概要</a></li> <li class="inner"><a href="#">製品紹介</a></li> <ul class="down"> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> </ul> <li class="inner"><a href="#">会社沿革</a></li> <li><a href="#">企業理念</a></li> </ul> </div> <div id="tab02"> <h4><img src="images/tab02.png" width="210" height="35" alt="" /></h4> <ul> ーーーーー ＜同上のような構造＞ ーーーーー </ul> </div> </div> <!--side end--> （例：jquery（外部js）） $(document).ready(function() { var main = $("#side ul"); main.hide(); $("#side h4").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side h4").click(function(){ $(this).next().slideToggle('fast'); }); }); $(document).ready(function() { var main = $("#inner ul"); main.hide(); $("#side li.inner").hover(function(){ $(this).css("cursor","pointer"); },function(){ $(this).css("cursor","default"); }); $("#side li.inner").click(function(){ $(this).next().slideToggle('fast'); }); }); と、このような構造になっております。 h4をクリックするとその中身がスムーズに開閉、li.innerをクリックするとul.down内がスムーズに開閉。という形です。 どうか、ご教授のほうよろしく御願いします。
- 締切済み
- HTML
- 特定のページの特定部分が閉じないアコーディオン
jqueryを使用して以下の処理をしようと思っています。 リンク先に飛んだ際、リンク先のurl又はタイトル名部分のアコーディオンは、閉じていず他の部分が閉じているようにしたい。 問題点は、url名または、タイトル名の取得の仕方が不明な点です。 力を貸していただけたら幸いです。 $(function() { var i; i=1; if (url==該当のurl)←問題点、ここにurlを取得した変数を入れたいのですがどうやって取得するのか不明です。 { i=2; $('#accordion dd').hide().eq(i).show(); $('#accordion dt a').click(function(){ $('#accordion dd').slideUp(); $(this).parent().next().slideDown(); return false; }); } else if (url2=url2) { i=3; $('#accordion dd').hide().eq(i).show(); $('#accordion dt a').click(function(){ $('#accordion dd').slideUp(); $(this).parent().next().slideDown(); return false; }); } });
- 締切済み
- JavaScript
- PC用jQueryをスマホ対応にするには。
初めて質問いたします。 初心者ですみません、困っています宜しくお願いいたします。 jQueryでブラインドをＰＣページに設置したところ動きましたが スマホではマウスでないためクリックしないとブラインドが反応しません。 jQueryモバイルがあると聞きましたがjavascriptのプログラムが分かりません。 可能であれば 下記のjsのプログラムの何処をどう変更を加えると ＰＣのオンマウスとスマホのタッチ両方に対応・反応するのでしょうか。 お返事宜しくお願いいたします。 ******これ以降******* var slideMenu=function(){ var sp,st,t,m,sa,l,w,sw,ot; return{ build:function(sm,sw,mt,s,sl,h){ sp=s; st=sw; t=mt; m=document.getElementById(sm); sa=m.getElementsByTagName('li'); l=sa.length; w=m.offsetWidth; sw=w/l; ot=Math.floor((w-st)/(l-1)); var i=0; for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)} if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)} }, timer:function(s){s.onmouseover=function(){clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)}}, slide:function(s){ var cw=parseInt(s.style.width,'10'); if(cw<st){ var owt=0; var i=0; for(i;i<l;i++){ if(sa[i]!=s){ var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width,'10'); if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'} owt=owt+(ow-oi)}} s.style.width=(w-owt)+'px'; }else{clearInterval(m.timer)} } }; }();
- 締切済み
- JavaScript
お礼
大変参考になりました。 ありがとうございました。