امروز می خواهم این کدک را برایتان بگذارم که با استفاده از آن می توانید کاربر را به لینک های داخلی (یعنی لینک هایی که # دارند) با ترنزیشن اسکرول ( scroll transition ) ، یعنی به شکلی شناور ، منتقل کنید.

مقدمه

برای فهمیدن این کدک شما باید با کد های جی کوئری (JQuery) و اچ تی ام ال (HTML) آشنا باشید. از آنجایی که قرار است در کدَک از جی کوئری استفاده کنیم اول از همه ، کتابخانه ی جی کوئری را در صفحه لود می کنیم:

<<<code>>>

<script type="text/javascript" src="http://www.toolstheme.ir/js/jquery.js"></script>

<<</code>>>

می توانید قسمت قرمز رنگ (کتابخانه ی جی کوئری) را از گوگل دریافت کنید. (این لینک از گوگل است) البته کتابخانه ی جی کوئری ای که در سایت ما هم هست به روز است و می توانید از همان استفاده کنید.

برای دیدن مطلب به طور کامل به ادامه ی مطلب بروید.

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

کاربرد این کدَک

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

برای مشاهده ی آموزش به ادامه ی مطلب بروید.

چند روز پیش یکی از کاربران در انجمن درخواست ایجاد کد جعبه ی اطلاعات مطلب را ارسال کرد.

در این مطلب می خواهم کدی به شما ارایه کنم که برای شما جعبه های زیبایی برای اطلاعات مطالب ایجاد می کند. این کدک قابل استفاده در تمام وبلاگ ها و سایت ها می باشد. فقط باید کمی با کد نویسی وب آشنایی داشته باشید تا بتوانید از آن استفاده کنید.

برای این که متوجه بشوید که جعبه ی اطلاعات مطلب دقیقا چیست ، لینک زیر را ببینید:

نمونه ی کد

برای دریافت کد و آموختن طرز استفاده از آن به ادامه ی مطلب بروید.

این کد می تواند خیلی مفید باشد به خاطر این که خیلی از برنامه نویسان php دوست دارند وقتی اطلاعاتی را در فرم php دریافت می کنند ، تا حد ممکن آن اطلاعات دقیق و بدون دروغ و غلط باشد. شما مقدار وارد شده را می توانید با استفاده از عبارات باقاعده بررسی کنید و اگر شکل صحیحی داشت ، اجازه ی ادامه ی کار را به کاربر بدهید. ولی امروز می خواهم در این مطلب به شما کدی را نشان دهم که خیلی ساده می تواند ، یک آدرس اینترنتی را بررسی کند و ببیند که آیا آن صفحه از اینترنت وجود دارد یا یک آدرس دروغین است.

<<<code>>>

function urlexists($url)

   {

      $file_headers = @get_headers($url);

      if($file_headers[0] == 'HTTP/1.1 404 Not Found')

         $exists = false;

      else

         $exists = true;

      return $exists;

   }

<<</code>>>

تابع بالا ، یک آدرس کامل (http:// ...) را می گیرد و اگر آن صفحه موجود باشد (یعنی ارور 404 نداشته باشد) مقدار true را باز می گرداند و در غیر این صورت مقدار false را بر می گرداند.

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

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

اول برای درک بهتر این آموزش صفحه ی زیر که صفحه ی اصلی افزونه ی wow است را ببینید:

صفحه ی اصلی افزونه ی wow

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

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

صفحه ی آموزش انگلیسی

ادامه ی آموزش در ادامه ی مطلب

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

افزونه ی wow

اگر این نمونه را ببینید منظور من را به خوبی می فهمید. خب! شروع می کنیم. اول یک کد html را می نویسیم.

آموزش در ادامه ی مطلب

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

برای دیدن مطلب به طور کامل به ادامه ی مطلب بروید.

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

شما هم امروز در این مطلب قرار است فقط از این کد استفاده کنید و اگر اطلاعات چندانی درباره ی جاوا اسکریپت ندارید ، لازم نیست حتما طرز کار این کد را عمیقا متوجه شوید. در کل این کدَک بسیار کاربردی است و می تواند برای افراد مبدتی یک دریچه برای ورود به دنیای کد های جاوا اسکریپت باشد.

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

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

نکته: ما در این کدَک تغییرات را بر روی تگ body اعمال می کنیم. اگر شما بخواهید ، می توانید این تغییرات را روی هر المنتی از صفحه ایجاد کنید. یعنی تغییر پس زمینه برای تمام قسمت های صفحه قابل استفاده است.

برای این کار ابتدا ما باید با استفاده از Css یک مقدار پیشفرض برای پس زمینه مشخص کنیم.

برای مشاهده ی مطلب به طور کامل به ادامه ی مطلب بروید.

امروزه در اینترنت افراد زیادی به جای تولید مطلب واقعی مطالب دیگران را کپی می کنند! این موضوع تولید کنندگان مطالب را در ادامه ی فعالیتشان در زمینه ی تولید مطلب سست می کند. چرا که می بینند به راحتی می توان با کپی برداری رتبه ی سایت و بازدید آن را بالا برد ؛ پس چه نیازی به تولید مطلب است؟!

اما در این مطلب توضیح ما مربوط به تصورات صاحبان مطالب از کپی برداری ها نیست ؛ بلکه توجه ما روی این موضوع است که این گونه افراد خیلی دوست دارند تا کپی برداری از مطالب سایتشان را توسط افراد دیگر سخت کنند. (به هیچ وجه نمی توان کپی برداری را غیر ممکن کرد. هر چقدر هم شما حرفه ای کار کنید ، باز هم با گذاشتن وقت می توان از مطالب کپی گرفت. تنها راه این است که کپی برداری را سخت کنیم تا کم تر کسی از مطالب کپی برداری کند)

برای افراد حرفه ای تر این موضوع کمی جالب است که چطور می توان با استفاده از css ، امکان انتخاب متن را از بین برد. "از بین بردن" برای جذابیت عنوان نوشته است ، اما چیزی که در واقعیت این کد وجود دارد این است که این کد در ذهن بازدید کننده این تصور را ایجاد می کند که انتخاب متن غیر ممکن است. متوجه نشدید؟! یعنی کاربر متن را انتخاب می کند ، اما نمی داند که دارد انتخاب می کند. پس به احتمال زیاد هم از کپی برداری منصرف می شود.

شاید به نظرتان بی فایده بیاید. اما من ثابت می کنم که این طور نیست. این کد حتی از کد های جاوا اسکریپت هم که کار مشابه را انجام می دهند ، مفید تر است. در کد های جاوا اسکریپت ، اگر بازدید کننده ی کپی برداری جاوا اسکریپت صفحه را با استفاده از افزونه های مرورگر خود غیر فعال کند ، به راحتی می تواند متن شما را کپی کند. اما وقتی وارد سایت شما می شود که با css امکان کپی انتخاب متن از بین رفته است (ظاهرا) ؛ اولین کاری که می کند این است که سعی می کند جاوا اسکریپت صفحه را غیرفعال کند. ولی وقتی این روش هم کارگر نباشد ، به احتمال 99درصد صفحه را ترک می کند. چرا که صفحات زیاد دیگری هم در اینترنت وجود دارند و لازم نیست روی یک صفحه وقت زیادی بگذارد. تنها 1درصد باقی مانده ممکن است به خاطر کنجکاویشان ، به تکاپو ادامه دهند.

برای مشاهده ی کدَک و توضیحات بیشتر به ادامه ی مطلب بروید.
 

این کدَک مربوط است به ایجاد پس زمینه ای با چند رنگ که به صورت متوالی نمایش داده می شوند و حالت چشمک زن به پس زمینه ی وبلاگ یا سایت شما می دهند. شاید به نظر بعضی ها این کدَک کاملا بی استفاده باشد ؛ اما پیشنهاد می کنم تا انتهای مطلب را دنبال کنید تا فایده ی آن را متوجه شوید.

بعضی توضیحات در این مطلب ، مربوط به کاربران سطح متوسط است. ولی در کل افراد مبتدی هم می توانند از این کدَک استفاده کنند.

نکته: این کد ها را می توانید در بخش کد های کاربردی ، کد های اختصاصی ، اسکریپت های اضافی و ... در پنل کاربری وبلاگ خود وارد کنید. همچنین می توانید این کد ها را در بین <head>  و </head> قالب خود قرار دهید. هر راهی بری شما ساده تر است را استفاده کنید.

برای دیدن کدَک و توضیحات مربوط به آن به ادامه ی مطلب بروید.

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

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

شما می توانید در پیغام های ورودی سایت خود به کاربران خوش آمد بگویید. حتی می توانید با نمایش نام آن ها ، به آن ها سلام کنید.

نکته: این کد ها را می توانید در بخش کد های کاربردی ، کد های اختصاصی ، اسکریپت های اضافی و ... در پنل کاربری وبلاگ خود وارد کنید. همچنین می توانید این کد ها را در بین <head>  و </head> قالب خود قرار دهید. هر راهی بری شما ساده تر است را استفاده کنید.

برای مشاهده ی کدَک به ادامه ی مطلب بروید.

کدَک (کد کوچک) یکی از انواع مطالبی است که در این سایت شما قادر به استفاده از آن هستید. این اولی کدَک سایت است. شما به راحتی می توانید با چند تغییر کوچک در قالب خود ، ویژگی های منحصر به فرد کدک ها را ایجاد کنید.

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

توجه کنید که در صورت قرار دادن این کد ها در هر کجای قالب ، تغییرات مورد نظر اعمال خواهد شد. اما برای راحتی کار شما بهتر است آن را در قسمت اسکریپت های اختصاصی ، کد های کاربردی یا کد های اضافی قرار دهید. (در سیستم های وبلاگ نویسی مختلف متفاوت است.)

اما اگر از این روش ها نتوانستید استفاده کنید ، می توانید در کد های قالب خود ، این کد ها را بین <head> و </head> کپی کنید.

برای دیدن کدک ها به ادامه ی مطلب بروید.