فواصل » jquery & java script

طريقه تسليط الضوء علي عباره بأي مشروع

مدهش — Sun, 08 Jan 2012 14:41:37 +0000

في هذا الدرس ، سوف نستخدم جافا سكريبت تمييز قائم على بناء الجملة بسرعة إضافة بناء جملة تسليط الضوء على وظيفة في أي مشروع على شبكة الإنترنت – حتى على صدر صفحتها الأولى HTML بسيطة!

في هذا الدرس سوف نستخدم تقنيه الجافا سكريبت تقوم بإضافته علي بناء الجمله لتسليط الضوء علي أي مشروع علي شبكه الانترنت حتي علي صدر الصفحه الأولي html البسيطه

الخطوه الأولي: قم بتحميل مصدر الكود من هنــــــا

الخطوه الثانيه: قم بسحبه علي المشروع الخاص بك ولا تغير اي شئ داخله الا اذا كنت لا تريد ان تقوم باستخدام بعض ملفات الجافا سكريبت المحدده.

الخطوة 3 — استيراد الملفات الضرورية
ضمن ملف HTML الخاص بك (أو أي صفحة هي المسؤولة عن عرض وجهة نظركم)، واستيراد كل من الملفات وprettify.css prettify.js.

الخطوه الثالثه: قم باستيراد الملفات الضروريه
ضمن ملف HTML الخاص بك وقم باستيراد كل الملفات من prettify.js و prettify.css

[html]

untitled

[/html]

والأن لنقوم بتميز بناء الجمله عن طريق اضافه :

[html] (function() {
var jsSyntaxHighlighting = ‘rocks’;
})();

[/html]

الخطوه الرابعه : قم باستدعاء الداله prettyPrint() :

[html]

untitled



(function() {

   var jsSyntaxHighlighting = ‘rocks’;

})();

[/html]

والأن قم باضافه أنماطك الخاصه علي التصميم:

[html]

untitled

[/html]

عرض العناصر بالتسلسل مع jQuery

مدهش — Sun, 08 Jan 2012 14:20:08 +0000

في هذا الفيديو السريع سوف تتعلم اضافه اسلوب خاص علي صفحه الويب الخاصه بك ، من خلال عرض مجموعة من العناصر بالتتابع. في حين أن هناك العديد من الطرق لإنجاز هذه المهمة ، اليوم، سوف نستعرض أسلوب واحد يستخدم recursive functions.

لمشاهده التنفيذ يرجي الضغط هنــــــــــــــــــــا

[html] // Wrapping, self invoking function prevents globals
(function() {
// Hide the elements initially
var lis = $(‘li’).hide();

// When some anchor tag is clicked. (Being super generic here)
$(‘a’).click(function() {
var i = 0;

// FadeIn each list item over 200 ms, and,
// when finished, recursively call displayImages.
// When eq(i) refers to an element that does not exist,
// jQuery will return an empty object, and not continue
// to fadeIn.
(function displayImages() {
lis.eq(i++).fadeIn(200, displayImages);
})();
});
})();
[/html]

خلق هيئه الشارع التفاعلية مع jQuery

مدهش — Sat, 07 Jan 2012 22:29:35 +0000

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

[html]

Scroll Tutorial – #1



[/html]
يجب قياس حجم وتخزين أبعاد النافذة وارتفاع التمرير الأقصى ، وتغيير حجم الفيديو بحيث يملأ الإطار دائما

هنا كيف يتم تحقيق هذا :
نقوم بتخزين الوثيقة ونافذة في المتغيرات، لذلك لا يتوجب علينا إنشاء كائنات في كل مرة :
[html]
var $doc = $(document);

var $win = $(window);

var $videoContainer = $(‘.street-view’);

var video = $(‘.street-view > video’)[0];
[/html]
تعريف المتغيرات عرض الإطار والارتفاع ، (انظر calculateDimensions ()).
[html]
var windowHeight, windowWidth;

