忍者ブログ
06 May

[PR]

×

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

22 May

フォーム　チェックがついていたらlabelにclassをつける

http://jsdo.it/hibiki443/6rgk

(function($) {
    // 読み込んだら開始
    $(function() {
    
        // checkbox, radio にチェックがあったら label に class を付ける
        var checkboxList = $(".checkboxList");
        checkboxList.each(function() {
            var label = $(this).find("label");
            // 最初の処理
            $(this).find(":checked").closest("label").addClass("checked");
            // ラベルクリック
            label.click(function() {
                label.filter(".checked").removeClass("checked");
                label.find(":checked").closest(label).addClass("checked");
            });
        });
    
    });
})(jQuery);
PR
06 March

SVGアニメーション　jQuery DrawSVG

SVGパスアニメーションを手軽に実装できる jQuery DrawSVG の使い方
http://arakaze.ready.jp/archives/3530

SVGファイルのためのイラレ設定
https://hatsuka.info/design/svg

SVGアニメーションが5分で作れる！jQuery DrawSVGの使い方
http://stand-4u.com/plugin/drawsvg.html
http://stand-4u.com/stand-4u/html/draw_svg.html



↑のコードをWP内にコピペしたがIE11で動かない。（実際動いてるhtmlのほうのコード）
「jQueryが動かないときに試すこと～」みたいな検索結果をみて、下記のようにオレンジの読込部分を足したら動いた。なんでなのかはよくわかんねー

あとからフワッと色付けされているのは、画像を表示している。
本来ならfillとかで色付け出来ると思うがIEでcssで出来るのか試す。
svgと画像を重ねてるんだがずれる。同じイラレデータから作成してるのにずれる
なんでだよ！！ともう嫌になったが、通常すぎて忘れていたbox-sizing:border-box;のせいだった
これをcontent-boxに変えたら直った。
たまーにこれが影響すんだよな。レスポンシブにはborder-boxが必須なのによ


<script type="text/javascript">
jQuery(document).ready(function($){
  var mySVG = $('.svg1').drawsvg({
  duration:1000, 
  stagger:100,
  easing:'swing',
  reverse:false,
  callback: function() {
     //コールバックの処理を記述
     $("#s4u").fadeIn(5300);
     $(".svg1").fadeTo(1100, 0);
    }
  });
  mySVG.drawsvg('animate');
});
</script>


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の調整だけで時間かかりまくり


10 July

テーブルの見出しテキストを均等割にしたい

http://ozpa-h4.com/2013/07/26/jquery-justify-js/
http://ozpa-h4.com/demo/justify_demo/

上記のjqueryを導入するしかない！！

自分でspanで囲ってletter-spacingで調整するのを自動でやってくれる



CSSでやろうとしたら、まず1行のみっていうのが無理
text-align:justify;　は複数行にしか効かない

http://nabetaro.hatenablog.com/entry/2015/12/23/220942

というか↑を読んで「最終行のみjustifyは効かない」
つまり、1行のみの文章は「＝最終行」なので効かないということを理解した。

そこで以下のように最終行へのCSS3が存在するらしい
しかしクロームとfirefoxしかきかない。　IE　☓、safari　☓
いいCSS3知った！と思ったら対応してないとか超萎える
  -moz-text-align-last: justify;
  text-align-last: justify;

↓ text-align-lastの対応状況が見れる
https://syncer.jp/css-reference/text-align-last

しょうがないのでjqueryに頼る
LIGというかいうとこのやつはDLリンクしんでる。ページ内のコードコピペしても使い物にならなかったので注意。

全角半角がまじるとガタつくだとか、IEのみ出来ないだとか、もううぜー
wordしかやったことないやつとか紙媒体のやつが均等割！とかうるせーんだよ
webは基本できねーんだよ