忍者ブログ
18 January

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

23 January

checkbox radioボタンをcssで装飾

https://qiita.com/ryo620/items/a7941774469a6229a64a

このサイトのコードの装飾がキレイで作ってる感出ていいとおもった

PR
26 December

iframe　ブラウザサイズでscriptを切り替えたい

http://rabbit-punch.com/web/596
https://teratail.com/questions/60006

この2つのコード組み合わせ
max-width:700px;以下のときjsを読み込む。
ブラウザ伸縮で変わらないので、再読込のコードを入れる





<script type="text/javascript">
 var jsRead = function () {
if (window.matchMedia( '(max-width: 700px)' ).matches) {　//切り替える画面サイズ
$.ajax({
url: 'js/iframe.js',
dataType: 'script',
cache: false
   });    
} else {
    $.ajax({
cache: false
});
};
};
$(document).ready(function () {
        jsRead();
    });
    $(window).resize(function () {
        jsRead();
    });
</script>
本当はPCサイズのときからiframeに設定されてたheightを取っ払って高さ全部出しにしたかった。
がしかし、背景が設定されていて、下に伸びた状態ではそぐわない背景画像のため、しょうがなくブラウザサイズで読み込ませることになった



26 December

iframe　高さを自動調整する

http://www.allinthemind.biz/markup/javascript/iframe.html

このサイトのコードを使用した
Chromeで余白が出まくった。firefoxでは確認してない。
そのため、「追記」にあるそれの対応してあるコードを使ったらOKだった

$('iframe')
.on('load', function(){
  try {  
    $(this).height(0);
    $(this).height(this.contentWindow.document.documentElement.scrollHeight);
  } catch (e) {
  }
})
.trigger('load');

いまどきiframeのサイトとかふざけんじゃないよ
それをレスポンシブにしたいとか…くそめんどくせえ
iframeの調整だけで時間かかりまくり


26 December

iframe 縦　高さが足りない

iframeの縦の高さ取得がおかしい
iframe高さ自動調整のjsを使用しているが、ブラウザをかなり縮めたときに、下がちょっと切れてしまう。
そこで下の記事をみつけて、iframeにdisplay:block;してみたら直った！
なんだよこれは


https://www.infoscoop.org/blogjp/2014/04/22/mobile-browser-iframe-scroll-problem/