var fullHeight, scrollHeight;
[/html]
نحدد أبعاد الصور المخزنة في الثوابت (وإلا سيكون علينا الانتظار حتى يتم تحميل الصور أو الفيديو قبل أن نتمكن من تغيير حجم الحاويات في الواقع).
[html]
var streetImgWidth = 1024, streetImgHeight = 640;
[/html]
نحن نريد الحفاظ على الوضع الحالي التمرير (بين 0 و 1) في المتغير.
[html]
var currentPosition = 0;
[/html]
في كل مرة يتم تغيير حجم الإطار نحن بحاجة إلى إعادة حساب الأبعاد، تغيير حجم صورة وخلفية / الفيديو واستدعاء معالج التمرير.
[html]
function calculateDimensions() {

windowWidth = $win.width();

windowHeight = $win.height();

fullHeight = $(‘#main’).height();

scrollHeight = fullHeight – windowHeight;

}

function handleResize() {

calculateDimensions();

resizeBackgroundImage();

handleScroll();

}

function resizeBackgroundImage(){

// get image container size

var scale = Math.max( windowHeight/streetImgHeight , windowWidth/streetImgWidth );

var width = scale * streetImgWidth , height = scale * streetImgHeight;

var left = (windowWidth-width)/2, top = (windowHeight-height)/2;

$videoContainer

.width(width).height(height)

.css(‘position’,’fixed’)

.css(‘left’,left+’px’)

.css(‘top’,top+’px’);

}
[/html]
الآن كل ما تبقى هو التأكد من أن كل مرة يتم تمرير الوثيقة، سوف ننتقل إلى موقف وفق داخل الفيديو :
[html]
function handleScroll() {

currentPosition = $win.scrollTop() / scrollHeight;

render( currentPosition );

}

function render( position ) {

if ( video.duration ) {

video.currentTime = position * video.duration;

}

}
[/html]
قم بدعوة “handleResize ()” للتأكد من أن كل شيء في layouted في حجمها الصحيح.
[html]
$win.resize( handleResize );

$win.scroll( handleScroll );
handleResize();
[/html]
وهذا هو التنفيذ اضغط هنـــــــــــــــــــــا

درس بناء خريطه جغرافيه SVG

مدهش — Sat, 07 Jan 2012 22:25:17 +0000

IE9 قد أعلن دعمه للخرائط الجغرافية وهناك طريقه رائعه لخلق خريطه قائمه علي التصورات
وهي POLYMAPS وهذا يكون في جميع المتصفحات التي تعرف SVG.

مزايا استخدام SVG لمثل هذه التصورات هي كثيرة : حجم ملف أصغر، وميزات فائقة التصور، وتجهيز أقل كثافة وأسرع حركة.
وعلاوة على ذلك، فإن هذه الأعمال على أجهزة iPhone و iPads!
هنا سنستخدم Polymaps لرسم المواقع على أساس جدول زمني سوف نتعلم :

1. كيفية الحصول على بيانات الموقع الجغرافي في ملف JSON
2. كيفية جعل خريطة العالم مع خطوط قليلة من التعليمات البرمجية
3. كيفية التفاعل مع SVG باستخدام جافا سكريبت

أولا، ينبغي أن تضع مكتبة Polymaps في ملف HTML قبل أن ندرج النص لدينا.
لذلك دعونا أن تشمل أيضا :

[html]

[/html]

نحن نستخدم العنوان (paulirish.com/2010/the-protocol-relative-url). ونحدد حاويه Polymaps الخاصة به :

[html]

var map = po.map()
.container(document.getElementById(‘map’).appendChild(po.svg(‘svg’)))
.center({lat: 51.48, lon: 0});

[/html]

الآن، يجب تحليل ملف world.json يتضمن كل بلد والمعلومات عن موقعها ككائنات. نضيفها على أنها طبقة على الخريطة :

[html] map.add(po.geoJson()
.url("world.json")
.tile(false)
.zoom(3)
.on("load", manipulatemap);

[/html]

يمكنك الحصول على اثنين من الأحداث مع طبقة الخريطة : التحميل والعرض.
، سيتم استدعاء الدالة manipulatemap مرة يتم تحميل الخريطة. وأريد أيضا للمستخدمين التكبير والتصغير :

[html] map.add(po.compass()
.pan("none"));

[/html]

والأن نقوم بتحديد درجات الألوان

[html] var feature = e.features[i];
var hue = 29;
var sat = Math.round(Math.random()*99+1);
var lit = Math.round(Math.random()*60+30);
feature.element.setAttribute("fill", ‘hsl(‘ + hue + ", " + sat + ‘%, ‘ + lit + ‘%)’);

[/html]

عند هذه النقطة ، دعنا نقوم بإنشاء عناصر SVG التي سيتم استخدامها . سنقوم فقط بتعديل المضمون والإحداثيات .

[html] tweetcontainer = po.svg(‘g’);
location = po.svg(‘circle’);
if(document.implementation.hasFeature("http://www.w3.org/Graphics/SVG/
feature/1.2/#TextFlow", "1.2")) {
tweettext = po.svg("textArea");
tweettext.setAttribute("width", 300);
tweettext.setAttribute("height", 200);
} else {
tweettext = po.svg("text");
}
location.setAttribute(‘r’, 5); // set the radius for the circle
tweetcontainer.setAttribute(‘class’, ‘tweet-container’);
tweetcontainer.appendChild(tweettext);
tweetcontainer.appendChild(location);
svg[0].appendChild(tweetcontainer);

[/html]

نحن لدينا تحليل البيانات في showtwitter (). نحن بحاجة لترجمة بيانات الموقع الجغرافي في twitter.json
ونحدد إحداثيات بكسل على الخريطة SVG. ويتم ذلك بسهولة عن طريق locationPoint () ، التي قدمتها Polymaps.

[html] var mappos = map.locationPoint({lat: tweet.location.x, lon: tweet.location.y});

[/html]

الآن، وضعنا الإحداثيات واستخدامنا دائرة الكائن mappos :

[html] location.setAttribute(‘cx’, mappos.x );
location.setAttribute(‘cy’, mappos.y);
tweettext.setAttribute("x", (+mappos.x + 10));
tweettext.setAttribute("y", (+mappos.y + 5));

[/html]

ثم نحن بحاجة لاستبدالها بـ :

[html] tweettext.firstChild && tweettext.removeChild(tweettext.firstChild); // remove
old tweet if there is one
tweettext.appendChild(document.createTextNode(tweet['tweet'])); //add the
next tweet

[/html]

أخيرا ندعو showtwitter .

[html] if(!!(document.createElementNS && document.createElementNS(‘http://
www.w3.org/2000/svg’, ‘svg’).createSVGRect)) {

} else {

}

[/html]

لمشاهدة استخدمات أكثر لـ SVG اضغط هنــــــــــــــــــــــــــــــــا

مقدمة عن الكوكيز

مدهش — Sat, 07 Jan 2012 22:21:36 +0000

قد سمعت عن الكوكيز، ولكن ما هي بالضبط وماذا يمكن أن نفعل في الواقع معهم؟

في هذه التدوينه ، سوف نركز على أساسيات الكوكيز ، ومعرفة وظائفها في تطبيق الويب المختلفة.
وسوف نتعلم أيضا كيفية استخدامها داخل PHP ومشاريع الجافا سكريبت ، مع إيلاء اهتمام خاص للقضايا الأمنية التي قد تنشأ عند استخدامها. بعد قراءة هذا، سيكون لديكالمهاره المكتسبه اللازمه لتنفيذ مجموعة الكوكيز بأمان في تطبيقات الويب الخاصة بك.

الخطوة 1. فهم الكوكيز

يمكنك بسهولة التفكير في الكوكيز والملفات نصية، والتي يتم حفظها على الكمبيوتر. بناء على طلب من خادم ويب، متصفحك يخلق مثل هذا الملف. بعد حدوث ذلك ، يمكن لخادم الويب القراءة والكتابة من والى هذا الملف.
يمكن فقط الوصول إلى خوادم الويب ملفات تعريف الارتباط التي تم تعيينها إلى المجال الخاصة بهم. يتم تعيين هذا المجال من قبل المتصفح عند طلب ارتباط جديد عن طريق خادم الويب، ويمكن فقط المجال أو مجال فرعي من خادم الويب.
هناك حد اقصى لعدد من ملفات تعريف الارتباط على harddrive للعميل. هذا الرقم يختلف أيضا في المتصفح، ولكن عادة ما تقتصر على حوالي 300 الكوكيز. عندما يتم تجاوز هذا العدد ، يتم حذف الكوكي قديمة قبل إنشاء واحدة جديدة.
الكوكيز لها تاريخ انتهاء الصلاحية. يتم تعيين هذا التاريخ حتى يستطيع المتصفح حذف ملفات تعريف الارتباط القديمة عندما لم تعد هناك حاجة من قبل خادم الويب.

[html] Set-Cookie: Name=content data; expires=Fri, 31-Dec-2010 23:59:59 GMT; path=/; domain=.example.net
[/html]

Set-Cookie: هو السماح للمتصفح معرفة أن الملقم يريد إنشاء ارتباط جديد.
Name:هو اسم ملف تعريف الارتباط. كل معلومة في مجال يجب أن يكون له اسم مختلف.

expires: وهو يمثل تاريخ انتهاء الصلاحيه للكعكه المخزنه علي جهاز الزائر

domain and path: الدومين والمسار

الحطوة الثانيه: كيف تقوم بعمل وقراءة الكعكه

[html] /***Creating a cookie***/
$name = ‘clientname’;
$value = ‘Peter Griffin’;
//time() gives current time in seconds, and we add 60 seconds * 30 = 30 minutes
//so this cookie expires in 30 minutes.
//You may notice that the expire date is in seconds, PHP translates this to
//the correct format internally!
$expireDate = time() + 60 * 30;
$path = ‘/example/’;
$domain = ‘test.envato.com’;
$secure = false; //only transmit the cookie if a HTTPS connection is established
$httponly = true; //make cookie available only for the HTTP protocol (and not for JavaScript)
setcookie( $name, $value, $expireDate, $path, $domain, $secure, $httponly);

…. //all content etc goes here
?>
[/html]

الخطوة 3. ماذا تفعل مع الكوكيز

في الوقت الحاضر، نستخدم الكوكيز لحفظ إعدادات المستخدم مثل حجم الاسم واللغة، والموقع أو الشاشة.
وهذا يمكن تحسين نوعية الخدمة التي ترغب في تقديم للعميل، لأنه يمكنك تحسين الخدمة للعميل ونتذكر هذا التحسين في المستقبل.

تصميم بيئة مميزه مع CSS و JavaScript

مدهش — Sat, 07 Jan 2012 20:58:18 +0000

في البدايه وقبل \اي شئ عليك أن تقوم بزياره هذا الموقع المميز والجذاب والذي أعتقد انه سوف يسلبك عقلك كما فعل معي

Activatedrinks.com

في البدايه القسم الأول من الموقع سوف تلاحظ أن هناك زجاجه هذه الزجاجه يمكن للمستخدم ان يقوم بفتحها ويقوم بتدوير الغطاء كما يحدث بالواقع!

والقسم الثاني يعتمد إعتمادا كبيرا علي الرسومات الكبيره والجريئه في نفس الوقت وعلي الألون الحقيقيه للمنتج نفسه.

الموقع مصنوع من الجافا سكريبت وليس الفلاش لذا لن يتعين علي المستخدم انتظار وقت طويل للتحميل ولكنه سوف يكون سريعا وخفيفا ومريحا للزائر
لأن الفلاش قد انتهي وهو تقنيه رديئه الإستخدام وتاخذ وقتا طويلا بالتحميل

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

جافا سكريبت لعمل تويست
الفلاش للرسوم المتحركه الذي يعرض التقدم

نحقق ذلك عن طريق استخدام CSS لتحديد موقف الحركة :

[html]

#intro-twist-wrapper {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}

[/html]

لكي نرسم مخططا للحركه نحن بحاجه الي تحديد عنصريين اساسيين وهما بدايه ونهايه الحركه. نحن ندعو هذه scrollMin وscrollMax.والفرق بينهم يتيح للزائر أن يقوم بالتدوير للغطاء كما يريد. نحن نسمي هذا scrollDistance.

لتحقيق هذا نطبق الصيغة التالية :

[html]

var scrollDistance = maxScroll – minScroll;
// …
var animationProgress = (currentScroll – minScroll) / scrollDistance;

[/html]

وهذا الكود لتمرير الموقف ككل

[html] currentFrame = totalFrames * animationProgress;
[/html]

الجزء الثاني العمق والمنظر:

ونحن الأن بحاجه إلي إضافة عمق ومظهر للزجاجات والجزيئات لكي يصبح الموقع حيويا ومتدفق ومتنوع بنفس الوقت.

خلق تيار الجسيمات

والأن لنجعل الجزيئات تتحرك وكأنها علي تيار أي نقوم بخلق تيار يحرك الجزيئات الموجوده علي صفحه الويب لكي بيدو الموضوع أكثر حيويه

[html]

for( var i=0; i var y = i * spacing;
var x = radius * Math.sin( y );
$("#my-particle-id").css( "left", windowWidth/2 + x );
$("#my-particle-id").css( "top", y );
}

[/html]

ولتحقيق هذا عليك أن تقوم بتوير محو x قليلا بهذا الكود:

[html]

var delta = 2*Math.PI * y / sectionHeight;
var x = Math.sin( delta );

[/html]

خلق العمق والحركة

وأنه كان لدينا الآن تدفق الجزيئات بمعدل الأداء اللائق ، وحان الوقت لوضع بعض الحياة فيها. بدلا من مجرد السماح للتدفق جزيئات من اليسار إلى اليمين أردنا منهم للالتفاف حول بعضهم البعض والعمل كدوامه من الجزيئات.

لجعل هذا يحدث عليك أن تقوم ببناء هذه الداله المسؤوله عن توير الجزيئات بالشكل الذي رايته:

[html]

var delta = 2*Math.PI * y / sectionHeight;
var x = Math.sin( delta );

var z = Math.cos( delta );

if( z < -0.9 || z > 0.9 ){
particle.addClass("layer3");
} else if( z < -0.4 || z > 0.4 ){
particle.addClass("layer2");
} else {
particle.addClass("layer1");
}

[/html]

[html] .particle {
width: 204px;
height: 192px;
background: transparent url("../img/particles.png") no-repeat 0 0;
}
.particle.layer1 { background-position: -408px 0; z-index: 101; }
.particle.layer2 { background-position: -204px 0; z-index: 102; }
.particle.layer3 { background-position: 0 0; z-index: 103; }
[/html]

والأن أصبح لدينا العديد من الجزيئات التي تلتف حول محو x وحول محور y لتعطي لنا التأثير الذي نتمناه

وهذا التاثير سوف يعطي اختلافا بسيط للأشياء بدل من الحركه العموديه فقط:

[html] والأن وقت تحديد قيم الحركه وأبعاد الحركه
[html] var layerRepulsions = [ 0.3, 0.2, 0.1 ];
for( … ){
var easedWindowMiddle += (easedWindowMiddle – windowMiddle) * 0.3;
var distanceToMiddle = parseFloat( $(particleWrapper).css("top") ) – easedWindowMiddle;
$(particle).css("top", distanceToMiddle * layerRepulsions[layerIndex] );
}

[/html]

والأن تجد ان الجافا سكريبت فعلا يمكنك العمل معها بكل سهوله و باعلي جوده وتحكم

العرض المستمر وتدوير المحتوي باستخدام JS,CSS

مدهش — Sat, 07 Jan 2012 19:44:19 +0000

عندما يجد العميل أنه من الأناقه ان يتم عرض النصوص بطريقة عشوائيه في الواجهه الرئيسيه ويطلب منك لك.فإنك تدرك جيدا ان عرض المحتوي بتلك الطريقه يكون جذابا وأنيق ولذلك لابد من أن تكون ملما بهذه التقنيه البسيطه والخفيفه لكي يصبح محتواك جذابا كما تفضله.

لتحميل السكريبت اضغط هنـــــــــا

لإلقاء نظره علي العض المستمر للمحتوي اضغط هنـــــــــــا

أولا قم بوضع النص هنا علي هذا الشكل

[html]

… if you want to become a better coder you need to eat your vegetables?

… it takes more time to code a web page then to make a pizza?

… you should validate your code?

… jQuery is your friend? For real!

… no matter what some people claim, you can’t learn CSS in 3 hours?

[/html]

وقم بإضافة هذا التنسيق

[html] #tips, #tips li{
margin:0;
padding:0;
list-style:none;
}
#tips{
width:250px;
font-size:16px;
line-height:120%;
}
#tips li{
padding:20px;
background:#e1e1e1;
display:none; /* hide the items at first only */
}
[/html]

