2012年2月25日土曜日

ブロガー(blogger)にJavaScriptを設置するには

ブロガー(blogger)にJavaScriptを設置する方法は、いろいろあると思いますが、外部ファイルを読み込めない場合、ソースを直接埋め込んでしまう方法がお勧めです。ソースを管理する上で、視認性が悪くなりますが、確実に動作させるには良い方法だと思います。

管理画面の「テンプレート」メニューから、「HTMLの編集」画面で、設定を変更します。
     #layout .region-inner {
       min-width: 0;
       width: auto;
     }
     ]]>
  </b:template-skin>
----- ここに埋め込む -----
</head>

<body expr:class='"loading" + data:blog.mobileClass'>
<div class='body-fauxcolumns'>

</head> タグ(閉じる)の直前に JavaScript を埋め込みます。下記は、外部ファイルの読み込み直接埋め込んだ場合の例です。直接埋め込みの例として、Keep-in-Viewを設置しています。
     #layout .region-inner {
       min-width: 0;
       width: auto;
     }
     ]]>
  </b:template-skin>
  <script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script>
<!--
/*! ###########################################################################

Source: https://github.com/dutchcelt/Keep-in-View

Copyright (C) 2011 - 2012,  Lunatech Research B.V., C. Egor Kloos. All rights reserved.
GNU General Public License, version 3 (GPL-3.0)

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see http://www.opensource.org/licenses/gpl-3.0.html

########################################################################### */

// Uses AMD or browser globals to create a jQuery plugin.
    
(function (factory) {

    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else {
        // Browser globals
        factory(jQuery);
    }
    
}(function ($) {

    $.fn.keepInView = function(settings) {
        
        return this.each(function() {
        
            var $elem = $(this);
             
            var defaults = {
            
                // Position will be fixed regardless of scroll position when set to true 
                fixed: false, 
                
                // Vertical offset that applies to both top and bottom;
                edgeOffset : 0, 
                
                // Override z-index if you can't or don't want to set this with CSS
                zindex : $elem.css('zIndex'),
                
                // Override all scripted positions with your own custom CSS classname
                // The set classname will be triggered when element scrolls out of view 
                // The Script will add a suffix of '-top' or '-bottom'
                customClass: false,
                
                //  Only trigger this script on scrolling out at the 'top', 'bottom' the default is 'both'.
                trigger: 'both',
                
                //  Set the height and width (user can override these if necessary)
                h : $elem.height(),
                w : $elem.width()
                
            };
            
            var options      =  $.extend(defaults, settings),
                offset       =  $elem.offset(),
                leftPosition =  $elem.css('left'),
                marginOffset =  (leftPosition==="auto") ? parseInt($elem.css('marginLeft'),10) : 0,
                prepCSS      =  function(){
                                    $elem.css({ 
                                        position: 'fixed',
                                        left:       leftPosition - marginOffset + 'px',
                                        width:      options.w,
                                        height:     options.h,
                                        zIndex:     options.zindex
                                    });
                                },
                fixCSS       =  function(t){ $elem.css({ top: t+'px' }); }
            
            var setElem = function(){
            
                //  Making sure that $elem doesn't fire if it is taller than the window (like a sidebar)
                //  To prevent elastic scrolling fireing set the body in css to 'overflow: hidden'.
                //  Then wrap your content in a div with 'overflow: auto'.
                if ( $elem.height() > $(window).height() ) { return false; }
                
                var scrolledOutAt = "";
                if ( $(window).height() < parseInt(offset.top + $elem.outerHeight() - Math.abs($(window).scrollTop())+options.edgeOffset,10)  && !options.fixed ) { 
                    scrolledOutAt = "bottom"; 
                };
                if ( ($(window).scrollTop()) > offset.top - options.edgeOffset && !options.fixed) { 
                    scrolledOutAt = "top"; 
                }; 
                if(!options.customClass){ 
                    prepCSS();
                    if (scrolledOutAt==="bottom" && (options.trigger === 'both' || options.trigger === 'bottom')){
                        fixCSS(($(window).height()-$elem.outerHeight()-options.edgeOffset));
                    } else if (scrolledOutAt==="top" && (options.trigger === 'both' || options.trigger === 'top')){ 
                        fixCSS(options.edgeOffset);
                    } else if (options.fixed){ 
                        $elem.css({top:options.edgeOffset,left:offset.left});
                    } else {
                        $elem.removeAttr('style');
                    }
                } else if(options.customClass){
                    if ( options.trigger === 'both') {
                        if (scrolledOutAt==="bottom" || scrolledOutAt==="top"){
                            $elem.addClass(options.customClass+"-"+scrolledOutAt);
                        } else if (!scrolledOutAt) {
                            $elem.removeClass(options.customClass+"-top").removeClass(options.customClass+"-bottom");
                        }
                    } else if (scrolledOutAt===options.trigger){
                        $elem.addClass(options.customClass+"-"+options.trigger);
                    } else if (!scrolledOutAt) {
                        $elem.removeClass(options.customClass+"-"+options.trigger);
                    }
                }
            }
            var staySticky = function(){
                $elem.removeAttr('style');
                options.w = $elem.width();
                options.h = $elem.height();
                offset = $elem.offset();
                setElem(); 
            }
            var killSticky = function(){
                $elem.removeAttr('style').off(".sticky");
                $(window).off('.sticky', staySticky).off('.sticky', setElem);
            }
            
            $elem.on('update.sticky', staySticky);
            $elem.on('unstick.sticky', killSticky);
            $(window).on('resize.sticky', $elem, staySticky).on('scroll.sticky', $elem, setElem).trigger('scroll');
        });
    };
    
}));
//-->
</script>
</head>

0 件のコメント:

コメントを投稿