كلاس hints بالـ CSS فقط ؟

apitos · 18-01-2009, 09:16 PM

السلام عليكم،

هل هناك كلاس hint بالـ CSS فقط لاستعمالها على حقول النماذج ؟

مثلاً :

كود:

 
<textarea></textarea><span class="hint">Your message here !</span>

شكراً.

cssguru · 19-01-2009, 05:56 PM

لا يوجد اي كلاس في CSS بهذا الاسم، ولا يوجد أصلا كلاسات جاهزة في CSS
وضح ماذا تريد بالضبط

apitos · 19-01-2009, 10:30 PM

لم أقصد كلاس جاهزة.

وانما لأحد يفيدنا بها ان كانت على النت او احد المواقع.

المهم ما اريده هو كيف يتم اظهار نافذة جانبية عندما نؤشر بالفارة داخل حقل input لإعطاء تفسير أو مساعدة المستعمل لما يجب عليه ان يدخله من معلومات في حقل input ؟

شكراً.

عبد الواحد البشيري · 19-01-2009, 11:25 PM

هل هذا ما تريده ؟

كود 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>

apitos · 20-01-2009, 02:17 AM

اهلا اخي البشيري،

نعم الكود يأتي على هاته الشاكلة (رغم اني أبحث عن واحد بدون جافا سكريبت

)

وقد جربته على متصفح 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>

شكراً.

cssguru · 20-01-2009, 02:58 PM

وضح المطلوب
هل بمجرد وضع الفأرة في حقل textarea تريد ان تظهر رسالة توضيحية ؟

apitos · 20-01-2009, 03:12 PM

نعم هو كذلك

cssguru · 20-01-2009, 05:01 PM

اذن تستطيع الحصول على ما تريد ب jquery

apitos · 21-01-2009, 12:32 AM

إقتباس:

المشاركة الأصلية بواسطة cssguru

اذن تستطيع الحصول على ما تريد ب jquery

اسمع به ولا اعرف عنه شيئاً ....

هل من مساعدة في هذا المجال لحل مشكلتي ؟

شكراً.

cssguru · 21-01-2009, 02:41 PM

مع اني لم افهم طلبك جيدا ومع ان الحلول ب jquery عديدة
ارفق مثالا لشيئ رايته في موقع ما

apitos · 02:56 PM

هناك العديد من الأمثلة ولكن بما انها "ممزوجة" بالـ CSS والـ Javascript وانا لم افهم جيدا الجافا ارتأيت البحث عن حل بالـ CSS الخالص.

وأنت الآن تقترح علي التوجه نحو الـ JQuery لحل المشكلة

نحو هذا المثال.

soma · 21-01-2009, 03:29 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>

apitos · 21-01-2009, 05:40 PM

أخي soma.

شكرا على المثال.

ولكن اردت البحث عن كلاس tooltips في ملف jquery-1.3.min.js لم أجدها !!!!

كيف ذلك ؟

soma · 21-01-2009, 06:03 PM

tooltips هو عبارة عن CSS Class لتنسيق عبارة الـ Span موجود داخل الوسم Style .

apitos · 21-01-2009, 08:13 PM

آه نعم .. عذرا لم أره.

ولكن هناك مشكلة :

فحتى الأزرار و checkbox و radio button سوف يحدث معها نفس الحدث لأنها كلها input !!!

ولن يحدث هذا الأمر في textarea.

فما الحل ؟

شكراً.

soma · 21-01-2009, 10:25 PM

بالنسبة لو لديك textarea عدل الكود في الجزئيتين

كود:

$("textarea,input").focus(function () {
         $(this).next("span").addClass('tooltips');
    });
    
	$("textarea,input").blur(function () {
         $(this).next("span").removeClass('tooltips')
    });

apitos · 22-01-2009, 04:16 AM

شكرا لك أخي soma.

apitos · 25-01-2009, 08:29 PM

لكي لا أعمم نوافذ الـ hint على جميع وسوم span الموجودة في ملف الـ HTML

قمت باضافة السطر التالي في ملف الـ CSS :

كود:

form1 span#

مع تسمية النموذج :

كود:

<form id="form1" name="form">

ولكن الـ hint لم يعمل معي !!؟

فجربت التالي :

كود:

span .hint

وفي ملف الـ html اضفت الى الـ span

كود:

<span class="hint">

وغيرت في سطر الـAJAX ليصبح كالتلي :

كود:

 
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
 
$("input, textarea, select").focus(function () {
$(this).next("span .hint").addClass('notice');
});
 
$("input, textarea, select").blur(function () {
$(this).next("span .hint").removeClass('notice')
});
});
</script>

ولكن الأمر كذلك لم يشتغل معي !!!؟

ما الأمر يا ترى ؟

شكراَ.

soma · 25-01-2009, 09:03 PM

ممكن تضع كودك كاملاً ....

apitos · 26-01-2009, 12:41 AM

ها هو :

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.3.min.js"></script>
<script>
  $(document).ready(function(){
    
    $("input, textarea, select").focus(function () {
         $(this).next("span .hint").addClass('tooltips');
    });
    
 $("input, textarea, select").blur(function () {
         $(this).next("span .hint").removeClass('tooltips')
    });

  });
  </script>
<style>
   span.hint {
    padding:5px 5px 5px 40px;
 width:120px;
 position:absolute;
 margin: 2px 0 0 14px;
    display:none;
 }
   
   .tooltips{ 
     display:inline;
  background-color:gray;
   }   
  </style>
</head>
<body>
<p>User Name<br>
  <input type="text" />
  <span class="hint">Enter User Name</span></p>
<p>Password<br>
  <input type="password" />
  <span class="hint">Enter Password</span></p>
</body>
</html>

soma · 26-01-2009, 11:42 PM

كود:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script>
  $(document).ready(function(){
    
    $("input, textarea,select").focus(function () {
         $(this).next("span .hint").addClass('tooltips');
    });
    
 $("input, textarea,select").blur(function () {
         $(this).next("span .hint").removeClass('tooltips')
    });

  });
  </script>
<style>
   .hint {
    padding:5px 5px 5px 40px;
 width:120px;
 position:absolute;
 margin: 2px 0 0 14px;
    display:none;
 }
   
   .tooltips{ 
     display:inline;
  background-color:gray;
   }   
  </style>
</head>
<body>
<p>User Name<br>
  <input type="text" />
  <span class="hint">Enter User Name</span></p>
<p>Password<br>
  <input type="password" />
  <span class="hint">Enter Password</span></p>
</body>
</html>

apitos · 27-01-2009, 12:10 AM

أخي soma،

أين الفرف بين الكودين ؟