الفقرات سوف تكون مقسمه وسوف تحفظ في مكان ما علي السيرفير وسوف يتم عرضها بالترتيب عليك ان تقوم بإضافه كود الجافا كويري هذا

[html]
[/html]

وطبعا قم بإضافة هذا الكود الذي يقوم بوظيفة العرض بطريقة عشوائية ودوريه :

[html]
[/html]

اليك الكود كاملا:

[html]
[/html]

وهذا هو التنفيذ عليك بالضغط هنـــــــــا

والأن بعد قراءة هذه المقاله جيدا سوف تستطيع أن تعرض محتواك بالشكل الأنيق المناسب

احداث مؤشر الفأرة Mouse Events في جافا سكربت الدرس الـ 20

مدهش — Fri, 06 Jan 2012 23:22:13 +0000

بسم الله الرحمن الرحيممشاهدة الدرس الـ 21 من دوره Java فيديو احداث مؤشر الفأرة Mouse Events

تحميل الدرس الـ 21 من دوره Java فيديو احداث مؤشر الفأرة Mouse Events

شرح الدرس الـ 21 من دوره Java فيديو احداث مؤشر الفأرة Mouse Events

ملحوظة هامة : الدرس منقول من مدرسة كليبرز

احداث النماذج onreset و onsubmit و onfocus في java script الدرس الـ 19

مدهش — Fri, 06 Jan 2012 23:19:16 +0000

بسم الله الرحمن الرحيممشاهدة الدرس الـ 19 من دوره Java فيديو احداث النماذج onreset و onsubmit و onfocus

تحميل الدرس الـ 19 من دوره Java فيديو احداث النماذج onreset و onsubmit و onfocus

شرح الدرس الـ 19 من دوره Java فيديو احداث النماذج onreset و onsubmit و onfocus

ملحوظة هامة : الدرس منقول من مدرسه كليبرز

احداث الجافا سكربت مع body الدرس الـ 18

مدهش — Fri, 06 Jan 2012 23:17:49 +0000

بسم الله الرحمن الرحيممشاهدة الدرس الـ 18 من دوره Java فيديو احداث الجافا سكربت مع body

تحميل الدرس الـ 18 من دوره Java فيديو احداث الجافا سكربت مع body

شرح الدرس الـ 18 من دوره Java فيديو احداث الجافا سكربت مع body

ملحوظة هامة : الدرس منقول من مدرسه كليبرز