個別では動く、javascriptのエラー

このQ&Aのポイント
  • 初心者がwebshop作りに挑戦中。個別では動いているが同じページにするとエラーが発生。
  • エラーコンソールにはmootoolsとrssのエラーが表示される。
  • javascriptのコードを見よう見まねで設置しており、エラーの原因が分からない。困っている。
回答を見る
  • ベストアンサー

個別では動く、javascriptのエラー

こちらで良いのか悩みましたが..... blogやHPを作った事があるというだけで、webshopの作りを友人にお願いされた初心者です。 更新履歴用にFeed2JS、商品画像を表示する為にmootools、lightbox2をお借りして 設置までは何とか行う事が出来、個別ではちゃんと動いているのですが、同じページではどちらかが動かなくなってしまいました。 ブラウザにエラーコンソールを付けてみた所、mootoolsとrssにエラーがあると表示されていて、 どの行がエラーなのかは分かりましたが、情けない話ですが何がエラーなのかが分かりません。 javascriptは見よう見まねで設置しており、コードの書き換えなどは画像サイズを変更するぐらいがやっとです。 ネットや辞書で調べてみましたが、分からないまま弄ると余計におかしな事になり、怖くなってきました。 周りに詳しい人もおらず、困ってしまいましたので、検索でみつけたこちらでお伺いする事にした次第です。 エラー表示されるのは $(document).ready( function(){ $('.rss-items').innerfade({ animationtype: 'slide', speed: 750, timeout: 6000, type: 'sequence', containerheight: '1em' }); $('ul#portfolio').innerfade({ speed: 1000, timeout: 5000, type: 'sequence', containerheight: '220px' }); $('.fade').innerfade({ speed: 1000, timeout: 6000, type: 'random_start', containerheight: '1.5em' }); $('.adi').innerfade({ speed: 'slow', timeout: 5000, type: 'random', containerheight: '150px' }); }); の3行目 $('.rss-items').innerfade({ 長いので直接アドレスを貼ります http://pretto.kilo.jp/cos-pretto/js/mootools-1.2-core.js 345行目 Fx.Slide=new Class({Extends:Fx,options:{mode:'vertical'},initialize:function(a,b){this.addEvent('complete',function(){this.open=(this.wrapper['offset'+this.layout.capitalize()]!=0);if(this.open&&Browser.Engine.webkit419)this.element.dispose().inject(this.wrapper)},true);this.element=this.subject=$(a);this.parent(b);var c=this.element.retrieve('wrapper');this.wrapper=c||new Element('div',{styles:$extend(this.element.getStyles('margin','position'),{'overflow':'hidden'})}).wraps(this.element);this.element.store('wrapper',this.wrapper).setStyle('margin',0);this.now=[];this.open=true},vertical:function(){this.margin='margin-top';this.layout='height';this.offset=this.element.offsetHeight},horizontal:function(){this.margin='margin-left';this.layout='width';this.offset=this.element.offsetWidth},set:function(a){this.element.setStyle(this.margin,a[0]);this.wrapper.setStyle(this.layout,a[1]);return this},compute:function(a,b,c){var d=[];var x=2;x.times(function(i){d[i]=Fx.compute(a[i],b[i],c)});return d},start:function(a,b){if(!this.check(arguments.callee,a,b))return this;this[b||this.options.mode]();var c=this.element.getStyle(this.margin).toInt();var d=this.wrapper.getStyle(this.layout).toInt();var e=[[c,d],[0,this.offset]];var f=[[c,d],[-this.offset,0]];var g;switch(a){case'in':g=e;break;case'out':g=f;break;case'toggle':g=(this.wrapper['offset'+this.layout.capitalize()]==0)?e:f}return this.parent(g[0],g[1])},slideIn:function(a){return this.start('in',a)},slideOut:function(a){return this.start('out',a)},hide:function(a){this[a||this.options.mode]();this.open=false;return this.set([-this.offset,0])},show:function(a){this[a||this.options.mode]();this.open=true;return this.set([0,this.offset])},toggle:function(a){return this.start('toggle',a)}}); です。 マヌケな質問かもしれませんが、参考になるページだけでも教えて頂けると凄く嬉しいです。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

lightbox2はprottype.jsを使っています。 prottype.jsとmootools.jsはコンフリクトします。現状両方とも 使う方法は無いようです。片方をあきらめるしかないかと。 lightboxの代わりにshadowbox.jsを使えばよろしいかと。 (参考) http://cramoty.blog83.fc2.com/blog-entry-93.html http://www.shadowbox-js.com/index.html

00magnolia
質問者

お礼

yyr446 様 ご回答ありがとうございます。 設置方法が悪いものだとばかり思っておりましたので、大変助かりました。 お勧め頂いたshadowboxとてもカッコいいです。 他にも、jQueryを使うlightbox系スクリプトで、使い易そうなものも探してみます。 ありがとうございました。

関連するQ&A

  • is not a functionというエラー

    jqueryのスクリプトを書いていたところ $(function () { var wrapper = $("#main"); var wrapperWidth; var blocks = []; NewBlocks(blocks, wrapper.children()); function NewBlocks(blocks, elements) { for (var i = 0; i < elements.length; i++) { var element = elements[i]; var block = new Block(element); blocks.push(block) } } function Block(element) { this.element = element; element.style.margin = "10px"; this.init(); } Block.prototype = { init: function () { this.width = this.element.offsetWidth; this.height = this.element.offsetHeight; } } }); 上記スクリプトを実行すると「this.init is not a function」というエラーが出てしまいます。 一体何をどう間違っているせいでエラーが出るのか、どうかご教授いただけますでしょうか。

  • JavaScriptのプログラムについて

    $(function(){ $("#top a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#question a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q001 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q002 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q003 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) $("#q004 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) }); ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HTMLは少し分かりますが JavaScriptがまったく分からない素人です。 ネットで調べて上記のようにプログラムし ページ内リンクを流れるようにスクロールさせることは出来ました。 まずこのプログラムの書き方で合っていますでしょうか? また、同じ記述が繰り返されているので短くしてやろうと自分なりに $("#q001 a") $("#q002 a") $("#q003 a") $("#q004 a") $("#q005 a").click(function(){ $('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing'); return false; }) ↑のような全くの当て推量の書き方をしてみましたが動作しませんでした。 省略したり短く出来る余地があればそれも教えていただきたいです。 分かる方がおられましたらお願いします。

  • 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リアルタイムエラーチェック

    Javascript初心者です。 本を見ながらフォームの入力値のリアルタイムエラーチェックを実装しています。 テキストフィールドへの入力値の妥当性検証はできるのですが、 チェックボックスが一つもチェックされていなかった場合にチェックボックスを囲むfieldsetを赤くさせるのがうまくいきません。 電話番号の形式指定ならば String.prototype.isZip = function(){ return this.isEmpty()||/^\d{3}-\d{4}$/.test(this); } という形です。thisはname属性を参照します。 すべての項目にエラーがない場合に確認画面へ進めるようにしています。 String.prototype.isNotEmpty = function() { return this != ''; } String.prototype.isEmpty = function(){ return this == ''; } String.prototype.isShorterThan = function(n){ return this.length<=n; } String.prototype.isLongerThan = function(n){ return this.length >= n; } String.prototype.isZip = function(){ return this.isEmpty()||/^\d{3}-\d{4}$/.test(this); } String.prototype.isPhone = function() { return this.isEmpty()||/^\d{2,4}-\d{1,4}-\d{4}$/. test(this); } String.prototype.isEmail = function() { return this.isEmpty()||/^([\w-]+\.?)+@[\w-]+(\.([\w-]+))+$/.test(this); } var formValidation = function(name, feedback, fields){ var form = document.forms[name]; for (var i=0; i<form.elements.length; i++){ (function(){ var elm = form.elements[i]; var f = fields[elm.name]; if (f){ f.element = elm; f.process = function(){ var ok = true; if (f.convert) f.element.value = f.convert(f.element.value); if (f.validation) ok = f.validation(f.element.value); if (f.feedback) f.feedback(ok, f.element); return ok; } elm.onblur = function(e){ f.process() } } })(); } form.onsubmit = function(){ var all_ok = true; for (key in fields) if (fields[key] && !fields[key].process()) all_ok = false; return feedback(all_ok); }; } </script> <script type="text/javascript"> <!-- <![CDATA[ window.onload = function(){ var fields = { 'last_name':{ convert: function(val){ return val.cnvKana('asKV').trim() }, validation: function(val){ return val.isNotEmpty() && val.isShorterThan(16) }, feedback: function(ok, elm){elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272'; } }, 'furigana':{ convert: function(val){ return val.cnvKana('sKVC').trim() }, validation: function(val){ return val.isNotEmpty() && val.isComposedOf(cs.kata.zen+cs.space.han) && val.isShorterThan(32) }, feedback: function(ok, elm){ elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272'; } }, 'phone':{ convert: function(val){ return val.cnvPhone() }, validation: function(val){ return val.isNotEmpty() && val.isPhone() }, feedback: function(ok, elm){elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272';} } 'email':{ convert: function(val){ return val.trim() }, validation: function(val){ return val.isNotEmpty() && val.isEmail() }, feedback: function(ok, elm){ elm.style.border = ok ? 'solid 2px #3CB371' : 'solid 2px f57272';}, }, }; var feedback = function(ok){ if (ok) alert("確認画面へ進みます。"); else alert("フォームの内容に不備があるようです。再度の確認をお願いいたします。") return ok; }; new formValidation('MAINFORM', feedback, fields); } // ]]> --> <form name="MAINFORM" action="check.php" method="post"> <input name="last_name" type="text"> <input name="furigana" type="text" /> ~~~~~~ <fieldset id="checkboxDemo" name="job"> <legend><img src="images/label_kozanaiyou.gif" width="92" height="18"></legend> <label for="checkbox-1" tabindex="1">オフィス(Word,Excel)</label> <input type="checkbox" name="kouza[]" id="checkbox-1" value="オフィス(Word,Excel)" /> <label for="checkbox-2" tabindex="2">ネットワーク構築</label> <input type="checkbox" name="kouza[]" id="checkbox-2" value="ネットワーク構築" /> <label for="checkbox-3" tabindex="3">WEBデザイン</label><input type="checkbox" name="kouza[]" id="checkbox-3" value="WEBデザイン" /> <label for="checkbox-4" tabindex="4">WEBプログラミング</label> <input type="checkbox" name="kouza[]" id="checkbox-4" value="WEBプログラミング" />  </fieldset> 自分で色々と試してみましたがうまくいかず、皆様のお力を借りたいと思い投稿しました。 詳しい方教えてください。

  • JavaScriptエラーについて

    お世話になります。 おわかりになる方、ぜひ教えてください。 タブメニューのボタンを押すと、内容が切り替わるというJavaScriptなのですが、いちよう正常に動作はしているようなのですが、エラーがでてしまいます。 エラーを無くしたいのですが、どうすればいのでしょうか? 【エラー内容】 'document.getElementById()'はNullまたはオブジェクトではありません。 【HTML】 <div id="javascript_tab_sample"> <ul> <li><a href="#W3C">W3C</a></li> <li><a href="#xhtml">xhtml</a></li> </ul> <dl id="w3c"> <p>内容1</p> </dl> <dl id="xhtml"> <p>内容2</p> </dl> </div> 【JavaScript】 window.onload=function() { tab.setup = { tabs: document.getElementById('tab').getElementsByTagName('li'), pages: [ document.getElementById('w3c'), document.getElementById('xhtml') ] } tab.init(); } /*--setup end--*/ var tab = { init: function(){ var tabs = this.setup.tabs; var pages = this.setup.pages; for(i=0; i<pages.length; i++) { if(i !== 0) pages[i].style.display = 'none'; tabs[i].onclick = function(){ tab.showpage(this); return false; }; } }, showpage: function(obj){ var tabs = this.setup.tabs; var pages = this.setup.pages; var num; for(num=0; num<tabs.length; num++) { if(tabs[num] === obj) break; } for(var i=0; i<pages.length; i++) { if(i == num) { pages[num].style.display = 'block'; tabs[num].className = 'selected'; } else{ pages[i].style.display = 'none'; tabs[i].className = null; } } } } よろしくお願いします。

  • imgPreviewのエラー

    jQueryでマウスオーバー時に画像を表示する imgPreviewを使用してホームページを作成しました。 表示はうまくいったのですが、 「'undefined' は Null またはオブジェクトではありません。」というエラーメッセージが出てしまいます。 問題はimgpreview.jsのようで、 サムネイル画像のマウスオーバーでプレビューさせる部分が原因?のようです。 今回、サムネイル画像のロールオーバーは不要ですが 改善方法が分かる方がいらっしゃいましたら、教えてください。 ちなみに、以下のサイトを参考にして作成しました。 http://dispersalblog.blog90.fc2.com/blog-entry-206.html 【imgpreview.js】の中身 (function(c){c.expr[':'].linkingToImage=function(a,g,e){return!!(c(a).attr(e[3])&&c(a).attr(e[3]).match(/\.(gif|jpe?g|png|bmp)$/i))};c.fn.imgPreview=function(j){var b=c.extend({imgCSS:{},distanceFromCursor:{top:10,left:10},preloadImages:true,onShow:function(){},onHide:function(){},onLoad:function(){},containerID:'imgPreviewContainer',containerLoadingClass:'loading',thumbPrefix:'',srcAttr:'href'},j),d=c('<div/>').attr('id',b.containerID).append('<img/>').hide().css('position','absolute').appendTo('body'),f=c('img',d).css(b.imgCSS),h=this.filter(':linkingToImage('+b.srcAttr+')');function i(a){return a.replace(/(\/?)([^\/]+)$/,'$1'+b.thumbPrefix+'$2')}if(b.preloadImages){(function(a){var g=new Image(),e=arguments.callee;g.src=i(c(h[a]).attr(b.srcAttr));g.onload=function(){h[a+1]&&e(a+1)}})(0)}h.mousemove(function(a){d.css({top:a.pageY+b.distanceFromCursor.top+'px',left:a.pageX+b.distanceFromCursor.left+'px'})}).hover(function(){var a=this;d.addClass(b.containerLoadingClass).show();f.load(function(){d.removeClass(b.containerLoadingClass);f.show();b.onLoad.call(f[0],a)}).attr('src',i(c(a).attr(b.srcAttr)));b.onShow.call(d[0],a)},function(){d.hide();f.unbind('load').attr('src','').hide();b.onHide.call(d[0],this)});return this}})(jQuery);

  • Javascript について質問です。

    現在、メソッドについて勉強しています。 下記のようなプログラムを書き、円の面積、円の円周を求めました。 下記のプログラムを実行したところ、undefined と出力されました。 いまいちメソッドの使い方もわかってないので、お見苦しい点が多いですが、出力の仕方が間違っているのか、宣言の仕方が間違っているの正直、よくわかりません。 すいませんが、教えて頂けないでしょうか? function Circle (radius) { this.radius = radius; this.area = function () { return Math.PI * this.radius * this.radius; }; // define a perimeter method here this.perimeter=function(){ return Math.PI * this.radius *2 }; }; var A=new Object(); A.new=Circle ; console.log(A.new(2));

  • JavaScriptで全くの初心者なのですが、

    JavaScriptで全くの初心者なのですが、 フィッシャーイェーツのシャッフルをaのリスト内でしてから、 そこから一つ値をとり、 別の関数内で、その関数内での新たな変数に代入するようにしたいです。(function(){var b = this.result;}のような) プログラミングはやらないのに急に使うことになり困っているのでだれか助けてください。 a = [1,1,1,5,5,5,9,9,9]; for (var a=[],i=0;i<9;++i) a[i]=i; this.result = a[shuffle(a.length)] ; function shuffle(array) { var tmp, current, top = array.length; if(top) while(--top) { current = Math.floor(Math.random() * (top + 1)); tmp = array[current]; array[current] = array[top]; array[top] = tmp; } return array; }

  • ジャバスクリプトのエラーを直したい

    趣味で準備中のブログを表示すると、 「ページでエラーが発生しました。」と出るようになってしまいました。 ダブルクリック後に出てくる表示が、 ライン:172 文字:2 エラー:オブジェクトがありません。 コード:0 URL:http://○○○.com とあり、firefoxのエラーコンソールから見てみると、 「list is null」で、171行目が表示されていました。 何かが空になっているとか、そんな意味だと思うのですが、 文のどこが変なのかサッパリ分からない状態です。 以下が、構文の前後です。 setStyle = function(element, key, value) { element.style[key] = value; } getStyle = function(element, key) { return element.style[key]; } cleanWhitespace = function(list) { var node = list.firstChild;  【←この行が変みたいです。】 while (node) { var nextNode = node.nextSibling; if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) { list.removeChild(node); } node = nextNode; } return list; } 分かる方、いらっしゃったら教えていただけると幸いです。 よろしくお願いします。

  • javascriptの標準仕様で用意されているオブジェクトを拡張しても

    javascriptの標準仕様で用意されているオブジェクトを拡張してもよいのかしら?  例えば、Arrayオブジェクトを拡張して降順ソートをやりたい時、   data=[1,2,3,4];   data.sort(function(a,b){return(b-a);});   alert(data);  のように使うのは、仕様にあるので許されると思います。   Array.prototype.descending=function(){    this.sort(function(a,b){return(b-a);});    return this;   }   data=[1,2,3,4];   alert(data.descending());  のようにArrayオブジェクトを拡張して使って問題ないでしょうか?  あるいは、   function myArray(arg){    this.descending=function(){     arg.sort(function(a,b){return(b-a);});     return arg;    }   }   data=[1,2,3,4];   data=new myArray(data);   alert(data.descending()); のように使うべきものなのでしょうか?

専門家に質問してみよう