通販サイトの作成ログ

通販サイトでいじったメモログみたいなものだとお考えください。
質問もどうぞ。わかる範囲内でしたらお答えします。

2016年06月

自動カナ入力

自動カナ入力
個人情報入力欄だと外部リンクが使えないことが多いので
jquery-1.10.1.min.jsjquery.autoKana.jsは内部リンクにしてください(これに気づくのに1日半かかった…)
katakanaはtrue:でカタカナ、false:でひらがな(デフォルト)
参照:https://github.com/harisenbon/autokana

----------------html部分-----------------------
名前<input id="user_name1" type="text"/>
カナ<input id="user_name_kana1" type="text"/>
-----------------------------------------------

----------------script&CSS部分-------------------
<script src="jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.autoKana.js"></script>
<script type="text/javascript">
  $(document).ready(
    function() {               
      $.fn.autoKana('#user_name1', '#user_name_kana1', {katakana : true});
    });
</script>
----------------------------------------------

スライドサイドバー

スライドサイドバー(フッターの上で止まるやつ)
スライドさせたはいいがフッターと被ったので。
参照:http://select-aster.com/web/auto-tracking-sidebar/

----------------html部分-----------------------
<div  id="aside2">
スライドさせたい要素
</div>
-----------------------------------------------

----------------script&CSS部分-------------------
<script src="jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
    var target = $('#aside2');
    var footer = $('#footer')
    var targetHeight = target.outerHeight(true);
    var targetTop = target.offset().top;
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        if(scrollTop > targetTop){
            var footerTop = footer.offset().top;            
            if(scrollTop + targetHeight > footerTop){
                customTopPosition = footerTop - (scrollTop + targetHeight)
                target.css({position: "fixed", top:  customTopPosition + "px"});
            }else{
                target.css({position: "fixed", top: "10px"});
            }
        }else{
            target.css({position: "static", top: "auto"});
        }
    });
});
-->
</script>
<style>
div#aside2.fixed {
    position:fixed;
    left:0px;
    top:10px;
    z-index: 1;
}
</style>
----------------------------------------------

gotopボタン

改良点ありありですが途中まで。
ちょいジャンプして引っ込むやつ
某幼稚園参照

----------------html部分-----------------------
<p id="gotop2" style="z-index: 1;bottom: -120px;">
<a href="#header" title="" class="btnTop" ><img src="go_to.png" alt=""/ ></a>
</p>
-----------------------------------------------

----------------script&CSS部分-------------------
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script>
$(function() {
    var showFlug = false;
    $('#gotop2').css('bottom', '-120px');
    var showFlug = false;
    //スクロールが400に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
            if (showFlug == false) {
                showFlug = true;
                $('#gotop2').stop().animate({'bottom' : '0px'}, 300);
            }
        } else {
            if (showFlug) {
                showFlug = false;
                $('#gotop2').stop().animate({'bottom' : '-200px'}, 200);
            }
        }
    });
    $('.btnTop').click(function () {
        $('#gotop2').animate({'bottom': '30px'}, 400, 'easeOutBack');
        $('#gotop2').animate({'bottom': '-200px'}, 200, 'easeOutBack');
        $('body,html').delay(200).animate({
            scrollTop: 0
        }, 10, 'easeInOutCirc');
        return false;
    });
});
</script>
<style>
#gotop2 {
    position:fixed;
    bottom: 0px;
    right: 0px;
  z-index:1;
}
</style>
----------------------------------------------
最新コメント
記事検索