رفتن به مطلب

برای شروعی حرفه ای آماده اید ؟!

سایت ساز IPSنسخه ۴/۴/۱۰
فارسی ساز IPS ۴.۴بیلد ۵
تاریخ هجری شمسینسخه ۴.۷.۳

توجه کنید برای دانلود فایل های اختصاصی باید سایت خود را ثبت کنید. اطلاعات بیشتر.

جستجو در
  • تنظیمات بیشتر ...
نمایش نتایجی که شامل ...
جستجو در ...
CHRIS-7

آموزش افزودن اسکرول به بالا به همراه نوار پیشرفت

پست های پیشنهاد شده

آموزش افزودن اسکرول به بالا به همراه نوار پیشرفت در پیمایش صفحات فوق پیشرفته و حرفه ایی :good2:   2.gif.b3a6b2b3ab2d92deaef222ac27cd7de1.gif

ابتدا کد زیر را در مسیر قالب Global Template واقع در پنل مدیریت > شخصی سازی > پوسته ها > قالب موردنظر نماد </> بعد از فوتر قرار داده و در عبارت yoursite.ir آدرس انجمن خودتون رو قرار بدید  ذخیره کنید

<script src="http://yoursite.ir/scroll.progress.bar.js"></script><div class="progress-wrap"><svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102"><path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/></svg></div>

سپس کد استایل زیر را هم در قالب Custom.css همان جا در تب CSS قرار داده و ذخیره کنید

.progress-wrap{position:fixed;right:10px;bottom:10px;height:46px;width:46px;cursor:pointer;display:block;border-radius:50px;box-shadow:inset 0 0 0 2px rgba(255,255,255,0.2);z-index:10000;opacity:0;visibility:hidden;transform:translateY(15px);-webkit-transition:all 200ms linear;transition:all 200ms linear}.progress-wrap.active-progress{opacity:1;visibility:visible;transform:translateY(0)}.progress-wrap::after{position:absolute;font-family:"FontAwesome";content:"\f102";text-align:center;line-height:46px;font-size:32px;color:#d60000;left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:999;-webkit-transition:all 200ms linear;transition:all 200ms linear}.progress-wrap:hover::after{opacity:0}.progress-wrap::before{position:absolute;font-family:"FontAwesome";content:"\f102";text-align:center;line-height:44px;font-size:38px;opacity:0;color:red;left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:999;-webkit-transition:all 200ms linear;transition:all 200ms linear}.progress-wrap:hover::before{opacity:1}.progress-wrap svg path{fill:none}.progress-wrap svg.progress-circle path{stroke:red;stroke-width:4;box-sizing:border-box;-webkit-transition:all 200ms linear;transition:all 200ms linear}

در آخر هم فایل جی کوئری اون می مونه که در فایل پیوست شده رو دانلود کرده و در روت انجمن (از طریق سی پنل هاست > فایل منیجر ) آپلود کنید.

نکته : اگر عمل نکرد یا یک جایی از کار را اشتباه رفته اید یا کتابخانه jquery رو ندارید و اونو هم دانلود کنید و لینکش رو در قالب Gobal Template به صورت <script src=""></script> اضافه کنید

scroll.progress.bar.js

 

ویرایش شده توسط CHRIS-7
  • پسند 2
  • تشکر 2

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

سلام دوست عزیز

من تا آخرش پیش رفتم ولی کار نکرد.

حالا دوتا سوال دارم:

1. تگ اولی رو بعد از تگ شروع فوتر قرار بدیم یا بعد از تگ پایان فوتر؟

2. : این کتابخانه jquery رو از کجا اضافه کنم؟

حل شد دمت گرم

سلام @CHRIS-7

آقا شرمنده هی مزاحم شما میشیم. من دیروز که طبق این آموزشتون پیش رفتم همه چی اوکی شد و خوب هم کار میکنه. فقط یه موردی که هست تو صفحه اصلی انجمن برخی چیزا درست کار نمیکنه.

تصویر زیر رو ببینیذ:

Unstitled.thumb.png.d8d0dd869e01d6ebecff2c0dd592bce7.png

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

با تشکر صمیمانه

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

یه جای کارو اشتباه رفتید که باعث تداخل کدهای جی کوئری شده ، کد مربوطه رو بعد از تگ فوتر <footer/> قالب global template قرار بدید و تست کنید.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

بعد از تگ فوتر هم قرار دادم کار نکرد که هیچ بازم مثل تصویر ارسالی اون قسمتها کار نمیکنه.

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
در 11 دقیقه قبل، Arash.Ranjbar گفته است :

بعد از تگ فوتر هم قرار دادم کار نکرد که هیچ بازم مثل تصویر ارسالی اون قسمتها کار نمیکنه.

نکته آخر رو هم که آخرش گفتم رو انجام دادید ؟!!!

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

بله از سایت مرجع دانلودش کردم

اینم بگما کار میکنه فقط اون قسمتها که تو تصویر مشخص کردم از کار میفتن

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
در ۱ ساعت قبل، Arash.Ranjbar گفته است :

بله از سایت مرجع دانلودش کردم

اینم بگما کار میکنه فقط اون قسمتها که تو تصویر مشخص کردم از کار میفتن

اگه واقعا نیاز دارید یک یوز با دسترسی بسازید و بفرستید براتون اوکی کنم !

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

اوه بله ، آموزشی که دادم توسط یک ایرانی که اسم نمی برم اما شاید مدیران و کاربران بشناسند کپی شده و در قالب فایل نصبی افزونه در مارکت اصلی IPS فروخته میشه ! البته جا داره این مورد رو هم اضافه کنم که پستشون ریپورت شد 🙃

  • خوشحال 2

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

این اولین بار نیست که چنین اتفاقی میفته متاسفانه و به این جمله که در هدر زدیم توجه نشده.   خدمات و محتویات منتشر یافته در IPSFarsi

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
مهمان
این موضوع برای عدم ارسال قفل گردیده است.

  • کاربران آنلاین در این صفحه   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.

×
×
  • اضافه کردن...

اطلاعات مهم

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