خب دارم سعی میکنم مقدار زیادی مطلب رو به کمک پنلهای شناور منو ها و ... به صورت ریسپانسیو در یک صفحه جا بدم . یعنی به صورت آزاکس همه ی مطالب قابل دسترسی هستند قالب از هر طرف به صفحه چسبیده و موقعیتهای مثل منوهای بالا یا فرم صبت نام به صورت شناور در پنلهای باز شو قرار دارند .
اول اینکه با بزرگ شدن صفحه همه به یک اندازه بزرگ میشن مثلا تا 1024 منوی کناری 20% و کانتنت %80 خوبه ولی بعد دیگه نمیخوام منو بزرگ بشه و فقط کانتنت عرضش زیاد بشه .
دوم اینکه آیا امکانش هست که بدون استفاده از فریمها قابلتی به قالب بدم که کاربر بتونه عرض یا ارتفاع موقعیتها رو تغییر بده ؟ چیزی شبیه به کادر کنار phpmyadmin
سوم دنبال منوی شبیه به این قسمت Button slide out هستم با قابلیت گذاشتن ماژولها داخلش
دیدن لینک ها برای شما امکان پذیر نیست. لطفا
ثبت نام کنید یا
وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
داک پنلهای موجود در میان متن کار نمیکنند .
ممنون
خب با اضافه کردن حداکثر عرض برای ستونها مشکل حل شد .
مشکل جدید اینکه چند تا موقعیت سمت راست دارم یه کانتن و یه موقعیت دیگه زیرش قراری یکی 80% ارتفاع صفحه رو بگیره یکی 20% واگه ارتفاعشون بیشتر بود اسکرول فعال بشه .
الان با
کد:
div.moduletable-scroll {
height: 175px;
overflow: auto;
}
هر ماژولی رو میتونم اسکرول دار کنم ولی مشکل اینه که height: 175px; ریسپانسیو نیست .
ممنون
خب دوستان انجمن من متاسفانه از نعمت داشتن یه تیم کاری محرومم ، نظراتتون برام مهمه . ممکنه این مطلب به نظرتون ساده باشه اما هم اینکه گم نمی شه بعدا به درد خودم میخوره ، هم ممکنه دوستان راهی رو پیشنهاد کنن که به ذهن خودم نرسیده باشه . خوشحال میشم نطر بدین .
*******
خب مشکل تنظیم ریسپانسیو ارتفاع قالب ، یعنی هر موقعیت درصدی از ارتفاع رو داشته باشه .
چهار راه پیدا کردم اولین vh که آسونترینه ولی هنوز خیلی از بروزرها پشتیانی نمیکنن ،
دوم جاوا اسکریپت
کد:
$('#sa-modulescrol').height(function(){
return $(window).height() * 0.7;
});
سوم مجازا با css یعنی یه هدر و فوتر استیکی ایجاد کنم و بک گراند رو هم از یک رنگ استفاده کنم .
چهارم استفاده از موقعیتهای ثابت
کد:
.sa-modulescrol
{
position: absolute;
width:16%;
height:75%;
overflow: auto;
background:#930;
min-height: 75%
}
min-height برای فایرفاکس
overflow برای فعال کردن اسکرول
position: absolute; برای فعال کردن ارتفاع درصدی , حتما بایدheight دایو body روی 100% تنظیم بشه
مشکلش بیشتر سر همون فیکس کردن موقعیت و در نتیجه نیاز به تنظیمات اضافی css هست .
خب اگه مدیرها اجازه ویرایش پست اول رو بدن کم کم تکمیلش میکنم
یه کد نوشتم برای افزایش متحرک ارتفاع موقعیت ، به راحتی قابلیت تغییر عرض رنگ چرخش و ... رو هم داره . بدون هیچ کد جاوا تماما css . کافیه ماوس بر روی هدر ماژول قرار بگیره تا ماژولبه آرامی باز بشه و محتوا رو نمایش بده .
ابتدا
در مدیریت ماژول جوملا ماژول کلاس ماژول یا شناسه ماژول رو به scrol تغییر بدین .
بعد
این کدها رو به آخر template .css قالبتون اضافه کنید .
کد:
scrol {
width: 96%;
position:absolute;
overflow: hidden;
background: #FF3;
-webkit-transition: max-height 2s ease-out .1s;
-moz-transition: max-height 2s ease-out .1s;
transition: max-height 2s ease-out .1s;
-ms-transition: max-height 2s ease-out .1s;
-o-transition: max-height 2s ease-out .1s;
max-height: 70px;
bottom: 20%;
right: 2%;
transition-property: all;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border:3px;
border-bottom:none;
}
scrol:hover {
background: #6F6;
z-index: 99;
max-height: 600px;
}
توضیحات کد
z-index رو طوری تنظیم کنید که از بقیه ماژولهای اطراف بیشتر باشه .
width خب تنظیماتی مثل عرض ارتفاع و رنگ بستگی داره به کدهای دایوهای مادر و در قالبهای مختلف فرق میکنه و حتی ممکنه با نصب افزونه فرق کنه . به صورت دستی تنظیمش کنید . ممکنه وقتی روی 20% تنظیم میکنید عرض صفحه رو در نظر بگره ممکنه عرض کادر ی که ماژول درش قرار داره .
کد:
-webkit-transition: max-height 2s ease-out .1s;
-moz-transition: max-height 2s ease-out .1s;
transition: max-height 2s ease-out .1s;
-ms-transition: max-height 2s ease-out .1s;
-o-transition: max-height 2s ease-out .1s;
transition-property: all;
این خاصیت متحرک رو اجاد میکنه . یک خطش در مرورگهای پیشرفته کافیه ولی بقیه برای مرورگرهای مختلفه .
bottom
این یکی هم نقطه ی شروع رو معلوم میکنه احتمالا نیاز نباشه بسته به کدهای دیگه قالبتون . من برای یه موقعیت شناور این ور گذاشتم که کفش معلوم نبود. 20% عرض صفحه میاره بالا
right: 2%; چون عرضش 96 درصد عرض کادره این در هر دو طرف 2% فضای خالی میگذاره
گویا کسی به این تاپیک علاقه ای نداره ... :(
از کد قبلی برای افزایش ارتفاع ماژولهای موجود در فوتر مثل آخرین ارسالها به سمت بالا استفاده کردم . تقریبا شبیه به این نمونه ولی فقط ارتفاع
دیدن لینک ها برای شما امکان پذیر نیست. لطفا
ثبت نام کنید یا
وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
zindex و bottomn و position:absolote رو برداشتم و اون رو به ماژولی در سمت چپ قالب اعمال کردم با کمی تغییر توی سرعتها حالا با حالت آکاردئونی باز میشه ولی مشکل css اینه که با رفع عامل برمیگرده به حالت قبلی .
مثلا اگه از hover استفاده کنم بعد از حرکت موس بر میگرده . میشه هاور رو با زمان خیلی زیاد گذاشت ولی باز هم خاصیت اکاردئونی لازمه اش برگشت به حالت اولیست .
اگه جدول بود از target یا active میتونستم استفاده کنم یا focos ولی هدر ماژول فقط active رو داره اون هم بعد از قطع کلیک چپ تموم میشه .
کسی راه حل خالص css سراغ داره ؟
اگر قصد اصلی انتشار آموزش است به انجمن آموزش های جوملا منتقل شود.
نگران علاقه دوستان نباشید چون تاپیک های مفید در طول زمان هزاران بار خوانده خواهند شد.
خب هدف اول گم نشدن کدهامه و دوم شاید کسی نکته ای چیزی توشون دید و کامل ترشون کرد . ایشالا اگه کامل شد به عنوان آموزش همراه با قالب کامل میگذارم . افزونه ای که با جاوا کارهای مشابهی ور انجام یمداد 17 یورو پولش بود . وقتی با css3 میشه به این راحتی انجام داد چرا آدم پول الکی خرج کنه .
مشکل قبلی هم حل شد . هدر ماژول رو لینک کردم به ای دی محتوای ماژول اینطوری با کلاس target :active: ارتفاع رو تنظیم کردم و حالت اکاردئونی ایجاد شد . کد کامل رو فردا میگذارم .
خوب جاوا بسته سازگاریش ممکنه با مرورگرهای قدیمی هم سازگار باشه ولی css3 با مرورگرهای جدید سازگاره اما خوب باید قید مرورگرهای قدیمی رو همه کاربران بزنند.
با پیگیری و کوشش حتما طراحی رو خوب فراخواهید گرفت.بهتره برای موضوع یک تاپیک در انجمن آموزش ها بزنید که مطالب دسته بندی باشه.
خب بعد از کلی تلاش به این نتیجه رسیدم که کد بهینه css3 برای ساخت اکاردئون وجود نداره . در مورد استفاده از :target با ماژولهایی مثل sourcer میشه عنوان ماژول رو لینک کرد ولی وقتی روش کلیک میشه صفحه با پرش به موقعیت مورد نظر میره .
focus هم در موارد خاص مثلا برای افزایش آکاردئونی کادر جستجو میشه استفاده کرد ولی بقیه جاها کاربردی نداره .
xpertaccordion , ja Accordion هر دو مجانی کار رو انجام میدن ...