طريقة الإستخدام :

• قم بتحميل التطبيق من هذه الصفحة
• اضف الكود التالي في ترويسه صفحة Html الخاصه بك :

  	<link rel="stylesheet" href="YourPath/animated-menu.css"/>
   
  <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.js" type="text/javascript"></script>
  <script src="YourPath/js/jquery.easing.1.3.js" type="text/javascript"></script>
  <script src="YourPath/animated-menu.js" type="text/javascript"></script>

  لا تنسى تغيير مسار الملفات لما يناسب موقعك .. في الكود أعلاه يتم إستدعاء مكتبة jQuery من على جوجل كود .. إذا أردت يمكنك حفظة ورفعه على موقعك و تغيير المسار الخاص به

• في جسم الصفحة Body .. أضف القائمة الخاصه بك ..

  	<ul>
  	<li><a href="#">الرئيسية</a>
  	<li><a href="#">عني</a></li>
  	<li><a href="#">عن المدونة</a></li>
  	<li><a href="#">راسلني</a></li>
  </ul>

• يمكنك التحكم في إرتفاع القائمة عند مرور الماوس بتغيير قيمة height في الدالة mouseover و تغيير إرتفاع القائمة بعد إبعاد الماوس بتغيير قيمة height في الدالة mouseout و التحكم في سرعه الإنزلاق عند مرور أو إبعاد الماوس بتغيير قيمة duration في نفس الدالتين في الكود أعلاه الموجود في ملف animated-menu

حل التعارض :
إذا حدث تعارض بين هذا التطبيق و أي تطبيق أخر يستخدم مكتبة أخرى غير jQuery ..  فراجع هذه التدوينة أو قم بتحرير ملف animated-menu.js و إستبدل محتوياته بالتالي :

