نمایش مبدأ برای آموزش:ایجاد ماژول همیشه نمایان

==ماژول همیشه نمایان چیست ؟==
با استفاده از این تکنیک، در قالب شما قادر خواهید بود تا یک ماژول را در هر شرایط نسبت به دیگر محتویات سایت نمایش دهید و با بلندی صفحه به نمایش همیشگی و یا ثابت در یک محل خاص بپردازید.
شاید تا بحال دیده باشید که در برخی از سایتها با عمل اسکرول منوی سایت را دیگر نمیتوانید استفاده کنید و برای کلیک بر روی منوها باید به مکان مخصوص آن بروید تا به منوها دسترسی داشته باشید.
البته این تنها یک مثال بود و شما میتونید برای تبلیغات و یا اخبار و یا متن سایت نیز از این تکنیک استفاده کنید.
برای انجام اینکار شما باید در فایلهای قالب خود تغییراتی ایجاد کنید. لطفاً مراحل را ذیل را مرحله به مرحله پیش بروید و دقیقاً به همان شکل که بیان شده عمل کنید.

==قرار دادن کد برقراری ارتباط==
وارد پوشه قالب سایت خود بشوید و فایل index.php را پیدا کنید و با استفاده از یک ویرایشگر آنرا مشاهده کنید. تگ < body > را پیدا کنید و در خط بعدی آن و قبل از بسته شدن تگ، کد زیر را قرار دهید.



<div dir=ltr>
<code>
<pre>
<div id="mehrabun" style="
    position:absolute;
    right:10px;top:10px;
    background-image:none; background-repeat:repeat; background-attachment:scroll">
<?php mosLoadModules('top'); ?></div>
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/templates/name_template/fix_menu.js' ); ?>
</pre>
</code>
</div>


توجه : استایل تعریف شده در این کد را میتوانید تغییر دهید و برای آن جدول و یا ضمینه تعیین کنید و یا آنرا در css منتقل کنید.

تذکر 1 : در کد بالا شما میتوانید بجای top که موقعیت top در قالب را معرفی میکند هر موقعیت دیگری را تعریف کنید، بطور مثال user1 یا user10.

تذکر 2 : در انتهای کد مشاهده میکنید که name_template نوشته شده است. شما باید این نوشته را با نام قالب خود تغییر دهید. برای بدست آوردن نام قالب میتوانید از فایل xml موجود در پوشه قالب استفاده کنید.

==قرار دادن کد اصلی==
این اصلیترین قسمت این تکنیک می باشد.
برای ایجاد این کد یک فایل با نام fix_menu از نوع js احتیاج است. میتوانید این فایل را به راحتی توسط نرم افزار Dreamweaver ایجاد کنید. دقت داشته باشید که نام این فایل fix_menu.js باشد.

حال زمان آنست که این فایل با استفاده از کد معرفی شده و مورد نظر شما تکمیل گردد. پس یکی از دو حالت ذیل را انتخاب کنید و در این فایل کپی کنید.

کد اول : با استفاده از این کد شما یک کادر کاملاً ثابت خواهید داشت.


<div dir=ltr>
<code>
<pre>
<script type="text/javascript"><!--
fixedMenuId = 'mehrabun';

var fixedMenu = 
{
    hasInner: typeof(window.innerWidth) == 'number',
    hasElement: document.documentElement != null
       && document.documentElement.clientWidth,

    menu: document.getElementById
        ? document.getElementById(fixedMenuId)
        : document.all
          ? document.all[fixedMenuId]
          : document.layers[fixedMenuId]
};

fixedMenu.computeShifts = function()
{
    fixedMenu.shiftX = fixedMenu.hasInner
        ? pageXOffset
        : fixedMenu.hasElement
          ? document.documentElement.scrollLeft
          : document.body.scrollLeft;
    if (fixedMenu.targetLeft > 0)
        fixedMenu.shiftX += fixedMenu.targetLeft;
    else
    {
        fixedMenu.shiftX += 
            (fixedMenu.hasElement
              ? document.documentElement.clientWidth
              : fixedMenu.hasInner
                ? window.innerWidth - 20
                : document.body.clientWidth)
            - fixedMenu.targetRight
            - fixedMenu.menu.offsetWidth;
    }

    fixedMenu.shiftY = fixedMenu.hasInner
        ? pageYOffset
        : fixedMenu.hasElement
          ? document.documentElement.scrollTop
          : document.body.scrollTop;
    if (fixedMenu.targetTop > 0)
        fixedMenu.shiftY += fixedMenu.targetTop;
    else
    {
        fixedMenu.shiftY += 
            (fixedMenu.hasElement
            ? document.documentElement.clientHeight
            : fixedMenu.hasInner
              ? window.innerHeight - 20
              : document.body.clientHeight)
            - fixedMenu.targetBottom
            - fixedMenu.menu.offsetHeight;
    }
};

