اجرای عملیات بعد از نگه داشتن چند ثانیه ای موس با Jquery

Evenet هایی که بصورت پیش فرض در Jquery وجود دارند  عملیات موس نگه داشتن روی المانی  بعد از مدتی مشخص را پشتیبانی نمی کنند ، به این معنی که یا موس روی المانی هست یا نیست یا بر روی آن کلیک شده است ، اما با استفاده از پلاگینی که امروز قصد دارم معرفی کنم ، می توان براحتی کنترل کرد که کاربر بعد از مدتی مشخص که موس را روی المانی خاص نگه داشت عملیاتی انجام شود . همچنین بعد از اینکه موس را از آنجا خارج کرد عملیاتی انجام شود و در نهایت وقتی بعد از اجرای عملیات ایستادن موس ، حرکت دوباره موس را داشته باشیم ، عملیاتی انجام شود .

دمو      دانلود    سایت سازنده

این پلاگین با ورزن های قدیمی Jquery مثل 1.3.2 هم کار می کند .
(بیشتر…)

معرفی چند کتابخانه برای انیمشن سازی تحت وب

کتابخانه های جاواسکریپت , Jquery و CSS3 در بین طراحان وب ، جایگاه ویژه ای پیدا کرده اند ، چون براحتی می توان با استفاده از دستوالعملهای موجود در این سایتها و استفاده از کدهای کم حجم آماده انیمیشنهای بسیار پیچیده در صفحه ی وب طراحی و استفاده کرد ، در این نشته قصد داریم چند نمونه از این کتابخانه ها یا پلاگینها را معرفی کنیم ، با رفتن به سایتهای سازنده آن ها می توانید نمونه های زیادی از انیمشنهای جالب و کاربردی را مشاهده کنید .

1- jQuery Transit

در این پلاگین با استفاده از Jquery و CSS3 انیمشنهای پرکاربردی مثل rotate, skew, scale , … را می توان براحتی ساخت . حجم این پلاگین تنها 14kb می باشد .

(بیشتر…)

توضیحات قسمتهای جدید سایت به کاربران با tooltip

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

Joyride اسم پلاگینی هست که خیلی ساده ایجاد Tooltip های پشت سر هم می کنه و Scroll صفحه را هم همراه با نشان دادن  tooltip جابجا می کنه ، برای استفاده ابتدا کل پیکیج را از اینجا دانلود کنید و مطابق زیر فایلهای کتابخانه ای را در هدر صفحه اضافه نمایید تا لود کند .

(بیشتر…)

پشت زمینه ی pattern منعطف با ابعاد و بزرگنمایی مرورگر با استفاده از html5

استفاده از عکس به عنوان پشت زمینه یکی از روشهای معمول است ، اگر بخواهیم الگویی یا Pattern ای به عنوان background مثلا به صورت زیر استفاده کنیم :

pattern_html5

می توانیم با استفاده از تکرار عکس این کار را انجام دهیم ، همچنین با استفاده از Html5 و JS بصورت زنده و بدون استفاده از عکس هم می توانیم این کار را انجام دهیم . این کار یک مزیت دارد و آنهم اینکه می توانیم بصورت زنده طرح و رنگ و زاویه ی pattern را تغییر دهیم !

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

 

 

(بیشتر…)

پویایی سایت در ابعاد مختلف نمایشگر

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

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

(بیشتر…)

ایجاد افکت سایه box_shadow خاص با css3

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

مزیتی که در استفاده از CSS3 وجود دارد سادگی اجرا و انعطاف پذیری با هر سایز باکس می باشد ، در صورتی که تعداد زیادی باکس با ابعاد عرضی مختلف در صفحه تان دارید استفاده از تصاویر کار شما را به شدت سخت می کند ، البته این به نوع سایه و تقارن عرضی هم بستگی دارد اما سایه ای که در اینجا با CSS3 اجرا می کنیم اگر بخواهیم با تصویر اجرایش کنیم باید یک تکه درست بشود و از تکرار عرضی Background repeat-x نمی شود استفاده کرد و مجبور خواهید شد که بررای هر عرضی از باکس یک تصویر و کلاس جداگانه بنویسید ، این یعنی افزایش لود سایت ، افزایش و پیچیدگی CSS نویسی و در آخر محدودست شما در داینامیک کردن قالبی که درحال نوشتن آن هستید . در صورتی که با استفاده از CSS3 می توانید فقط با تعریف یک کلاس و نسبت دادن هر باکسی با هر عرضی به آن ، به سادگی به هدف خود برسید.

در این نوشته استایل استفاده شده برای سایه زنی Drop-Shadow را می توانید ببینید :

دموی زنده    دانلود فایل

(بیشتر…)