●● دلایل ایجاد overflow در صفحات html ●●
🔸 احتمالا برای شما هم پیش اومده که در حال کار بر روی یک صفحه وب هستید و ناگهان متوجه اسکرول افقی در صفحه میشوید، توی این مطلب دلایل بروز این مشکل رو بررسی میکنیم
1️⃣ استفاده از واحدهای ثابت مانند px برای عرض
اگر از واحدهای ثابت مثل px برای عرض یک عنصر استفاده کنید و این عرض بیشتر از اندازه ویوپورت باشد، اسکرول ایجاد میشود.
راه حل ها :
2️⃣ عدم تنظیم صحیح box-sizing
به صورت پیشفرض، ویژگی padding و border به عرض یک عنصر اضافه میشوند، که ممکن است باعث شود عرض کلی عنصر از مقدار مورد انتظار بیشتر شود و اسکرول ایجاد کند و راه حل برطرف کردنش استفاده از box-sizing: border-box هستش.
راه حل :
3️⃣ استفاده از position: absolute یا position: fixed
اگر عنصری با استفاده از position: absolute یا position: fixed از ویوپورت خارج شود، میتواند اسکرول افقی ایجاد کند.
مثال :
4️⃣ عدم مدیریت صحیح کلمات بلند یا لینکها
متنها یا لینکهای بسیار بلند که در یک خط قرار میگیرند (مانند لینکهای طولانی یا کلمات بدون فاصله) میتوانند عرض صفحه را بشکنند و اسکرول افقی ایجاد کنند.
راه حل :
✅ راهحل جامع
برای جلوگیری از اسکرول افقی در کل صفحه میتونید از ویژگی overflow-x: hidden استفاده کنید، اگر نیازی به اسکرول افقی ندارید.
نحوه استفاده :
💎 توی این مطلب سعی کردم تمامی مواردی که میتونن باعث اسکرول افقی در صفحه بشن رو بهتون توضیح بدم
🔸 احتمالا برای شما هم پیش اومده که در حال کار بر روی یک صفحه وب هستید و ناگهان متوجه اسکرول افقی در صفحه میشوید، توی این مطلب دلایل بروز این مشکل رو بررسی میکنیم
1️⃣ استفاده از واحدهای ثابت مانند px برای عرض
اگر از واحدهای ثابت مثل px برای عرض یک عنصر استفاده کنید و این عرض بیشتر از اندازه ویوپورت باشد، اسکرول ایجاد میشود.
راه حل ها :
● ریسپانسیو کردن المنت ها و جلوگیری از بروز این مشکل در سایز های کوچک تر.
● استفاده از واحدهای نسبی مثل % یا vw این.
.element {
width: 100vw;
}2️⃣ عدم تنظیم صحیح box-sizing
به صورت پیشفرض، ویژگی padding و border به عرض یک عنصر اضافه میشوند، که ممکن است باعث شود عرض کلی عنصر از مقدار مورد انتظار بیشتر شود و اسکرول ایجاد کند و راه حل برطرف کردنش استفاده از box-sizing: border-box هستش.
راه حل :
* { box-sizing: border-box; }استفاده از box-sizing: border-box باعث میشود padding و border داخل عرض اصلی محاسبه شوند.
3️⃣ استفاده از position: absolute یا position: fixed
اگر عنصری با استفاده از position: absolute یا position: fixed از ویوپورت خارج شود، میتواند اسکرول افقی ایجاد کند.
مثال :
.out-of-bounds { position: absolute; left: 2000px; } 4️⃣ عدم مدیریت صحیح کلمات بلند یا لینکها
متنها یا لینکهای بسیار بلند که در یک خط قرار میگیرند (مانند لینکهای طولانی یا کلمات بدون فاصله) میتوانند عرض صفحه را بشکنند و اسکرول افقی ایجاد کنند.
راه حل :
استفاده ویژگیهای word-break و overflow-wrap باعث میشه تا مرورگر در صورت برخورد با کلمات بلند، اونها رو به صورت خودکار شکسته و در خطوط جدید قرار دهد.
.long-text {
word-break: break-all;
overflow-wrap: break-word;
}✅ راهحل جامع
برای جلوگیری از اسکرول افقی در کل صفحه میتونید از ویژگی overflow-x: hidden استفاده کنید، اگر نیازی به اسکرول افقی ندارید.
نحوه استفاده :
body { overflow-x: hidden; }این کد از ایجاد اسکرول افقی جلوگیری میکنه، حتی اگر برخی از عناصر به صورت پیشفرض از عرض ویوپورت خارج بشن.
💎 توی این مطلب سعی کردم تمامی مواردی که میتونن باعث اسکرول افقی در صفحه بشن رو بهتون توضیح بدم
اگر براتون کاربردی و مفید بود حمایت یادتون نره، برای رفقاتونم بفرستید تا استفاده کنن 🔥❤️
#️⃣ #overflow #css #webpage
🚀 @coolycode
𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
#NEWPost مراقب باشید خلاصه 😁😂 https://www.instagram.com/reel/DAGxGT7MXHn #️⃣ #NEWPost 🚀 @coolycode
پست جدیدمون تو اینستا آپلود شد از دست ندید 😁❤️
#text
صبحی که با برد شهر شروع بشه قطعا روز خفن و بدون باگی قراره باشه ...
پ.ن : تا الان داشتیم مافیا بازی میکردیم ولی پست جدیدم آماده کردم میزنم ده صبح بیاد کیف کنید 😂🔥
🚀 @coolycode
میدونستید با استفاده از متد vibrate داخل جاوااسکریپت میتونید ویبره گوشی کاربر رو مدیریت کنید ؟
🔸 برای استفاده ازشم کافیه از گلوبال آبجکت navigator متد vibrate رو کال بکنید و به عنوان ورودی بهش مدت زمان ویبره رو به میلیثانیه بهش بدید
نمونه کد 🚀
💎 مشاهده استفاده عملی
🌐 داکیومنت متد vibrate
🔸 برای استفاده ازشم کافیه از گلوبال آبجکت navigator متد vibrate رو کال بکنید و به عنوان ورودی بهش مدت زمان ویبره رو به میلیثانیه بهش بدید
نمونه کد 🚀
navigator.vibrate(200);
💎 مشاهده استفاده عملی
توی پروژه بالا براتون یه مثال عملی از این متد رو براتون گذاشتم 🔺
🌐 داکیومنت متد vibrate
#️⃣ #javanoscript #vibrate
🚀 @coolycode
Media is too big
VIEW IN TELEGRAM
تفاوت استک های مختلف در برنامه نویسی :
این ویدیو یه نکته خیلی کلیدی داره که حتی سازندشم نمیدونست تا وقتی که من بهش گفتم، اساتید بگید ببینم 😂
این ویدیو یه نکته خیلی کلیدی داره که حتی سازندشم نمیدونست تا وقتی که من بهش گفتم، اساتید بگید ببینم 😂
تقلب : مربوط به بکند دولوپر مظلوممونه 😔
#️⃣ #fun #programming
🚀 @coolycode
آقا گروهمون رفت بالای صد تا، دیگه نمیتونیم ببینیم کی سین زده... 😔😂
الله اکبر
گروهمونو داشته باشید اگر سوالی داشتید بپرسید
https://news.1rj.ru/str/coolycodegap
گروهمونو داشته باشید اگر سوالی داشتید بپرسید
https://news.1rj.ru/str/coolycodegap
🔸 قطعا بهترین کتاب برای افرادی که علاقه مندن به شکلی ساده و شهودی وارد دنیای الگوریتمها بشن کتاب Grokking Algorithms هستش.
زیر این پست تو چنل نسخه فارسی و انگلیسی pdf این کتاب رو براتون میزارم ... 🤩
این کتاب با مثالهای واقعی و کاربردی، به شما کمک میکند الگوریتمهای پیچیده رو به سادگی درک کنید. نویسنده به جای تمرکز بر ریاضیات سنگین و پیچیده، از مثالهای روزمره مثل جستجوی تلفن یا پیدا کردن کوتاهترین مسیر استفاده میکند تا مفاهیم را به صورت تصویری و جذاب جا بیندازد.
#️⃣ #algorithm #book
🚀 @coolycode
persian_Grokking_Algorithms_An_illustrated_guide_for_programmers.pdf
24.5 MB
نسخه فارسی و انگلیسی پست بالا، امیدوارم بخونید و لذت ببرید 🔥
#programming
✅ انواع استانداردهای نامگذاری در برنامهنویسی
🐪 Camel Case
کلمه اول با حرف کوچک و بقیه کلمات با حرف بزرگ شروع میشوند مثل myVariableName، این روش بیشتر برای متغیرها و توابع استفاده میشود.
🅿️ Pascal Case
تمام کلمات با حرف بزرگ شروع میشوند مثل MyClassName، این روش بیشتر برای نامگذاری کلاسها یا سازهها استفاده میشود.
🐍 Snake Case
کلمات با _ جدا میشوند و همه حروف کوچک هستند مثل my_variable_name، این روش در زبانهایی که استفاده از زیرخط مجاز است رایج است.
🍢 Kebab Case
تو این نوع اسم گذاری هر کلمه با - جدا میشه مثل my-variable-name، این روش در نامگذاری فایلها یا URLها استفاده میشود چون خط تیره در URL قابل قبول است.
🔤 Hungarian Notation
تو این روش نوع داده به عنوان پیشوند به نام متغیر اضافه میشود مثل strName, intCount، هدف این روش اینه که نوع داده مشخص باشد. این روش در برخی زبانهای قدیمی یا پروژههای خاص استفاده میشه ولی امروزه کمتر رایج است.
🆔 Channel | Group | YouTube
صفحه لینکدین کولی کد :
پست های کاربردی و مفیدی میزاریم اگر دوست داشتید یه سر بزنید 😁🔥
https://www.linkedin.com/company/cooly-code-%DA%A9%D9%88%D9%84%DB%8C-%DA%A9%D8%AF/
پست های کاربردی و مفیدی میزاریم اگر دوست داشتید یه سر بزنید 😁🔥
https://www.linkedin.com/company/cooly-code-%DA%A9%D9%88%D9%84%DB%8C-%DA%A9%D8%AF/
Linkedin
Cooly Code | کولی کد | LinkedIn
Cooly Code | کولی کد | 14 followers on LinkedIn. آموزش برنامه نویسی به زبان ساده
یه سایت براتون آوردم که باهاش میتونید این اشکال خفن رو رو به سادگی ایجاد کنید 🔥🤩
لینک این سایت و ریپازیتوی گیت هابش رو زیر این پست تو چنل براتون میزارم
این اشکال درواقع با border-radius ساخته میشن و خودتون به صورت دستی هم میتونید ایجادش کنید ولی مشکلی که وجود داره اینه که خیلی باید تغییرش بدید تا به شکل دلخواهتون برسید و این سایت کارتون رو خیلی ساده کرده
#️⃣ #website #css #shape
🚀 @coolycode
𝗖𝗢𝗢𝗟𝗬 𝗖𝗢𝗗𝗘 | کولی کد
یه سایت براتون آوردم که باهاش میتونید این اشکال خفن رو رو به سادگی ایجاد کنید 🔥🤩 این اشکال درواقع با border-radius ساخته میشن و خودتون به صورت دستی هم میتونید ایجادش کنید ولی مشکلی که وجود داره اینه که خیلی باید تغییرش بدید تا به شکل دلخواهتون برسید و این…
لینک وبسایت
لینک ریپازیتوری پروژه
https://9elements.github.io/fancy-border-radius/
لینک ریپازیتوری پروژه
https://github.com/9elements/fancy-border-radius
This media is not supported in your browser
VIEW IN TELEGRAM
چجوری سایت سه بعدی بسازیم ... ⁉️🤩
اگر آموزش های بیشتر در مورد سایت های سه بعدی میخواید زیر همین پست براتون میزارم آدرس پیجش رو تو چنل
اگر آموزش های بیشتر در مورد سایت های سه بعدی میخواید زیر همین پست براتون میزارم آدرس پیجش رو تو چنل
#️⃣ #3d_website
💢 𝗖𝗛𝗔𝗡𝗡𝗘𝗟 | 𝗚𝗥𝗢𝗨𝗣
پست آخر شبی ... 😁🔥
امیدوارم ببینید و حسابی و لذت ببرید 🔻
https://www.instagram.com/reel/DAO14ofsLf8/
امیدوارم ببینید و حسابی و لذت ببرید 🔻
https://www.instagram.com/reel/DAO14ofsLf8/
#️⃣ #NEWPost
🚀 @coolycode