fixedMenu.moveMenu = function()
{
    fixedMenu.computeShifts();

    if (fixedMenu.currentX != fixedMenu.shiftX
        || fixedMenu.currentY != fixedMenu.shiftY)
    {
        fixedMenu.currentX = fixedMenu.shiftX;
        fixedMenu.currentY = fixedMenu.shiftY;

        if (document.layers)
        {
            fixedMenu.menu.left = fixedMenu.currentX;
            fixedMenu.menu.top = fixedMenu.currentY;
        }
        else
        {
            fixedMenu.menu.style.left = fixedMenu.currentX + 'px';
            fixedMenu.menu.style.top = fixedMenu.currentY + 'px';
        }
    }

    fixedMenu.menu.style.right = '';
    fixedMenu.menu.style.bottom = '';
};

fixedMenu.floatMenu = function()
{
    fixedMenu.moveMenu();
    setTimeout('fixedMenu.floatMenu()', 20);
};

// addEvent designed by Aaron Moore
fixedMenu.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 = 0; i < element[listener + '_num']; 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']++;
};

fixedMenu.supportsFixed = function()
{
    var testDiv = document.createElement("div");
    testDiv.id = "testingPositionFixed";
    testDiv.style.position = "fixed";
    testDiv.style.top = "0px";
    testDiv.style.right = "0px";
    document.body.appendChild(testDiv);
    var offset = 1;
    if (typeof testDiv.offsetTop == "number"
        && testDiv.offsetTop != null 
        && testDiv.offsetTop != "undefined")
    {
        offset = parseInt(testDiv.offsetTop);
    }
    if (offset == 0)
    {
        return true;
    }

    return false;
};

fixedMenu.init = function()
{
    if (fixedMenu.supportsFixed())
        fixedMenu.menu.style.position = "fixed";
    else
    {
        var ob = 
            document.layers 
            ? fixedMenu.menu 
            : fixedMenu.menu.style;

        fixedMenu.targetLeft = parseInt(ob.left);
        fixedMenu.targetTop = parseInt(ob.top);
        fixedMenu.targetRight = parseInt(ob.right);
        fixedMenu.targetBottom = parseInt(ob.bottom);

        if (document.layers)
        {
            menu.left = 0;
            menu.top = 0;
        }
        fixedMenu.addEvent(window, 'onscroll', fixedMenu.moveMenu);
        fixedMenu.floatMenu();
    }
};

fixedMenu.addEvent(window, 'onload', fixedMenu.init);
//--></script>
</pre>
</code>
</div>


کد دوم : با استفاده از این کد شما یک کادر شناور به همراه افکت خواهید داشت.

<div dir=ltr>
<code>
<pre>
<script type="text/javascript"><!--
var floatingMenuId = 'mehrabun';
var floatingMenu =
{
    targetX: -250,
    targetY: 10,

    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()', 20);
};

// 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>
</pre>
</code>
</div>

پس از ایجاد فایل و کپی کردن یکی از دو کد بالا، این فایل را در کنار فایل index.php قالب خود آپلود کنید. (همان فایلی که در توضیح قبلی ویرایش کردید)

توجه : در صورت آشنایی با کدهای قرار گرفته در این آموزش شما میتوانید این کد را مخصوص خودتان ویرایش کنید.

==مرحله آخر==
حال زمان آنست که وارد مدیریت مامبو بشوید و یک یا چند ماژول برای نمایش در این کادر اختصاص دهید. تنها باید دقت کنید که ماژول مورد نظر باید در موقعیتی که مشخص کرده اید منتشر شود. اگر در قسمت اول آموزش شما user10 را معرفی کرده اید در تنظیمات ماژول خود نیز موقعیت user10 را انتخاب باید بکنید. کلاس بندی ماژولهای سایت با این کادر مجزا می باشد.

==توضیحات تکمیلی برای گسترش این تکنیک==
شما میتوانید با استفاده از این الگو بسیاری از اسکریپتها را در سایت مامبویی خود براحتی استفاده کنید.

==سخن آخر==
کدهای ارائه شده در این آموزش از سایت Javascript Tricks and Code Samples انتخاب شده است و مورد استفاده قرار گرفته. میتوانید از اسکریپتهای مشابه نیز استفاده کنید.
این تنها یک تکنیک می باشد و شما موظفید خودتان این اسکریپت را ویرایش کنید. انجمن مامبولرن به سوالات مرتبط با تغییر در اسکریپتها پاسخگو نمیباشد (قوانین انجمن) و باید از طریق انجمنهای برنامه نویسی تغییر در اسکریپت را دنبال کنید.

استفاده از متن مطالب مطرح شده در این آموزش با ذکر منبع (ویکی مامبولرن - پسر مهربون) در سایتهای دیگر مانعی ندارد.

--پسرمهربون ‏۲۱ فوریهٔ ۲۰۰۹، ساعت ۱۵:۰۱ (UTC)