مدونة سلام

تخبيصات javascript

salam — Fri, 30 May 2008 00:26:51 +0000

جرب ثم اقرأ :

رسالة نتيجة صحيحة

رسالة فشل

أثناء عملي في أحد مشاريع الجامعة ، يخطر ببالي أفكار جديدة دائما ، جديدة بالنسبة لي ، ففي كل مرة أكتب صفحة أحاول أن أصنع شيئا جديدا ، قد يكون غير جديد بالنسبة للآخرين ، لكن جديد بالنسبة لي.
مثلا ، ربما لاحظت إن كنت تستعمل FireFox أني أضع شريطا بالأسفل أشكرك لذلك ، كنت و في أثناء عملي مع المشروع و في قسم منه أستخدم الأجاكس بكثرة ، أثناء الطلب أحتاج لصورة متحركة مثلا كالتي تظهر لك عند إضافة تعليق في مدونتي ، لكن أردت أن أفعل شيئا آخر ، قررت أن أضع شريط قصير في أسفل النافذة يحمل عبارة loading... مثلا يظهر أثناء طلب الأجاكس و حتى لحظة الإعادة ( مشابة للذي يظهر في Gmail عند الدخول للبريد.

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

هذا كود javascript الذي كتبته :

t = 400;
function msg(message,type,period){
    t = period;
    id = type == 'ok' ? 'ok' : 'error';
    document.getElementById(id).style.display = 'block';
    document.getElementById(id).innerHTML = message;
    window.setTimeout("stay(id)",1);
}
function stay(id){
    t = t-1;
    if(t>0){
        window.setTimeout("stay(id)",1);
    }else{
        document.getElementById(id).style.display = 'none';
    }
}

و هنا CSS

#ok{
border: 1px solid #95E89F;
color: #857D74;
font-size: 12px;
padding: 15px;
text-align: center;
display: none;
position: absolute;
top : 200px;
left : 25%;
right: 25%;
width: 50%;
background-color: #DAF2D9;
}
#error{
border: 1px solid #FF0000;
color: #857D74;
font-size: 12px;
padding: 15px;
text-align: center;
display: none;
position: absolute;
top : 200px;
left : 25%;
right: 25%;
width: 50%;
background-color: #FFDFDF;
}

طبعا أنا مبتدئ في الـ javascript لذلك قد تجد الكود ضعيف أو أنه يمكن فعل ذلك بطرق أفضل ، إن أحببت أن تطرح رأيك سأرحب بذلك.

Tag Cloud

salam — Thu, 20 Mar 2008 00:00:00 +0000

لا أعرف كيف أترجم هذه الجملة لكن ما هي؟
ربما دخلت إلى هذه الصفحة أو هذه.
يتم عرض التصنيفات بطريقة بحيث يكون حجم كلمة التصنيف أكبر كلما كانت المحتويات التي تنتمي إليها أكبر.
طبقت هذا في المدونة هنا انظر على اليمين قائمة الفئات، كيف يتم ذلك؟
بصراحة لا أعلم تماما الطريقة المتبعة في فلكر أو del.icio.us أو المواقع الأخرى لكن أعلم الطريقة التي اتبعتها أنا.

قبل أن تكمل خمن كيف يمكن أن يتم ذلك ؟

الطريقة التي اتبعتها تقوم على الآتي :
كل تصنيف (فئة) يحوي عدد من المواضيع ، نحتاج لآلية تعطينا قيمة كبيرة [ضمن مجال مقبول كحجم خط] للفئة التي لديها مواضيع كبيرة و تعطينا قيمة صغيرة للفئة التي تحوي عدد مواضيع قليل.
نحتاج لحد وسط أي قياسا إليه نزيد أو ننقص.

أنا أقوم بالتالي:
أقوم بإيجاد مجموع المواضيع و مجموع الفئات ثم أحسب كم يجب أن تمتلك الفئة من مواضيع فيما لو وزعنا المواضيع على الفئات بالتساوي ( أي المعدل ).
و الآن بالنسبة لكل فئة أوجد نسبة عدد المواضيع ضمنها إلى عدد المواضيع الذي يجب أن يكون فيها و القيمة الناتجة تمثل حجم الخط المستخدم عند كتابة اسم الفئة باستخدام وحدة القياس em نظرا لكون النتيجة عدد يحوي فاصلة (.).

يمكن أن نضع شرط كحد أدنى للحجم و آخر كحد أقى للحجم، مثلا قدي ينتج لدينا أن حجم الخط الخاص بفئة ما هو 0.1em و هو جدا صغير فيمكن أن نضع شرط في حال الحجم أقل من 0.5em مثلا أن نعتبره 0.5em

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

روابط مفيدة :

Wikipedia Tag cloud
TagCrowd
Tag Clouds Gallery: Examples And Good Practices
Tag Cloud Builder
Marking Up a Tag Cloud
Tag Cloud Generator

إطار مظلل بلا صور

salam — Fri, 22 Feb 2008 00:00:00 +0000

من خلال مشاهداتي لأساليب التصميم المختلفة المتبعة لإنشاء إطار حول صندوق أو صورة لاحظت أن يتم استخدام طريقتين فقط.

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

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

لا أعلم إن كنت حتى الآن عرفت عن أي شيء أتكلم ، انظر هذه الصورة و ستعرف عما أتكلم.

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

الطريقة التي خطرت لي هي كالتالي :
div ضمن div ضمن div ضمن ... عدد معين منهم و كل واحدة تملك إطار Border لونه أقل من الآخر و بعرض 3 بكسل مثلا ، ستشكل بمجموعها إطار يكافئ الحالات السابقة إلا أنه بدون استخدام صور و ملائم في أي مكان.
إليكم الكود :

CSS

.pict{
width: 100px;
height: 100px;
padding: 0;
background-color: #FFFFFF;
}
.pict div{
border: 3px solid #FEFEFE;
padding: 0;
}
.pict div div{
border: 3px solid #FCFCFC;
padding: 0;
}
.pict div div div{
border: 3px solid #F9F9F9;
padding: 0;
}
.pict div div div div{
border: 3px solid #F5F5F5;
padding: 0px;
}
.pict div div div div div{
border: 3px solid #F0F0F0;
padding: 5px;
}
.pict div div div div div *{
border:0;
padding: 1px;
}

مثال :

مرحبا ، هذه تجربة لصندوق بطول 125 و عرض 125 !

اضغط هنا لتحصل على ملف مضغوط يحوي كود css مع صفحة html تستخدمه.