[텍스트큐브]따라다니는 탑버튼 만들기

텍스트큐브(제공형)에서 따라다니는 Top 버튼 만드는 방법입니다.

 

먼저 아래 내용들을 확인해주세요.

 

1. 텍스트큐브닷컴 블로그 수정하기

2. 텍스트큐브에 로고를 이미지로 바꿔보자!

 

위와 동일한 방법입니다.

 

 

제사이트 오른쪽에 보시면 위와 같은 따라다니는 이미지가 보이실 겁니다. 이걸 적용하는 것입니다.

 

텍스트큐브 관리자 > 꾸미기 > 위젯에서 html 위젯을 추가합니다.

 

 

해당 위젯안에 아래와 같이 기술합니다.

 

단, 텍스트큐브에서 제공되는 스킨 (Simple Gray, Simple Brown, Simple Black)을 토대로 적용시켰으며, 다른스킨일경우 id 값과 class 명이 다를수 있으니, 다른스킨 사용자들은 해당스킨에 맞는 id와 class명에 동일한 방법으로 적용시키면 됩니다.

 

<style type="text/css">

#menu {position:relative; z-index:2;}

.area {position:relative; z-index:1;}

.area #floatdiv {
        position:absolute;
        left:0;
        top:0;
        padding:10px;
        background:#FFFFFF;
        border:2px solid #c1d4f5;

}

</style>

 

간단히 설명을 드리자면, #menu 에 position과 z-index:2 를 주는 이유는 아래와 같이 '더보기' 버튼을 클릭시 해당 레이어가 위로 보이게 하기 위함입니다.

 

그리고 위로가기 버튼 사이즈나, 박스의 padding 값으로 인해 위치가 조금씩 다를수 있으니, 위치부분은 알맞게 수정해주셔야 합니다.

 

 

스타일 적용이 완료되었으면, Top버튼 소스를 위젯에 추가해보겠습니다.

역시나 html 위젯을 추가하신후 사이드바 적당한 곳에 위치시킵니다. 그후 아래소스를 삽입합니다.

 

 

<div id="floatdiv">
<!--input type="image" onclick="move_upper_left()" title="좌측위로" src="http://fs.textcube.com/blog/0/2036/attach/XLDzuyQxDO.gif" /><br />
<input type="image" onclick="move_upper_center()" title="중간위로" src="http://fs.textcube.com/blog/0/2036/attach/XFARCbmqq0.gif" /><br />
<input type="image" onclick="move_upper_right()" title="우측위로" src="http://fs.textcube.com/blog/0/2036/attach/XdVNJ6j7RM.gif" /><br />
<input type="image" onclick="move_center_left()" title="좌측중간" src="http://fs.textcube.com/blog/0/2036/attach/XJyIwhCKCp.gif" /><br />
<input type="image" onclick="move_center_center()" title="중앙중간" src="http://fs.textcube.com/blog/0/2036/attach/Xdb3Hpm2so.gif" /><br />
<input type="image" onclick="move_center_right()" title="우측중간" src="http://fs.textcube.com/blog/0/2036/attach/XRfmBsG1yl.gif" /><br />
<input type="image" onclick="move_lower_left()" title="좌측아래" src="http://fs.textcube.com/blog/0/2036/attach/XAI2kWEOu4.gif"/><br />
<input type="image" onclick="move_lower_center()" title="중간아래" src="http://fs.textcube.com/blog/0/2036/attach/XFhw2Sx3Vs.gif" /><br />
<input type="image" onclick="move_lower_right()" title="우측아래" src="http://fs.textcube.com/blog/0/2036/attach/XH5VDDiyrb.gif" /><br /-->
<input type="image" onclick="javascript:scroll(0,0)" title="최상위로" src="http://fs.textcube.com/blog/0/2036/attach/XCEKL7RiIA.gif" />

<span id="script_source">
<script type="text/javascript">
<!--  
/* Script by: www.jtricks.com 
 * Version: 20071017 
 * Latest version: 
 * www.jtricks.com/javascript/navigation/floating.html 
 */ 
