السلام عليكم،
هل هناك كلاس hint بالـ CSS فقط لاستعمالها على حقول النماذج ؟
مثلاً :
شكراً.كود:<textarea></textarea><span class="hint">Your message here !</span>
| |
السلام عليكم،
هل هناك كلاس hint بالـ CSS فقط لاستعمالها على حقول النماذج ؟
مثلاً :
شكراً.كود:<textarea></textarea><span class="hint">Your message here !</span>
لا يوجد اي كلاس في CSS بهذا الاسم، ولا يوجد أصلا كلاسات جاهزة في CSS
وضح ماذا تريد بالضبط
__________________
cssguru
لم أقصد كلاس جاهزة.
وانما لأحد يفيدنا بها ان كانت على النت او احد المواقع.
المهم ما اريده هو كيف يتم اظهار نافذة جانبية عندما نؤشر بالفارة داخل حقل input لإعطاء تفسير أو مساعدة المستعمل لما يجب عليه ان يدخله من معلومات في حقل input ؟
شكراً.
هل هذا ما تريده ؟
كود HTML:<html dir="rtl"> <head> <script type="text/javascript"> var show=function(name){ if(document.getElementById(name).style.display == "none"){ document.getElementById(name).style.display=""; }else{ document.getElementById(name).style.display="none"; }; } </script> <style type="text/css")> .hint{ padding:25px; border: 1px solid #E8A722; color:#FF6100; background: #FFE294; } </style> </head> <body> <div id="mydiv"> <form> <p> <label>الاسم</label><br /> <input type="text" name="name" onFocus="show('name');" onBlur="show('name');"> <span style="display:none" id="name" class="hint">فضلا اكتب اسمك</span> </p> <p> <label>الاميل</label><br /> <input type="text" name="email" onFocus="show('email');" onBlur="show('email');"> <span style="display:none" id="email" class="hint">فضلا اكتب بريد اليكتروني صحيح</span> </p> </form> </div> </body> </html>
اهلا اخي البشيري،
نعم الكود يأتي على هاته الشاكلة (رغم اني أبحث عن واحد بدون جافا سكريبت)
وقد جربته على متصفح IE6 ولكن لم يظهر أي شيء
شكراً.كود:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="XHTML namespace"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> var show=function(name){ if(document.getElementById(name).style.display == "none"){ document.getElementById(name).style.display=""; }else{ document.getElementById(name).style.display="none"; }; } </script> <style type="text/css")> #mydiv .hint{ padding:25px; border: 1px solid #E8A722; color:#FF6100; background: #FFE294; } </style> </head> <body> <div id="mydiv"> <form> <p> <label>الاسم</label> <br /> <input type="text" name="name" onFocus="show('name');" onBlur="show('name');"> <span style="display:none" id="name" class="hint">فضلا اكتب اسمك</span> </p> <p> <label>الاميل</label> <br /> <input type="text" name="email" onFocus="show('email');" onBlur="show('email');"> <span style="display:none" id="email" class="hint">فضلا اكتب بريد اليكتروني صحيح</span> </p> </form> </div> </body> </html>
وضح المطلوب
هل بمجرد وضع الفأرة في حقل textarea تريد ان تظهر رسالة توضيحية ؟
__________________
cssguru
نعم هو كذلك
اذن تستطيع الحصول على ما تريد ب jquery
__________________
cssguru
اسمع به ولا اعرف عنه شيئاً ....
هل من مساعدة في هذا المجال لحل مشكلتي ؟
شكراً.
مع اني لم افهم طلبك جيدا ومع ان الحلول ب jquery عديدة
ارفق مثالا لشيئ رايته في موقع ما
__________________
cssguru
هناك العديد من الأمثلة ولكن بما انها "ممزوجة" بالـ CSS والـ Javascript وانا لم افهم جيدا الجافا ارتأيت البحث عن حل بالـ CSS الخالص.
وأنت الآن تقترح علي التوجه نحو الـ JQuery لحل المشكلة
نحو هذا المثال.
التعديل الأخير تم بواسطة apitos ; 21-01-2009 الساعة 03:56 PM
بعد اذن الأخ cssguru
هذه محاولة بسيطة باستخدام JQuery ومجرب في IE6 و IE7 و Opera و Safari و Mozilla ...
كود:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("input").focus(function () { $(this).next("span").addClass('tooltips'); }); $("input").blur(function () { $(this).next("span").removeClass('tooltips') }); }); </script> <style> span {display:none;} .tooltips{ display:inline; background-color:gray; } </style> </head> <body> <p>User Name<br><input type="text" /> <span>Enter User Name</span></p> <p>Password<br><input type="password" /> <span>Enter Password</span></p> </body> </html>
أخي soma.
شكرا على المثال.
ولكن اردت البحث عن كلاس tooltips في ملف jquery-1.3.min.js لم أجدها !!!!
كيف ذلك ؟
tooltips هو عبارة عن CSS Class لتنسيق عبارة الـ Span موجود داخل الوسم Style .
آه نعم .. عذرا لم أره.
ولكن هناك مشكلة :
فحتى الأزرار و checkbox و radio button سوف يحدث معها نفس الحدث لأنها كلها input !!!
ولن يحدث هذا الأمر في textarea.
فما الحل ؟
شكراً.
ضوابط المشاركة
رد مع اقتباس
المشاركة الأصلية كتبت بواسطة cssguru 
