月: 2015年12月

レスポンシブルdivスライダー　完成系へ

クロスブラウザで　挙動がおかしかったので
自力で　やったら　できた。　夢みたいだわ。

まさかできるなんて　これだで　webはおもろい

まず
今までのdivスライダーに戻す。
viewer ul li のやつ

ほんとはcss整理したほうがよさそうだが
あえて
あとからcssほとんどあてた。

まずちゃんとしたサイズの画像があることが必須
あとその画像にそいつだけのクラスをつけれること
キャラリーの縦横比の基準になる画像に

1
class="respo_img"

をつける。

ヘッッダー内に

1
2
3
4
5
6
7
8
<script type="text/javascript">
$(window).on('load resize', function(){
var w = ($('.viewer ul li img.respo_img').height());
$('.viewer ul li').height(w);
$('.viewer ul').height(w);
$('.viewer').height(w);
});
</script>

こうやって書いた。
例のサイドバーのやつの応用な

ドル　クラスとかで指定　縦を取得
ドル　クラスとかで指定　縦を入れ替える

みたいにできるらしい
多分Jクエリ

そんで
基準のcss
440は1200のときのmax画像たかさ

ページ読み込み時、全部読み込んでから高さがかわるもんで
ガチャンみたいになるのが見苦しいで
その下はメディアスクリーンで
いちお高さを指定してなるべくガチャンが気にならんようにした。
main_contents_top_fadeのmin-hightは元のcssけした　ややこしいで

1
2
3
4
5
6
7
8
9
10
11
12
13
.viewer,
.viewer ul,
.viewer ul li{ height:440px;
min-height:inherit;
min-height:auto;}
 
@media screen and (max-width: 1100px) {.viewer,
.viewer ul,
.viewer ul li{ height:363px;}}
 
@media screen and (min-width: 1100px) and (max-width: 1200px) {.viewer,
.viewer ul,
.viewer ul li{ height:395px;}}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script type="text/javascript">
$(function(){
    var $setElm = $('.viewer'),
    fadeSpeed = 1500,
    switchDelay = 5000;
 
    $setElm.each(function(){
        var targetObj = $(this);
        var findUl = targetObj.find('ul');
        var findLi = targetObj.find('li');
        var findLiFirst = targetObj.find('li:first');
 
        findLi.css({display:'block',opacity:'0',zIndex:'99'});
        findLiFirst.css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);
 
        setInterval(function(){
            findUl.find('li:first-child').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'99'});
        },switchDelay);
    });
});
</script>
 
<!--TOPフェード-->
<script type="text/javascript">
$(document).ready(function() {
$('.viewer').fadeIn(0);
});
</script>

コンタクトフォーム　で　テキストエリアに　改行文字を　予め　挿入する方法

参考

1
2
3
document.myForm.memo.value = "aaa\nbbb";
とすれば良いです。
\nは改行コードです。

コード　ポイントは\n

1
2
3
4
5
6
7
8
9
10
<?php
$subject = '作業希望日\n\n●第１希望　　　月　　　日\n●第２希望　　　月　　　日\n●第３希望　　　月　　　日';
            ?>
            <script type="text/javascript">
            jQuery(document).ready(function () {
              jQuery("textarea#tamatour").val("<?php echo $subject; ?>");
            });
            </script>
 
<?php echo do_shortcode( '[contact-form-7 id="11" title="コンタクトフォーム 1"]' ); ?>

コンタクト ポイントはid

1
2
3
4
5
<tr><th><span style="font-size:80%">仮予約お申込みご希望の方</span>
作業希望日<span class="ninni">任意</span></th>
  <td>[textarea textarea-913 id:tamatour]</td>
 
</tr>

サイドバーがとまるやつ　はまった　レスポンシブル

レスポンシブルでなければ全然いける

サイドバーも%でしていしてるから
fixedすると　100%では画面全体の%になっっちやう。
ピクセル指定でははみ出ちゃおう

一応方法は

1
<script type="text/javascript" src="/js/side-fixed-comment.js"></script>

こいつを入れて

1
2
3
var mainArea = $("#main_contents"); //メインコンテンツ
    var sideWrap = $("#d_sidenavi"); //サイドバーの外枠
    var sideArea = $("#d_sidenavi_in"); //サイドバー