var floatingMenuId = 'floatdiv';  
var floatingMenu =  
{  
    targetX: 910,  
    targetY: 0,  
 
    hasInner: typeof(window.innerWidth) == 'number',  
    hasElement: typeof(document.documentElement) == 'object' 
        && typeof(document.documentElement.clientWidth) == 'number',  
 
    menu:  
        document.getElementById  
        ? document.getElementById(floatingMenuId)  
        : document.all  
          ? document.all[floatingMenuId]  
          : document.layers[floatingMenuId]  
};  
 
floatingMenu.move = function ()  
{  
    floatingMenu.menu.style.left = floatingMenu.nextX + 'px';  
    floatingMenu.menu.style.top = floatingMenu.nextY + 'px';  
}  
 
floatingMenu.computeShifts = function ()  
{  
    var de = document.documentElement;  
 
    floatingMenu.shiftX =    
        floatingMenu.hasInner    
        ? pageXOffset    
        : floatingMenu.hasElement    
          ? de.scrollLeft    
          : document.body.scrollLeft;    
    if (floatingMenu.targetX < 0)  
    {  
        floatingMenu.shiftX +=  
            floatingMenu.hasElement  
            ? de.clientWidth  
            : document.body.clientWidth;  
    }  
 
    floatingMenu.shiftY =   
        floatingMenu.hasInner  
        ? pageYOffset  
        : floatingMenu.hasElement  
          ? de.scrollTop  
          : document.body.scrollTop;  
    if (floatingMenu.targetY < 0)  
    {  
        if (floatingMenu.hasElement && floatingMenu.hasInner)  
        {  
            // Handle Opera 8 problems  
            floatingMenu.shiftY +=  
                de.clientHeight > window.innerHeight  
                ? window.innerHeight  
                : de.clientHeight  
        }  
        else 
        {  
            floatingMenu.shiftY +=  
                floatingMenu.hasElement  
                ? de.clientHeight  
                : document.body.clientHeight;  
        }  
    }  
}  
 
floatingMenu.calculateCornerX = function()  
{  
    if (floatingMenu.targetX != 'center')  
        return floatingMenu.shiftX + floatingMenu.targetX;  
 
    var width = parseInt(floatingMenu.menu.offsetWidth);  
 
    var cornerX =  
        floatingMenu.hasElement  
        ? (floatingMenu.hasInner  
           ? pageXOffset  
           : document.documentElement.scrollLeft) +   
          (document.documentElement.clientWidth - width)/2  
        : document.body.scrollLeft +   
          (document.body.clientWidth - width)/2;  
    return cornerX;  
};  
 
floatingMenu.calculateCornerY = function()  
{  
    if (floatingMenu.targetY != 'center')  
        return floatingMenu.shiftY + floatingMenu.targetY;  
 
    var height = parseInt(floatingMenu.menu.offsetHeight);  
 
    // Handle Opera 8 problems  
    var clientHeight =   
        floatingMenu.hasElement && floatingMenu.hasInner  
        && document.documentElement.clientHeight   
            > window.innerHeight  
        ? window.innerHeight  
        : document.documentElement.clientHeight  
 
    var cornerY =  
        floatingMenu.hasElement  
        ? (floatingMenu.hasInner    
           ? pageYOffset  
           : document.documentElement.scrollTop) +   
          (clientHeight - height)/2  
        : document.body.scrollTop +   
          (document.body.clientHeight - height)/2;  
    return cornerY;  
};  
 
floatingMenu.doFloat = function()  
{  
    var stepX, stepY;  
 
    floatingMenu.computeShifts();  
 
    var cornerX = floatingMenu.calculateCornerX();  
 
    var stepX = (cornerX - floatingMenu.nextX) * .07;  
    if (Math.abs(stepX) < .5)  
    {  
        stepX = cornerX - floatingMenu.nextX;  
    }  
 
    var cornerY = floatingMenu.calculateCornerY();  
 
    var stepY = (cornerY - floatingMenu.nextY) * .07;  
    if (Math.abs(stepY) < .5)  
    {  
        stepY = cornerY - floatingMenu.nextY;  
    }  
 
    if (Math.abs(stepX) > 0 ||  
        Math.abs(stepY) > 0)  
    {  
        floatingMenu.nextX += stepX;  
        floatingMenu.nextY += stepY;  
        floatingMenu.move();  
    }  
 
    setTimeout('floatingMenu.doFloat()', 10);   //이동 숫자가 적을수록 빠름
};  
 
