このエラーはnewElementと追加する要素が所属するdocumentが一致しないときに発生するエラーです。 ブラウザの実装によって動作が異なります。 pc版のブラウザや、android:firefoxですと、appendChildでも動作します。 android標準ブラウザではエラーが発生…

getElementById().styleで得られるスタイルシートの情報は、要素のインラインで設定されているもののみだそうです。 ブラウザ上で適用されているスタイルを呼び出したい場合は、getComputedStyle()（読み取り専用）を使います。

point xhrで読み込むときに同期処理でよみこむこと responseText にクラス名を添付すること 具体的には 外部クラスファイル（Test.js） var Test = function(){ "use strict"; this.name = "ぼくの名前はtestだよ"; }; Test.prototype={ getName:function(){…

今までは obj.setAttribute('style','property'); と書いていたが これだと、複数回実行すると上書きされてしまう。で、 obj.style.setProperty() ならok 例：No return. Example: styleObj.setProperty('color', 'red', 'important')https://developer.mozi…

こういうことになる。 var myObject = { add: function(value1, value2) { console.log(this.value + value1 + value2); } }; var yourObject = { value: 3 }; myObject.add.apply(yourObject, [2, 10]); // 15 myObject.add.call(yourObject, 2, 10); // 15

minimum-scaleを指定しておかないと 縮小されたときにコンテンツがくずれる＆ PCサイトの表示に移行してしまうことがある（縮小からのリロード時） <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"/></meta>

html側からconsole.logすると function (){ if(c) new _m(); c=_f; } とだけ見える。 導入部内容

キャッシュするディレクトリを指定したもの 指定ディレクトリは EFOLAB_ver5

-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -o-text-size-adjust: 100%; text-size-adjust: 100%;

function addCSSRule(selector, css) { var sheets = document.styleSheets, sheet = sheets[sheets.length - 1]; if(sheet.insertRule) { sheet.insertRule(selector + '{' + css + '}', sheet.cssRules.length); }else if(sheet.addRule) { sheet.addRule(…

cssで:before, :after疑似セレクタを使うと、そのオブジェクトの前後に要素を作成できます。その要素はDOM上に存在するわけじゃないので、じゃあどうやってjavascriptでアクセスするの？っていう話。実は疑似要素にはattr()なんて機能があって、下のgist cod…

これいいよ！ html部分 <section id="main-visual2"> <h1>選ばれる理由はこの３つ</h1> <p class="text1">大阪結婚相談所ヴィーノには選ばれる理由があります。 会員数述べ67216名（関西21587名） お見合い率99.1％（3ヶ月以内） 交際率91.5％（三ヶ月以内） </p> </section> css #main-visual2 { /** * 子要素をposition:absolu…

img { width: 100%; height: initial; } #main-visual2 { padding: 10px; background-position-x: 0px; background-image: url(images/main-visual2.gif); background-repeat: no-repeat; /*background-size:cover;*/ -moz-background-size: 100% auto; back…

<link rel="stylesheet" href="EFOLAB_ver4/initial.css" class="EFOLAB_class"/> <meta name="viewport" content="width=device-width,user-scalable=no"/> <script src="EFOLAB_ver4/smart.js" class="EFOLAB_class"></script> </meta></link>

既存のコンテンツコンテナを最大限利用するパターン /** * このプログラムは、既存コンテンツをそのままでレスポンシブルのレイアウトに変更するものです。 * 従来のver3.6とは目的が違います． */ ( function() {"use strict"; var TESTFLAG = true; //var …

以下のように代表的なデバイスの画面サイズ。iPad/iPad2/iPadminiの画面サイズが 768pxであることから これ、未満の場合にスマホ対応とする。

参考サイト Android OS(標準ブラウザ)では、スクロールの終了という契機を自動的に取得することができません。 そのため、iOS（Safari）と動作を統一させるには、 自身でスクロールイベントをカスタマイズする必要が出てきます。 その一例をご紹介します。 ■…

javascript window.matchMedia || (window.matchMedia = function() {"use strict"; // For browsers that support matchMedium api such as IE 9 and webkit var styleMedia = (window.styleMedia || window.media); // For those that don't support match…

例として花園フォントの場合 ただ、ファイルサイズが20mbと大きいので、スマホでは使えませんね。 ブラウザによって違うファイル形式を用意しないとだめなことも問題です。 ttfだと、chrome等使えません． /** * [webフォントの導入の方法] * ダウンロードし…

main.js /**ver 3.6 3/13 * * サイドメニューを固定した内容でセットするように変更する必要があります。（サブメニューがないコンテンツに対応するため） * SUBMENU_JSONを追記しました。 * Page.prototype.createAndAppendSideMenuを追記しました。このメ…

//operaminiかどうかを検査。operaminiならtrueを返す。 var isOperamini = function() { var bool = false; if ( typeof operamini !== 'undefined') { if (operamini) { bool = true; } } return bool; };

初期アクセス 既存コンテンツをコンテナに流し込むとこ ここは問題なく動作している。 //fragmentを生成して、既存のコンテンツを必要な部分のみfragmentに移動します。 var mainFragment = document.createDocumentFragment(); mainFragment.appendChild(do…

1*1pixelのダミーgifを用意しておき 以下のようにappend。 その前のappendも含めて終了しているかどうかを確認する イベントリスナloadを使う。 var img = document.createElement('img'); img.addEventListener('load',function(){console.log('load');},fa…

以下のように記述をしてみて、動作しているので大丈夫です。 <li class="navi02"><a href="guide/price.html" onclick="javascript:alert('料金プラン');">料金プラン</a></li>

var iframe = document.createElement('IFRAME'); document.getElementById('blog_test').appendChild(iframe); var doc = frames[frames.length - 1].document; doc.open(); doc.write('<p id = "hello">Hello!</p>'); doc.close(); 取得するには var elm = iframe.contentDocum…

objectがどこからcallされたか？ console.trace(); 経過時間を取得 console.time('name'); //処理 console.timeEnd('name'); <||

初期フレームの生成まで /*jslint nomen: true*/ ( function() {"use strict"; var pages = []; /* * あらかじめセットしておくCSSファイルのclass名 */ var CSSCLASSNAME = "EFOLABclass"; var NEWCONTENT = { "/" : { } }; /** * コンテナを生成するクラス…

new XMLSerializer().serializeToString(document)

var json={ "hoge":{ "val":"hoge_val", "option":"hoge_op" }, "kamo":{ "val":"kamo_val", "option":"kamo_op" } }; var serch = "kamo"; if(json[serch]){ console.log(json[serch].val); }

以下のコメントをjavascriptへ /*jslint nomen: true*/ スクリプト記述部