これを指定するだけ。

1
2
3
4
5
6
7
8
9
10
11
if(wd.height() < sideArea.height()){ //サイドメニューが画面より大きい場合
                if(starPoint < wd.scrollTop() && wd.scrollTop() + wd.height() < breakPoint){ //固定範囲内
                    sideArea.css({"position": "fixed", "bottom": "20px"});
     
                }else if(wd.scrollTop() + wd.height() >= breakPoint){ //固定解除位置を超えた時
                    sideArea.css({"position": "absolute", "bottom": "0"});
     
                } else { //その他、上に戻った時
                    sideArea.css("position", "static");
     
                }

この辺をいじってほしい所まで言ったが
24.5%を足す
他は100%に戻す

cssでmaxwidth 280pxにする

fixedはwind100%でやってくるから
どうちゃっても
全く同じサイズにできん。

スクリプトを読み込ませない
ってやつやったけど

一度読み込んだjsをクリアする方法がみつからず断念

ウインドウサイズ小で
ロード時読み込ませないことはできたが
1200まで大きくして読み込んだが
また小さくしたときに
も読み込んでて
だめやった。

４・５時間はまって寝る前に考えた計算でできた。

天才花道

まず
普通に
ヘッダ

1
<script type="text/javascript" src="/js/side-fixed-comment.js"></script>

side-fixed-comment.js

1
2
3
var mainArea = $("#main_contents"); //メインコンテンツ
    var sideWrap = $("#d_sidenavi"); //サイドバーの外枠
    var sideArea = $("#d_sidenavi_in"); //サイドバー

css　場所ブログアフター

1
2
3
@media screen and (min-width: 1200px) {#d_sidenavi_in{ max-width:280px;}}
 
@media screen and (max-width: 1000px){#d_sidenavi_in{ max-width:231px; min-width:231px;}}

これで1200px以上1000PX以下の設定
あとは1000から1200までを取得する

ヘッダside-fixed-comment.jsより下（いみある？）

1
2
3
4
5
6
<script type="text/javascript">
$(window).on('load resize', function(){
var w = ($(window).width() -56) * 0.25 ;
$('#d_sidenavi_in').width(w);
});
</script>
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$(window).on('load resize', function(){
//読み込み時とリサイズ時を同時に処理する
var w = ($(window).width() -56) * 0.245 ;
//wにウインドウサイズを取得して　俺が作っているホームページのサイドバーより上のdivのマージンがピクセルで指定してあるからそれをマイナスして(-56) レスポンシブでサイドバーは24.5%で作成してあるから、それを掛けた(* 0.245) サイズいわゆる　サイドバーのあるべきサイズを取得する
$('#d_sidenavi_in').width(w);
});
//fixedになって親がいなくなった（画面全体になった）サイドバーに値を入れる。
</script>

※ここで重要なのが予め 変動値以外のサイズ　1000以下にはmin-width　1200以上にはmax-widthをしていしておく 　

参考
http://qiita.com/drapon/items/328b1ed23490061e6fdb
この書き方だと要素にwidth=がついて　イメージなどではしていできるだろうが
今回か書き方をかえた
これ参考http://qiita.com/blogger323/items/811f42f8283889071be7
ここから引き抜いた

1
2
3
$('#sidebar').css('width', '');
w = $('#sidebvar').width();
$('#sidebar').width(w);

演算子
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators

こんな書き方もできるだろう
http://bl6.jp/web/javascript/change-process-get-window-size/
処理

1
2
3
$('#sample').css({
           color: 'red'
       });

点滅css

http://www.will-hp.com/wpblog/web/72/
つかったのはこっち

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 点滅 */
.blinking{
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

http://shirasaka.tv/434

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@-webkit-keyframes pulse {
 from {
   opacity: 1.0;/*透明度100%*/
 }
 to {
   opacity: 0.8;/*透明度80%*/
 }
}
.blinking{
-webkit-animation-name: pulse;/* 実行する名前 */
-webkit-animation-duration: 0.3s;/* 0.3秒かけて実行 */
-webkit-animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */
-webkit-animation-timing-function:ease-in-out;/* イーズインアウト */
-webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
-webkit-animation-delay: 0s; /* 実行までの待ち時間 */
}