// addEvent designed by Aaron Moore  
floatingMenu.addEvent = function(element, listener, handler)  
{  
    if(typeof element[listener] != 'function' ||   
       typeof element[listener + '_num'] == 'undefined')  
    {  
        element[listener + '_num'] = 0;  
        if (typeof element[listener] == 'function')  
        {  
            element[listener + 0] = element[listener];  
            element[listener + '_num']++;  
        }  
        element[listener] = function(e)  
        {  
            var r = true;  
            e = (e) ? e : window.event;  
            for(var i = element[listener + '_num'] -1; i >= 0; i--)  
            {  
                if(element[listener + i](e) == false)  
                    r = false;  
            }  
            return r;  
        }  
    }  
 
    //if handler is not already stored, assign it  
    for(var i = 0; i < element[listener + '_num']; i++)  
        if(element[listener + i] == handler)  
            return;  
    element[listener + element[listener + '_num']] = handler;  
    element[listener + '_num']++;  
};  
 
floatingMenu.init = function()  
{  
    floatingMenu.initSecondary();  
    floatingMenu.doFloat();  
};  
 
// Some browsers init scrollbars only after  
// full document load.  
floatingMenu.initSecondary = function()  
{  
    floatingMenu.computeShifts();  
    floatingMenu.nextX = floatingMenu.calculateCornerX();  
    floatingMenu.nextY = floatingMenu.calculateCornerY();  
    floatingMenu.move();  
}  
 
if (document.layers)  
    floatingMenu.addEvent(window, 'onload', floatingMenu.init);  
else 
{  
    floatingMenu.init();  
    floatingMenu.addEvent(window, 'onload',  
        floatingMenu.initSecondary);  
}  
 
//-->
</script>
</span>
<script type="text/javascript"><!--
function move_upper_left()
{
floatingMenu.targetX=-1405;
floatingMenu.targetY=0;
}

function move_upper_center()
{
floatingMenu.targetX='center';
floatingMenu.targetY=0;
}

function move_upper_right()
{
floatingMenu.targetX=910;
floatingMenu.targetY=0;
}

function move_center_left()
{
floatingMenu.targetX=-1405;
floatingMenu.targetY='center';
}

function move_center_center()
{
floatingMenu.targetX='center';
floatingMenu.targetY='center';
}

function move_center_right()
{
floatingMenu.targetX=910;
floatingMenu.targetY='center';
}

function move_lower_left()
{
floatingMenu.targetX=-1405;
floatingMenu.targetY=455;
}

function move_lower_center()
{
floatingMenu.targetX='center';
floatingMenu.targetY=455;
}

function move_lower_right()
{
floatingMenu.targetX=910;
floatingMenu.targetY=455;
}
//--></script>
</div>

 

소스출처 : http://www.jtricks.com/javascript/navigation/floating.html

 

소스를 보시면 Top 기능이외에 좌측,중간,우측,하단등 몇가지 기능이 더 있지만, 현재 텍스트큐브는 스킨편집기능이 되지 않아서 해당소스를 사이드바에만 적용시킬수 밖에 없습니다. 그래서 다른 기능은 주석처리하고 Top 기능만 활성화 시켜논 상태입니다. 차후에 스킨편집기능이 되면, 다르게 마크업후 모든기능을 활성화 시키면 되겠습니다.

 

위에 붉은 색표시에 이미지는 자신의 계정또는 텍스트큐브에 이미지를 업로드후 해당 이미지주소로 수정하시면 됩니다. 현재는 제사이트에 적용된 이미지로 되어있지만, 혹여나 제가 이미지를 바꾸거나 삭제할경우 괜한 낭패를 당하는 일이 없도록 해주세요.^^;

 

이상입니다. 모두들 예쁜 블로그 만드세요. 화이팅!