ماژول گوشه کناری

[sarj 31]

باسلام خدمت تمامی دوستان عزیز

میخواستم ببینم چطوری میشه یه ماژول در کنار وب سایت جوملایی درج کرد که همیشه نمایش داده بشه؟

مثل لینک زیر:

http://ashiyane.org/forums/

ممنونم

[عادل 10]

بیا دوست عزیز

دانلود

[amirhacker 26]

یه html سفارشی ایجاد کن عرض و طول مناسب بهش بده و با این کد بگذارش گوشه قالب

position:fixed;

[sarj 31]

یه html سفارشی ایجاد کن عرض و طول مناسب بهش بده و با این کد بگذارش گوشه قالب

position:fixed;

نشد...

ماژول شبیه به این ماژول جشنواره وب ایران برای انجمن نیست؟اون مازولی که دوستان معرفی کردند شناور هست من ثابت میخوام باشه...

[عادل 10]

بیا دوست عزیز

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

با استفاده از این تکنیک، در قالب شما قادر خواهید بود تا یک ماژول را در هر شرایط نسبت به دیگر محتویات سایت نمایش دهید و با بلندی صفحه به نمایش همیشگی و یا ثابت در یک محل خاص بپردازید.

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

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

برای انجام اینکار شما باید در فایل*های قالب خود تغییراتی ایجاد کنید. لطفاً مراحل ذیل را مرحله به مرحله پیش بروید و دقیقاً به همان شکل که بیان شده عمل کنید.

قرار دادن کد برقراری ارتباط

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

<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' ); ?>

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

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

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

قرار دادن کد اصلی

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

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

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

<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>

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

<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>

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

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

مرحله آخر

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

توضیحات تکمیلی برای گسترش این تکنیک

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

سخن آخر

کدهای ارائه شده در این آموزش از سایت Javascript Tricks and Code Samples انتخاب شده است و مورد استفاده قرار گرفته. می*توانید از اسکریپت*های مشابه نیز استفاده کنید.

این تنها یک تکنیک می باشد و شما موظفید خودتان این اسکریپت را ویرایش کنید. انجمن مامبولرن به سوالات مرتبط با تغییر در اسکریپت*ها پاسخگو نمی*باشد (قوانین انجمن) و باید از طریق انجمن*های برنامه نویسی تغییر در اسکریپت را دنبال کنید.

[sarj 31]

آموزش دانشنامه جوملا فارسی رو مطالعه کردم و انجام دادم اما ردیف نشد...

[reza.sh 19]

کد رو تست کردید ؟

خطایی و... داشت ؟

[sarj 31]

بدین ترتیب میشه درستش کرد:25:

<div style="position: fixed; bottom: 0px; left: 0px;"><a href="www.mysite.ir"><img src="images/example.gif" border="0" alt="" /></a></div>

[عادل 10]

بدین ترتیب میشه درستش کرد:25:

<div style="position: fixed; bottom: 0px; left: 0px;"><a href="www.mysite.ir"><img src="images/example.gif" border="0" alt="" /></a></div>

خوب اینارو کجا باید بریزی

[amirhacker 26]

همونی که اشاره شد می تونید html سفارشی بزنید و کد بالا را داخلش قرار بدهید

[عادل 10]

همونی که اشاره شد می تونید html سفارشی بزنید و کد بالا را داخلش قرار بدهید

دوست عزیز زدم درست نشد

<div style="position: fixed; bottom: 0px; left: 0px;"><a href="www.mysite.ir"><img src="images/example.gif" border="0" alt="" /></a></div>

وموقعیتش رو left زدم

[amirhacker 26]

باید روی دکمه html در ویرایش گر کلیک کنی بعد این کد را بزنی

[عادل 10]

باید روی دکمه html در ویرایش گر کلیک کنی بعد این کد را بزنی

نشد دوست عزیز

[ATTACH=CONFIG]3622[/ATTACH]