var $j = jQuery.noConflict();
$j(document).ready(function(){
 
	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
 
	//Remove outline from links
	$j("a").click(function(){
		$j(this).blur();
	});
 
	//When mouse rolls over
	$j("li").mouseover(function(){
		$j(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
	//When mouse is removed
	$j("li").mouseout(function(){
		$j(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
});

التخصيص :
عند إستخدامك لهذا التطبيق فإن كل Li في الصفحة سيُطبق عليها التأثير وهذا ليس عملياً وغير مرغوب فيه .. فالمطلوب هو تطبيق التأثير على قائمة بحد ذاتها .. إذا أردت ذلك يُمكنك تحرير ملف animated-menu و إستبدل محتوياته بالتالي ..

var $j = jQuery.noConflict();
$j(document).ready(function(){
 
	//By Mo3aser.com
 		m=document.getElementById('buttons');
		sa=m.getElementsByTagName('li');
 
	//Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/
 
	//Remove outline from links
	$j("a").click(function(){
		$j(this).blur();
	});
 
	//When mouse rolls over
	$j(sa).mouseover(function(){
		$j(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
	//When mouse is removed
	$j(sa).mouseout(function(){
		$j(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
	});
 
});

الأن سيتم التطبيق على كل Li الموجوده داخل العنصر المعرف بـ ID خاص وهو buttons قد يكون هذا العنصر الحاوي Div او Ul .. كالتالي :

<ul id="buttons">
	<li><a href="#">الرئيسية</a>
	<li><a href="#">عني</a></li>
	<li><a href="#">عن المدونة</a></li>
	<li><a href="#">راسلني</a></li>
</ul>

هذا كل شئ .. لا تنسى أن تشاركنا برابط موقعك إذا أستخدمت فيه التطبيق ^_^

لنفرض أن لدينا هذا الكود و عند إستخدامه يحدث التعارض إما بتوقف عمل هذا الكود او توقف تطبيقات اخرى في الصفحة عن العمل :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

$(document).ready(function(){
 
	m=document.getElementById('buttons');
	sa=m.getElementsByTagName('a');
 
	$("a").click(function(){
		$(this).blur();
	});
 
	$(sa).mouseover(function(){
		$(this).stop().animate({height:'50px'},{queue:false, duration:1200, easing: 'easeOutBounce'})
	});
 
	$(sa).mouseout(function(){
		$(this).stop().animate({height:'20px'},{queue:false, duration:900, easing: 'easeOutBounce'})
	});
 
});

سنحاول الأن حل هذا التعارض باستخدام jQuery.noConflict وهناك طريقتان لإستخدامها ..
الطريقة الأولى : سنقوم أولا بإستدعاء الدالة بكتابتها بالشكل التالي jQuery.noConflict(); بعد ذلك في الدوال سنقوم بإستبدال $ بـ jQuery مع وضع $ داخل قوسي function .. هذا سيتيح لنا إستخدام $ داخل الدالة بدون مشاكل … أتوقع أنك لم تفهم شئ …. حسناً شاهد الكود التالي و لاحظ التغيير في السطرين الأول و الثاني

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

jQuery.noConflict();
jQuery(document).ready(function($){
 
	m=document.getElementById('buttons');
	sa=m.getElementsByTagName('a');
 
	$("a").click(function(){
		$(this).blur();
	});
 
	$(sa).mouseover(function(){
		$(this).stop().animate({height:'50px'},{queue:false, duration:1200, easing: 'easeOutBounce'})
	});
 
	$(sa).mouseout(function(){
		$(this).stop().animate({height:'20px'},{queue:false, duration:900, easing: 'easeOutBounce'})
	});
 
});

الطريقة الثانية : سنقوم بإسناد jQuery.noConflict إلى متغير معين وليكن $j ثم نستخدم $j بدلاً من $ في التطبيق .. شاهد المثال ولاحظ السطر الأول وكيف تم إستبدال $ في باقي الكود بـ $j

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var $j = jQuery.noConflict();
$j(document).ready(function(){
	m=document.getElementById('buttons');
	sa=m.getElementsByTagName('a');
 
	$j("a").click(function(){
		$j(this).blur();
	});
 
	$j(sa).mouseover(function(){
		$j(this).stop().animate({height:'50px'},{queue:false, duration:1200, easing: 'easeOutBounce'})
	});
 
	$j(sa).mouseout(function(){
		$j(this).stop().animate({height:'20px'},{queue:false, duration:900, easing: 'easeOutBounce'})
	});
 
});

هناك طريقة أخرى لا تعتمد على jQuery.noConflict عن طريق إستبدال $ بـ jQuery ولكنها تتطلب إستدعاء مكتبة jQuery قبل المكتبات الأخرى كما أنها لا تعمل بشكل سليم في كثير من الأحيان ….. ( على الأقل من واقع تجربتي ^_^ )

راجع ايضاً .. Using jQuery with Other Libraries

فكرة و تطبيق لصنع ساعة بإستخدام CSS و Javascript أعجبتني الفكرة و طريقة التنفيذ فاردت مشاركتكم بها …

لمشاهدة مثال تجريبي

للاطلاع على الفكرة و طريقة الاستخدام

CSS Browser Selector
تطبيق صغير الحجم لا يتعدي الكيلو بايت مبني باستخدام جافا سكريبت .. التطبيق يتيح تخصيص اكواد CSS لتظهر بشكل مختلف على مستعرض دون الأخر أو على نظام تشغيل دون الأخر .

أسماء المستعرضات المدعومه وكود استخدام كل منها :

• ie - Internet Explorer (جميع الاصدارات )
• ie8 - Internet Explorer 8.x
• ie7 - Internet Explorer 7.x
• ie6 - Internet Explorer 6.x
• ie5 - Internet Explorer 5.x
• gecko - Mozilla, Firefox (جميع الاصدارات), Camino
• ff2 - Firefox 2
• ff3 - Firefox 3
• opera - Opera (جميع الاصدارات)
• opera8 - Opera 8.x
• opera9 - Opera 9.x
• konqueror - Konqueror
• webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
• chrome - Google Chrome

اسماء نظم التشغيل وكود استخدام كل منها :

• win - Microsoft Windows
• linux - Linux
• mac - Mac OS

طريقة الاستخدام :
أولا : قم بتضمين ملف الجافا سكريبت في ترويسة الصفحة عن طريق الكود التالي :

<script src="css_browser_selector.js" type="text/javascript"></script>

ثانيا : قم بكتابة أكواد CSS الخاصه مسبوقة بكود المستعرض ( و نظام التشغيل ان اردت ) مثال :

.ie .example {
background-color: yellow
}
.ie7 .example {
background-color: orange
}
.gecko .example {
background-color: gray
}
.win.gecko .example {
background-color: red
}
.linux.gecko .example {
background-color: pink
}
.opera .example {
background-color: green
}
.konqueror .example {
background-color: blue
}
.webkit .example {
background-color: black
}
.example {
width: 100px;
height: 100px;
}

لمزيد من المعلومات
لتحميل التطبيق

انتشرت في الفترة الاخيرة عدد من تطبيقات الجافا سكريبت التي تسهل اضافة تاثير الانعكاس على الصور بكل سهولة دون الحاجه الى برامج تحرير الصور … هذه التطبيقات كثيرة و متعددة ولكني ساقتصر في هذه التدوينة على تطبيق Reflection.js .

يتيح Reflection.js تطبيق انعكاس على الصور مع امكانية تغيير مقدار ارتفاع الصورة المنعكسة و مدى شفافيتها كذلك فهو متوافق مع اكثر المتصفحات انتشاراً :

توافق تطبيق Reflection.js مع المستعرضات :

• Internet Explorer 5.5+
• Mozilla Firefox 1.5+
• Opera 9+
• Safari 2+

طريقة الاستخدام :

1. قم بتحميل التطبيق .
2. أضف السطر التالي في ترويسة الصفحة التي تريد استخدام التطبيق فيها :

   <script type="text/javascript" src="your-path/reflection.js"></script>

   حيث your-path هو المسار الموجود عليه الملف reflection.js

3. لتطبيق الانعكاس على الصورة قم باضافة class=”reflect” الى وسم الصورة ليكون بالشكل التالي :

   <img src="reflected.gif" class="reflect" alt="example image" />

التحكم في ارتفاع الصور المنعكسة و شفافيتها :

للتحكم في ارتفاع الصورة المنعكسة اضف rheight متبوعة بالارتفاع المطلوب مثلا rheight66 الى class المحتوية على reflect لتكون بالشكل التالي :

class="reflect rheight66"

للتحكم في مدى شفافية الصورة المنعكسة اضف ropacity متبوعة بالقيمه المطلوبه مثلا ropacity66 الى class المحتوية على reflect لتكون بالشكل التالي :

class="reflect ropacity66"

صفحة التطبيق

Smooth Scroll هو تطبيق Javascript مجاني تم بنائه بواسطه Dezinerfolio يتيح لك هذا التطبيق صغير الحجم 1024 bytes التنقل بين اجزاء الصفحة بطريقة مرنه .
لتجربه تاثيره قم بالنزول لنهاية هذه الصفحة و اضغط على ( الى الاعلى ) او قم بزيارة هذه الصفحة لتجربتة التطبيق .

طريقة الاستخدام :

قم بتضمين ملف javascript عن طريق اضافة هذا السطر في ترويسة الصفحة :

<script type="text/javascript" src="yourpath/smooth.pack.js"></script>

ضع هذا السطر في بداية المنطقة التي تريد الانتقال اليها .

<a name="top"></a>

رابط الانتقال الى المنطقة المطلوبه :

<a href="#top">إلى الأعلى</a>

لتحميل التطبيق

نعود لموضوع التدوينه …

Accordion Scripts او ما تعرف بقوائم الانزلاق هي تطبيقات جافا سكريبت تتيح انشاء قوائم افقية او عمودية وعند المرور او الضغط عليها تتمدد ليظهر محتوى اسفل منها .

لنستعرض بعض هذه التطبيقات …

تطبيق صغير الحجم (1,149  bytes ) ، متوافق مع اشهر متصفحات الويب ، يمكن استخدامه بطريقة الالسنه

لتجربة التطبيق | لتحميل التطبيق

لتجربة التطبيق | لتحميل التطبيق

لتجربة التطبيق | لتحميل التطبيق

قائمة انزلاق مع اتاحة امكانية السحب و الادراج لاجزاء القائمة .

قائمة انزلاق مع تأثيرات عند مرور الفائرة على عناصر القائمة

لتجربة التطبيق | لتحميل التطبيق

dfFlexiGrid تم بناء هذا التطبيق المجاني باستخدام javascript بواسطة Dezinerfolio
يُمكنك هذا التطبيق من منح اجزاء صفحتك بعض الحيويه فمثلا يمكنك من خلاله وضع ازار لاخفاء القائمة اليمنى أو اليسرى وكذلك لجعل الموقع يتمدد بقياس الشاشه او يعرض موقعك في عرض التصغير ( 800 px مثلا ) بالاضافة لامكانية تكبير و تصغير الخط المستخدم في الصفحة . و كل هذا يتم بشكل مرن و انسيابي .

هذا التطبيق متوافق مع أغلب المتصفحات :

• Internet Explorer 6, 7
• Firefox 1.5 +
• Opera 9.1 +
• Netscape 8.1 +
• Safari 3

لتجربه هذا التطبيق

للتحميل والاطلاع على كيفية الاستخدام